@furystack/shades 11.1.0 → 12.0.1

package/src/shades.integration.spec.tsx

@@ -4,7 +4,7 @@ import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from './initialize.js'
 import { createComponent } from './shade-component.js'
-import { Shade } from './shade.js'
+import { flushUpdates, Shade } from './shade.js'
 
 describe('Shades integration tests', () => {
   beforeEach(() => {
@@ -14,34 +14,38 @@ describe('Shades integration tests', () => {
     document.body.innerHTML = ''
   })
 
-  it('Should mount a custom component to a Shade root', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+  it('Should mount a custom component to a Shade root', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    const ExampleComponent = Shade({ render: () => <div>Hello</div>, shadowDomName: 'shades-example' })
+      const ExampleComponent = Shade({ render: () => <div>Hello</div>, shadowDomName: 'shades-example' })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe('<div id="root"><shades-example><div>Hello</div></shades-example></div>')
     })
-    expect(document.body.innerHTML).toBe('<div id="root"><shades-example><div>Hello</div></shades-example></div>')
   })
 
-  it('Should mount a custom component with a string render result', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+  it('Should mount a custom component with a string render result', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    const ExampleComponent = Shade({ render: () => 'Hello', shadowDomName: 'shades-string-render-result' })
+      const ExampleComponent = Shade({ render: () => 'Hello', shadowDomName: 'shades-string-render-result' })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      await flushUpdates()
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><shades-string-render-result>Hello</shades-string-render-result></div>',
+      )
     })
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><shades-string-render-result>Hello</shades-string-render-result></div>',
-    )
   })
 
   it('Should mount a custom component with null render result', async () => {
@@ -55,6 +59,7 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
+      await flushUpdates()
       expect(document.body.innerHTML).toBe(
         '<div id="root"><shades-null-render-result></shades-null-render-result></div>',
       )
@@ -80,6 +85,7 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
+      await flushUpdates()
       expect(document.body.innerHTML).toBe(
         '<div id="root"><shades-fragment-render-result><p>1</p><p>2</p></shades-fragment-render-result></div>',
       )
@@ -107,6 +113,7 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
+      await flushUpdates()
       expect(document.body.innerHTML).toBe(
         '<div id="root"><shades-fragment-render-result-nested><p><p>1</p><p>2</p></p></shades-fragment-render-result-nested></div>',
       )
@@ -137,6 +144,7 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
+      await flushUpdates()
       expect(document.body.innerHTML).toBe(
         '<div id="root"><shades-fragment-render-result-2><shades-fragment-test-custom-component><p>Hello</p></shades-fragment-test-custom-component><shades-fragment-test-custom-component><p>Hello</p></shades-fragment-test-custom-component></shades-fragment-render-result-2></div>',
       )
@@ -168,22 +176,28 @@ describe('Shades integration tests', () => {
           </ExampleComponent>
         ),
       })
+      await flushUpdates()
       expect(document.body.innerHTML).toBe(
         '<div id="root"><shades-example-2><div><shades-example-sub><div>1</div></shades-example-sub><shades-example-sub><div>2</div></shades-example-sub><shades-example-sub><div>3</div></shades-example-sub></div></shades-example-2></div>',
       )
     })
   })
 
-  it("Should execute the constructed and constructed's cleanup callback", async () => {
+  it('Should execute useDisposable cleanup on component disconnection', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const cleanup = vi.fn()
-      const constructed = vi.fn(() => cleanup)
+      const setup = vi.fn()
 
       const ExampleComponent = Shade({
-        constructed,
         shadowDomName: 'example-component-1',
-        render: () => <div>Hello</div>,
+        render: ({ useDisposable }) => {
+          useDisposable('test', () => {
+            setup()
+            return { [Symbol.dispose]: cleanup }
+          })
+          return <div>Hello</div>
+        },
       })
 
       initializeShadeRoot({
@@ -191,7 +205,8 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
-      expect(constructed).toBeCalled()
+      await flushUpdates()
+      expect(setup).toBeCalled()
       expect(cleanup).not.toBeCalled()
       document.body.innerHTML = ''
       await sleepAsync(10) // Dispose can be async
@@ -199,31 +214,6 @@ describe('Shades integration tests', () => {
     })
   })
 
-  it('Should execute the onAttach and onDetach callbacks', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-      const onAttach = vi.fn()
-      const onDetach = vi.fn()
-
-      const ExampleComponent = Shade({
-        onAttach,
-        onDetach,
-        shadowDomName: 'example-component-2',
-        render: () => <div>Hello</div>,
-      })
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <ExampleComponent />,
-      })
-      expect(onAttach).toBeCalled()
-      expect(onDetach).not.toBeCalled()
-      document.body.innerHTML = ''
-      expect(onDetach).toBeCalled()
-    })
-  })
-
   it('Should update state', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
@@ -250,19 +240,26 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
-
-      const plus = () => document.getElementById('plus')?.click()
-      const minus = () => document.getElementById('minus')?.click()
+      await flushUpdates()
+
+      const plus = async () => {
+        document.getElementById('plus')?.click()
+        await flushUpdates()
+      }
+      const minus = async () => {
+        document.getElementById('minus')?.click()
+        await flushUpdates()
+      }
       const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
 
       expectCount(0)
-      plus()
+      await plus()
       expectCount(1)
-      plus()
+      await plus()
       expectCount(2)
 
-      minus()
-      minus()
+      await minus()
+      await minus()
       expectCount(0)
     })
   })
@@ -314,9 +311,16 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
-
-      const plus = () => document.getElementById('plus')?.click()
-      const minus = () => document.getElementById('minus')?.click()
+      await flushUpdates()
+
+      const plus = async () => {
+        document.getElementById('plus')?.click()
+        await flushUpdates()
+      }
+      const minus = async () => {
+        document.getElementById('minus')?.click()
+        await flushUpdates()
+      }
       const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
 
       await sleepAsync(100)
@@ -324,16 +328,16 @@ describe('Shades integration tests', () => {
       expectCount(0)
 
       await sleepAsync(100)
-      plus()
+      await plus()
       expectCount(1)
       expect(store.getItem('count')).toBe('1')
 
-      plus()
+      await plus()
       expectCount(2)
       expect(store.getItem('count')).toBe('2')
 
-      minus()
-      minus()
+      await minus()
+      await minus()
       expectCount(0)
       expect(store.getItem('count')).toBe('0')
     })
@@ -365,24 +369,31 @@ describe('Shades integration tests', () => {
         rootElement,
         jsxElement: <ExampleComponent />,
       })
-
-      const plus = () => document.getElementById('plus')?.click()
-      const minus = () => document.getElementById('minus')?.click()
+      await flushUpdates()
+
+      const plus = async () => {
+        document.getElementById('plus')?.click()
+        await flushUpdates()
+      }
+      const minus = async () => {
+        document.getElementById('minus')?.click()
+        await flushUpdates()
+      }
       const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
 
       expectCount(0)
 
       await sleepAsync(100)
-      plus()
+      await plus()
       expectCount(1)
       expect(location.search).toBe(`?${serializeToQueryString({ count: 1 })}`)
 
-      plus()
+      await plus()
       expectCount(2)
       expect(location.search).toBe(`?${serializeToQueryString({ count: 2 })}`)
 
-      minus()
-      minus()
+      await minus()
+      await minus()
       expectCount(0)
       expect(location.search).toBe(`?${serializeToQueryString({ count: 0 })}`)
     })
@@ -439,31 +450,94 @@ describe('Shades integration tests', () => {
           </Parent>
         ),
       })
+      await flushUpdates()
 
-      const plus = () => document.getElementById('plus')?.click()
-      const minus = () => document.getElementById('minus')?.click()
+      const plus = async () => {
+        document.getElementById('plus')?.click()
+        await flushUpdates()
+      }
+      const minus = async () => {
+        document.getElementById('minus')?.click()
+        await flushUpdates()
+      }
 
       const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
-      const toggleChildren = () => document.getElementById('showHideChildren')?.click()
+      const toggleChildren = async () => {
+        document.getElementById('showHideChildren')?.click()
+        await flushUpdates()
+      }
 
       expectCount(0)
-      plus()
+      await plus()
       expectCount(1)
 
-      toggleChildren()
+      await toggleChildren()
 
       expect(document.getElementById('plus')).toBeNull()
 
       await sleepAsync(10) // Dispose can be async
 
-      toggleChildren()
+      await toggleChildren()
       expect(document.getElementById('plus')).toBeDefined()
 
       expectCount(0)
-      plus()
+      await plus()
       expectCount(1)
-      minus()
+      await minus()
       expectCount(0)
     })
   })
+
+  it('Should propagate changed props from parent to child Shade component', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const ChildComponent = Shade<{ isDisabled: boolean }>({
+        shadowDomName: 'shade-prop-child',
+        render: ({ props }) => {
+          return <input type="checkbox" disabled={props.isDisabled} data-testid="inner-input" />
+        },
+      })
+
+      const ParentComponent = Shade({
+        shadowDomName: 'shade-prop-parent',
+        render: ({ useState }) => {
+          const [isDisabled, setIsDisabled] = useState('isDisabled', false)
+          return (
+            <div>
+              <button id="toggle-disabled" onclick={() => setIsDisabled(!isDisabled)}>
+                Toggle
+              </button>
+              <ChildComponent isDisabled={isDisabled} />
+            </div>
+          )
+        },
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ParentComponent />,
+      })
+
+      await flushUpdates()
+      await flushUpdates()
+
+      const innerInput = document.querySelector('[data-testid="inner-input"]') as HTMLInputElement
+      expect(innerInput).toBeTruthy()
+      expect(innerInput.disabled).toBe(false)
+
+      // Click the toggle button
+      const toggleBtn = document.getElementById('toggle-disabled') as HTMLButtonElement
+      toggleBtn.click()
+
+      // Wait for parent re-render + child re-render (two microtask levels)
+      await flushUpdates()
+      await flushUpdates()
+      await flushUpdates()
+
+      const updatedInput = document.querySelector('[data-testid="inner-input"]') as HTMLInputElement
+      expect(updatedInput.disabled).toBe(true)
+    })
+  })
 })

package/src/style-manager.ts

@@ -25,9 +25,9 @@ class StyleManagerClass {
 
   /**
    * Registers CSS styles for a component.
-   * Styles are only injected once per component (based on shadowDomName).
+   * Styles are only injected once per component (based on the custom element name).
    *
-   * @param shadowDomName - The unique component identifier (used as CSS selector)
+   * @param shadowDomName - The custom element tag name (used as CSS selector)
    * @param cssObject - The CSSObject containing styles and nested selectors
    * @param elementBaseName - Optional base element name for customized built-in elements (e.g., 'a', 'button').
    *                          When provided, generates selector like `a[is="component-name"]` instead of `component-name`