acrylblends 0.6.2 → 0.6.3

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

@@ -0,0 +1,149 @@
+/** @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 { render } from './index.ts'
+import type { JSXNode } from '../index.ts'
+import { Style, createCssContext, css, rawCssString } from '../../helper/css/index.ts'
+import { minify } from '../../helper/css/common.ts'
+import { renderTest } from '../../helper/css/common.case.test.tsx'
+
+describe('Style and css for jsx/dom', () => {
+  beforeAll(() => {
+    global.requestAnimationFrame = (cb) => setTimeout(cb)
+  })
+
+  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.SVGElement = dom.window.SVGElement
+    global.Text = dom.window.Text
+    root = document.getElementById('root') as HTMLElement
+  })
+
+  it('<Style />', async () => {
+    const App = () => {
+      return (
+        <div>
+          <Style />
+          <div
+            class={css`
+              color: red;
+            `}
+          >
+            red
+          </div>
+        </div>
+      )
+    }
+    render(<App />, root)
+    expect(root.innerHTML).toBe(
+      '<div><style id="acryl-css"></style><div class="css-3142110215">red</div></div>'
+    )
+    await Promise.resolve()
+    expect(root.querySelector('style')?.sheet?.cssRules[0].cssText).toBe(
+      '.css-3142110215 {color: red;}'
+    )
+  })
+
+  it('<Style nonce="1234" />', async () => {
+    const App = () => {
+      return (
+        <div>
+          <Style nonce='1234' />
+        </div>
+      )
+    }
+    render(<App />, root)
+    expect(root.innerHTML).toBe('<div><style id="acryl-css" nonce="1234"></style></div>')
+  })
+
+  it('<Style>{css`global`}</Style>', async () => {
+    const App = () => {
+      return (
+        <div>
+          <Style>{css`
+            color: red;
+          `}</Style>
+          <div
+            class={css`
+              color: red;
+            `}
+          >
+            red
+          </div>
+        </div>
+      )
+    }
+    render(<App />, root)
+    expect(root.innerHTML).toBe(
+      '<div><style id="acryl-css">color:red</style><div class="css-3142110215">red</div></div>'
+    )
+  })
+
+  it('classNameSlug with createCssContext', async () => {
+    const { css: customCss, Style: CustomStyle } = createCssContext({
+      id: 'custom-dom',
+      classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
+    })
+    const App = () => {
+      return (
+        <div>
+          <CustomStyle />
+          <div
+            class={customCss`
+              /* hero */
+              color: blue;
+            `}
+          >
+            blue
+          </div>
+        </div>
+      )
+    }
+    render(<App />, root)
+    expect(root.innerHTML).toBe(
+      '<div><style id="custom-dom"></style><div class="h-hero">blue</div></div>'
+    )
+    await Promise.resolve()
+    expect(root.querySelector('style')?.sheet?.cssRules[0].cssText).toBe('.h-hero {color: blue;}')
+  })
+})
+
+describe('render', () => {
+  renderTest(() => {
+    const cssContext = createCssContext({ id: 'acryl-css' })
+
+    const 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
+    const root = document.getElementById('root') as HTMLElement
+
+    const toString = async (node: JSXNode) => {
+      render(node, root)
+      await Promise.resolve()
+      const style = root.querySelector('style')
+      if (style) {
+        style.textContent = minify(
+          [...(style.sheet?.cssRules || [])].map((r) => r.cssText).join('') || ''
+        )
+      }
+      return root.innerHTML
+    }
+
+    return {
+      toString,
+      rawCssString,
+      ...cssContext,
+      support: { nest: false },
+    }
+  })
+})

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

@@ -0,0 +1,263 @@
+/**
+ * @module
+ * This module provides APIs that enable `acryl-router/jsx/dom` to support.
+ */
+
+import type { FC, PropsWithChildren } from '../index.ts'
+import type {
+  ClassNameSlug,
+  CssClassName,
+  CssVariableType,
+  OnInvalidSlug,
+} from '../../helper/css/common.ts'
+import {
+  CLASS_NAME,
+  DEFAULT_STYLE_ID,
+  PSEUDO_GLOBAL_SELECTOR,
+  SELECTOR,
+  SELECTORS,
+  STYLE_STRING,
+  cssCommon,
+  cxCommon,
+  keyframesCommon,
+  viewTransitionCommon,
+} from '../../helper/css/common.ts'
+export { rawCssString } from '../../helper/css/common.ts'
+
+const splitRule = (rule: string): string[] => {
+  const result: string[] = []
+  let startPos = 0
+  let depth = 0
+  for (let i = 0, len = rule.length; i < len; i++) {
+    const char = rule[i]
+
+    // consume quote
+
+    if (char === "'" || char === '"') {
+      const quote = char
+      i++
+      for (; i < len; i++) {
+        if (rule[i] === '\\') {
+          i++
+          continue
+        }
+        if (rule[i] === quote) {
+          break
+        }
+      }
+      continue
+    }
+
+    // comments are removed from the rule in advance
+    if (char === '{') {
+      depth++
+      continue
+    }
+    if (char === '}') {
+      depth--
+      if (depth === 0) {
+        result.push(rule.slice(startPos, i + 1))
+        startPos = i + 1
+      }
+      continue
+    }
+  }
+  return result
+}
+
+interface CreateCssJsxDomObjectsType {
+  (args: { id: Readonly<string> }): readonly [
+    {
+      toString(this: CssClassName): string
+    },
+    FC<PropsWithChildren<void>>,
+  ]
+}
+
+export const createCssJsxDomObjects: CreateCssJsxDomObjectsType = ({ id }) => {
+  let styleSheet: CSSStyleSheet | null | undefined = undefined
+  const findStyleSheet = (): [CSSStyleSheet, Set<string>] | [] => {
+    if (!styleSheet) {
+      styleSheet = document.querySelector<HTMLStyleElement>(`style#${id}`)
+        ?.sheet as CSSStyleSheet | null
+      if (styleSheet) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(styleSheet as any).addedStyles = new Set<string>()
+      }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return styleSheet ? [styleSheet, (styleSheet as any).addedStyles] : []
+  }
+
+  const insertRule = (className: string, styleString: string) => {
+    const [sheet, addedStyles] = findStyleSheet()
+    if (!sheet || !addedStyles) {
+      Promise.resolve().then(() => {
+        if (!findStyleSheet()[0]) {
+          throw new Error('style sheet not found')
+        }
+        insertRule(className, styleString)
+      })
+      return
+    }
+
+    if (!addedStyles.has(className)) {
+      addedStyles.add(className)
+      ;(className.startsWith(PSEUDO_GLOBAL_SELECTOR)
+        ? splitRule(styleString)
+        : [`${className[0] === '@' ? '' : '.'}${className}{${styleString}}`]
+      ).forEach((rule) => {
+        sheet.insertRule(rule, sheet.cssRules.length)
+      })
+    }
+  }
+
+  const cssObject = {
+    toString(this: CssClassName): string {
+      const selector = this[SELECTOR]
+      insertRule(selector, this[STYLE_STRING])
+      this[SELECTORS].forEach(({ [CLASS_NAME]: className, [STYLE_STRING]: styleString }) => {
+        insertRule(className, styleString)
+      })
+
+      return this[CLASS_NAME]
+    },
+  }
+
+  const Style: FC<PropsWithChildren<{ nonce?: string }>> = ({ children, nonce }) =>
+    ({
+      tag: 'style',
+      props: {
+        id,
+        nonce,
+        children:
+          children &&
+          (Array.isArray(children) ? children : [children]).map(
+            (c) => (c as unknown as CssClassName)[STYLE_STRING]
+          ),
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }) as any
+
+  return [cssObject, Style] as const
+}
+
+interface CssType {
+  (strings: TemplateStringsArray, ...values: CssVariableType[]): string
+}
+
+interface CxType {
+  (...args: (string | boolean | null | undefined)[]): string
+}
+
+interface KeyframesType {
+  (strings: TemplateStringsArray, ...values: CssVariableType[]): CssClassName
+}
+
+interface ViewTransitionType {
+  (strings: TemplateStringsArray, ...values: CssVariableType[]): string
+  (content: string): string
+  (): string
+}
+
+interface DefaultContextType {
+  css: CssType
+  cx: CxType
+  keyframes: KeyframesType
+  viewTransition: ViewTransitionType
+  Style: FC<PropsWithChildren<void>>
+}
+
+/**
+ * @experimental
+ * `createCssContext` is an experimental feature.
+ * The API might be changed.
+ *
+ * @param options.id - The ID for the style element
+ * @param options.classNameSlug - Optional function to customize generated CSS class names
+ * @param options.onInvalidSlug - Optional callback function called when an invalid slug is returned from ClassNameSlug
+ */
+export const createCssContext = ({
+  id,
+  classNameSlug,
+  onInvalidSlug,
+}: {
+  id: Readonly<string>
+  classNameSlug?: ClassNameSlug
+  onInvalidSlug?: OnInvalidSlug
+}): DefaultContextType => {
+  const [cssObject, Style] = createCssJsxDomObjects({ id })
+
+  const newCssClassNameObject = (cssClassName: CssClassName): string => {
+    cssClassName.toString = cssObject.toString
+    return cssClassName as unknown as string
+  }
+
+  const css: CssType = (strings, ...values) => {
+    return newCssClassNameObject(cssCommon(strings, values, classNameSlug, onInvalidSlug))
+  }
+
+  const cx: CxType = (...args) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    args = cxCommon(args as any) as any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return css(Array(args.length).fill('') as any, ...args)
+  }
+
+  const keyframes: KeyframesType = (strings, ...values) =>
+    keyframesCommon(strings, values, classNameSlug, onInvalidSlug)
+
+  const viewTransition: ViewTransitionType = ((
+    strings: TemplateStringsArray | string | undefined,
+    ...values: CssVariableType[]
+  ) => {
+    return newCssClassNameObject(
+      viewTransitionCommon(strings as any, values, classNameSlug, onInvalidSlug) // eslint-disable-line @typescript-eslint/no-explicit-any
+    )
+  }) as ViewTransitionType
+
+  return {
+    css,
+    cx,
+    keyframes,
+    viewTransition,
+    Style,
+  }
+}
+
+const defaultContext: DefaultContextType = createCssContext({ id: DEFAULT_STYLE_ID })
+
+/**
+ * @experimental
+ * `css` is an experimental feature.
+ * The API might be changed.
+ */
+export const css = defaultContext.css
+
+/**
+ * @experimental
+ * `cx` is an experimental feature.
+ * The API might be changed.
+ */
+export const cx = defaultContext.cx
+
+/**
+ * @experimental
+ * `keyframes` is an experimental feature.
+ * The API might be changed.
+ */
+export const keyframes = defaultContext.keyframes
+
+/**
+ * @experimental
+ * `viewTransition` is an experimental feature.
+ * The API might be changed.
+ */
+export const viewTransition = defaultContext.viewTransition
+
+/**
+ * @experimental
+ * `Style` is an experimental feature.
+ * The API might be changed.
+ */
+export const Style = defaultContext.Style

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

@@ -0,0 +1,172 @@
+/** @jsxImportSource ../../ */
+import { JSDOM } from 'jsdom'
+import { useActionState, useFormStatus, useOptimistic } from './index.ts'
+import { render, useCallback, useState } from '../index.ts'
+
+describe('Hooks', () => {
+  beforeAll(() => {
+    global.requestAnimationFrame = (cb) => setTimeout(cb)
+  })
+
+  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.SVGElement = dom.window.SVGElement
+    global.Text = dom.window.Text
+    global.FormData = dom.window.FormData
+    root = document.getElementById('root') as HTMLElement
+  })
+
+  describe('useActionState', () => {
+    it('should return initial state', () => {
+      const [state] = useActionState(() => {}, 'initial')
+      expect(state).toBe('initial')
+    })
+
+    it('should return updated state', async () => {
+      const action = vi.fn().mockReturnValue('updated')
+
+      const App = () => {
+        const [state, formAction] = useActionState(action, 'initial')
+        return (
+          <>
+            <div>{state}</div>
+            <form action={formAction}>
+              <input type='text' name='name' value='updated' />
+              <button>Submit</button>
+            </form>
+          </>
+        )
+      }
+
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<div>initial</div><form><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<div>updated</div><form><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+
+      expect(action).toHaveBeenCalledOnce()
+      const [initialState, formData] = action.mock.calls[0]
+      expect(initialState).toBe('initial')
+      expect(formData).toBeInstanceOf(FormData)
+      expect(formData.get('name')).toBe('updated')
+    })
+  })
+
+  describe('useFormStatus', () => {
+    it('should return initial state', () => {
+      const status = useFormStatus()
+      expect(status).toEqual({
+        pending: false,
+        data: null,
+        method: null,
+        action: null,
+      })
+    })
+
+    it('should return updated state', async () => {
+      let formResolve: () => void = () => {}
+      const formPromise = new Promise<void>((r) => (formResolve = r))
+      let status: ReturnType<typeof useFormStatus> | undefined
+      const Status = () => {
+        status = useFormStatus()
+        return null
+      }
+      const App = () => {
+        const [, setCount] = useState(0)
+        const action = useCallback(() => {
+          setCount((count) => count + 1)
+          return formPromise
+        }, [])
+        return (
+          <>
+            <form action={action}>
+              <Status />
+              <input type='text' name='name' value='updated' />
+              <button>Submit</button>
+            </form>
+          </>
+        )
+      }
+
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<form><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(status).toEqual({
+        pending: true,
+        data: expect.any(FormData),
+        method: 'post',
+        action: expect.any(Function),
+      })
+      formResolve?.()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(status).toEqual({
+        pending: false,
+        data: null,
+        method: null,
+        action: null,
+      })
+    })
+  })
+
+  describe('useOptimistic', () => {
+    it('should return updated state', async () => {
+      let formResolve: () => void = () => {}
+      const formPromise = new Promise<void>((r) => (formResolve = r))
+      const App = () => {
+        const [count, setCount] = useState(0)
+        const [optimisticCount, setOptimisticCount] = useOptimistic(count, (_c, n: number) => n)
+        const action = useCallback(async () => {
+          setOptimisticCount(count + 1)
+          await formPromise
+          setCount((count) => count + 2)
+        }, [])
+
+        return (
+          <>
+            <form action={action}>
+              <div>{optimisticCount}</div>
+              <input type='text' name='name' value='updated' />
+              <button>Submit</button>
+            </form>
+          </>
+        )
+      }
+
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<form><div>0</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<form><div>1</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      formResolve?.()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<form><div>2</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,91 @@
+/**
+ * Provide hooks used only in jsx/dom
+ */
+
+import { PERMALINK } from '../../constants.ts'
+import type { Context } from '../../context.ts'
+import { useContext } from '../../context.ts'
+import { useCallback, useState } from '../../hooks/index.ts'
+import { createContext } from '../context.ts'
+
+type FormStatus =
+  | {
+      pending: false
+      data: null
+      method: null
+      action: null
+    }
+  | {
+      pending: true
+      data: FormData
+      method: 'get' | 'post'
+      action: string | ((formData: FormData) => void | Promise<void>)
+    }
+export const FormContext: Context<FormStatus> = createContext<FormStatus>({
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+})
+
+const actions: Set<Promise<unknown>> = new Set()
+export const registerAction = (action: Promise<unknown>) => {
+  actions.add(action)
+  action.finally(() => actions.delete(action))
+}
+
+/**
+ * This hook returns the current form status
+ * @returns FormStatus
+ */
+export const useFormStatus = (): FormStatus => {
+  return useContext(FormContext)
+}
+
+/**
+ * This hook returns the current state and a function to update the state optimistically
+ * The current state is updated optimistically and then reverted to the original state when all actions are resolved
+ * @param state
+ * @param updateState
+ * @returns [T, (action: N) => void]
+ */
+export const useOptimistic = <T, N>(
+  state: T,
+  updateState: (currentState: T, action: N) => T
+): [T, (action: N) => void] => {
+  const [optimisticState, setOptimisticState] = useState(state)
+  if (actions.size > 0) {
+    Promise.all(actions).finally(() => {
+      setOptimisticState(state)
+    })
+  } else {
+    setOptimisticState(state)
+  }
+
+  const cb = useCallback((newData: N) => {
+    setOptimisticState((currentState) => updateState(currentState, newData))
+  }, [])
+
+  return [optimisticState, cb]
+}
+
+/**
+ * This hook returns the current state and a function to update the state by form action
+ * @param fn
+ * @param initialState
+ * @param permalink
+ * @returns [T, (data: FormData) => void]
+ */
+export const useActionState = <T>(
+  fn: Function,
+  initialState: T,
+  permalink?: string
+): [T, Function] => {
+  const [state, setState] = useState(initialState)
+  const actionState = async (data: FormData) => {
+    setState(await fn(state, data))
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(actionState as any)[PERMALINK] = permalink
+  return [state, actionState]
+}