@furystack/shades 3.7.2 → 4.0.3

package/src/shade.ts

@@ -1,7 +1,7 @@
-import { ObservableValue } from '@furystack/utils'
+import { Disposable, ObservableValue } from '@furystack/utils'
 import { v4 } from 'uuid'
 import { Injector } from '@furystack/inject'
-import { ChildrenList, RenderOptions } from './models'
+import { ChildrenList, PartialElement, RenderOptions } from './models'
 
 export type ShadeOptions<TProps, TState> = {
   /**
@@ -29,6 +29,8 @@ export type ShadeOptions<TProps, TState> = {
    * Will be executed when the element is detached from the DOM.
    */
   onDetach?: (options: RenderOptions<TProps, TState>) => void
+
+  resources?: (options: RenderOptions<TProps, TState>) => Disposable[]
 } & (unknown extends TState
   ? {}
   : {
@@ -64,6 +66,7 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
           this.state.dispose()
           this.shadeChildren.dispose()
           this.cleanup && this.cleanup()
+          Object.values(this.resources).forEach((s) => s.dispose())
         }
 
         /**
@@ -93,23 +96,35 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
         private getRenderOptions = () => {
           const props = this.props.getValue() || {}
           const getState = () => this.state.getValue()
-          return {
+          const updateState = (stateChanges: PartialElement<TState>, skipRender?: boolean) => {
+            const currentState = this.state.getValue()
+            const newState = { ...currentState, ...stateChanges }
+            if (JSON.stringify(currentState) !== JSON.stringify(newState)) {
+              this.state.setValue(newState)
+              !skipRender && this.updateComponent()
+            }
+          }
+
+          const returnValue: RenderOptions<TProps, TState> = {
             props,
             getState,
             injector: this.injector,
-            updateState: (newState: TState, skipRender: boolean) => {
-              this.state.setValue({ ...this.state.getValue(), ...newState })
-              !skipRender && this.updateComponent()
-            },
+            updateState,
             children: this.shadeChildren.getValue(),
             element: this,
-          } as any as RenderOptions<TProps, TState>
+          }
+
+          return returnValue
+        }
+
+        private createResources() {
+          this.resources.push(...(o.resources?.(this.getRenderOptions()) || []))
         }
 
         /**
          * Updates the component in the DOM.
          */
-        public async updateComponent() {
+        public updateComponent() {
           const newJsx = this.render(this.getRenderOptions())
 
           // const selectionState = this.getSelectionState()
@@ -130,6 +145,7 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
             this.state.setValue((o as any).getInitialState({ props: this.props.getValue(), injector: this.injector }))
 
           this.updateComponent()
+          this.createResources()
           const cleanupResult = o.constructed && o.constructed(this.getRenderOptions())
           if (cleanupResult instanceof Promise) {
             cleanupResult.then((cleanup) => (this.cleanup = cleanup))
@@ -180,6 +196,8 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
           this._injector = i
         }
 
+        private resources: Disposable[] = []
+
         constructor(_props: TProps) {
           super()
           this.props = new ObservableValue()
@@ -187,6 +205,8 @@ export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>)
         }
       } as any as CustomElementConstructor,
     )
+  } else {
+    throw Error(`A custom shade with shadow DOM name '${o.shadowDomName}' has already been registered!`)
   }
 
   return (props: TProps, children: ChildrenList) => {

package/src/shades.integration.spec.tsx

@@ -0,0 +1,156 @@
+import { Injector } from '@furystack/inject'
+
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
+import { JSDOM } from 'jsdom'
+import { initializeShadeRoot } from './initialize'
+import { Shade } from './shade'
+import { createComponent } from './shade-component'
+
+describe('Shades integration tests', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
+  it('Should mount a custom component to a Shade root', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    const ExampleComponent = Shade({ render: () => <div>Hello</div>, shadowDomName: 'shades-example' })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <ExampleComponent />,
+    })
+    expect(document.body.innerHTML).toBe('<div id="root"><shades-example><div>Hello</div></shades-example></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',
+    })
+
+    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></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,
+      render: () => <div>Hello</div>,
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <ExampleComponent />,
+    })
+    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,
+      render: () => <div>Hello</div>,
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <ExampleComponent />,
+    })
+    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({
+      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 />,
+    })
+
+    const plus = () => document.getElementById('plus')?.click()
+    const minus = () => document.getElementById('minus')?.click()
+
+    expect(document.body.innerHTML).toContain('Count is 0')
+    plus()
+    expect(document.body.innerHTML).toContain('Count is 1')
+    plus()
+    expect(document.body.innerHTML).toContain('Count is 2')
+
+    minus()
+    minus()
+    expect(document.body.innerHTML).toContain('Count is 0')
+  })
+})