@furystack/shades 12.2.0 → 12.2.1

package/src/components/lazy-load.spec.tsx

@@ -64,7 +64,7 @@ describe('Lazy Load', () => {
       })
       await flushUpdates()
       expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
-      await sleepAsync(1)
+      await flushUpdates()
       expect(load).toBeCalledTimes(1)
       expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
       document.getElementById('retry')?.click()
@@ -102,12 +102,12 @@ describe('Lazy Load', () => {
       })
       await flushUpdates()
       expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
-      await sleepAsync(1)
+      await flushUpdates()
       expect(load).toBeCalledTimes(1)
       expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
       document.getElementById('retry')?.click()
       expect(load).toBeCalledTimes(2)
-      await sleepAsync(1)
+      await flushUpdates()
       expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>success</div></lazy-load></div>')
     })
   })

package/src/components/nested-router.spec.tsx

@@ -3,6 +3,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 { flushUpdates } from '../shade.js'
 import {
   buildMatchChain,
   findDivergenceIndex,
@@ -366,7 +367,7 @@ describe('NestedRouter lifecycle hooks', () => {
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
       // --- Initial load at /parent/child-a ---
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('child-a')
       expect(onVisitParent).toBeCalledTimes(1)
       expect(onVisitChildA).toBeCalledTimes(1)
@@ -375,7 +376,7 @@ describe('NestedRouter lifecycle hooks', () => {
       // --- Click same route: no lifecycle hooks should fire ---
       callOrder.length = 0
       clickOn('child-a')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(onVisitParent).toBeCalledTimes(1)
       expect(onVisitChildA).toBeCalledTimes(1)
       expect(callOrder).toEqual([])
@@ -383,7 +384,7 @@ describe('NestedRouter lifecycle hooks', () => {
       // --- Switch child: only child lifecycle fires, parent stays ---
       callOrder.length = 0
       clickOn('child-b')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('child-b')
       expect(onLeaveChildA).toBeCalledTimes(1)
       expect(onVisitChildB).toBeCalledTimes(1)
@@ -394,7 +395,8 @@ describe('NestedRouter lifecycle hooks', () => {
       // --- Navigate to a completely different branch ---
       callOrder.length = 0
       clickOn('other')
-      await sleepAsync(100)
+      await flushUpdates()
+      await flushUpdates()
       expect(getContent()).toBe('other')
       expect(onLeaveChildB).toBeCalledTimes(1)
       expect(onLeaveParent).toBeCalledTimes(1)
@@ -405,7 +407,7 @@ describe('NestedRouter lifecycle hooks', () => {
       // --- Navigate to non-matching URL: onLeave for all active ---
       callOrder.length = 0
       clickOn('nowhere')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('not found')
       expect(onLeaveOther).toBeCalledTimes(1)
       expect(callOrder).toEqual(['leave-other'])
@@ -490,7 +492,7 @@ describe('NestedRouter latest-wins on rapid navigation', () => {
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
       // --- Initial load at /route-a ---
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('route-a')
       expect(onVisitA).toHaveBeenCalledTimes(1)
 
@@ -500,7 +502,7 @@ describe('NestedRouter latest-wins on rapid navigation', () => {
       // Don't await — immediately navigate again
       clickOn('go-c')
 
-      // Wait long enough for both transitions to settle
+      // Wait long enough for both transitions to settle (onVisitB has 200ms delay)
       await sleepAsync(500)
 
       // The final destination should be route-c
@@ -582,7 +584,7 @@ describe('NestedRouter lifecycle element scope', () => {
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
       // --- Initial load at /parent/child-a ---
-      await sleepAsync(100)
+      await flushUpdates()
       expect(visitElements).toHaveLength(2)
       // Parent's onVisit element should be the full tree (parent wrapping child)
       expect(visitElements[0].route).toBe('parent')
@@ -595,7 +597,7 @@ describe('NestedRouter lifecycle element scope', () => {
       visitElements.length = 0
       leaveElements.length = 0
       clickOn('child-b')
-      await sleepAsync(100)
+      await flushUpdates()
 
       // onLeave should receive the child-a element, not the full wrapper
       expect(leaveElements).toHaveLength(1)
@@ -653,19 +655,19 @@ describe('NestedRouter flat routes', () => {
       const getContent = () => document.getElementById('content')?.innerHTML
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('home-page')
 
       clickOn('about')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('about-page')
 
       clickOn('contact')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('contact-page')
 
       clickOn('home')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('home-page')
     })
   })
@@ -712,7 +714,7 @@ describe('NestedRouter outlet composition', () => {
         ),
       })
 
-      await sleepAsync(100)
+      await flushUpdates()
 
       // Parent layout should be rendered with child inside
       expect(document.getElementById('header')?.innerHTML).toBe('Dashboard Header')
@@ -753,7 +755,7 @@ describe('NestedRouter outlet composition', () => {
         ),
       })
 
-      await sleepAsync(100)
+      await flushUpdates()
 
       // Parent matched alone, outlet is undefined, so the fallback renders
       expect(document.getElementById('child')?.innerHTML).toBe('dashboard-index')
@@ -814,7 +816,7 @@ describe('NestedRouter route param changes', () => {
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
       // Initial load at /users/1
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('user-1')
       expect(onVisitUser).toHaveBeenCalledTimes(1)
       expect(callOrder).toEqual(['visit-user'])
@@ -822,7 +824,7 @@ describe('NestedRouter route param changes', () => {
       // Navigate to /users/2 — same route, different param → lifecycle should fire
       callOrder.length = 0
       clickOn('user-2')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('user-2')
       expect(onLeaveUser).toHaveBeenCalledTimes(1)
       expect(onVisitUser).toHaveBeenCalledTimes(2)
@@ -831,7 +833,7 @@ describe('NestedRouter route param changes', () => {
       // Navigate to /users/3
       callOrder.length = 0
       clickOn('user-3')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('user-3')
       expect(onLeaveUser).toHaveBeenCalledTimes(2)
       expect(onVisitUser).toHaveBeenCalledTimes(3)
@@ -840,7 +842,7 @@ describe('NestedRouter route param changes', () => {
       // Click same user — no lifecycle change
       callOrder.length = 0
       clickOn('user-3')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('user-3')
       expect(onLeaveUser).toHaveBeenCalledTimes(2)
       expect(onVisitUser).toHaveBeenCalledTimes(3)
@@ -897,7 +899,7 @@ describe('NestedRouter route param changes', () => {
 
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
-      await sleepAsync(100)
+      await flushUpdates()
       expect(document.getElementById('org')?.textContent).toContain('org-alpha')
       expect(document.getElementById('child')?.innerHTML).toBe('dashboard')
       expect(onVisitOrg).toHaveBeenCalledTimes(1)
@@ -906,7 +908,8 @@ describe('NestedRouter route param changes', () => {
       // Change parent param: org/alpha → org/beta, child stays /dashboard
       // Both parent and child should get leave/visit since parent diverges
       clickOn('beta-dash')
-      await sleepAsync(100)
+      await flushUpdates()
+      await flushUpdates()
       expect(document.getElementById('org')?.textContent).toContain('org-beta')
       expect(document.getElementById('child')?.innerHTML).toBe('dashboard')
       expect(onLeaveOrg).toHaveBeenCalledTimes(1)

package/src/components/router.spec.tsx

@@ -4,6 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from '../initialize.js'
 import { LocationService } from '../services/location-service.js'
 import { createComponent } from '../shade-component.js'
+import { flushUpdates } from '../shade.js'
 import { RouteLink } from './route-link.js'
 import { Router, type Route } from './router.js'
 
@@ -81,7 +82,7 @@ describe('Router', () => {
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
       // --- Initial load at /route-a ---
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('route-a')
       expect(onVisitA).toHaveBeenCalledTimes(1)
 
@@ -90,7 +91,7 @@ describe('Router', () => {
       clickOn('go-b')
       clickOn('go-c')
 
-      // Wait long enough for both transitions to settle
+      // Wait long enough for both transitions to settle (onVisitB has 200ms delay)
       await sleepAsync(500)
 
       // The final destination should be route-c
@@ -169,7 +170,7 @@ describe('Router', () => {
 
       const clickOn = (name: string) => document.getElementById(name)?.click()
 
-      await sleepAsync(100)
+      await flushUpdates()
 
       expect(getLocation()).toBe('/')
       expect(getContent()).toBe('home')
@@ -177,37 +178,37 @@ describe('Router', () => {
       expect(onVisit).not.toBeCalled()
 
       clickOn('a')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('route-a')
       expect(getLocation()).toBe('/route-a')
       expect(onRouteChange).toBeCalledTimes(1)
       expect(onVisit).toBeCalledTimes(1)
 
       clickOn('a')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(onVisit).toBeCalledTimes(1)
       expect(onLeave).not.toBeCalled()
 
       clickOn('b')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(onLeave).toBeCalledTimes(1)
 
       expect(getContent()).toBe('route-b')
       expect(getLocation()).toBe('/route-b')
 
       clickOn('b-with-id')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('route-b123')
       expect(getLocation()).toBe('/route-b/123')
 
       clickOn('c')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('route-c')
       expect(getLocation()).toBe('/route-c')
 
       expect(onLastLeave).not.toBeCalled()
       clickOn('x')
-      await sleepAsync(100)
+      await flushUpdates()
       expect(getContent()).toBe('not found')
       expect(getLocation()).toBe('/route-x')
       expect(onLastLeave).toBeCalledTimes(1)

package/src/shade.spec.tsx

@@ -3,7 +3,7 @@ import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } 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('Shade edge cases', () => {
   beforeEach(() => {
@@ -86,7 +86,7 @@ describe('Shade edge cases', () => {
             ),
           })
 
-          await sleepAsync(10)
+          await flushUpdates()
 
           // Parent should use root injector (inherited from parent)
           expect(parentCapturedInjector).toBe(rootInjector)
@@ -129,7 +129,7 @@ describe('Shade edge cases', () => {
           jsxElement: <ExampleComponent />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.getElementById('value')?.textContent).toBe('initial')
 
         // Simulate cross-tab message via BroadcastChannel
@@ -173,7 +173,7 @@ describe('Shade edge cases', () => {
           jsxElement: <ExampleComponent />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.getElementById('value')?.textContent).toBe('initial')
 
         // Simulate cross-tab message with different key
@@ -218,7 +218,7 @@ describe('Shade edge cases', () => {
           jsxElement: <ExampleComponent />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         expect(document.getElementById('value')?.textContent).toBe('initial')
 
         // Remove the component from DOM

package/src/shade.ts

@@ -111,7 +111,7 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
         private _refs = new Map<string, RefObject<Element>>()
 
         public connectedCallback() {
-          this.updateComponent()
+          this._performUpdate()
         }
 
         public async disconnectedCallback() {
@@ -249,12 +249,23 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
           if (!this._updateScheduled) {
             this._updateScheduled = true
             queueMicrotask(() => {
+              if (!this._updateScheduled) return
               this._updateScheduled = false
               this._performUpdate()
             })
           }
         }
 
+        /**
+         * Performs a synchronous component update, canceling any pending async update.
+         * Used during parent-to-child reconciliation so the entire subtree settles
+         * in a single call frame rather than cascading across microtask ticks.
+         */
+        public updateComponentSync() {
+          this._updateScheduled = false
+          this._performUpdate()
+        }
+
         private _performUpdate() {
           this._pendingHostProps = []
           let renderResult: unknown
@@ -265,11 +276,14 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
             setRenderMode(false)
           }
 
+          // Apply host props before patching children so that child components
+          // rendered synchronously can discover parent state (e.g. injector)
+          // via getInjectorFromParent().
+          this._applyHostProps()
+
           const newVTree = toVChildArray(renderResult)
           patchChildren(this, this._prevVTree || [], newVTree)
           this._prevVTree = newVTree
-
-          this._applyHostProps()
         }
 
         /**
@@ -441,8 +455,8 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
  * Flushes any pending microtask-based component updates.
  * Useful in tests to wait for batched renders to complete before asserting DOM state.
  *
- * Note: this flushes one level of pending updates. If a render itself triggers new
- * `updateComponent()` calls, an additional `await flushUpdates()` may be needed.
+ * Child component updates during reconciliation are performed synchronously, so a single
+ * `await flushUpdates()` is sufficient to settle the entire component tree after a state change.
  * @returns a promise that resolves after the current microtask queue has been processed
  */
 export const flushUpdates = (): Promise<void> => new Promise<void>((resolve) => queueMicrotask(resolve))

package/src/shades.integration.spec.tsx

@@ -323,11 +323,11 @@ describe('Shades integration tests', () => {
       }
       const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
 
-      await sleepAsync(100)
+      await flushUpdates()
 
       expectCount(0)
 
-      await sleepAsync(100)
+      await flushUpdates()
       await plus()
       expectCount(1)
       expect(store.getItem('count')).toBe('1')
@@ -383,7 +383,7 @@ describe('Shades integration tests', () => {
 
       expectCount(0)
 
-      await sleepAsync(100)
+      await flushUpdates()
       await plus()
       expectCount(1)
       expect(location.search).toBe(`?${serializeToQueryString({ count: 1 })}`)
@@ -520,7 +520,6 @@ describe('Shades integration tests', () => {
         jsxElement: <ParentComponent />,
       })
 
-      await flushUpdates()
       await flushUpdates()
 
       const innerInput = document.querySelector('[data-testid="inner-input"]') as HTMLInputElement
@@ -531,9 +530,6 @@ describe('Shades integration tests', () => {
       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

package/src/vnode.integration.spec.tsx

@@ -637,7 +637,6 @@ describe('VNode reconciliation integration tests', () => {
           jsxElement: <ParentComponent />,
         })
         await flushUpdates()
-        await flushUpdates()
 
         expect(document.getElementById('child-value')?.textContent).toBe('0')
         const childElement = document.querySelector('morph-child-component')
@@ -645,7 +644,6 @@ describe('VNode reconciliation integration tests', () => {
         // Trigger parent re-render
         document.getElementById('parent-increment')?.click()
         await flushUpdates()
-        await flushUpdates()
 
         // Child should be the same DOM element (not recreated)
         expect(document.querySelector('morph-child-component')).toBe(childElement)

package/src/vnode.spec.ts

@@ -532,19 +532,18 @@ describe('vnode', () => {
     })
 
     describe('Shade component boundaries', () => {
-      it('should call updateComponent on child Shade when props change', () => {
+      it('should call updateComponentSync on child Shade when props change', () => {
         const parent = document.createElement('div')
 
         const fakeShadeEl = document.createElement('my-shade') as unknown as JSX.Element
         const updateFn = vi.fn()
-        ;(fakeShadeEl as unknown as Record<string, unknown>).updateComponent = updateFn
+        ;(fakeShadeEl as unknown as Record<string, unknown>).updateComponentSync = updateFn
         ;(fakeShadeEl as unknown as Record<string, unknown>).props = { count: 1 }
         ;(fakeShadeEl as unknown as Record<string, unknown>).shadeChildren = undefined
 
         const factory = vi.fn(() => fakeShadeEl as unknown as JSX.Element)
 
         const old: VChild[] = [{ _brand: 'vnode', type: factory, props: { count: 1 }, children: [], _el: fakeShadeEl }]
-        // Simulate initial mount by manually appending
         parent.appendChild(fakeShadeEl)
 
         const updated: VChild[] = [{ _brand: 'vnode', type: factory, props: { count: 2 }, children: [] }]
@@ -554,13 +553,13 @@ describe('vnode', () => {
         expect(fakeShadeEl.props).toEqual({ count: 2 })
       })
 
-      it('should NOT call updateComponent when props are unchanged', () => {
+      it('should NOT call updateComponentSync when props are unchanged', () => {
         const parent = document.createElement('div')
 
         const fakeShadeEl = document.createElement('my-shade-2') as unknown as JSX.Element
         const updateFn = vi.fn()
         const props = { count: 1 }
-        ;(fakeShadeEl as unknown as Record<string, unknown>).updateComponent = updateFn
+        ;(fakeShadeEl as unknown as Record<string, unknown>).updateComponentSync = updateFn
         ;(fakeShadeEl as unknown as Record<string, unknown>).props = props
         ;(fakeShadeEl as unknown as Record<string, unknown>).shadeChildren = undefined
 

package/src/vnode.ts

@@ -446,7 +446,7 @@ const patchChild = (_parentEl: Node, oldChild: VChild, newChild: VChild): void =
           patchProps(el, oldChild.props, newChild.props)
         }
         el.shadeChildren = newChild.children as unknown as ChildrenList
-        el.updateComponent()
+        ;(el as unknown as { updateComponentSync: () => void }).updateComponentSync()
       }
       return
     }