@furystack/shades 12.1.0 → 12.2.1

package/src/services/resource-manager.ts

@@ -7,22 +7,44 @@ import { ObservableValue, isAsyncDisposable, isDisposable } from '@furystack/uti
  */
 export class ResourceManager implements AsyncDisposable {
   private readonly disposables = new Map<string, Disposable | AsyncDisposable>()
+  private readonly disposableDeps = new Map<string, string>()
 
   /**
    * Returns an existing disposable resource by key, or creates and caches a new one.
    * Resources are automatically disposed when the component is removed from the DOM.
+   * When `deps` is provided, the resource is re-created (and the old one disposed) whenever
+   * the serialized deps value changes. This is useful for resources that depend on dynamic
+   * parameters (e.g., entity-sync subscriptions with changing query options).
    * @param key Unique key for caching this resource
    * @param factory Factory function called once to create the resource
+   * @param deps Optional dependency array -- when deps change, the old resource is disposed and a new one is created.
+   *   Values are compared via `JSON.stringify`, so `undefined` and `null` are treated as equal within arrays.
    * @returns The cached or newly created resource
    */
-  public useDisposable<T extends Disposable | AsyncDisposable>(key: string, factory: () => T): T {
+  public useDisposable<T extends Disposable | AsyncDisposable>(
+    key: string,
+    factory: () => T,
+    deps?: readonly unknown[],
+  ): T {
     const existing = this.disposables.get(key)
-    if (!existing) {
-      const created = factory()
-      this.disposables.set(key, created)
-      return created
+    const depsKey = deps !== undefined ? JSON.stringify(deps) : undefined
+
+    if (existing) {
+      if (depsKey !== undefined && this.disposableDeps.get(key) !== depsKey) {
+        if (isDisposable(existing)) existing[Symbol.dispose]()
+        if (isAsyncDisposable(existing)) void existing[Symbol.asyncDispose]()
+        const created = factory()
+        this.disposables.set(key, created)
+        this.disposableDeps.set(key, depsKey)
+        return created
+      }
+      return existing as T
     }
-    return existing as T
+
+    const created = factory()
+    this.disposables.set(key, created)
+    if (depsKey !== undefined) this.disposableDeps.set(key, depsKey)
+    return created
   }
 
   public readonly observers = new Map<string, ValueObserver<any>>()
@@ -108,6 +130,7 @@ export class ResourceManager implements AsyncDisposable {
     }
 
     this.disposables.clear()
+    this.disposableDeps.clear()
     this.observers.forEach((r) => r[Symbol.dispose]())
     this.observers.clear()
 

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
     }