acrylblends 0.6.2 → 0.6.4

package/plugins/acryl-router/src/core/jsx/jsx-dev-runtime.ts

@@ -0,0 +1,26 @@
+/**
+ * @module
+ * This module provides Acryl's JSX dev runtime.
+ */
+
+import type { HtmlEscapedString } from '../utils/html.ts'
+import { jsxFn } from './base.ts'
+import type { JSXNode } from './base.ts'
+export { Fragment } from './base.ts'
+export type { JSX } from './base.ts'
+
+export function jsxDEV(
+  tag: string | Function,
+  props: Record<string, unknown>,
+  key?: string
+): JSXNode {
+  let node: JSXNode
+  if (!props || !('children' in props)) {
+    node = jsxFn(tag, props, [])
+  } else {
+    const children = props.children as string | HtmlEscapedString
+    node = Array.isArray(children) ? jsxFn(tag, props, children) : jsxFn(tag, props, [children])
+  }
+  node.key = key
+  return node
+}

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

@@ -0,0 +1,51 @@
+/**
+ * @module
+ * This module provides Acryl's JSX runtime.
+ */
+
+export { jsxDEV as jsx, Fragment } from './jsx-dev-runtime.ts'
+export { jsxDEV as jsxs } from './jsx-dev-runtime.ts'
+export type { JSX } from './jsx-dev-runtime.ts'
+import { html, raw } from '../helper/html/index.ts'
+import type { HtmlEscapedString, StringBuffer, HtmlEscaped } from '../utils/html.ts'
+import { escapeToBuffer, stringBufferToString } from '../utils/html.ts'
+import { isValidAttributeName, styleObjectForEach } from './utils.ts'
+
+export { html as jsxTemplate }
+
+export const jsxAttr = (
+  key: string,
+  v: string | Promise<string> | Record<string, string | number | null | undefined | boolean>
+): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  if (!isValidAttributeName(key)) {
+    return raw('')
+  }
+  const buffer: StringBuffer = [`${key}="`] as StringBuffer
+  if (key === 'style' && typeof v === 'object') {
+    // object to style strings
+    let styleStr = ''
+    styleObjectForEach(v as Record<string, string | number>, (property, value) => {
+      if (value != null) {
+        styleStr += `${styleStr ? ';' : ''}${property}:${value}`
+      }
+    })
+    escapeToBuffer(styleStr, buffer)
+    buffer[0] += '"'
+  } else if (typeof v === 'string') {
+    escapeToBuffer(v, buffer)
+    buffer[0] += '"'
+  } else if (v === null || v === undefined) {
+    return raw('')
+  } else if (typeof v === 'number' || (v as unknown as HtmlEscaped).isEscaped) {
+    buffer[0] += `${v}"`
+  } else if (v instanceof Promise) {
+    buffer.unshift('"', v)
+  } else {
+    escapeToBuffer(v.toString(), buffer)
+    buffer[0] += '"'
+  }
+
+  return buffer.length === 1 ? raw(buffer[0]) : stringBufferToString(buffer, undefined)
+}
+
+export const jsxEscape = (value: string) => value

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

@@ -0,0 +1,231 @@
+/**
+ * @module
+ * This module enables JSX to supports streaming Response.
+ */
+
+import { raw } from '../helper/html/index.ts'
+import { HtmlEscapedCallbackPhase, resolveCallback } from '../utils/html.ts'
+import type { HtmlEscapedString } from '../utils/html.ts'
+import type { Child, FC, PropsWithChildren, Context as JSXContext } from './index.ts'
+import { isUntrustedObject, JSXNode, renderChildren, renderUntrustedObject } from './base.ts'
+import { childrenToString } from './components.ts'
+import { DOM_RENDERER, DOM_STASH } from './constants.ts'
+import { captureRenderContext, createContext, useContext } from './context.ts'
+import { Suspense as SuspenseDomRenderer } from './dom/components.ts'
+import { buildDataStack } from './dom/render.ts'
+import type { HasRenderToDom, NodeObject } from './dom/render.ts'
+
+/**
+ * Used to specify nonce for scripts generated by `Suspense` and `ErrorBoundary`.
+ *
+ * @example
+ * ```tsx
+ * <StreamingContext.Provider value={{ scriptNonce: 'test-nonce' }}>
+ *   <Suspense fallback={<p>Loading...</p>}>
+ *     <Content />
+ *   </Suspense>
+ * </StreamingContext.Provider>
+ * ```
+ */
+export const StreamingContext: JSXContext<{ scriptNonce: string } | null> = createContext<{
+  scriptNonce: string
+} | null>(null)
+
+let suspenseCounter = 0
+
+const serializeBoundaryChild = (child: Child): string | Promise<string> =>
+  typeof child === 'string' || Array.isArray(child)
+    ? renderChildren([child])
+    : child == null || typeof child === 'boolean'
+      ? ''
+      : isUntrustedObject(child)
+        ? renderUntrustedObject(child)
+        : child.toString()
+
+/**
+ * @experimental
+ * `Suspense` is an experimental feature.
+ * The API might be changed.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Suspense: FC<PropsWithChildren<{ fallback: any }>> = async ({
+  children,
+  fallback,
+}) => {
+  if (!Array.isArray(children)) {
+    children = [children]
+  }
+
+  const nonce = useContext(StreamingContext)?.scriptNonce
+
+  let resArray: HtmlEscapedString[] | Promise<HtmlEscapedString[]>[] = []
+
+  // for use() hook
+  const stackNode = { [DOM_STASH]: [0, []] } as unknown as NodeObject
+  const popNodeStack = () => {
+    buildDataStack.pop()
+  }
+
+  try {
+    stackNode[DOM_STASH][0] = 0
+    buildDataStack.push([[], stackNode])
+    resArray = children.map(serializeBoundaryChild) as HtmlEscapedString[]
+  } catch (e) {
+    if (e instanceof Promise) {
+      // Capture before deferring: on the fallback path the render context is
+      // observable here but not in the `.then()` below.
+      const resume = captureRenderContext()
+      resArray = [
+        e.then(() =>
+          resume(() => {
+            stackNode[DOM_STASH][0] = 0
+            buildDataStack.push([[], stackNode])
+            return childrenToString(children as Child[]).finally(popNodeStack)
+          })
+        ),
+      ] as Promise<HtmlEscapedString[]>[]
+    } else {
+      throw e
+    }
+  } finally {
+    popNodeStack()
+  }
+
+  if (resArray.some((res) => (res as {}) instanceof Promise)) {
+    const index = suspenseCounter++
+    const fallbackStr = await (typeof fallback === 'string' || Array.isArray(fallback)
+      ? renderChildren([fallback])
+      : isUntrustedObject(fallback)
+        ? renderUntrustedObject(fallback)
+        : fallback.toString())
+    return raw(`<template id="H:${index}"></template>${fallbackStr}<!--/$-->`, [
+      ...(fallbackStr.callbacks || []),
+      ({ phase, buffer, context }) => {
+        if (phase === HtmlEscapedCallbackPhase.BeforeStream) {
+          return
+        }
+        return Promise.all(resArray).then(async (htmlArray) => {
+          htmlArray = htmlArray.flat()
+          const content = htmlArray.join('')
+          if (buffer) {
+            buffer[0] = buffer[0].replace(
+              new RegExp(`<template id="H:${index}"></template>.*?<!--/\\$-->`, 's'),
+              () => content
+            )
+          }
+          let html = buffer
+            ? ''
+            : `<template data-acryl-target="H:${index}">${content}</template><script${
+                nonce ? ` nonce="${nonce}"` : ''
+              }>
+((d,c,n) => {
+c=d.currentScript.previousSibling
+d=d.getElementById('H:${index}')
+if(!d)return
+do{n=d.nextSibling;n.remove()}while(n.nodeType!=8||n.nodeValue!='/$')
+d.replaceWith(c.content)
+})(document)
+</script>`
+
+          const callbacks = htmlArray
+            .map((html) => (html as HtmlEscapedString).callbacks || [])
+            .flat()
+          if (!callbacks.length) {
+            return html
+          }
+
+          if (phase === HtmlEscapedCallbackPhase.Stream) {
+            html = await resolveCallback(html, HtmlEscapedCallbackPhase.BeforeStream, true, context)
+          }
+
+          return raw(html, callbacks)
+        })
+      },
+    ])
+  } else {
+    return raw(resArray.join(''))
+  }
+}
+;(Suspense as HasRenderToDom)[DOM_RENDERER] = SuspenseDomRenderer
+
+const textEncoder = new TextEncoder()
+/**
+ * @experimental
+ * `renderToReadableStream()` is an experimental feature.
+ * The API might be changed.
+ */
+export const renderToReadableStream = (
+  content: HtmlEscapedString | JSXNode | Promise<HtmlEscapedString>,
+  onError: (e: unknown) => string | void = console.trace
+): ReadableStream<Uint8Array> => {
+  let cancelled = false
+  const reader = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      try {
+        if (content instanceof JSXNode) {
+          // aJSXNode.toString() returns a string or Promise<string> and string is already escaped
+          content = content.toString() as HtmlEscapedString | Promise<HtmlEscapedString>
+        }
+        const context = typeof content === 'object' ? content : {}
+        const resolved = await resolveCallback(
+          content,
+          HtmlEscapedCallbackPhase.BeforeStream,
+          true,
+          context
+        )
+        if (!cancelled) {
+          controller.enqueue(textEncoder.encode(resolved))
+        }
+
+        let resolvedCount = 0
+        const callbacks: Promise<void>[] = []
+        const then = (promise: Promise<string>) => {
+          callbacks.push(
+            promise
+              .catch((err) => {
+                console.log(err)
+                onError(err)
+                return ''
+              })
+              .then(async (res) => {
+                res = await resolveCallback(
+                  res,
+                  HtmlEscapedCallbackPhase.BeforeStream,
+                  true,
+                  context
+                )
+                ;(res as HtmlEscapedString).callbacks
+                  ?.map((c) => c({ phase: HtmlEscapedCallbackPhase.Stream, context }))
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  .filter<Promise<string>>(Boolean as any)
+                  .forEach(then)
+                resolvedCount++
+                if (!cancelled) {
+                  controller.enqueue(textEncoder.encode(res))
+                }
+              })
+          )
+        }
+        ;(resolved as HtmlEscapedString).callbacks
+          ?.map((c) => c({ phase: HtmlEscapedCallbackPhase.Stream, context }))
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          .filter<Promise<string>>(Boolean as any)
+          .forEach(then)
+        while (resolvedCount !== callbacks.length) {
+          await Promise.all(callbacks)
+        }
+      } catch (e) {
+        // maybe the connection was closed
+        onError(e)
+      }
+
+      if (!cancelled) {
+        controller.close()
+      }
+    },
+    cancel() {
+      cancelled = true
+    },
+  })
+  return reader
+}

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

@@ -0,0 +1,41 @@
+/**
+ * All types exported from "acryl-router/jsx" are in this file.
+ */
+import type { Child, JSXNode } from './base.ts'
+import type { JSX } from './intrinsic-elements.ts'
+import type { DomEvent } from '../utils/types.ts'
+
+export type { Child, JSXNode, FC } from './base.ts'
+export type { RefObject } from './hooks/index.ts'
+export type { Context } from './context.ts'
+
+export type PropsWithChildren<P = unknown> = P & { children?: Child | undefined }
+export type CSSProperties = JSX.CSSProperties
+
+/**
+ * React types
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ReactElement<P = any, T = string | Function> = JSXNode & {
+  type: T
+  props: P
+  key: string | null
+}
+type ReactNode = ReactElement | string | number | boolean | null | undefined
+type ComponentClass<_P = {}, _S = {}> = unknown
+
+export type { ReactElement, ReactNode, ComponentClass }
+
+export type Event = globalThis.Event
+export type MouseEvent = DomEvent<'MouseEvent'>
+export type KeyboardEvent = DomEvent<'KeyboardEvent'>
+export type FocusEvent = DomEvent<'FocusEvent'>
+export type ClipboardEvent = DomEvent<'ClipboardEvent'>
+export type InputEvent = DomEvent<'InputEvent'>
+export type PointerEvent = DomEvent<'PointerEvent'>
+export type TouchEvent = DomEvent<'TouchEvent'>
+export type WheelEvent = DomEvent<'WheelEvent'>
+export type AnimationEvent = DomEvent<'AnimationEvent'>
+export type TransitionEvent = DomEvent<'TransitionEvent'>
+export type DragEvent = DomEvent<'DragEvent'>

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

@@ -0,0 +1,202 @@
+const normalizeElementKeyMap: Map<string, string> = new Map([
+  ['className', 'class'],
+  ['htmlFor', 'for'],
+  ['crossOrigin', 'crossorigin'],
+  ['httpEquiv', 'http-equiv'],
+  ['itemProp', 'itemprop'],
+  ['fetchPriority', 'fetchpriority'],
+  ['noModule', 'nomodule'],
+  ['formAction', 'formaction'],
+])
+export const normalizeIntrinsicElementKey = (key: string): string =>
+  normalizeElementKeyMap.get(key) || key
+
+// eslint-disable-next-line no-control-regex
+const invalidAttributeNameCharRe = /[\s"'<>/=`\\\x00-\x1f\x7f-\x9f]/
+const validAttributeNameCache = new Set<string>()
+const validAttributeNameCacheMax = 1024
+// reject HTML parser-control tag starters ('!' for comments/doctype, '?' for
+// processing instructions) in addition to the shared invalid-char set
+// eslint-disable-next-line no-control-regex
+const invalidTagNameCharRe = /^[!?]|[\s"'<>/=`\\\x00-\x1f\x7f-\x9f]/
+const validTagNameCache = new Set<unknown>()
+const validTagNameCacheMax = 256
+
+const cacheValidName = (cache: Set<unknown>, max: number, name: string): void => {
+  if (cache.size >= max) {
+    cache.clear()
+  }
+  cache.add(name)
+}
+
+export const isValidTagName = (name: unknown): name is string => {
+  if (validTagNameCache.has(name)) {
+    return true
+  }
+  if (typeof name !== 'string') {
+    return false
+  }
+  if (name.length === 0) {
+    return true
+  }
+  if (invalidTagNameCharRe.test(name)) {
+    return false
+  }
+  cacheValidName(validTagNameCache, validTagNameCacheMax, name)
+  return true
+}
+
+export const isValidAttributeName = (name: string): boolean => {
+  if (validAttributeNameCache.has(name)) {
+    return true
+  }
+  const len = name.length
+  if (len === 0) {
+    return false
+  }
+  for (let i = 0; i < len; i++) {
+    const c = name.charCodeAt(i)
+    if (
+      !(
+        (c >= 0x61 && c <= 0x7a) || // a-z
+        (c >= 0x41 && c <= 0x5a) || // A-Z
+        (c >= 0x30 && c <= 0x39) || // 0-9
+        c === 0x2d || // -
+        c === 0x5f || // _
+        c === 0x2e || // .
+        c === 0x3a // :
+      )
+    ) {
+      // non-fast-path character found — fall back to regex for the full name
+      if (!invalidAttributeNameCharRe.test(name)) {
+        cacheValidName(validAttributeNameCache, validAttributeNameCacheMax, name)
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+  cacheValidName(validAttributeNameCache, validAttributeNameCacheMax, name)
+  return true
+}
+
+// eslint-disable-next-line no-control-regex
+const invalidStylePropertyNameCharRe = /[\s"'():;\\/\[\]{}\x00-\x1f\x7f-\x9f]/
+const validStylePropertyNameCache = new Set<string>()
+const validStylePropertyNameCacheMax = 1024
+
+const isValidStylePropertyName = (name: string): boolean => {
+  if (validStylePropertyNameCache.has(name)) {
+    return true
+  }
+  const len = name.length
+  if (len === 0) {
+    return false
+  }
+  for (let i = 0; i < len; i++) {
+    const c = name.charCodeAt(i)
+    if (
+      !(
+        (c >= 0x61 && c <= 0x7a) || // a-z
+        (c >= 0x41 && c <= 0x5a) || // A-Z
+        (c >= 0x30 && c <= 0x39) || // 0-9
+        c === 0x2d || // -
+        c === 0x5f // _
+      )
+    ) {
+      // non-fast-path character found — fall back to regex for the full name
+      if (!invalidStylePropertyNameCharRe.test(name)) {
+        cacheValidName(validStylePropertyNameCache, validStylePropertyNameCacheMax, name)
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+  cacheValidName(validStylePropertyNameCache, validStylePropertyNameCacheMax, name)
+  return true
+}
+
+const unsafeStyleValueCharRe = /[;"'\\/\[\](){}]/
+
+const hasUnsafeStyleValue = (value: string): boolean => {
+  if (!unsafeStyleValueCharRe.test(value)) {
+    return false
+  }
+
+  let quote = 0
+  const blockStack: number[] = []
+  for (let i = 0, len = value.length; i < len; i++) {
+    const c = value.charCodeAt(i)
+    if (c === 0x5c) {
+      if (i === len - 1) {
+        return true
+      }
+      i++
+    } else if (quote !== 0) {
+      if (c === 0x0a || c === 0x0c || c === 0x0d) {
+        return true
+      }
+      if (c === quote) {
+        quote = 0
+      }
+    } else if (c === 0x2f && value.charCodeAt(i + 1) === 0x2a) {
+      const end = value.indexOf('*/', i + 2)
+      if (end === -1) {
+        return true
+      }
+      i = end + 1
+    } else if (c === 0x22 || c === 0x27) {
+      quote = c
+    } else if (c === 0x28) {
+      blockStack.push(0x29)
+    } else if (c === 0x5b) {
+      blockStack.push(0x5d)
+    } else if (c === 0x7b || c === 0x7d) {
+      return true
+    } else if (c === 0x29 || c === 0x5d) {
+      if (blockStack[blockStack.length - 1] !== c) {
+        return true
+      }
+      blockStack.pop()
+    } else if (c === 0x3b && blockStack.length === 0) {
+      return true
+    }
+  }
+  return quote !== 0 || blockStack.length !== 0
+}
+
+export const styleObjectForEach = (
+  style: Record<string, unknown>,
+  fn: (key: string, value: string | null) => void
+): void => {
+  for (const [k, v] of Object.entries(style)) {
+    const key =
+      k[0] === '-' || !/[A-Z]/.test(k)
+        ? k // a CSS variable or a lowercase only property
+        : k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`) // a camelCase property. convert to kebab-case
+    if (!isValidStylePropertyName(key)) {
+      continue
+    }
+    if (v == null) {
+      fn(key, null)
+      continue
+    }
+    let value: string
+    if (typeof v === 'number') {
+      value = !key.match(
+        /^(?:a|border-im|column(?:-c|s)|flex(?:$|-[^b])|grid-(?!.*gap)(?:ar|[^a])|font-w|li|or|sca|st|ta|wido|z)|ty$/
+      )
+        ? `${v}px`
+        : `${v}`
+    } else if (typeof v === 'string') {
+      if (hasUnsafeStyleValue(v)) {
+        continue
+      }
+      value = v
+    } else {
+      continue
+    }
+    fn(key, value)
+  }
+}

package/plugins/acryl-router/src/core/middleware/cache/index.ts

@@ -17,10 +17,10 @@ const defaultCacheableStatusCodes: ReadonlyArray<StatusCode> = [200]
 const defaultMaxQueryBodySize = 64 * 1024
 
 const cacheKeyPath = '/.acryl-router/cache'
-const cacheKeyParameter = '__hono_cache_key'
-const cacheMethodKeyParameter = '__hono_cache_method'
-const queryDigestKeyParameter = '__hono_query_digest'
-const cacheVaryKeyParameter = '__hono_cache_vary'
+const cacheKeyParameter = '__acryl_cache_key'
+const cacheMethodKeyParameter = '__acryl_cache_method'
+const queryDigestKeyParameter = '__acryl_query_digest'
+const cacheVaryKeyParameter = '__acryl_cache_vary'
 
 type CacheKeyRequest =
   | { method: 'GET' }