acrylblends 0.6.2 → 0.6.4

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
+}

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.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]
+}

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

@@ -0,0 +1,170 @@
+/**
+ * @module
+ * This module provides APIs for `acryl-router/jsx/dom`.
+ */
+
+import { isValidElement, reactAPICompatVersion, shallowEqual } from '../base.ts'
+import type { Child, DOMAttributes, JSX, JSXNode, Props, FC, MemorableFC } from '../base.ts'
+import { Children } from '../children.ts'
+import { DOM_MEMO } from '../constants.ts'
+import { useContext } from '../context.ts'
+import {
+  createRef,
+  forwardRef,
+  startTransition,
+  startViewTransition,
+  use,
+  useCallback,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  useViewTransition,
+} from '../hooks/index.ts'
+import { ErrorBoundary, Suspense } from './components.ts'
+import { createContext } from './context.ts'
+import { useActionState, useFormStatus, useOptimistic } from './hooks/index.ts'
+import { Fragment, jsx } from './jsx-runtime.ts'
+import { createPortal, flushSync } from './render.ts'
+
+export { render } from './render.ts'
+
+const createElement = (
+  tag: string | ((props: Props) => JSXNode),
+  props: Props | null,
+  ...children: Child[]
+): JSXNode => {
+  const jsxProps: Props = props ? { ...props } : {}
+  if (children.length) {
+    jsxProps.children = children.length === 1 ? children[0] : children
+  }
+
+  let key = undefined
+  if ('key' in jsxProps) {
+    key = jsxProps.key
+    delete jsxProps.key
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return jsx(tag, jsxProps, key) as any
+}
+
+const cloneElement = <T extends JSXNode | JSX.Element>(
+  element: T,
+  props: Props,
+  ...children: Child[]
+): T => {
+  return jsx(
+    (element as JSXNode).tag,
+    {
+      ...(element as JSXNode).props,
+      ...props,
+      children: children.length ? children : (element as JSXNode).props.children,
+    },
+    (element as JSXNode).key
+  ) as T
+}
+
+const memo = <T>(
+  component: FC<T>,
+  propsAreEqual: (prevProps: Readonly<T>, nextProps: Readonly<T>) => boolean = shallowEqual
+): FC<T> => {
+  const wrapper = ((props: T) => component(props)) as MemorableFC<T>
+  wrapper[DOM_MEMO] = propsAreEqual
+  return wrapper as FC<T>
+}
+
+export {
+  reactAPICompatVersion as version,
+  createElement as jsx,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  use,
+  startTransition,
+  useTransition,
+  useDeferredValue,
+  startViewTransition,
+  useViewTransition,
+  useMemo,
+  useLayoutEffect,
+  useInsertionEffect,
+  useReducer,
+  useId,
+  useDebugValue,
+  createRef,
+  forwardRef,
+  useImperativeHandle,
+  useSyncExternalStore,
+  useFormStatus,
+  useActionState,
+  useOptimistic,
+  Suspense,
+  ErrorBoundary,
+  createContext,
+  useContext,
+  memo,
+  isValidElement,
+  createElement,
+  cloneElement,
+  Children,
+  Fragment,
+  Fragment as StrictMode,
+  flushSync,
+  createPortal,
+}
+
+export type { DOMAttributes }
+
+export default {
+  version: reactAPICompatVersion,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  use,
+  startTransition,
+  useTransition,
+  useDeferredValue,
+  startViewTransition,
+  useViewTransition,
+  useMemo,
+  useLayoutEffect,
+  useInsertionEffect,
+  useReducer,
+  useId,
+  useDebugValue,
+  createRef,
+  forwardRef,
+  useImperativeHandle,
+  useSyncExternalStore,
+  useFormStatus,
+  useActionState,
+  useOptimistic,
+  Suspense,
+  ErrorBoundary,
+  createContext,
+  useContext,
+  memo,
+  isValidElement,
+  createElement,
+  cloneElement,
+  Children,
+  Fragment,
+  StrictMode: Fragment,
+  flushSync,
+  createPortal,
+}
+
+export type { Context } from '../context.ts'
+
+export type * from '../types.ts'