@furystack/shades 14.0.0 → 15.0.1

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

@@ -1,4 +1,4 @@
-import { Injector } from '@furystack/inject'
+import { createInjector } from '@furystack/inject'
 import { serializeValue } from '@furystack/rest'
 import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -438,7 +438,7 @@ describe('NestedRouter lifecycle hooks', () => {
       callOrder.push('leave-other')
     })
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -556,7 +556,7 @@ describe('NestedRouter query / hash re-render', () => {
     const onLeave = vi.fn(async () => {})
     const componentFn = vi.fn(({ hash }: { hash: string | undefined }) => <div id="content">hash={hash ?? 'none'}</div>)
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -581,7 +581,7 @@ describe('NestedRouter query / hash re-render', () => {
       expect(onVisit).toBeCalledTimes(1)
       expect(onLeave).not.toBeCalled()
 
-      const locationService = injector.getInstance(LocationService)
+      const locationService = injector.get(LocationService)
       locationService.navigate('/tabs#a')
       await flushUpdates()
       await flushUpdates()
@@ -609,7 +609,7 @@ describe('NestedRouter query / hash re-render', () => {
       <div id="content">page={query?.page ?? 'none'}</div>
     ))
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -633,7 +633,7 @@ describe('NestedRouter query / hash re-render', () => {
       expect(document.getElementById('content')?.innerHTML).toBe('page=none')
       expect(onVisit).toBeCalledTimes(1)
 
-      const locationService = injector.getInstance(LocationService)
+      const locationService = injector.get(LocationService)
       locationService.navigate(`/list?page=${serializeValue(2)}`)
       await flushUpdates()
       await flushUpdates()
@@ -662,7 +662,7 @@ describe('NestedRouter query / hash re-render', () => {
       </div>
     ))
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -686,7 +686,7 @@ describe('NestedRouter query / hash re-render', () => {
       expect(document.getElementById('content')?.innerHTML).toBe('a')
       bComponent.mockClear()
 
-      injector.getInstance(LocationService).navigate(`/b?page=${serializeValue(7)}#x`)
+      injector.get(LocationService).navigate(`/b?page=${serializeValue(7)}#x`)
       await flushUpdates()
       await flushUpdates()
 
@@ -731,7 +731,7 @@ describe('NestedRouter latest-wins on rapid navigation', () => {
       callOrder.push('leave-c')
     })
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -813,7 +813,7 @@ describe('NestedRouter lifecycle element scope', () => {
     const visitElements: Array<{ route: string; element: JSX.Element }> = []
     const leaveElements: Array<{ route: string; element: JSX.Element }> = []
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -906,7 +906,7 @@ describe('NestedRouter flat routes', () => {
   it('should render and navigate between flat (non-nested) Record routes', async () => {
     history.pushState(null, '', '/')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -967,7 +967,7 @@ describe('NestedRouter outlet composition', () => {
   it('should compose parent layout wrapping child content via outlet', async () => {
     history.pushState(null, '', '/dashboard/settings')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1012,7 +1012,7 @@ describe('NestedRouter outlet composition', () => {
   it('should render parent with fallback when navigating to parent URL without a child match', async () => {
     history.pushState(null, '', '/dashboard')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1065,7 +1065,7 @@ describe('NestedRouter route param changes', () => {
       callOrder.push('leave-user')
     })
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1141,7 +1141,7 @@ describe('NestedRouter route param changes', () => {
     const onVisitDash = vi.fn()
     const onLeaveDash = vi.fn()
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1214,9 +1214,9 @@ describe('NestedRouter + RouteMatchService integration', () => {
   it('should update RouteMatchService with the current match chain on navigation', async () => {
     history.pushState(null, '', '/parent/child-a')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
-      const routeMatchService = injector.getInstance(RouteMatchService)
+      const routeMatchService = injector.get(RouteMatchService)
 
       const parentRoute: NestedRoute = {
         meta: { title: 'Parent' },
@@ -1278,9 +1278,9 @@ describe('NestedRouter + RouteMatchService integration', () => {
   it('should expose match params through RouteMatchService', async () => {
     history.pushState(null, '', '/users/42')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
-      const routeMatchService = injector.getInstance(RouteMatchService)
+      const routeMatchService = injector.get(RouteMatchService)
 
       initializeShadeRoot({
         injector,
@@ -1378,7 +1378,7 @@ describe('NestedRouter view transitions', () => {
   it('should call startViewTransition when viewTransition is enabled', async () => {
     history.pushState(null, '', '/')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1414,7 +1414,7 @@ describe('NestedRouter view transitions', () => {
   it('should not call startViewTransition when viewTransition is not set', async () => {
     history.pushState(null, '', '/')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1449,7 +1449,7 @@ describe('NestedRouter view transitions', () => {
   it('should pass types to startViewTransition when configured', async () => {
     history.pushState(null, '', '/')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1484,7 +1484,7 @@ describe('NestedRouter view transitions', () => {
   it('should respect per-route viewTransition: false override', async () => {
     history.pushState(null, '', '/')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({
@@ -1525,7 +1525,7 @@ describe('NestedRouter view transitions', () => {
 
     history.pushState(null, '', '/')
 
-    await usingAsync(new Injector(), async (injector) => {
+    await usingAsync(createInjector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       initializeShadeRoot({

package/src/components/nested-router.tsx

@@ -271,8 +271,8 @@ const isShallowEqual = (a: unknown, b: unknown): boolean => {
   }
   if (Array.isArray(b)) return false
 
-  const aKeys = Object.keys(a as Record<string, unknown>)
-  const bKeys = Object.keys(b as Record<string, unknown>)
+  const aKeys = Object.keys(a)
+  const bKeys = Object.keys(b)
   if (aKeys.length !== bKeys.length) return false
   for (const key of aKeys) {
     if (!Object.prototype.hasOwnProperty.call(b, key)) return false
@@ -386,7 +386,7 @@ export const NestedRouter = Shade<NestedRouterProps>({
       chainElements: [],
     })
 
-    const locationService = injector.getInstance(LocationService)
+    const locationService = injector.get(LocationService)
 
     const updateUrl = async (currentUrl: string) => {
       const [lastState] = useState<NestedRouterState>('routerState', state)
@@ -426,7 +426,7 @@ export const NestedRouter = Shade<NestedRouterProps>({
 
             const applyUpdate = () => {
               setState({ matchChain: newChain, jsx: newResult.jsx, chainElements: newResult.chainElements })
-              injector.getInstance(RouteMatchService).currentMatchChain.setValue(newChain)
+              injector.get(RouteMatchService).currentMatchChain.setValue(newChain)
             }
 
             const vtConfig = resolveViewTransition(options.props.viewTransition, newChain)
@@ -451,7 +451,7 @@ export const NestedRouter = Shade<NestedRouterProps>({
               jsx: options.props.notFound || <div />,
               chainElements: [],
             })
-            injector.getInstance(RouteMatchService).currentMatchChain.setValue([])
+            injector.get(RouteMatchService).currentMatchChain.setValue([])
           }
 
           await maybeViewTransition(options.props.viewTransition, applyNotFound)

package/src/css-generator.spec.ts

@@ -71,7 +71,7 @@ describe('css-generator', () => {
         color: 'red',
         '&:hover': { color: 'blue' },
       }
-      const result = propertiesToCSSString(mixedObject as unknown as CSSProperties)
+      const result = propertiesToCSSString(mixedObject)
       expect(result).toBe('color: red')
     })
 

package/src/css-generator.ts

@@ -1,30 +1,20 @@
 import type { CSSObject, CSSProperties } from './models/css-object.js'
 
 /**
- * Converts a camelCase string to kebab-case
- * @param str - The camelCase string to convert
- * @returns The kebab-case string
  * @example
  * camelToKebab('backgroundColor') // 'background-color'
- * camelToKebab('fontSize') // 'font-size'
  */
 export const camelToKebab = (str: string): string => {
   return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
 }
 
-/**
- * Checks if a key is a selector key (starts with '&')
- * @param key - The key to check
- * @returns True if the key is a selector key
- */
 export const isSelectorKey = (key: string): boolean => {
   return key.startsWith('&')
 }
 
 /**
- * Converts CSS properties to a CSS declaration string
- * @param properties - The CSS properties object
- * @returns A CSS declaration string (e.g., "color: red; padding: 10px;")
+ * Serializes the non-selector entries of a {@link CSSProperties} object as
+ * a CSS declaration body. Selector keys (`&...`) are skipped.
  */
 export const propertiesToCSSString = (properties: CSSProperties): string => {
   const declarations: string[] = []
@@ -41,12 +31,7 @@ export const propertiesToCSSString = (properties: CSSProperties): string => {
   return declarations.join('; ')
 }
 
-/**
- * Generates a CSS rule string from a selector and properties
- * @param selector - The CSS selector
- * @param properties - The CSS properties object
- * @returns A complete CSS rule string (e.g., "selector { color: red; }")
- */
+/** Builds `selector { decls; }` from the non-selector entries. Empty when no decls. */
 export const generateCSSRule = (selector: string, properties: CSSProperties): string => {
   const cssString = propertiesToCSSString(properties)
   if (!cssString) {
@@ -56,10 +41,9 @@ export const generateCSSRule = (selector: string, properties: CSSProperties): st
 }
 
 /**
- * Generates complete CSS from a CSSObject for a given component selector
- * @param selector - The base selector (typically the customElementName)
- * @param cssObject - The CSSObject containing styles and nested selectors
- * @returns A complete CSS string with all rules
+ * Renders a {@link CSSObject} as CSS rules. Base properties become a single
+ * rule against `selector`; each `&...` selector key produces an additional
+ * rule with `&` substituted for `selector`.
  *
  * @example
  * ```typescript
@@ -68,10 +52,9 @@ export const generateCSSRule = (selector: string, properties: CSSProperties): st
  *   '&:hover': { color: 'blue' },
  *   '& .inner': { fontWeight: 'bold' }
  * })
- * // Returns:
- * // "my-component { color: red; }
- * //  my-component:hover { color: blue; }
- * //  my-component .inner { font-weight: bold; }"
+ * // my-component { color: red; }
+ * // my-component:hover { color: blue; }
+ * // my-component .inner { font-weight: bold; }
  * ```
  */
 export const generateCSS = (selector: string, cssObject: CSSObject): string => {

package/src/models/css-object.ts

@@ -1,11 +1,9 @@
-/**
- * Base CSS properties - subset of CSSStyleDeclaration
- */
 export type CSSProperties = Partial<CSSStyleDeclaration>
 
 /**
- * Selector key pattern for pseudo-classes and nested selectors
- * Examples: '&:hover', '&:active', '& .className', '& > div'
+ * Selector keys for pseudo-classes and nested selectors. The leading `&`
+ * is replaced with the host selector at registration time
+ * (e.g. `&:hover` → `my-element:hover`).
  */
 export type SelectorKey = `&${string}`
 

package/src/models/render-options.ts

@@ -1,5 +1,6 @@
 import type { Injector } from '@furystack/inject'
 import type { ObservableValue, ValueObserverOptions } from '@furystack/utils'
+import type { LocationService } from '../services/location-service.js'
 import type { ChildrenList } from './children-list.js'
 import type { PartialElement } from './partial-element.js'
 
@@ -79,13 +80,11 @@ export type RenderOptions<TProps, TElementBase extends HTMLElement = HTMLElement
   useRef: <T extends Element = HTMLElement>(key: string) => RefObject<T>
 
   /**
-   * Creates and disposes a resource after the component has been detached from the DOM.
-   * When `deps` is provided, the resource is re-created (and the old one disposed) whenever
-   * the serialized deps value changes.
-   * @param key The key for caching the disposable resource
-   * @param factory A factory method for creating the disposable resource
-   * @param deps Optional dependency array — when deps change, the old resource is disposed and a new one is created
-   * @returns The Disposable instance
+   * Creates a disposable resource the first time it is requested per `key`,
+   * caches it across renders, and disposes it on `disconnectedCallback`.
+   * When `deps` is provided, the cached resource is disposed + re-created
+   * whenever the serialized deps change (use for `key`-stable resources
+   * that depend on dynamic inputs).
    */
   useDisposable: <T extends Disposable | AsyncDisposable>(key: string, factory: () => T, deps?: readonly unknown[]) => T
 
@@ -121,27 +120,25 @@ export type RenderOptions<TProps, TElementBase extends HTMLElement = HTMLElement
   ) => [value: T, setValue: (newValue: T) => void]
 
   /**
-   * Creates a state object that will trigger a component re-render on change
-   * @param key The Key for caching the observable value
-   * @param initialValue The initial value for the observable
-   * @returns tuple with the current value and a setter function
+   * Local component state. Returns `[value, setValue]`; calling the setter
+   * with a new value triggers a re-render. Preferred over manually wiring
+   * an `ObservableValue` + `useObservable` (`furystack/prefer-use-state`
+   * enforces this).
    */
   useState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
 
   /**
-   * Creates a state object that will use a value from the search string of the current location. Triggers a component re-render on change
-   * @param key The Key for caching the observable value
-   * @param initialValue The initial value - if the value is not found in the search string
-   * @returns a tuple with the current value and a setter function
+   * State backed by a URL search-string parameter via {@link LocationService}.
+   * Bidirectional: setting the value pushes a history entry; navigating
+   * (back/forward, manual edit) updates the value. `initialValue` applies
+   * when the key is absent from the current URL.
    */
   useSearchState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
 
   /**
-   * Creates a state object that will use a value from the storage area. Triggers a component re-render on change
-   * @param key The key in the storage area
-   * @param initialValue The initial value that will be used if the key is not found in the storage area
-   * @param storageArea The storage area to use
-   * @returns a tuple with the current value and a setter function
+   * State backed by `localStorage` (or a custom `Storage`). Synchronizes
+   * across tabs via the `storage` event and a `BroadcastChannel`.
+   * `initialValue` applies when the key is absent from `storageArea`.
    */
   useStoredState: <T>(
     key: string,

package/src/models/shade-component.ts

@@ -1,14 +1,16 @@
 import type { ChildrenList } from './children-list.js'
 
 /**
- * Type definition for a Shade component
+ * Callable that produces a JSX element from props (and optional children).
+ * Both `Shade(...)` factories and plain functional components conform to
+ * this shape.
  */
 export type ShadeComponent<TProps = object> = (arg: TProps, children?: ChildrenList) => JSX.Element
 
 /**
- * Type guard that checks if an object is a stateless component
- * @param obj The object to check
- * @returns a value that indicates if the object is a Shade component
+ * Discriminates {@link ShadeComponent} from intrinsic-element tag names.
+ * Intentionally permissive — any function is treated as a component since
+ * VNodes carry no other discriminator.
  */
 export const isShadeComponent = <T = any>(obj: any): obj is ShadeComponent<T> => {
   return typeof obj === 'function'

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

@@ -1,4 +1,4 @@
-import { Injector } from '@furystack/inject'
+import { createInjector } from '@furystack/inject'
 import { deserializeQueryString, serializeToQueryString, serializeValue } from '@furystack/rest'
 import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -13,16 +13,17 @@ describe('LocationService', () => {
   })
 
   it('Shuld be constructed', async () => {
-    await usingAsync(new Injector(), async (i) => {
-      const s = i.getInstance(LocationService)
-      expect(s).toBeInstanceOf(LocationService)
+    await usingAsync(createInjector(), async (i) => {
+      const s = i.get(LocationService)
+      expect(s).toBeDefined()
+      expect(typeof s.navigate).toBe('function')
     })
   })
 
   it('Shuld update state on events', async () => {
-    await usingAsync(new Injector(), async (i) => {
+    await usingAsync(createInjector(), async (i) => {
       const onLocaionChanged = vi.fn()
-      const s = i.getInstance(LocationService)
+      const s = i.get(LocationService)
       s.onLocationPathChanged.subscribe(onLocaionChanged)
       expect(onLocaionChanged).toBeCalledTimes(0)
       history.pushState(null, '', '/loc1')
@@ -39,9 +40,9 @@ describe('LocationService', () => {
   })
 
   it('Should update location path when navigate is called', async () => {
-    await usingAsync(new Injector(), async (i) => {
+    await usingAsync(createInjector(), async (i) => {
       const onLocationChanged = vi.fn()
-      const s = i.getInstance(LocationService)
+      const s = i.get(LocationService)
       s.onLocationPathChanged.subscribe(onLocationChanged)
       s.navigate('/dashboard')
       expect(s.onLocationPathChanged.getValue()).toBe('/dashboard')
@@ -51,8 +52,8 @@ describe('LocationService', () => {
 
   describe('replace', () => {
     it('Should update the observable path without pushing a new history entry', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const s = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const s = i.get(LocationService)
         const lengthBefore = history.length
         s.replace('/replaced')
         expect(s.onLocationPathChanged.getValue()).toBe('/replaced')
@@ -61,8 +62,8 @@ describe('LocationService', () => {
     })
 
     it('Should call history.replaceState rather than pushState', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const s = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const s = i.get(LocationService)
         const pushSpy = vi.spyOn(history, 'pushState')
         const replaceSpy = vi.spyOn(history, 'replaceState')
 
@@ -78,8 +79,8 @@ describe('LocationService', () => {
     })
 
     it('Should notify path subscribers after replace', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const s = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const s = i.get(LocationService)
         const onLocationChanged = vi.fn()
         s.onLocationPathChanged.subscribe(onLocationChanged)
         s.replace('/notify')
@@ -90,8 +91,8 @@ describe('LocationService', () => {
 
   describe('useSearchParam', () => {
     it('Should create observables lazily', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const service = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const service = i.get(LocationService)
         const observables = service.searchParamObservables
 
         const testSearchParam = service.useSearchParam('test', null)
@@ -110,16 +111,16 @@ describe('LocationService', () => {
     })
 
     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)
+      await usingAsync(createInjector(), async (i) => {
+        const service = i.get(LocationService)
         const testSearchParam = service.useSearchParam('test', { value: 'foo' })
         expect(testSearchParam.getValue()).toEqual({ value: 'foo' })
       })
     })
 
     it('Should return the value from the query string', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const service = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const service = i.get(LocationService)
         history.pushState(null, '', `/loc1?test=${serializeValue(1)}`)
         const testSearchParam = service.useSearchParam('test', 123)
         expect(testSearchParam.getValue()).toBe(1)
@@ -127,8 +128,8 @@ describe('LocationService', () => {
     })
 
     it('should update the observable value on push / replace states', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const service = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const service = i.get(LocationService)
         history.pushState(null, '', `/loc1?test=${serializeValue(1)}`)
         const testSearchParam = service.useSearchParam('test', 234)
         expect(testSearchParam.getValue()).toBe(1)
@@ -138,8 +139,8 @@ describe('LocationService', () => {
     })
 
     it('Should update the URL based on search value change', async () => {
-      await usingAsync(new Injector(), async (i) => {
-        const service = i.getInstance(LocationService)
+      await usingAsync(createInjector(), async (i) => {
+        const service = i.get(LocationService)
         history.pushState(null, '', `/loc1?test=${serializeValue('2')}`)
         const testSearchParam = service.useSearchParam('test', '')
         testSearchParam.setValue('2')
@@ -147,25 +148,28 @@ describe('LocationService', () => {
       })
     })
 
-    it('Should throw an error when trying to use a custom serializer after LocationService has been instantiated', async () => {
-      await usingAsync(new Injector(), async (i) => {
+    it('Should throw when called after LocationService has been resolved', async () => {
+      await usingAsync(createInjector(), async (i) => {
         const customSerializer = vi.fn((value: any) => serializeToQueryString(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',
+
+        // Eagerly resolve once so the service patches history / adds listeners.
+        i.get(LocationService)
+
+        expect(() => useCustomSearchStateSerializer(i, customSerializer, customDeserializer)).toThrow(
+          /before LocationService is resolved/,
         )
       })
     })
 
     it('Should use custom serializer and deserializer', async () => {
-      await usingAsync(new Injector(), async (i) => {
+      await usingAsync(createInjector(), async (i) => {
         const customSerializer = vi.fn((value: any) => serializeToQueryString(value))
         const customDeserializer = vi.fn((value: string) => deserializeQueryString(value))
 
         useCustomSearchStateSerializer(i, customSerializer, customDeserializer)
 
-        const locationService = i.getInstance(LocationService)
+        const locationService = i.get(LocationService)
         const testSearchParam = locationService.useSearchParam('test', { value: 'foo' })
 
         testSearchParam.setValue({ value: 'bar' })