@furystack/shades 6.1.5 → 7.0.0

package/src/shades.integration.spec.tsx

@@ -1,4 +1,5 @@
 import { Injector } from '@furystack/inject'
+import { usingAsync } from '@furystack/utils'
 
 import { TextEncoder, TextDecoder } from 'util'
 
@@ -7,7 +8,7 @@ global.TextDecoder = TextDecoder as any
 
 import { initializeShadeRoot } from './initialize'
 import { Shade } from './shade'
-import { createComponent, createFragment } from './shade-component'
+import { createComponent } from './shade-component'
 
 describe('Shades integration tests', () => {
   beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
@@ -43,289 +44,301 @@ describe('Shades integration tests', () => {
     )
   })
 
-  it('Should mount a custom component with null render result', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+  it('Should mount a custom component with null render result', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    const ExampleComponent = Shade({ render: () => null, shadowDomName: 'shades-null-render-result' })
+      const ExampleComponent = Shade({ render: () => null, shadowDomName: 'shades-null-render-result' })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><shades-null-render-result></shades-null-render-result></div>',
+      )
     })
-    expect(document.body.innerHTML).toBe('<div id="root"><shades-null-render-result></shades-null-render-result></div>')
   })
 
-  it('Should mount a custom component with a document fragment render result', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const ExampleComponent = Shade({
-      render: () => (
-        <>
-          <p>1</p>
-          <p>2</p>
-        </>
-      ),
-      shadowDomName: 'shades-fragment-render-result',
-    })
+  it('Should mount a custom component with a document fragment render result', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
-    })
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><shades-fragment-render-result><p>1</p><p>2</p></shades-fragment-render-result></div>',
-    )
-  })
-
-  it('Should mount a custom component with a nested document fragment render result', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const ExampleComponent = Shade({
-      render: () => (
-        <p>
+      const ExampleComponent = Shade({
+        render: () => (
           <>
             <p>1</p>
             <p>2</p>
           </>
-        </p>
-      ),
-      shadowDomName: 'shades-fragment-render-result-nested',
+        ),
+        shadowDomName: 'shades-fragment-render-result',
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      expect(document.body.innerHTML).toBe(
+        '<div id="root"><shades-fragment-render-result><p>1</p><p>2</p></shades-fragment-render-result></div>',
+      )
     })
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
-    })
-    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>',
-    )
   })
 
-  it('Should mount a custom component with a document fragment that contains custom components', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const CustomComponent = Shade({
-      shadowDomName: 'shades-fragment-test-custom-component',
-      render: () => <p>Hello</p>,
-    })
-
-    const ExampleComponent = Shade({
-      render: () => (
-        <>
-          <CustomComponent />
-          <CustomComponent />
-        </>
-      ),
-      shadowDomName: 'shades-fragment-render-result-2',
-    })
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+  it('Should mount a custom component with a nested document fragment render result', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const ExampleComponent = Shade({
+        render: () => (
+          <p>
+            <>
+              <p>1</p>
+              <p>2</p>
+            </>
+          </p>
+        ),
+        shadowDomName: 'shades-fragment-render-result-nested',
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      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>',
+      )
     })
-    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>',
-    )
   })
 
-  it('Should mount nested Shades components', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const ExampleComponent = Shade({
-      render: ({ children }) => <div>{children}</div>,
-      shadowDomName: 'shades-example-2',
-    })
+  it('Should mount a custom component with a document fragment that contains custom components', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    const ExampleSubs = Shade<{ no: number }>({
-      render: ({ props }) => <div>{props.no}</div>,
-      shadowDomName: 'shades-example-sub',
-    })
+      const CustomComponent = Shade({
+        shadowDomName: 'shades-fragment-test-custom-component',
+        render: () => <p>Hello</p>,
+      })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <ExampleComponent>
-          <ExampleSubs no={1} />
-          <ExampleSubs no={2} />
-          <ExampleSubs no={3} />
-        </ExampleComponent>
-      ),
+      const ExampleComponent = Shade({
+        render: () => (
+          <>
+            <CustomComponent />
+            <CustomComponent />
+          </>
+        ),
+        shadowDomName: 'shades-fragment-render-result-2',
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      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>',
+      )
     })
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><shades-example-2><div><shades-example-sub><div></div></shades-example-sub><shades-example-sub><div></div></shades-example-sub><shades-example-sub><div></div></shades-example-sub></div></shades-example-2></div>',
-    )
   })
 
-  it("Should execute the constructed and constructed's cleanup callback", () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const cleanup = jest.fn()
-    const constructed = jest.fn(() => cleanup)
-
-    const ExampleComponent = Shade({
-      constructed,
-      shadowDomName: 'example-component-1',
-      render: () => <div>Hello</div>,
-    })
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+  it('Should mount nested Shades components', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const ExampleComponent = Shade({
+        render: ({ children }) => <div>{children}</div>,
+        shadowDomName: 'shades-example-2',
+      })
+
+      const ExampleSubs = Shade<{ no: number }>({
+        render: ({ props }) => <div>{props.no}</div>,
+        shadowDomName: 'shades-example-sub',
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <ExampleComponent>
+            <ExampleSubs no={1} />
+            <ExampleSubs no={2} />
+            <ExampleSubs no={3} />
+          </ExampleComponent>
+        ),
+      })
+      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>',
+      )
     })
-    expect(constructed).toBeCalled()
-    expect(cleanup).not.toBeCalled()
-    document.body.innerHTML = ''
-    expect(cleanup).toBeCalled()
   })
 
-  it('Should execute the onAttach and onDetach callbacks', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const onAttach = jest.fn()
-    const onDetach = jest.fn()
-
-    const ExampleComponent = Shade({
-      onAttach,
-      onDetach,
-      shadowDomName: 'example-component-2',
-      render: () => <div>Hello</div>,
-    })
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+  it("Should execute the constructed and constructed's cleanup callback", async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const cleanup = jest.fn()
+      const constructed = jest.fn(() => cleanup)
+
+      const ExampleComponent = Shade({
+        constructed,
+        shadowDomName: 'example-component-1',
+        render: () => <div>Hello</div>,
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+      expect(constructed).toBeCalled()
+      expect(cleanup).not.toBeCalled()
+      document.body.innerHTML = ''
+      expect(cleanup).toBeCalled()
     })
-    expect(onAttach).toBeCalled()
-    expect(onDetach).not.toBeCalled()
-    document.body.innerHTML = ''
-    expect(onDetach).toBeCalled()
   })
 
-  it('Should update state', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    const ExampleComponent = Shade({
-      shadowDomName: 'example-component-3',
-      getInitialState: () => ({ count: 0 }),
-      render: ({ getState, updateState }) => {
-        const { count } = getState()
-        return (
-          <div>
-            Count is {getState().count.toString()}
-            <button id="plus" onclick={() => updateState({ count: count + 1 })}>
-              +
-            </button>
-            <button id="minus" onclick={() => updateState({ count: count - 1 })}>
-              -
-            </button>
-          </div>
-        )
-      },
-    })
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <ExampleComponent />,
+  it('Should execute the onAttach and onDetach callbacks', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onAttach = jest.fn()
+      const onDetach = jest.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()
     })
-
-    const plus = () => document.getElementById('plus')?.click()
-    const minus = () => document.getElementById('minus')?.click()
-    const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
-
-    expectCount(0)
-    plus()
-    expectCount(1)
-    plus()
-    expectCount(2)
-
-    minus()
-    minus()
-    expectCount(0)
   })
 
-  it('Should allow children update after unmount and remount', () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const Parent = Shade<unknown, { areChildrenVisible: boolean }>({
-      shadowDomName: 'shade-remount-parent',
-      getInitialState: () => ({ areChildrenVisible: true }),
-      render: ({ children, getState, updateState }) => (
-        <div>
-          <button
-            id="showHideChildren"
-            onclick={() => {
-              updateState({ areChildrenVisible: !getState().areChildrenVisible })
-            }}
-          >
-            Toggle
-          </button>
-          {getState().areChildrenVisible ? children : <div />}
-        </div>
-      ),
-    })
-
-    const Child = Shade({
-      shadowDomName: 'example-remount-child',
-      getInitialState: () => ({ count: 0 }),
-      render: ({ getState, updateState }) => {
-        const { count } = getState()
-        return (
-          <div>
-            Count is {getState().count.toString()}
-            <button id="plus" onclick={() => updateState({ count: count + 1 })}>
-              +
-            </button>
-            <button id="minus" onclick={() => updateState({ count: count - 1 })}>
-              -
-            </button>
-          </div>
-        )
-      },
+  it('Should update state', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const ExampleComponent = Shade({
+        shadowDomName: 'example-component-3',
+        render: ({ useState }) => {
+          const [count, setCount] = useState('count', 0)
+          return (
+            <div>
+              Count is {count}
+              <button id="plus" onclick={() => setCount(count + 1)}>
+                +
+              </button>
+              <button id="minus" onclick={() => setCount(count - 1)}>
+                -
+              </button>
+            </div>
+          )
+        },
+      })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <ExampleComponent />,
+      })
+
+      const plus = () => document.getElementById('plus')?.click()
+      const minus = () => document.getElementById('minus')?.click()
+      const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
+
+      expectCount(0)
+      plus()
+      expectCount(1)
+      plus()
+      expectCount(2)
+
+      minus()
+      minus()
+      expectCount(0)
     })
+  })
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Parent>
-          <Child />
-        </Parent>
-      ),
+  it('Should allow children update after unmount and remount', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const Parent = Shade({
+        shadowDomName: 'shade-remount-parent',
+        render: ({ children, useState }) => {
+          const [areChildrenVisible, setAreChildrenVisible] = useState('areChildrenVisible', true)
+          return (
+            <div>
+              <button
+                id="showHideChildren"
+                onclick={() => {
+                  setAreChildrenVisible(!areChildrenVisible)
+                }}
+              >
+                Toggle
+              </button>
+              {areChildrenVisible ? children : null}
+            </div>
+          )
+        },
+      })
+
+      const Child = Shade({
+        shadowDomName: 'example-remount-child',
+        render: ({ useState }) => {
+          const [count, setCount] = useState('count', 0)
+
+          return (
+            <div>
+              Count is {`${count}`}
+              <button id="plus" onclick={() => setCount(count + 1)}>
+                +
+              </button>
+              <button id="minus" onclick={() => setCount(count - 1)}>
+                -
+              </button>
+            </div>
+          )
+        },
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Parent>
+            <Child />
+          </Parent>
+        ),
+      })
+
+      const plus = () => document.getElementById('plus')?.click()
+      const minus = () => document.getElementById('minus')?.click()
+      const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
+      const toggleChildren = () => document.getElementById('showHideChildren')?.click()
+
+      expectCount(0)
+      plus()
+      expectCount(1)
+
+      toggleChildren()
+
+      expect(document.getElementById('plus')).toBeNull()
+
+      toggleChildren()
+      expect(document.getElementById('plus')).toBeDefined()
+
+      expectCount(0)
+      plus()
+      expectCount(1)
+      minus()
+      expectCount(0)
     })
-
-    const plus = () => document.getElementById('plus')?.click()
-    const minus = () => document.getElementById('minus')?.click()
-    const expectCount = (count: number) => expect(document.body.innerHTML).toContain(`Count is ${count}`)
-    const toggleChildren = () => document.getElementById('showHideChildren')?.click()
-
-    expectCount(0)
-    plus()
-    expectCount(1)
-
-    toggleChildren()
-
-    expect(document.getElementById('plus')).toBeNull()
-
-    toggleChildren()
-    expect(document.getElementById('plus')).toBeDefined()
-
-    // expectCount(0)
-    plus()
-    expectCount(1)
-    minus()
-    expectCount(0)
   })
 })

package/types/components/lazy-load.d.ts

@@ -7,5 +7,5 @@ export interface LazyLoadState {
     component?: JSX.Element;
     error?: unknown;
 }
-export declare const LazyLoad: (props: LazyLoadProps, children: import("..").ChildrenList) => JSX.Element<any, any>;
+export declare const LazyLoad: (props: LazyLoadProps, children: import("..").ChildrenList) => JSX.Element<any>;
 //# sourceMappingURL=lazy-load.d.ts.map

package/types/components/lazy-load.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../../src/components/lazy-load.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,SAAS,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAM,QAAQ,sFAiCnB,CAAA"}
+{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../../src/components/lazy-load.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,SAAS,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAM,QAAQ,iFAqCnB,CAAA"}

package/types/components/route-link.d.ts

@@ -2,5 +2,5 @@ import type { PartialElement } from '../models';
 export type RouteLinkProps = PartialElement<HTMLAnchorElement>;
 export declare const RouteLink: (props: Omit<Partial<HTMLAnchorElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration> | undefined;
-}, children: import("..").ChildrenList) => JSX.Element<any, any>;
+}, children: import("..").ChildrenList) => JSX.Element<any>;
 //# sourceMappingURL=route-link.d.ts.map

package/types/components/route-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route-link.d.ts","sourceRoot":"","sources":["../../src/components/route-link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAI/C,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE9D,eAAO,MAAM,SAAS;;gEAgBpB,CAAA"}
+{"version":3,"file":"route-link.d.ts","sourceRoot":"","sources":["../../src/components/route-link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAI/C,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE9D,eAAO,MAAM,SAAS;;2DAiBpB,CAAA"}

package/types/components/router.d.ts

@@ -1,6 +1,5 @@
 import type { MatchResult, TokensToRegexpOptions } from 'path-to-regexp';
 import type { RenderOptions } from '../models';
-import Semaphore from 'semaphore-async-await';
 export interface Route<TMatchResult extends object> {
     url: string;
     component: (options: {
@@ -8,19 +7,18 @@ export interface Route<TMatchResult extends object> {
         match: MatchResult<TMatchResult>;
     }) => JSX.Element;
     routingOptions?: TokensToRegexpOptions;
-    onVisit?: (options: RenderOptions<RouterProps, RouterState>) => Promise<void>;
-    onLeave?: (options: RenderOptions<RouterProps, RouterState>) => Promise<void>;
+    onVisit?: (options: RenderOptions<unknown>) => Promise<void>;
+    onLeave?: (options: RenderOptions<unknown>) => Promise<void>;
 }
 export interface RouterProps {
     style?: CSSStyleDeclaration;
     routes: Array<Route<any>>;
-    notFound?: (currentUrl: string) => JSX.Element;
+    notFound?: JSX.Element;
 }
 export interface RouterState {
-    activeRoute?: Route<any>;
+    activeRoute?: Route<any> | null;
     activeRouteParams?: any;
-    jsx?: JSX.Element;
-    lock: Semaphore;
+    jsx: JSX.Element;
 }
-export declare const Router: (props: RouterProps, children: import("../models").ChildrenList) => JSX.Element<any, any>;
+export declare const Router: (props: RouterProps, children: import("../models").ChildrenList) => JSX.Element<any>;
 //# sourceMappingURL=router.d.ts.map

package/types/components/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/components/router.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,SAAS,MAAM,uBAAuB,CAAA;AAG7C,MAAM,WAAW,KAAK,CAAC,YAAY,SAAS,MAAM;IAChD,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAC7F,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7E,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9E;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;CAC/C;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACxB,iBAAiB,CAAC,EAAE,GAAG,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,IAAI,EAAE,SAAS,CAAA;CAChB;AACD,eAAO,MAAM,MAAM,2FA+CjB,CAAA"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/components/router.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAI9C,MAAM,WAAW,KAAK,CAAC,YAAY,SAAS,MAAM;IAChD,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAA;IAC7F,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7D;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAA;IACvB,GAAG,EAAE,GAAG,CAAC,OAAO,CAAA;CACjB;AACD,eAAO,MAAM,MAAM,sFAgDjB,CAAA"}

package/types/jsx.d.ts

@@ -1,14 +1,15 @@
 import type { Injector } from '@furystack/inject';
 import type { ChildrenList, PartialElement } from './models';
+import type { ResourceManager } from './services/resource-manager';
 declare global {
     export namespace JSX {
-        interface Element<TProps = any, TState = any> extends HTMLElement {
+        interface Element<TProps = any> extends HTMLElement {
             injector: Injector;
-            state: TState;
             props: TProps;
             updateComponent: () => void;
             shadeChildren?: ChildrenList;
             callConstructed: () => void;
+            resourceManager: ResourceManager;
         }
         interface IntrinsicElements {
             /**