@furystack/shades 10.0.6 → 11.0.1

package/src/shade-component.ts

@@ -20,8 +20,10 @@ export const appendChild = (el: HTMLElement | DocumentFragment, children: Childr
   }
 }
 
-export const hasStyle = (props: any): props is { style: Partial<CSSStyleDeclaration> } => {
-  return props?.style !== undefined
+export const hasStyle = (props: unknown): props is { style: Partial<CSSStyleDeclaration> } => {
+  return (
+    !!props && typeof props === 'object' && typeof (props as { style: Partial<CSSStyleDeclaration> }).style === 'object'
+  )
 }
 
 /**
@@ -37,7 +39,7 @@ export const attachStyles = (el: HTMLElement, props: any) => {
     }
 }
 
-export const attachDataAttributes = (el: HTMLElement, props: any) => {
+export const attachDataAttributes = <TProps extends object>(el: HTMLElement, props: TProps) => {
   props &&
     Object.entries(props)
       .filter(([key]) => key.startsWith('data-'))
@@ -49,17 +51,17 @@ export const attachDataAttributes = (el: HTMLElement, props: any) => {
  * @param el The Target HTML Element
  * @param props The Props to attach
  */
-export const attachProps = (el: HTMLElement, props: any) => {
+export const attachProps = <TProps extends object>(el: HTMLElement, props: TProps) => {
   if (!props) {
     return
   }
+  attachStyles(el, props)
 
-  const { style, ...rest } = props
-
-  Object.assign(el, rest)
-
-  if (props && (props as any).style) {
-    attachStyles(el, props)
+  if (hasStyle(props)) {
+    const { style, ...rest } = props
+    Object.assign(el, rest)
+  } else {
+    Object.assign(el, props)
   }
   attachDataAttributes(el, props)
 }
@@ -74,7 +76,9 @@ type CreateComponentArgs<TProps> = [
  * Factory method that creates a component. This should be configured as a default JSX Factory in tsconfig.
  * @returns the created JSX element
  */
-export const createComponentInner = <TProps>(...[elementType, props, ...children]: CreateComponentArgs<TProps>) => {
+export const createComponentInner = <TProps extends object>(
+  ...[elementType, props, ...children]: CreateComponentArgs<TProps>
+) => {
   if (typeof elementType === 'string') {
     const el = document.createElement(elementType)
 
@@ -100,7 +104,7 @@ export const createFragmentInner = (...[_props, ...children]: CreateFragmentArgs
   return fragment
 }
 
-export const createComponent = <TProps>(...args: CreateComponentArgs<TProps> | CreateFragmentArgs) => {
+export const createComponent = <TProps extends object>(...args: CreateComponentArgs<TProps> | CreateFragmentArgs) => {
   if (args[0] === null) {
     return createFragmentInner(...args)
   }

package/src/shade-resources.integration.spec.tsx

@@ -1,15 +1,15 @@
 import { Injector } from '@furystack/inject'
 
-import { TextEncoder, TextDecoder } from 'util'
+import { TextDecoder, TextEncoder } from 'util'
 
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder as any
 
+import { ObservableValue, sleepAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from './initialize.js'
-import { Shade } from './shade.js'
 import { createComponent } from './shade-component.js'
-import { ObservableValue } from '@furystack/utils'
-import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest'
+import { Shade } from './shade.js'
 
 describe('Shade Resources integration tests', () => {
   beforeEach(() => {
@@ -19,7 +19,7 @@ describe('Shade Resources integration tests', () => {
     document.body.innerHTML = ''
   })
 
-  it('Should update the component based on a custom observable value change', () => {
+  it('Should update the component based on a custom observable value change', async () => {
     const injector = new Injector()
     const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -77,6 +77,8 @@ describe('Shade Resources integration tests', () => {
 
     document.body.innerHTML = ''
 
+    await sleepAsync(10) // Cleanup can be async
+
     expect(obs1.getObservers().length).toBe(0)
     expect(obs2.getObservers().length).toBe(0)
 

package/src/shade.ts

@@ -1,9 +1,9 @@
-import { ObservableValue } from '@furystack/utils'
 import type { Constructable } from '@furystack/inject'
 import { Injector } from '@furystack/inject'
+import { ObservableValue } from '@furystack/utils'
 import type { ChildrenList, PartialElement, RenderOptions } from './models/index.js'
-import { ResourceManager } from './services/resource-manager.js'
 import { LocationService } from './services/location-service.js'
+import { ResourceManager } from './services/resource-manager.js'
 import { attachProps, attachStyles } from './shade-component.js'
 
 export type ShadeOptions<TProps, TElementBase extends HTMLElement> = {
@@ -86,7 +86,7 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
 
         public disconnectedCallback() {
           o.onDetach?.(this.getRenderOptions())
-          this.resourceManager.dispose()
+          this.resourceManager[Symbol.asyncDispose]()
           this.cleanup?.()
         }
 
@@ -173,9 +173,9 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
                 })
 
                 return {
-                  dispose: () => {
+                  [Symbol.dispose]: () => {
                     window.removeEventListener('storage', updateFromStorageEvent)
-                    subscription.dispose()
+                    subscription[Symbol.dispose]()
                     messageChannel.close()
                   },
                 }
@@ -190,7 +190,7 @@ export const Shade = <TProps, TElementBase extends HTMLElement = HTMLElement>(
             useDisposable: this.resourceManager.useDisposable.bind(this.resourceManager),
           }
 
-          return renderOptions as RenderOptions<TProps, TElementBase>
+          return renderOptions
         }
 
         /**

package/src/shades.integration.spec.tsx

@@ -1,15 +1,16 @@
 import { Injector } from '@furystack/inject'
-import { usingAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 
-import { TextEncoder, TextDecoder } from 'util'
+import { TextDecoder, TextEncoder } from 'util'
 
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder as any
 
+import { serializeToQueryString } from '@furystack/rest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from './initialize.js'
-import { Shade } from './shade.js'
 import { createComponent } from './shade-component.js'
-import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { Shade } from './shade.js'
 
 describe('Shades integration tests', () => {
   beforeEach(() => {
@@ -199,6 +200,7 @@ describe('Shades integration tests', () => {
       expect(constructed).toBeCalled()
       expect(cleanup).not.toBeCalled()
       document.body.innerHTML = ''
+      await sleepAsync(10) // Dispose can be async
       expect(cleanup).toBeCalled()
     })
   })
@@ -271,6 +273,104 @@ describe('Shades integration tests', () => {
     })
   })
 
+  it('Should update the stored state', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const ExampleComponent = Shade({
+        shadowDomName: 'example-component-3-stored-state',
+        render: ({ useStoredState }) => {
+          const [count, setCount] = useStoredState('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)
+
+      await sleepAsync(100)
+      plus()
+      expectCount(1)
+      expect(localStorage.getItem('count')).toBe('1')
+
+      plus()
+      expectCount(2)
+      expect(localStorage.getItem('count')).toBe('2')
+
+      minus()
+      minus()
+      expectCount(0)
+      expect(localStorage.getItem('count')).toBe('0')
+    })
+  })
+
+  it('Should update the search state', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const ExampleComponent = Shade({
+        shadowDomName: 'example-component-3-search-state',
+        render: ({ useSearchState }) => {
+          const [count, setCount] = useSearchState('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)
+
+      await sleepAsync(100)
+      plus()
+      expectCount(1)
+      expect(location.search).toBe(`?${serializeToQueryString({ count: 1 })}`)
+
+      plus()
+      expectCount(2)
+      expect(location.search).toBe(`?${serializeToQueryString({ count: 2 })}`)
+
+      minus()
+      minus()
+      expectCount(0)
+      expect(location.search).toBe(`?${serializeToQueryString({ count: 0 })}`)
+    })
+  })
+
   it('Should allow children update after unmount and remount', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
@@ -325,6 +425,7 @@ describe('Shades integration tests', () => {
 
       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()
 
@@ -336,6 +437,8 @@ describe('Shades integration tests', () => {
 
       expect(document.getElementById('plus')).toBeNull()
 
+      await sleepAsync(10) // Dispose can be async
+
       toggleChildren()
       expect(document.getElementById('plus')).toBeDefined()
 

package/src/styled-shade.ts

@@ -1,4 +1,5 @@
 import type { ChildrenList } from './models/children-list.js'
+import { hasStyle } from './shade-component.js'
 
 /**
  * Creates a shortcut for a specific custom Shade element with additional styles
@@ -11,13 +12,18 @@ export const styledShade = <T extends (props: any, children?: ChildrenList) => J
   styles: Partial<CSSStyleDeclaration>,
 ) => {
   return ((props: any, childrenList?: ChildrenList) => {
-    const mergedProps = {
-      ...props,
-      style: {
-        ...((props as any)?.style || {}),
-        ...styles,
-      },
-    }
+    const mergedProps = hasStyle(props)
+      ? {
+          ...props,
+          style: {
+            ...props.style,
+            ...styles,
+          },
+        }
+      : {
+          ...props,
+          style: styles,
+        }
     return element(mergedProps, childrenList)
   }) as T
 }