acrylblends 0.6.1 → 0.6.3

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.test.tsx

@@ -0,0 +1,85 @@
+/** @jsxRuntime automatic **/
+/** @jsxImportSource . **/
+import { Acryl } from '../app.ts'
+import { jsxAttr } from './jsx-runtime.ts'
+
+describe('jsx-runtime', () => {
+  let app: Acryl
+
+  beforeEach(() => {
+    app = new Acryl()
+  })
+
+  it('Should render HTML strings', async () => {
+    app.get('/', (c) => {
+      return c.html(<h1>Hello</h1>)
+    })
+    const res = await app.request('http://localhost/')
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
+    expect(await res.text()).toBe('<h1>Hello</h1>')
+  })
+
+  it('Should skip invalid attribute keys in jsxAttr()', () => {
+    expect(String(jsxAttr('" onfocus="alert(1)', 'x'))).toBe('')
+    expect(String(jsxAttr('foo<bar', 'x'))).toBe('')
+    expect(String(jsxAttr('foo\\bar', 'x'))).toBe('')
+    expect(String(jsxAttr('foo`bar', 'x'))).toBe('')
+  })
+
+  it('Should skip invalid non-string attribute values in jsxAttr()', async () => {
+    const invalidKey = '" onfocus="alert(1)'
+
+    expect(String(jsxAttr(invalidKey, { fontSize: 10 }))).toBe('')
+    expect(String(await jsxAttr(invalidKey, Promise.resolve('/docs?q=1&lang=en')))).toBe('')
+  })
+
+  it('Should render valid attribute values in jsxAttr()', async () => {
+    expect(String(jsxAttr('style', { fontSize: 10, color: 'red' }))).toBe(
+      'style="font-size:10px;color:red"'
+    )
+    expect(String(await jsxAttr('href', Promise.resolve('/docs?q=1&lang=en')))).toBe(
+      'href="/docs?q=1&amp;lang=en"'
+    )
+  })
+
+  it('Should drop style values containing ";" in jsxAttr() to prevent CSS injection', () => {
+    expect(
+      String(jsxAttr('style', { color: 'red;background:blue', backgroundColor: 'white' }))
+    ).toBe('style="background-color:white"')
+  })
+
+  it('Should drop style values that hide declaration separators in CSS comments in jsxAttr()', () => {
+    expect(
+      String(
+        jsxAttr('style', {
+          color: 'red/*(*/;background:blue;position:fixed;top:0',
+          backgroundColor: 'white',
+        })
+      )
+    ).toBe('style="background-color:white"')
+  })
+
+  it('Should drop style property names that can inject declarations in jsxAttr()', () => {
+    expect(
+      String(
+        jsxAttr('style', {
+          'color;background-image': 'url(https://attacker.example/a.png)',
+          backgroundColor: 'white',
+        })
+      )
+    ).toBe('style="background-color:white"')
+  })
+
+  // https://en.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
+  describe('Booleans, Null, and Undefined Are Ignored', () => {
+    it.each([true, false, undefined, null])('%s', (item) => {
+      expect((<span>{item}</span>).toString()).toBe('<span></span>')
+    })
+
+    it('falsy value', () => {
+      const template = <span>{0}</span>
+      expect(template.toString()).toBe('<span>0</span>')
+    })
+  })
+})

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