acrylblends 0.6.2 → 0.6.3

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/utils/types.ts

@@ -166,3 +166,9 @@ export interface JsonWebKey {
   x?: string
   y?: string
 }
+
+/**
+ * A DOM event type by its global name: the DOM library's own type when it is loaded (a browser project), otherwise the runtime's `Event`,
+ * so the JSX types (event handler props) do not need the DOM library on a server.
+ */
+export type DomEvent<Name extends string> = typeof globalThis extends { readonly [K in Name]: { readonly prototype: infer E } } ? E : Event

package/plugins/acryl-router/src/helpers/index.ts

@@ -4,6 +4,7 @@ export { accepts } from '../core/helper/accepts/index.ts'
 export { createFactory, createMiddleware, Factory } from '../core/helper/factory/index.ts'
 export { deleteCookie, generateCookie, generateSignedCookie, getCookie, getSignedCookie, setCookie, setSignedCookie } from '../core/helper/cookie/index.ts'
 export { getExtension, getMimeType, mimes, type BaseMime } from '../core/utils/mime.ts'
+export { createCssContext, css, cx, keyframes, rawCssString, Style, viewTransition } from '../core/helper/css/index.ts'
 export { html, raw } from '../core/helper/html/index.ts'
 export { proxy } from '../core/helper/proxy/index.ts'
 export { getRouterName, inspectRoutes, showRoutes } from '../core/helper/dev/index.ts'

package/plugins/acryl-router/tests/jsx.spec.tsx

@@ -0,0 +1,63 @@
+/** @jsxImportSource acryl-router/jsx */
+/**
+ * JSX in a Cordis plugin, set up as the docs say (`jsxImportSource: 'acryl-router/jsx'`, which resolves this package's built runtime): a page rendered with the ported JSX renderer and styled with the CSS helper, served through `ctx.router`, and a
+ * streamed page whose suspended part arrives after the shell. The ported suites cover the renderer itself; this covers the plugin seam.
+ */
+
+import { Context } from '@deepseek-ai/cordis'
+import { afterEach, describe, expect, it } from 'vitest'
+import { css, Style } from '../src/helpers/index.ts'
+import { Acryl, apply, name } from '../src/index.ts'
+import { Suspense } from '../src/core/jsx/index.ts'
+import { renderToReadableStream } from '../src/core/jsx/streaming.ts'
+
+const contexts: Context[] = []
+const settle = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0))
+afterEach(async () => {
+  while (contexts.length > 0) await contexts.pop()?.fiber.dispose()
+})
+
+async function serve(app: Acryl): Promise<Context> {
+  const ctx = new Context()
+  contexts.push(ctx)
+  ctx.plugin({ name, apply })
+  ctx.plugin({ name: 'pages', inject: ['router'], apply(inner: Context) { inner.router.route('/pages', app) } })
+  await settle()
+  return ctx
+}
+
+describe('JSX through ctx.router', () => {
+  it('serves a page rendered from JSX, styled with the CSS helper', async () => {
+    const title = css`color: teal;`
+    const app = new Acryl().get('/', c => c.html(
+      <html>
+        <head><Style /></head>
+        <body><h1 class={title}>Acryl!</h1></body>
+      </html>,
+    ))
+    const ctx = await serve(app)
+
+    const response = await ctx.router.request('/pages')
+    expect(response.status).toBe(200)
+    expect(response.headers.get('content-type')).toBe('text/html; charset=UTF-8')
+    const page = await response.text()
+    expect(page).toMatch(/^<html><head><style id="acryl-css">\.css-\d+\{color:teal\}<\/style><\/head><body><h1 class="css-\d+">Acryl!<\/h1><\/body><\/html>$/u)
+  })
+
+  it('streams a page: the shell first, then the suspended part', async () => {
+    const Late = async () => { await new Promise(resolve => setTimeout(resolve, 10)); return <p>loaded</p> }
+    const page = <Suspense fallback={<p>loading</p>}><Late /></Suspense>
+    const app = new Acryl().get('/stream', c => c.body(renderToReadableStream(page), 200, {
+      'content-type': 'text/html; charset=UTF-8',
+    }))
+    const ctx = await serve(app)
+
+    const response = await ctx.router.request('/pages/stream')
+    const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader()
+    const chunks: string[] = []
+    for (let next = await reader.read(); !next.done; next = await reader.read()) chunks.push(next.value)
+    expect(chunks.length).toBeGreaterThan(1)
+    expect(chunks[0]).toContain('loading')
+    expect(chunks.join('')).toContain('loaded')
+  })
+})

package/plugins/acryl-router/upstream.json

@@ -2,15 +2,15 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-router",
-    "commit": "0174cb01625bfd32d0162ad56179c582f353321e"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "vendored": [
     "src",
     "tests",
     "LICENSE"
   ],
-  "rewrittenSpecifiers": 4,
-  "digest": "sha256:e732a94e1cf98c4390780156359603dc5d3d33597baf21457082fb33c120cb90",
+  "rewrittenSpecifiers": 6,
+  "digest": "sha256:141895acbc03bfea20b4142356a0614361f83a0beca0a989ae141b5f877f399d",
   "testsNotRun": {
     "tests/loader.spec.ts": "loads the built lib/ entry through the real Loader; the library ships source and has no build"
   },

package/plugins/acryl-router-http/upstream.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-router-http",
-    "commit": "0174cb01625bfd32d0162ad56179c582f353321e"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "vendored": [
     "src",

package/plugins/acryl-state/upstream.json

@@ -2,7 +2,7 @@
   "source": {
     "repo": "acryldev/acryl",
     "path": "plugins/acryl-state",
-    "commit": "0174cb01625bfd32d0162ad56179c582f353321e"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "vendored": [
     "src",

package/plugins/desktop/upstream.json

@@ -5,7 +5,7 @@
       "apps/acryl-desktop/src/shell/desktop-user-data.ts": "user-data.ts",
       "apps/acryl-desktop/src/shell/shutdown.ts": "shutdown.ts"
     },
-    "commit": "0174cb01625bfd32d0162ad56179c582f353321e"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "rewrittenSpecifiers": 0,
   "digest": "sha256:7dfe960a8bbb476c35540d2202a7aaa62b33492c2ac3e34314e2ecfca45f32f2"

package/plugins/desktop-web/upstream.json

@@ -5,7 +5,7 @@
       "apps/acryl-desktop/src/shell/desktop-user-data.ts": "user-data.ts",
       "apps/acryl-desktop/src/shell/shutdown.ts": "shutdown.ts"
     },
-    "commit": "0174cb01625bfd32d0162ad56179c582f353321e"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "rewrittenSpecifiers": 0,
   "digest": "sha256:7dfe960a8bbb476c35540d2202a7aaa62b33492c2ac3e34314e2ecfca45f32f2"

package/plugins/save/plugin.json

@@ -6,7 +6,7 @@
   "provides": [],
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.4",
-    "@webboxes/app-persistence": "0.1.0"
+    "@webboxes/app-persistence": "0.1.1"
   },
   "mount": "add a script \"save\": \"node src/plugins/save/cli.ts\" to package.json; mount the plugin to give the agent a save_app tool"
 }

package/templates/todo/upstream.json

@@ -5,7 +5,7 @@
       "examples/acryl-todo/src/index.ts": "src/todo.ts",
       "examples/acryl-todo/src/page.ts": "src/page.ts"
     },
-    "commit": "0174cb01625bfd32d0162ad56179c582f353321e"
+    "commit": "60491f81b7346d1f3867fa01ee4e2caffc7baf47"
   },
   "rewrittenSpecifiers": 4,
   "digest": "sha256:9093704776563001f7f472f94cc5c2fdd79206342c1cb59c11fce62aa74df3ed"