acrylblends 0.6.2 → 0.6.3

package/plugins/acryl-router/src/core/jsx/dom/components.test.tsx

@@ -0,0 +1,330 @@
+/** @jsxImportSource ../ */
+import { JSDOM } from 'jsdom'
+import { ErrorBoundary as ErrorBoundaryDom, Suspense as SuspenseDom, render } from './index.ts' // for dom
+import { ErrorBoundary as ErrorBoundaryCommon, Suspense as SuspenseCommon } from '../index.ts' // for common
+// run tests by old style jsx default
+// acryl-router/jsx/jsx-runtime and acryl-router/jsx/dom/jsx-runtime are tested in their respective settings
+import { use, useState } from '../hooks/index.ts'
+
+runner('Common', SuspenseCommon, ErrorBoundaryCommon)
+runner('DOM', SuspenseDom, ErrorBoundaryDom)
+
+function runner(
+  name: string,
+  Suspense: typeof SuspenseDom,
+  ErrorBoundary: typeof ErrorBoundaryDom
+) {
+  describe(name, () => {
+    beforeAll(() => {
+      global.requestAnimationFrame = (cb) => setTimeout(cb)
+    })
+
+    describe('Suspense', () => {
+      let dom: JSDOM
+      let root: HTMLElement
+      beforeEach(() => {
+        dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
+          runScripts: 'dangerously',
+        })
+        global.document = dom.window.document
+        global.HTMLElement = dom.window.HTMLElement
+        global.Text = dom.window.Text
+        root = document.getElementById('root') as HTMLElement
+      })
+
+      it('has no lazy load content', async () => {
+        const App = <Suspense fallback={<div>Loading...</div>}>Hello</Suspense>
+        render(App, root)
+        expect(root.innerHTML).toBe('Hello')
+      })
+
+      it('with use()', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Content />
+            </Suspense>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        resolve(1)
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
+      it('with use() update', async () => {
+        const counterMap: Record<number, Promise<number>> = {}
+        const getCounter = (count: number) => (counterMap[count] ||= Promise.resolve(count + 1))
+        const Content = ({ count }: { count: number }) => {
+          const num = use(getCounter(count))
+          return (
+            <>
+              <div>{num}</div>
+            </>
+          )
+        }
+        const Component = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Content count={count} />
+              <button onClick={() => setCount(count + 1)}>Increment</button>
+            </Suspense>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div>1</div><button>Increment</button>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div>2</div><button>Increment</button>')
+      })
+
+      it('with use() nested', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+        let resolve2: (value: number) => void = () => {}
+        const promise2 = new Promise<number>((_resolve) => (resolve2 = _resolve))
+        const Content2 = () => {
+          const num = use(promise2)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Content />
+              <Suspense fallback={<div>More...</div>}>
+                <Content2 />
+              </Suspense>
+            </Suspense>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        resolve(1)
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(root.innerHTML).toBe('<p>1</p><div>More...</div>')
+        resolve2(2)
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(root.innerHTML).toBe('<p>1</p><p>2</p>')
+      })
+
+      it('race condition', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          const [show, setShow] = useState(false)
+          return (
+            <div>
+              <button onClick={() => setShow((s) => !s)}>{show ? 'Hide' : 'Show'}</button>
+              {show && (
+                <Suspense fallback={<div>Loading...</div>}>
+                  <Content />
+                </Suspense>
+              )}
+            </div>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><button>Hide</button><div>Loading...</div></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><button>Hide</button><div>Loading...</div></div>')
+        resolve(2)
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><button>Hide</button><p>2</p></div>')
+      })
+
+      it('Suspense at child', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Content />
+            </Suspense>
+          )
+        }
+        const App = () => {
+          const [show, setShow] = useState(false)
+          return (
+            <div>
+              {show && <Component />}
+              <button onClick={() => setShow(true)}>Show</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Loading...</div><button>Show</button></div>')
+        resolve(2)
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><p>2</p><button>Show</button></div>')
+      })
+
+      it('Suspense at child counter', async () => {
+        const promiseMap: Record<number, Promise<number>> = {}
+        const Counter = () => {
+          const [count, setCount] = useState(0)
+          const promise = (promiseMap[count] ||= Promise.resolve(count))
+          const value = use(promise)
+          return (
+            <>
+              <p>{value}</p>
+              <button onClick={() => setCount(count + 1)}>Increment</button>
+            </>
+          )
+        }
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Counter />
+            </Suspense>
+          )
+        }
+        const App = () => {
+          return (
+            <div>
+              <Component />
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(root.innerHTML).toBe('<div><div>Loading...</div></div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><p>0</p><button>Increment</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Loading...</div></div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><p>1</p><button>Increment</button></div>')
+      })
+    })
+
+    describe('ErrorBoundary', () => {
+      let dom: JSDOM
+      let root: HTMLElement
+      beforeEach(() => {
+        dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
+          runScripts: 'dangerously',
+        })
+        global.document = dom.window.document
+        global.HTMLElement = dom.window.HTMLElement
+        global.Text = dom.window.Text
+        root = document.getElementById('root') as HTMLElement
+      })
+
+      it('has no error', async () => {
+        const App = (
+          <ErrorBoundary fallback={<div>Error</div>}>
+            <div>OK</div>
+          </ErrorBoundary>
+        )
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>OK</div>')
+      })
+
+      it('has error', async () => {
+        const Component = () => {
+          throw new Error('error')
+        }
+        const App = (
+          <ErrorBoundary fallback={<div>Error</div>}>
+            <Component />
+          </ErrorBoundary>
+        )
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Error</div>')
+      })
+
+      it('has no error with Suspense', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <ErrorBoundary fallback={<div>Error</div>}>
+              <Suspense fallback={<div>Loading...</div>}>
+                <Content />
+              </Suspense>
+            </ErrorBoundary>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        resolve(1)
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
+      it('has error with Suspense', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          use(promise)
+          throw new Error('error')
+        }
+        const Component = () => {
+          return (
+            <ErrorBoundary fallback={<div>Error</div>}>
+              <Suspense fallback={<div>Loading...</div>}>
+                <Content />
+              </Suspense>
+            </ErrorBoundary>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        resolve(1)
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(root.innerHTML).toBe('<div>Error</div>')
+      })
+    })
+  })
+}

package/plugins/acryl-router/src/core/jsx/dom/components.ts

@@ -0,0 +1,39 @@
+import type { Child, FC, PropsWithChildren } from '../index.ts'
+import type { ErrorHandler, FallbackRender } from '../components.ts'
+import { DOM_ERROR_HANDLER } from '../constants.ts'
+import { Fragment } from './jsx-runtime.ts'
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const ErrorBoundary: FC<
+  PropsWithChildren<{
+    fallback?: Child
+    fallbackRender?: FallbackRender
+    onError?: ErrorHandler
+  }>
+> = (({ children, fallback, fallbackRender, onError }: any) => {
+  const res = Fragment({ children })
+  ;(res as any)[DOM_ERROR_HANDLER] = (err: any) => {
+    if (err instanceof Promise) {
+      throw err
+    }
+    onError?.(err)
+    return fallbackRender?.(err) || fallback
+  }
+  return res
+}) as any
+
+export const Suspense: FC<PropsWithChildren<{ fallback: any }>> = (({
+  children,
+  fallback,
+}: any) => {
+  const res = Fragment({ children })
+  ;(res as any)[DOM_ERROR_HANDLER] = (err: any, retry: () => void) => {
+    if (!(err instanceof Promise)) {
+      throw err
+    }
+    err.finally(retry)
+    return fallback
+  }
+  return res
+}) as any
+/* eslint-enable @typescript-eslint/no-explicit-any */

package/plugins/acryl-router/src/core/jsx/dom/context.test.tsx

@@ -0,0 +1,184 @@
+/** @jsxImportSource ../ */
+import { JSDOM } from 'jsdom'
+// run tests by old style jsx default
+// acryl-router/jsx/jsx-runtime and acryl-router/jsx/dom/jsx-runtime are tested in their respective settings
+import { createContext as createContextDom, render, useContext as useContextDom, useState } from './index.ts' // for dom
+import {
+  Suspense,
+  createContext as createContextCommon,
+  use,
+  useContext as useContextCommon,
+} from '../index.ts' // for common
+
+runner('Common', createContextCommon, useContextCommon)
+runner('DOM', createContextDom, useContextDom)
+
+function runner(
+  name: string,
+  createContext: typeof createContextCommon,
+  useContext: typeof useContextCommon
+) {
+  describe(name, () => {
+    beforeAll(() => {
+      global.requestAnimationFrame = (cb) => setTimeout(cb)
+    })
+
+    describe('Context', () => {
+      let dom: JSDOM
+      let root: HTMLElement
+      beforeEach(() => {
+        dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
+          runScripts: 'dangerously',
+        })
+        global.document = dom.window.document
+        global.HTMLElement = dom.window.HTMLElement
+        global.Text = dom.window.Text
+        root = document.getElementById('root') as HTMLElement
+      })
+
+      it('simple context', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Context.Provider value={1}>
+              <Content />
+            </Context.Provider>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
+      it('<Context> as a provider ', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Context value={1}>
+              <Content />
+            </Context>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
+      it('simple context with state', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const [count, setCount] = useState(0)
+          const num = useContext(Context)
+          return (
+            <>
+              <p>
+                {num} - {count}
+              </p>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </>
+          )
+        }
+        const Component = () => {
+          return (
+            <Context.Provider value={1}>
+              <Content />
+            </Context.Provider>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1 - 0</p><button>+</button>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<p>1 - 1</p><button>+</button>')
+      })
+
+      it('multiple provider', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <>
+              <Context.Provider value={1}>
+                <Content />
+              </Context.Provider>
+              <Context.Provider value={2}>
+                <Content />
+              </Context.Provider>
+            </>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p><p>2</p>')
+      })
+
+      it('nested provider', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <>
+              <Context.Provider value={1}>
+                <Content />
+                <Context.Provider value={3}>
+                  <Content />
+                </Context.Provider>
+                <Content />
+              </Context.Provider>
+            </>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p><p>3</p><p>1</p>')
+      })
+
+      it('inside Suspense', async () => {
+        const promise = Promise.resolve(2)
+        const AsyncComponent = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <>
+              <Context.Provider value={1}>
+                <Content />
+                <Suspense fallback={<div>Loading...</div>}>
+                  <Context.Provider value={3}>
+                    <Content />
+                    <AsyncComponent />
+                  </Context.Provider>
+                </Suspense>
+                <Content />
+              </Context.Provider>
+            </>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p><div>Loading...</div><p>1</p>')
+      })
+    })
+  })
+}

package/plugins/acryl-router/src/core/jsx/dom/context.ts

@@ -0,0 +1,52 @@
+import type { Child } from '../base.ts'
+import { DOM_ERROR_HANDLER } from '../constants.ts'
+import type { Context } from '../context.ts'
+import { globalContexts } from '../context.ts'
+import { setInternalTagFlag } from './utils.ts'
+
+export const createContextProviderFunction =
+  <T>(values: T[]): Function =>
+  ({ value, children }: { value: T; children: Child[] }) => {
+    if (!children) {
+      return undefined
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const props: { children: any } = {
+      children: [
+        {
+          tag: setInternalTagFlag(() => {
+            values.push(value)
+          }),
+          props: {},
+        },
+      ],
+    }
+    if (Array.isArray(children)) {
+      props.children.push(...children.flat())
+    } else {
+      props.children.push(children)
+    }
+    props.children.push({
+      tag: setInternalTagFlag(() => {
+        values.pop()
+      }),
+      props: {},
+    })
+    const res = { tag: '', props, type: '' }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(res as any)[DOM_ERROR_HANDLER] = (err: unknown) => {
+      values.pop()
+      throw err
+    }
+    return res
+  }
+
+export const createContext = <T>(defaultValue: T): Context<T> => {
+  const values = [defaultValue]
+  const context: Context<T> = createContextProviderFunction(values) as Context<T>
+  context.values = values
+  context.Provider = context
+  globalContexts.push(context as Context<unknown>)
+  return context
+}