acrylblends 0.6.2 → 0.6.3

package/plugins/acryl-router/src/core/jsx/base.ts

@@ -0,0 +1,490 @@
+import { raw } from '../helper/html/index.ts'
+import { escapeToBuffer, resolveCallbackSync, stringBufferToString } from '../utils/html.ts'
+import type { HtmlEscaped, HtmlEscapedString, StringBufferWithCallbacks } from '../utils/html.ts'
+import { DOM_RENDERER, DOM_MEMO } from './constants.ts'
+import {
+  captureRenderContext,
+  createContext,
+  globalContexts,
+  runWithRenderContext,
+  useContext,
+} from './context.ts'
+import type { Context } from './context.ts'
+import { domRenderers } from './intrinsic-element/common.ts'
+import * as intrinsicElementTags from './intrinsic-element/components.ts'
+import type { JSX as AcrylJSX } from './intrinsic-elements.ts'
+import {
+  isValidAttributeName,
+  isValidTagName,
+  normalizeIntrinsicElementKey,
+  styleObjectForEach,
+} from './utils.ts'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Props = Record<string, any>
+type FunctionComponentResult =
+  | HtmlEscapedString
+  | JSXNode
+  | Child[]
+  | Promise<HtmlEscapedString | JSXNode | Child[]>
+  | null
+export type FC<P = Props> = {
+  (props: P): FunctionComponentResult
+  defaultProps?: Partial<P> | undefined
+  displayName?: string | undefined
+}
+export type DOMAttributes = AcrylJSX.HTMLAttributes
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace JSX {
+  export type Element = HtmlEscapedString | Promise<HtmlEscapedString>
+  export type ElementType = string | ((props: never) => FunctionComponentResult)
+  export interface ElementChildrenAttribute {
+    children: Child
+  }
+  // `AcrylJSX.IntrinsicElements`, not the top-level alias: the bundled dts emit renames the namespace
+  // import correctly but drops an import alias that collides with this member name (TS2310).
+  export interface IntrinsicElements extends AcrylJSX.IntrinsicElements {
+    [tagName: string]: Props
+  }
+  export interface IntrinsicAttributes {
+    key?: string | number | bigint | null | undefined
+  }
+}
+
+let nameSpaceContext: Context<string> | undefined = undefined
+export const getNameSpaceContext = () => nameSpaceContext
+
+const toSVGAttributeName = (key: string): string =>
+  /[A-Z]/.test(key) &&
+  // Presentation attributes are findable in style object. "clip-path", "font-size", "stroke-width", etc.
+  // Or other un-deprecated kebab-case attributes. "overline-position", "paint-order", "strikethrough-position", etc.
+  key.match(
+    /^(?:al|basel|clip(?:Path|Rule)$|co|do|fill|fl|fo|gl|let|lig|i|marker[EMS]|o|pai|pointe|sh|st[or]|text[^L]|tr|u|ve|w)/
+  )
+    ? key.replace(/([A-Z])/g, '-$1').toLowerCase()
+    : key
+
+const emptyTags = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]
+export const booleanAttributes = [
+  'allowfullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'download',
+  'formnovalidate',
+  'hidden',
+  'inert',
+  'ismap',
+  'itemscope',
+  'loop',
+  'multiple',
+  'muted',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'selected',
+]
+
+type SuspendedContext = <T>(callback: () => T) => T
+
+const resolveFunctionComponentResult = (
+  result: Promise<string | JSXNode | Child[]>,
+  suspendedContext?: SuspendedContext
+): Promise<string> =>
+  result.then((resolved) => {
+    if (
+      typeof resolved !== 'string' &&
+      !Array.isArray(resolved) &&
+      !(resolved instanceof JSXNode)
+    ) {
+      return resolved
+    }
+    const children = Array.isArray(resolved) ? resolved : [resolved as Child]
+    const render = () => {
+      const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
+      childrenToStringToBuffer(children, buffer)
+      return buffer.length === 1
+        ? raw(buffer[0], buffer.callbacks)
+        : stringBufferToString(buffer, buffer.callbacks)
+    }
+    return suspendedContext ? suspendedContext(render) : runWithRenderContext(render)
+  })
+
+const childrenToStringToBuffer = (children: Child[], buffer: StringBufferWithCallbacks): void => {
+  for (let i = 0, len = children.length; i < len; i++) {
+    const child = children[i]
+    if (typeof child === 'string') {
+      escapeToBuffer(child, buffer)
+    } else if (typeof child === 'boolean' || child === null || child === undefined) {
+      continue
+    } else if (child instanceof JSXNode) {
+      child.toStringToBuffer(buffer)
+    } else if (typeof child === 'number') {
+      ;(buffer[0] as string) += child
+    } else if ((child as unknown as HtmlEscaped).isEscaped) {
+      ;(buffer[0] as string) += child
+      const callbacks = (child as unknown as HtmlEscapedString).callbacks
+      if (callbacks) {
+        buffer.callbacks ||= []
+        buffer.callbacks.push(...callbacks)
+      }
+    } else if (child instanceof Promise) {
+      buffer.unshift('', child)
+    } else {
+      // `child` type is `Child[]`, so stringify recursively
+      childrenToStringToBuffer(child, buffer)
+    }
+  }
+}
+
+export type Child =
+  | string
+  | Promise<string>
+  | number
+  | JSXNode
+  | null
+  | undefined
+  | boolean
+  | Child[]
+
+export const renderChildren = (children: Child[]): HtmlEscapedString | Promise<HtmlEscapedString> =>
+  runWithRenderContext(() => {
+    const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
+    childrenToStringToBuffer(children, buffer)
+    return buffer.length === 1
+      ? raw(buffer[0], buffer.callbacks)
+      : stringBufferToString(buffer, buffer.callbacks)
+  })
+
+export const isUntrustedObject = (value: unknown): boolean =>
+  typeof value === 'object' &&
+  value !== null &&
+  !Array.isArray(value) &&
+  !(value instanceof JSXNode) &&
+  !(value instanceof Promise) &&
+  !(value as HtmlEscaped).isEscaped &&
+  typeof (value as { toString?: unknown }).toString === 'function'
+
+export const renderUntrustedObject = (
+  value: unknown
+): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const stringified = (value as { toString(): unknown }).toString()
+  const escape = (result: unknown) => renderChildren([String(result)])
+  return stringified instanceof Promise ? stringified.then(escape) : escape(stringified)
+}
+
+export class JSXNode implements HtmlEscaped {
+  tag: string | Function
+  props: Props
+  key?: string
+  children: Child[]
+  isEscaped: true = true as const
+  constructor(tag: string | Function, props: Props, children: Child[]) {
+    if (typeof tag !== 'function' && !isValidTagName(tag)) {
+      throw new Error(`Invalid JSX tag name: ${tag}`)
+    }
+    this.tag = tag
+    this.props = props
+    this.children = children
+  }
+
+  get type(): string | Function {
+    return this.tag as string
+  }
+
+  // Added for compatibility with libraries that rely on React's internal structure
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  get ref(): any {
+    return this.props.ref || null
+  }
+
+  toString(): string | Promise<string> {
+    const render = () => {
+      const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
+      this.toStringToBuffer(buffer)
+      return buffer.length === 1
+        ? 'callbacks' in buffer
+          ? resolveCallbackSync(raw(buffer[0], buffer.callbacks)).toString()
+          : buffer[0]
+        : stringBufferToString(buffer, buffer.callbacks)
+    }
+    return runWithRenderContext(render)
+  }
+
+  toStringToBuffer(buffer: StringBufferWithCallbacks): void {
+    const tag = this.tag as string
+    const props = this.props
+    let { children } = this
+
+    buffer[0] += `<${tag}`
+
+    const normalizeKey: (key: string) => string =
+      tag === 'svg' || (nameSpaceContext && useContext(nameSpaceContext) === 'svg')
+        ? (key) => toSVGAttributeName(normalizeIntrinsicElementKey(key))
+        : (key) => normalizeIntrinsicElementKey(key)
+    for (let [key, v] of Object.entries(props)) {
+      key = normalizeKey(key)
+      if (!isValidAttributeName(key)) {
+        continue
+      }
+      if (key === 'children') {
+        // skip children
+      } else if (key === 'style' && typeof v === 'object') {
+        // object to style strings
+        let styleStr = ''
+        styleObjectForEach(v, (property, value) => {
+          if (value != null) {
+            styleStr += `${styleStr ? ';' : ''}${property}:${value}`
+          }
+        })
+        buffer[0] += ' style="'
+        escapeToBuffer(styleStr, buffer)
+        buffer[0] += '"'
+      } else if (typeof v === 'string') {
+        buffer[0] += ` ${key}="`
+        escapeToBuffer(v, buffer)
+        buffer[0] += '"'
+      } else if (v === null || v === undefined) {
+        // Do nothing
+      } else if (typeof v === 'number' || (v as HtmlEscaped).isEscaped) {
+        buffer[0] += ` ${key}="${v}"`
+      } else if (typeof v === 'boolean' && booleanAttributes.includes(key)) {
+        if (v) {
+          buffer[0] += ` ${key}=""`
+        }
+      } else if (key === 'dangerouslySetInnerHTML') {
+        if (children.length > 0) {
+          throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.')
+        }
+
+        children = [raw(v.__html)]
+      } else if (v instanceof Promise) {
+        buffer[0] += ` ${key}="`
+        buffer.unshift('"', v)
+      } else if (typeof v === 'function') {
+        if (!key.startsWith('on') && key !== 'ref') {
+          throw new Error(`Invalid prop '${key}' of type 'function' supplied to '${tag}'.`)
+        }
+        // maybe event handler for client components, just ignore in server components
+      } else {
+        buffer[0] += ` ${key}="`
+        escapeToBuffer(v.toString(), buffer)
+        buffer[0] += '"'
+      }
+    }
+
+    if (emptyTags.includes(tag as string) && children.length === 0) {
+      buffer[0] += '/>'
+      return
+    }
+
+    buffer[0] += '>'
+
+    childrenToStringToBuffer(children, buffer)
+
+    buffer[0] += `</${tag}>`
+  }
+}
+
+class JSXFunctionNode extends JSXNode {
+  override toStringToBuffer(buffer: StringBufferWithCallbacks): void {
+    const { children } = this
+
+    const props = { ...this.props }
+    if (children.length) {
+      props.children = children.length === 1 ? children[0] : children
+    }
+
+    const res = (this.tag as Function).call(null, props)
+
+    if (typeof res === 'boolean' || res == null) {
+      // boolean or null or undefined
+      return
+    } else if (res instanceof Promise) {
+      if (globalContexts.length === 0) {
+        buffer.unshift('', resolveFunctionComponentResult(res))
+      } else {
+        // save the current context state for resuming the suspended subtree
+        buffer.unshift('', resolveFunctionComponentResult(res, captureRenderContext()))
+      }
+    } else if (res instanceof JSXNode) {
+      res.toStringToBuffer(buffer)
+    } else if (Array.isArray(res)) {
+      childrenToStringToBuffer(res, buffer)
+    } else if (typeof res === 'number' || (res as HtmlEscaped).isEscaped) {
+      buffer[0] += res
+      if (res.callbacks) {
+        buffer.callbacks ||= []
+        buffer.callbacks.push(...res.callbacks)
+      }
+    } else {
+      escapeToBuffer(res, buffer)
+    }
+  }
+}
+
+export class JSXFragmentNode extends JSXNode {
+  override toStringToBuffer(buffer: StringBufferWithCallbacks): void {
+    childrenToStringToBuffer(this.children, buffer)
+  }
+}
+
+export const jsx = (tag: string | Function, props: Props | null, ...children: Child[]): JSXNode => {
+  props ??= {}
+  if (children.length) {
+    props.children = children.length === 1 ? children[0] : children
+  }
+
+  const key = props.key
+  delete props['key']
+
+  const node = jsxFn(tag, props, children)
+  node.key = key
+  return node
+}
+
+let initDomRenderer = false
+export const jsxFn = (tag: string | Function, props: Props, children: Child[]): JSXNode => {
+  if (!initDomRenderer) {
+    for (const k in domRenderers) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(intrinsicElementTags[k as keyof typeof intrinsicElementTags] as any)[DOM_RENDERER] =
+        domRenderers[k]
+    }
+    initDomRenderer = true
+  }
+
+  if (typeof tag === 'function') {
+    return new JSXFunctionNode(tag, props, children)
+  } else if (intrinsicElementTags[tag as keyof typeof intrinsicElementTags]) {
+    return new JSXFunctionNode(
+      intrinsicElementTags[tag as keyof typeof intrinsicElementTags],
+      props,
+      children
+    )
+  } else if (tag === 'svg' || tag === 'head') {
+    nameSpaceContext ||= createContext('')
+    return new JSXNode(tag, props, [
+      new JSXFunctionNode(
+        nameSpaceContext,
+        {
+          value: tag,
+        },
+        children
+      ),
+    ])
+  } else {
+    return new JSXNode(tag, props, children)
+  }
+}
+
+export const shallowEqual = (a: Props, b: Props): boolean => {
+  if (a === b) {
+    return true
+  }
+
+  const aKeys = Object.keys(a).sort()
+  const bKeys = Object.keys(b).sort()
+  if (aKeys.length !== bKeys.length) {
+    return false
+  }
+
+  for (let i = 0, len = aKeys.length; i < len; i++) {
+    if (
+      aKeys[i] === 'children' &&
+      bKeys[i] === 'children' &&
+      !a.children?.length &&
+      !b.children?.length
+    ) {
+      continue
+    } else if (a[aKeys[i]] !== b[aKeys[i]]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export type MemorableFC<T> = FC<T> & {
+  [DOM_MEMO]: (prevProps: Readonly<T>, nextProps: Readonly<T>) => boolean
+}
+export const memo = <T>(
+  component: FC<T>,
+  propsAreEqual: (prevProps: Readonly<T>, nextProps: Readonly<T>) => boolean = shallowEqual
+): FC<T> => {
+  const wrapper: MemorableFC<T> = ((props: T) => component(props)) as MemorableFC<T>
+
+  // This function is for toString(), but it can also be used for DOM renderer.
+  // So, set DOM_MEMO and DOM_RENDERER for DOM renderer.
+  wrapper[DOM_MEMO] = propsAreEqual
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(wrapper as any)[DOM_RENDERER] = component
+
+  return wrapper as FC<T>
+}
+
+export const Fragment = ({
+  children,
+}: {
+  key?: string
+  children?: Child | HtmlEscapedString
+}): HtmlEscapedString => {
+  return new JSXFragmentNode(
+    '',
+    {
+      children,
+    },
+    Array.isArray(children) ? children : children ? [children] : []
+  ) as never
+}
+
+export const isValidElement = (element: unknown): element is JSXNode => {
+  return !!(element && typeof element === 'object' && 'tag' in element && 'props' in element)
+}
+
+export const cloneElement = <T extends JSXNode | JSX.Element>(
+  element: T,
+  props: Partial<Props>,
+  ...children: Child[]
+): T => {
+  let childrenToClone
+  if (children.length > 0) {
+    childrenToClone = children
+  } else {
+    const c = (element as JSXNode).props.children
+    childrenToClone = c !== undefined ? (Array.isArray(c) ? c : [c]) : []
+  }
+  return jsx(
+    (element as JSXNode).tag,
+    { ...(element as JSXNode).props, ...props },
+    ...childrenToClone
+  ) as T
+}
+
+export const reactAPICompatVersion = '19.0.0-acryl-jsx'

package/plugins/acryl-router/src/core/jsx/children.test.ts

@@ -0,0 +1,52 @@
+import { createElement } from './index.ts'
+import { Children } from './children.ts'
+
+describe('map', () => {
+  it('should map children', () => {
+    const element = createElement('div', null, 1, 2, 3)
+    const result = Children.map(element.children, (child) => (child as number) * 2)
+    expect(result).toEqual([2, 4, 6])
+  })
+})
+
+describe('forEach', () => {
+  it('should iterate children', () => {
+    const element = createElement('div', null, 1, 2, 3)
+    const result: number[] = []
+    Children.forEach(element.children, (child) => {
+      result.push(child as number)
+    })
+    expect(result).toEqual([1, 2, 3])
+  })
+})
+
+describe('count', () => {
+  it('should count children', () => {
+    const element = createElement('div', null, 1, 2, 3)
+    const result = Children.count(element.children)
+    expect(result).toBe(3)
+  })
+})
+
+describe('only', () => {
+  it('should return the only child', () => {
+    const element = createElement('div', null, 1)
+    const result = Children.only(element.children)
+    expect(result).toBe(1)
+  })
+
+  it('should throw an error if there are multiple children', () => {
+    const element = createElement('div', null, 1, 2)
+    expect(() => Children.only(element.children)).toThrowError(
+      'Children.only() expects only one child'
+    )
+  })
+})
+
+describe('toArray', () => {
+  it('should convert children to an array', () => {
+    const element = createElement('div', null, 1, 2, 3)
+    const result = Children.toArray(element.children)
+    expect(result).toEqual([1, 2, 3])
+  })
+})

package/plugins/acryl-router/src/core/jsx/children.ts

@@ -0,0 +1,20 @@
+import type { Child } from './base.ts'
+
+export const toArray = (children: Child): Child[] =>
+  Array.isArray(children) ? children : [children]
+export const Children = {
+  map: (children: Child[], fn: (child: Child, index: number) => Child): Child[] =>
+    toArray(children).map(fn),
+  forEach: (children: Child[], fn: (child: Child, index: number) => void): void => {
+    toArray(children).forEach(fn)
+  },
+  count: (children: Child[]): number => toArray(children).length,
+  only: (_children: Child[]): Child => {
+    const children = toArray(_children)
+    if (children.length !== 1) {
+      throw new Error('Children.only() expects only one child')
+    }
+    return children[0]
+  },
+  toArray,
+}