@furystack/shades 10.0.6 → 11.0.0

package/esm/styled-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled-element.d.ts","sourceRoot":"","sources":["../src/styled-element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAEjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;GAKG;AACH,eAAO,MAAM,aAAa,0DACf,QAAQ,UACT,QAAQ,mBAAmB,CAAC,KACnC,CAAC,CAAC,KAAK,EAAE,eAAe,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,WAAW,CAWtG,CAAA"}
+{"version":3,"file":"styled-element.d.ts","sourceRoot":"","sources":["../src/styled-element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAEjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,SAAS,MAAM,GAAG,CAAC,iBAAiB,WAC/D,QAAQ,UACT,OAAO,CAAC,mBAAmB,CAAC,KACnC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAWtG,CAAA"}

package/esm/styled-shade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled-shade.d.ts","sourceRoot":"","sources":["../src/styled-shade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;GAKG;AACH,eAAO,MAAM,WAAW,qBAAsB,GAAG,aAAa,YAAY,KAAK,WAAW,WAC/E,CAAC,UACF,QAAQ,mBAAmB,CAAC,MAYrC,CAAA"}
+{"version":3,"file":"styled-shade.d.ts","sourceRoot":"","sources":["../src/styled-shade.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAG7D;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,WAC/E,CAAC,UACF,OAAO,CAAC,mBAAmB,CAAC,KAgB9B,CACP,CAAA"}

package/esm/styled-shade.js

@@ -1,3 +1,4 @@
+import { hasStyle } from './shade-component.js';
 /**
  * Creates a shortcut for a specific custom Shade element with additional styles
  * @param element The element instance
@@ -6,13 +7,18 @@
  */
 export const styledShade = (element, styles) => {
     return ((props, childrenList) => {
-        const mergedProps = {
-            ...props,
-            style: {
-                ...(props?.style || {}),
-                ...styles,
-            },
-        };
+        const mergedProps = hasStyle(props)
+            ? {
+                ...props,
+                style: {
+                    ...props.style,
+                    ...styles,
+                },
+            }
+            : {
+                ...props,
+                style: styles,
+            };
         return element(mergedProps, childrenList);
     });
 };

package/esm/styled-shade.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-shade.js","sourceRoot":"","sources":["../src/styled-shade.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,OAAU,EACV,MAAoC,EACpC,EAAE;IACF,OAAO,CAAC,CAAC,KAAU,EAAE,YAA2B,EAAE,EAAE;QAClD,MAAM,WAAW,GAAG;YAClB,GAAG,KAAK;YACR,KAAK,EAAE;gBACL,GAAG,CAAE,KAAa,EAAE,KAAK,IAAI,EAAE,CAAC;gBAChC,GAAG,MAAM;aACV;SACF,CAAA;QACD,OAAO,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IAC3C,CAAC,CAAM,CAAA;AACT,CAAC,CAAA"}
+{"version":3,"file":"styled-shade.js","sourceRoot":"","sources":["../src/styled-shade.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,OAAU,EACV,MAAoC,EACpC,EAAE;IACF,OAAO,CAAC,CAAC,KAAU,EAAE,YAA2B,EAAE,EAAE;QAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC;YACjC,CAAC,CAAC;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE;oBACL,GAAG,KAAK,CAAC,KAAK;oBACd,GAAG,MAAM;iBACV;aACF;YACH,CAAC,CAAC;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,MAAM;aACd,CAAA;QACL,OAAO,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IAC3C,CAAC,CAAM,CAAA;AACT,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades",
-  "version": "10.0.6",
+  "version": "11.0.0",
   "description": "Google Authentication Provider for FuryStack",
   "type": "module",
   "scripts": {
@@ -38,16 +38,16 @@
   "homepage": "https://github.com/furystack/furystack",
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.10",
     "jsdom": "^24.1.0",
-    "typescript": "^5.4.5",
-    "vitest": "^1.6.0"
+    "typescript": "^5.5.3",
+    "vitest": "^2.0.0"
   },
   "dependencies": {
-    "@furystack/inject": "^11.0.3",
-    "@furystack/rest": "^7.0.5",
-    "@furystack/utils": "^7.0.2",
-    "path-to-regexp": "^6.2.2",
+    "@furystack/inject": "^12.0.0",
+    "@furystack/rest": "^8.0.0",
+    "@furystack/utils": "^8.0.0",
+    "path-to-regexp": "^7.0.0",
     "semaphore-async-await": "^1.5.1"
   },
   "gitHead": "76e1d17a71b981984935c9a7a5791cf61ebf5213"

package/src/compile-route.ts

@@ -0,0 +1,6 @@
+import { compile } from 'path-to-regexp'
+
+const stringifyObjectValues = (params: Record<string, any>) =>
+  Object.fromEntries(Object.entries(params).map(([key, value]) => [key, value?.toString()]))
+
+export const compileRoute = <T extends Object>(url: string, params: T) => compile(url)(stringifyObjectValues(params))

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

@@ -1,13 +1,13 @@
-import { TextEncoder, TextDecoder } from 'util'
+import { TextDecoder, TextEncoder } from 'util'
 
 global.TextEncoder = TextEncoder
-global.TextDecoder = TextDecoder as any
+global.TextDecoder = TextDecoder as typeof global.TextDecoder
 
 import { Injector } from '@furystack/inject'
 import { sleepAsync } from '@furystack/utils'
 import { LazyLoad } from './lazy-load.js'
 
-import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from '../initialize.js'
 import { createComponent } from '../shade-component.js'
 

package/src/components/link-to-route.tsx

@@ -1,8 +1,8 @@
-import { compile } from 'path-to-regexp'
-import type { Route } from './router.js'
-import { Shade } from '../shade.js'
+import { compileRoute } from '../compile-route.js'
 import type { ChildrenList } from '../models/children-list.js'
 import { createComponent } from '../shade-component.js'
+import { Shade } from '../shade.js'
+import type { Route } from './router.js'
 
 export type LinkToRouteProps<T extends {}> = {
   route: Route<T>
@@ -16,7 +16,7 @@ export const LinkToRoute: <T extends {}>(props: LinkToRouteProps<T>, children?:
   render: ({ props, element, children }) => {
     const { route, params } = props
 
-    const url = compile(route.url)(params)
+    const url = compileRoute(route.url, params)
     element.setAttribute('href', url)
     return <>{children}</>
   },

package/src/components/router.spec.tsx

@@ -60,7 +60,7 @@ describe('Router', () => {
           <Router
             routes={[
               { url: '/route-a', component: () => <div id="content">route-a</div>, onVisit, onLeave },
-              { url: '/route-b/:id?', component: ({ match }) => <div id="content">route-b{match.params.id}</div> },
+              { url: '/route-b{/:id}?', component: ({ match }) => <div id="content">route-b{match.params.id}</div> },
               {
                 url: '/route-c',
                 component: () => <div id="content">route-c</div>,

package/src/components/router.tsx

@@ -1,16 +1,16 @@
-import { Shade } from '../shade.js'
-import { createComponent } from '../shade-component.js'
-import { LocationService } from '../services/location-service.js'
-import type { MatchResult, TokensToRegexpOptions } from 'path-to-regexp'
+import { ObservableAlreadyDisposedError } from '@furystack/utils'
+import type { MatchOptions, MatchResult } from 'path-to-regexp'
 import { match } from 'path-to-regexp'
-import type { RenderOptions } from '../models/render-options.js'
 import { Lock } from 'semaphore-async-await'
-import { ObservableAlreadyDisposedError } from '@furystack/utils'
+import type { RenderOptions } from '../models/render-options.js'
+import { LocationService } from '../services/location-service.js'
+import { createComponent } from '../shade-component.js'
+import { Shade } from '../shade.js'
 
 export interface Route<TMatchResult extends object> {
   url: string
   component: (options: { currentUrl: string; match: MatchResult<TMatchResult> }) => JSX.Element
-  routingOptions?: TokensToRegexpOptions
+  routingOptions?: MatchOptions
   onVisit?: (options: RenderOptions<unknown>) => Promise<void>
   onLeave?: (options: RenderOptions<unknown>) => Promise<void>
 }

package/src/index.ts

@@ -1,9 +1,10 @@
+export * from './compile-route.js'
+export * from './components/index.js'
+export * from './initialize.js'
+export * from './models/index.js'
 export * from './services/index.js'
-import './jsx.js'
 export * from './shade-component.js'
 export * from './shade.js'
-export * from './models/index.js'
-export * from './components/index.js'
-export * from './initialize.js'
 export * from './styled-element.js'
 export * from './styled-shade.js'
+import './jsx.js'

package/src/models/render-options.ts

@@ -1,6 +1,6 @@
 import type { Injector } from '@furystack/inject'
+import type { ObservableValue, ValueObserverOptions } from '@furystack/utils'
 import type { ChildrenList } from './children-list.js'
-import type { Disposable, ObservableValue, ValueObserverOptions } from '@furystack/utils'
 import type { PartialElement } from './partial-element.js'
 
 export type RenderOptions<TProps, TElementBase extends HTMLElement = HTMLElement> = {
@@ -15,7 +15,7 @@ export type RenderOptions<TProps, TElementBase extends HTMLElement = HTMLElement
    * @param factory A factory method for creating the disposable resource
    * @returns The Disposable instance
    */
-  useDisposable: <T extends Disposable>(key: string, factory: () => T) => T
+  useDisposable: <T extends Disposable | AsyncDisposable>(key: string, factory: () => T) => T
 
   /**
    *

package/src/services/location-service.spec.ts

@@ -1,13 +1,13 @@
-import { TextEncoder, TextDecoder } from 'util'
+import { TextDecoder, TextEncoder } from 'util'
 
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder as any
 
 import { Injector } from '@furystack/inject'
-import { using } from '@furystack/utils'
 import { deserializeQueryString, serializeToQueryString, serializeValue } from '@furystack/rest'
+import { usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { LocationService, useCustomSearchStateSerializer } from './location-service.js'
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 
 describe('LocationService', () => {
   beforeEach(() => {
@@ -17,15 +17,15 @@ describe('LocationService', () => {
     document.body.innerHTML = ''
   })
 
-  it('Shuld be constructed', () => {
-    using(new Injector(), (i) => {
+  it('Shuld be constructed', async () => {
+    await usingAsync(new Injector(), async (i) => {
       const s = i.getInstance(LocationService)
       expect(s).toBeInstanceOf(LocationService)
     })
   })
 
-  it('Shuld update state on events', () => {
-    using(new Injector(), (i) => {
+  it('Shuld update state on events', async () => {
+    await usingAsync(new Injector(), async (i) => {
       const onLocaionChanged = vi.fn()
       const s = i.getInstance(LocationService)
       s.onLocationPathChanged.subscribe(onLocaionChanged)
@@ -44,8 +44,8 @@ describe('LocationService', () => {
   })
 
   describe('useSearchParam', () => {
-    it('Should create observables lazily', () => {
-      using(new Injector(), (i) => {
+    it('Should create observables lazily', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const service = i.getInstance(LocationService)
         const observables = service.searchParamObservables
 
@@ -64,16 +64,16 @@ describe('LocationService', () => {
       })
     })
 
-    it('Should return the default value, if not present in the query string', () => {
-      using(new Injector(), (i) => {
+    it('Should return the default value, if not present in the query string', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const service = i.getInstance(LocationService)
         const testSearchParam = service.useSearchParam('test', { value: 'foo' })
         expect(testSearchParam.getValue()).toEqual({ value: 'foo' })
       })
     })
 
-    it('Should return the value from the query string', () => {
-      using(new Injector(), (i) => {
+    it('Should return the value from the query string', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const service = i.getInstance(LocationService)
         history.pushState(null, '', `/loc1?test=${serializeValue(1)}`)
         const testSearchParam = service.useSearchParam('test', 123)
@@ -81,8 +81,8 @@ describe('LocationService', () => {
       })
     })
 
-    it('should update the observable value on push / replace states', () => {
-      using(new Injector(), (i) => {
+    it('should update the observable value on push / replace states', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const service = i.getInstance(LocationService)
         history.pushState(null, '', `/loc1?test=${serializeValue(1)}`)
         const testSearchParam = service.useSearchParam('test', 234)
@@ -92,8 +92,8 @@ describe('LocationService', () => {
       })
     })
 
-    it('Should update the URL based on search value change', () => {
-      using(new Injector(), (i) => {
+    it('Should update the URL based on search value change', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const service = i.getInstance(LocationService)
         history.pushState(null, '', `/loc1?test=${serializeValue('2')}`)
         const testSearchParam = service.useSearchParam('test', '')
@@ -102,10 +102,10 @@ describe('LocationService', () => {
       })
     })
 
-    it('Should throw an error when trying to use a custom serializer after LocationService has been instantiated', () => {
-      using(new Injector(), (i) => {
+    it('Should throw an error when trying to use a custom serializer after LocationService has been instantiated', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const customSerializer = vi.fn((value: any) => serializeToQueryString(value))
-        const customDeserializer = vi.fn((value: any) => deserializeQueryString(value))
+        const customDeserializer = vi.fn((value: string) => deserializeQueryString(value))
         i.getInstance(LocationService)
         expect(() => useCustomSearchStateSerializer(i, customSerializer, customDeserializer)).toThrowError(
           'useCustomSearchStateSerializer must be called before the LocationService is instantiated',
@@ -113,10 +113,10 @@ describe('LocationService', () => {
       })
     })
 
-    it('Should use custom serializer and deserializer', () => {
-      using(new Injector(), (i) => {
+    it('Should use custom serializer and deserializer', async () => {
+      await usingAsync(new Injector(), async (i) => {
         const customSerializer = vi.fn((value: any) => serializeToQueryString(value))
-        const customDeserializer = vi.fn((value: any) => deserializeQueryString(value))
+        const customDeserializer = vi.fn((value: string) => deserializeQueryString(value))
 
         useCustomSearchStateSerializer(i, customSerializer, customDeserializer)
 

package/src/services/location-service.tsx

@@ -1,10 +1,9 @@
-import type { Disposable } from '@furystack/utils'
-import { ObservableValue, Trace } from '@furystack/utils'
 import { Injectable, type Injector } from '@furystack/inject'
 import {
   deserializeQueryString as defaultDeserializeQueryString,
   serializeToQueryString as defaultSerializeToQueryString,
 } from '@furystack/rest'
+import { ObservableValue } from '@furystack/utils'
 @Injectable({ lifetime: 'singleton' })
 export class LocationService implements Disposable {
   constructor(
@@ -15,32 +14,34 @@ export class LocationService implements Disposable {
     window.addEventListener('popstate', this.popStateListener)
     window.addEventListener('hashchange', this.hashChangeListener)
 
-    this.pushStateTracer = Trace.method({
-      object: history,
-      method: history.pushState,
-      isAsync: false,
-      onFinished: () => this.updateState(),
-    })
-
-    this.replaceStateTracer = Trace.method({
-      object: history,
-      method: history.replaceState,
-      isAsync: false,
-      onFinished: () => this.updateState(),
-    })
-
     this.onDeserializedLocationSearchChanged = new ObservableValue(this.deserializeQueryString(location.search))
+
+    this.originalPushState = window.history.pushState.bind(window.history)
+    window.history.pushState = ((...args: Parameters<typeof window.history.pushState>) => {
+      this.originalPushState(...args)
+      this.updateState()
+    }).bind(this)
+
+    this.originalReplaceState = window.history.replaceState.bind(window.history)
+    window.history.replaceState = ((...args: Parameters<typeof window.history.replaceState>) => {
+      this.originalReplaceState(...args)
+      this.updateState()
+    }).bind(this)
   }
 
-  public dispose() {
+  private originalPushState: typeof window.history.pushState
+  private originalReplaceState: typeof window.history.replaceState
+
+  public [Symbol.dispose]() {
     window.removeEventListener('popstate', this.popStateListener)
     window.removeEventListener('hashchange', this.hashChangeListener)
-    this.pushStateTracer.dispose()
-    this.replaceStateTracer.dispose()
-    this.onLocationPathChanged.dispose()
-    this.onLocationSearchChanged.dispose()
-    this.onDeserializedLocationSearchChanged.dispose()
-    this.locationDeserializerObserver.dispose()
+    this.onLocationPathChanged[Symbol.dispose]()
+    this.onLocationSearchChanged[Symbol.dispose]()
+    this.onDeserializedLocationSearchChanged[Symbol.dispose]()
+    this.locationDeserializerObserver[Symbol.dispose]()
+
+    window.history.pushState = this.originalPushState
+    window.history.replaceState = this.originalReplaceState
   }
 
   /**
@@ -51,7 +52,7 @@ export class LocationService implements Disposable {
   /**
    * Observable value that will be updated when the location hash (e.g. #hash) changes
    */
-  public onLocationHashChanged = new ObservableValue(location.hash)
+  public onLocationHashChanged = new ObservableValue(location.hash.replace('#', ''))
 
   /**
    * Observable value that will be updated when the location search (e.g. ?search=1) changes
@@ -66,7 +67,7 @@ export class LocationService implements Disposable {
 
   public updateState = (() => {
     this.onLocationPathChanged.setValue(location.pathname)
-    this.onLocationHashChanged.setValue(location.hash)
+    this.onLocationHashChanged.setValue(location.hash.replace('#', ''))
     this.onLocationSearchChanged.setValue(location.search)
   }).bind(this)
 
@@ -102,23 +103,20 @@ export class LocationService implements Disposable {
 
       this.onDeserializedLocationSearchChanged.subscribe((search) => {
         const value = (search[key] as T) ?? defaultValue
-        this.searchParamObservables.get(key)?.setValue(value as T)
+        this.searchParamObservables.get(key)?.setValue(value)
       })
       return newObservable
     }
     return existing as ObservableValue<T>
   }
 
-  private pushStateTracer: Disposable
-  private replaceStateTracer: Disposable
-
   private popStateListener = (_ev: PopStateEvent) => {
     this.updateState()
   }
 
-  private hashChangeListener = (_ev: HashChangeEvent) => {
+  private hashChangeListener = ((_ev: HashChangeEvent) => {
     this.updateState()
-  }
+  }).bind(this)
 }
 
 export const useCustomSearchStateSerializer = (

package/src/services/resource-manager.spec.ts

@@ -1,9 +1,10 @@
-import { ObservableValue, using } from '@furystack/utils'
+import { ObservableValue, usingAsync } from '@furystack/utils'
+import { describe, expect, it, vi } from 'vitest'
 import { ResourceManager } from './resource-manager.js'
-import { describe, it, expect, vi } from 'vitest'
+
 describe('ResourceManager', () => {
-  it('Should return an observable from cache', () => {
-    using(new ResourceManager(), (rm) => {
+  it('Should return an observable from cache', async () => {
+    await usingAsync(new ResourceManager(), async (rm) => {
       const o = new ObservableValue(1)
       const [value1] = rm.useObservable('test', o, () => {
         /** ignore */
@@ -18,10 +19,10 @@ describe('ResourceManager', () => {
     })
   })
 
-  it('Should return a disposable from cache', () => {
-    using(new ResourceManager(), (rm) => {
+  it('Should return a disposable from cache', async () => {
+    await usingAsync(new ResourceManager(), async (rm) => {
       const factory = vi.fn(() => ({
-        dispose: () => {
+        [Symbol.dispose]: () => {
           /** ignore */
         },
       }))
@@ -32,4 +33,70 @@ describe('ResourceManager', () => {
       expect(factory).toHaveBeenCalledTimes(1)
     })
   })
+
+  it('Should dispose all disposables on dispose', async () => {
+    const disposable = {
+      [Symbol.dispose]: vi.fn(),
+    }
+    const factory = vi.fn(() => disposable)
+    await usingAsync(new ResourceManager(), async (rm) => {
+      rm.useDisposable('test', factory)
+      expect(factory).toHaveBeenCalledTimes(1)
+    })
+
+    expect(disposable[Symbol.dispose]).toHaveBeenCalledTimes(1)
+  })
+
+  it('Should dispose all async disposables on dispose', async () => {
+    const disposable = {
+      [Symbol.asyncDispose]: vi.fn(),
+    }
+    const factory = vi.fn(() => disposable)
+    await usingAsync(new ResourceManager(), async (rm) => {
+      rm.useDisposable('test', factory)
+      expect(factory).toHaveBeenCalledTimes(1)
+    })
+
+    expect(disposable[Symbol.asyncDispose]).toHaveBeenCalledTimes(1)
+  })
+
+  it('Should throw an aggregated error when failed to dispose something', async () => {
+    const disposable = {
+      [Symbol.dispose]: vi.fn(() => {
+        throw new Error('Failed to dispose')
+      }),
+    }
+    const factory = vi.fn(() => disposable)
+    await expect(
+      async () =>
+        await usingAsync(new ResourceManager(), async (rm) => {
+          rm.useDisposable('test', factory)
+          expect(factory).toHaveBeenCalledTimes(1)
+        }),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: There was an error during disposing 1 stores: Error: Failed to dispose]`,
+    )
+
+    expect(disposable[Symbol.dispose]).toHaveBeenCalledTimes(1)
+  })
+
+  it('Should throw an aggregated error when failed to async dispose something', async () => {
+    const disposable = {
+      [Symbol.asyncDispose]: vi.fn(async () => {
+        throw new Error('Failed to dispose')
+      }),
+    }
+    const factory = vi.fn(() => disposable)
+    await expect(
+      async () =>
+        await usingAsync(new ResourceManager(), async (rm) => {
+          rm.useDisposable('test', factory)
+          expect(factory).toHaveBeenCalledTimes(1)
+        }),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: There was an error during disposing 1 stores: Error: Failed to dispose]`,
+    )
+
+    expect(disposable[Symbol.asyncDispose]).toHaveBeenCalledTimes(1)
+  })
 })

package/src/services/resource-manager.ts

@@ -1,14 +1,14 @@
-import { ObservableValue } from '@furystack/utils'
-import type { Disposable, ValueChangeCallback, ValueObserverOptions } from '@furystack/utils'
-import type { ValueObserver } from '@furystack/utils'
+import { AggregatedError } from '@furystack/core'
+import type { ValueChangeCallback, ValueObserver, ValueObserverOptions } from '@furystack/utils'
+import { ObservableValue, isAsyncDisposable, isDisposable } from '@furystack/utils'
 
 /**
  * Class for managing observables and disposables for components, based on key-value maps
  */
-export class ResourceManager {
-  private readonly disposables = new Map<string, Disposable>()
+export class ResourceManager implements AsyncDisposable {
+  private readonly disposables = new Map<string, Disposable | AsyncDisposable>()
 
-  public useDisposable<T extends Disposable>(key: string, factory: () => T): T {
+  public useDisposable<T extends Disposable | AsyncDisposable>(key: string, factory: () => T): T {
     const existing = this.disposables.get(key)
     if (!existing) {
       const created = factory()
@@ -51,13 +51,32 @@ export class ResourceManager {
     return [observable.getValue(), observable.setValue.bind(observable)]
   }
 
-  public dispose() {
-    this.disposables.forEach((r) => r.dispose())
+  public async [Symbol.asyncDispose]() {
+    const disposeResult = await Promise.allSettled(
+      [...this.disposables].map(async ([_key, resource]) => {
+        if (isDisposable(resource)) {
+          resource[Symbol.dispose]()
+        }
+        if (isAsyncDisposable(resource)) {
+          await resource[Symbol.asyncDispose]()
+        }
+      }),
+    )
+
+    const fails = disposeResult.filter((r) => r.status === 'rejected')
+    if (fails && fails.length) {
+      const error = new AggregatedError(
+        `There was an error during disposing ${fails.length} stores: ${fails.map((f) => f.reason)}`,
+        fails,
+      )
+      throw error
+    }
+
     this.disposables.clear()
-    this.observers.forEach((r) => r.dispose())
+    this.observers.forEach((r) => r[Symbol.dispose]())
     this.observers.clear()
 
-    this.stateObservers.forEach((r) => r.dispose())
+    this.stateObservers.forEach((r) => r[Symbol.dispose]())
     this.stateObservers.clear()
   }
 }

package/src/services/screen-service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@furystack/inject'
-import type { Disposable } from '@furystack/utils'
 import { ObservableValue } from '@furystack/utils'
 
 export const ScreenSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
@@ -26,7 +25,7 @@ export class ScreenService implements Disposable {
     xs: { minSize: 0 },
   }
 
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('resize', this.onResizeListener)
   }