feat: Collection

Author: teleskop150750

packages/vue-primitives/src/collection/Collection.ts

@@ -1,4 +1,4 @@
-import { type ShallowReactive, type ShallowRef, shallowReactive, watchEffect } from 'vue'
+import { type ShallowReactive, type ShallowRef, onBeforeUnmount, onBeforeUpdate, onMounted, shallowReactive } from 'vue'
 import { createContext } from '../hooks/createContext.ts'
 
 export const ITEM_DATA_ATTR = 'data-radix-collection-item'
@@ -23,21 +23,52 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
   function useCollectionItem(currentElement: ShallowRef<ItemElement | undefined>, attrs: Record<string, unknown> = {}) {
     const { itemMap } = useCollectionContext()
 
-    watchEffect((onClean) => {
-      const unrefElement = currentElement.value
+    let unrefElement: ItemElement | undefined
+
+    onMounted(() => {
+      unrefElement = currentElement.value
       if (!unrefElement)
         return
 
       itemMap.set(unrefElement, {
         ref: unrefElement,
         attrs: attrs as ItemData,
       })
+    })
 
-      onClean(() => {
-        itemMap.delete(unrefElement)
+    onBeforeUpdate(() => {
+      if (!unrefElement)
+        return
+
+      itemMap.set(unrefElement, {
+        ref: unrefElement,
+        attrs: attrs as ItemData,
       })
     })
 
+    onBeforeUnmount(() => {
+      if (!unrefElement)
+        return
+
+      itemMap.delete(unrefElement)
+    })
+
+    // TODO: watch attrs -> onBeforeUpdate
+    // watch([currentElement, attrs], (_, __, onClean) => {
+    //   const unrefElement = currentElement.value
+    //   if (!unrefElement)
+    //     return
+
+    //   itemMap.set(unrefElement, {
+    //     ref: unrefElement,
+    //     attrs: attrs as ItemData,
+    //   })
+
+    //   onClean(() => {
+    //     itemMap.delete(unrefElement)
+    //   })
+    // })
+
     return {
       itemMap,
     }

packages/vue-primitives/src/collection/stories/Collection.stories.tsx

@@ -1,5 +1,4 @@
 import { defineComponent, shallowRef, watchEffect } from 'vue'
-import Toggle from '../../toggle/Toggle.vue'
 import { ITEM_DATA_ATTR, createCollection } from '../index.ts'
 
 interface ItemData { disabled: boolean }
@@ -20,6 +19,9 @@ const List = defineComponent({
 })
 
 const Item = defineComponent({
+  // props: {
+  //   disabled: { type: Boolean, default: false },
+  // },
   setup(_, { slots, attrs }) {
     const currentElement = shallowRef<HTMLElement>()
     Collection.useCollectionItem(currentElement, attrs)
@@ -33,11 +35,14 @@ const Item = defineComponent({
 })
 
 const LogItems = defineComponent({
-  setup() {
+  props: {
+    name: { type: String, default: 'items' },
+  },
+  setup(props) {
     const getItems = useCollection()
 
     watchEffect(() => {
-      console.warn('Items:', getItems())
+      console.warn(`${props.name}`, getItems())
     })
 
     return () => null
@@ -46,8 +51,6 @@ const LogItems = defineComponent({
 
 export default { title: 'Utilities/Collection' }
 
-export const Styled = () => <Toggle class="root">Toggle</Toggle>
-
 export function Basic() {
   return (
     <List>
@@ -60,3 +63,139 @@ export function Basic() {
     </List>
   )
 }
+
+export function WithElementInBetween() {
+  return (
+    <List>
+      <div style={{ fontVariant: 'small-caps' }}>Colors</div>
+      <Item>Red</Item>
+      <Item {...{ disabled: true }}>Green</Item>
+      <Item>Blue</Item>
+      <div style={{ fontVariant: 'small-caps' }}>Words</div>
+      <Item>Hello</Item>
+      <Item>World</Item>
+      <LogItems />
+    </List>
+  )
+}
+
+const Tomato = () => <Item style={{ color: 'tomato' }}>Tomato</Item>
+
+export function WithWrappedItem() {
+  return (
+    <List>
+      <Item>Red</Item>
+      <Item {...{ disabled: true }}>Green</Item>
+      <Item>Blue</Item>
+      <Tomato />
+      <LogItems />
+    </List>
+  )
+}
+
+export function WithFragment() {
+  const countries = (
+    <>
+      <Item>France</Item>
+      <Item {...{ disabled: true }}>UK</Item>
+      <Item>Spain</Item>
+    </>
+  )
+  return (
+    <List>
+      {countries}
+      <LogItems />
+    </List>
+  )
+}
+
+const DynamicInsertionDemo = defineComponent({
+  setup() {
+    const hasTomato = shallowRef(false)
+
+    function setHasTomato(value: boolean) {
+      hasTomato.value = value
+    }
+
+    function log() {
+      console.warn('Items:', Array.from(document.querySelectorAll(`[${ITEM_DATA_ATTR}]`)))
+    }
+
+    return () => (
+      <>
+        <button onClick={() => setHasTomato(!hasTomato.value)}>
+          {hasTomato ? 'Remove' : 'Add'}
+          {' '}
+          Tomato
+        </button>
+        <button onClick={() => log()} style={{ marginLeft: 10 }}>
+          Force Update
+        </button>
+
+        <List>
+          <Item>Red</Item>
+          { hasTomato.value && <Tomato />}
+          <Item {...{ disabled: true }}>
+            Green
+          </Item>
+          <Item>Blue</Item>
+          <LogItems />
+        </List>
+      </>
+    )
+  },
+})
+
+export function DynamicInsertion() {
+  return <DynamicInsertionDemo />
+}
+
+const WithChangingItemDemo = defineComponent({
+  setup() {
+    const isDisabled = shallowRef(false)
+
+    function setIsDisabled(value: boolean) {
+      isDisabled.value = value
+    }
+
+    return () => (
+      <>
+        <button onClick={() => setIsDisabled(!isDisabled.value)}>
+          {isDisabled ? 'Enable' : 'Disable'}
+          {' '}
+          Green
+        </button>
+
+        <List>
+          <Item>Red</Item>
+          <Item {...{ disabled: isDisabled.value }}>Green</Item>
+          <Item>Blue</Item>
+          <LogItems />
+        </List>
+      </>
+    )
+  },
+})
+
+export function WithChangingItem() {
+  return <WithChangingItemDemo />
+}
+
+export function Nested() {
+  return (
+    <List>
+      <Item>1</Item>
+      <Item>
+        2
+        <List>
+          <Item>2.1</Item>
+          <Item>2.2</Item>
+          <Item>2.3</Item>
+          <LogItems name="items inside 2" />
+        </List>
+      </Item>
+      <Item>3</Item>
+      <LogItems name="top-level items" />
+    </List>
+  )
+}