@statorjs/stator 2.11.0-next.1 → 2.11.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statorjs/stator",
-  "version": "2.11.0-next.1",
+  "version": "2.11.0-next.2",
   "description": "Server-canonical web framework: business logic in composable state machines, UI as a thin renderer binding machine outputs to DOM positions. Ships TypeScript source, loaded natively by its own toolchain — no build step.",
   "license": "MIT",
   "type": "module",
@@ -101,7 +101,7 @@
     "pino-pretty": "^13.1.3",
     "vite": "^6.0.0",
     "vitest": "^2.1.0",
-    "@statorjs/stator": "2.11.0-next.1"
+    "@statorjs/stator": "2.11.0-next.2"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/compiler/lower.ts

@@ -1,4 +1,5 @@
 import ts from 'typescript'
+import { isVoidElement } from '../template/void-elements.ts'
 import { elementMarker, ISLAND_MARKER_ATTR, slotMarker } from '../wire/island-markers.ts'
 import { type ClientDirective, inferDeps } from './client-script.ts'
 import { CompileError, type DiagnosticLocation, locAt } from './diagnostics.ts'
@@ -476,7 +477,8 @@ export function lowerTemplate(template: string, opts: LowerOptions = {}): string
         return `\${${lowerComponent(tag, node.attributes, undefined)}}`
       }
       if (meta && tag.includes('-')) meta.customElements.add(tag)
-      return `<${tag}${lowerAttributes(node.attributes)}${scopeSuffix} />`
+      const open = `<${tag}${lowerAttributes(node.attributes)}${scopeSuffix}>`
+      return isVoidElement(tag) ? open : `${open}</${tag}>`
     }
     if (ts.isJsxFragment(node)) return contentOfChildren(node.children)
     throw new CompileError(

package/src/compiler/virtual-code.ts

@@ -19,6 +19,7 @@
  */
 
 import ts from 'typescript'
+import { VOID_ELEMENTS } from '../template/void-elements.ts'
 import { analyzeScriptClasses } from './client-script.ts'
 import { statorPropsType } from './dts.ts'
 import { CLIENT_AUTHOR_GLOBALS, TEMPLATE_AUTHOR_GLOBALS } from './emit-names.ts'
@@ -186,23 +187,6 @@ function buildServerTsx(regions: ScannedRegions): VirtualFile {
   return { lang: 'tsx', code, mappings }
 }
 
-/** HTML void elements — legal unclosed in templates, not in TSX. */
-const VOID_TAGS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'source',
-  'track',
-  'wbr',
-])
-
 /**
  * Append the template to the virtual TSX with HTML→TSX compatibility applied
  * AND offset mappings kept exact around every edit:
@@ -270,7 +254,7 @@ function appendTemplateTsx(
         if (ch === '>') break
         j++
       }
-      if (VOID_TAGS.has(tag.toLowerCase()) && j < tpl.length) {
+      if (VOID_ELEMENTS.has(tag.toLowerCase()) && j < tpl.length) {
         // Self-close unless the author already did.
         let k = j - 1
         while (k > i && /\s/.test(tpl[k]!)) k--

package/src/components/image.stator.ts

@@ -25,5 +25,5 @@ export default function (props: ImageProps) {
     decoding = 'async',
   } = p
   const img = getImage(p)
-  return html`<img src="${img.src}" srcset="${img.srcset ?? undefined}" sizes="${img.srcset ? sizes : undefined}" alt="${alt}" width="${img.width}" height="${img.height}" loading="${loading}" fetchpriority="${fetchpriority}" decoding="${decoding}" class="${className}" data-s-6e2813d6 />`
+  return html`<img src="${img.src}" srcset="${img.srcset ?? undefined}" sizes="${img.srcset ? sizes : undefined}" alt="${alt}" width="${img.width}" height="${img.height}" loading="${loading}" fetchpriority="${fetchpriority}" decoding="${decoding}" class="${className}" data-s-6e2813d6>`
 }

package/src/components/json-ld.ts

@@ -24,48 +24,27 @@ export function JsonLd(props: JsonLdProps): HtmlFragment {
   return raw(`<script type="application/ld+json">${ldToString(props.json, props.space)}</script>`)
 }
 
-type JsonValueScalar = string | boolean | number
-type JsonValue = JsonValueScalar | Array<JsonValue> | { [key: string]: JsonValue }
-type JsonReplacer = (_: string, value: JsonValue) => JsonValue | undefined
+type JsonValue = string | boolean | number | null | Array<JsonValue> | { [key: string]: JsonValue }
 
-const ESCAPE_ENTITIES = Object.freeze({
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;',
-  '"': '&quot;',
-  "'": '&apos;',
-})
-const ESCAPE_REGEX = new RegExp(`[${Object.keys(ESCAPE_ENTITIES).join('')}]`, 'g')
-const ESCAPE_REPLACER = (t: string): string => ESCAPE_ENTITIES[t as keyof typeof ESCAPE_ENTITIES]
+const stripNulls = (_: string, value: JsonValue): JsonValue | undefined =>
+  value === null ? undefined : value
 
 /**
- * A `JSON.stringify` replacer that strips JSON-LD of HTML sequences illegal in a
- * `<script>` element, per
+ * Escape the serialized JSON for a `<script>` element, per
  * https://www.w3.org/TR/json-ld11/#restrictions-for-contents-of-json-ld-script-elements
- * Escaping `<`/`>` is what guarantees no `</script>` breakout in the raw output.
+ * Script content is raw text to the HTML parser, so HTML entities would reach
+ * consumers literally; JSON `\uXXXX` escapes decode back to the real characters.
+ * Escaping `<` is what guarantees no `</script>` breakout.
  */
-const safeJsonLdReplacer: JsonReplacer = (_: string, value: JsonValue): JsonValue | undefined => {
-  switch (typeof value) {
-    case 'object':
-      // Omit null values.
-      if (value === null) return undefined
-      return value // JSON.stringify recurses, re-applying this replacer.
-    case 'number':
-    case 'boolean':
-    case 'bigint':
-      return value // Not risky.
-    case 'string':
-      return value.replace(ESCAPE_REGEX, ESCAPE_REPLACER)
-    default: {
-      // No other types are expected; JSON.stringify drops an `undefined` return.
-      isNever(value)
-      return undefined
-    }
-  }
+function escapeForScript(json: string): string {
+  return json
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
 }
 
-function isNever(_: never): void {}
-
 function withContext<T extends Thing>(thing: T): WithContext<T> {
   return {
     '@context': 'https://schema.org',
@@ -81,5 +60,5 @@ function asGraph(things: Thing[]): Graph {
  *  JSON-LD string, safe to embed verbatim in a `<script>` element. */
 export function ldToString(json: Thing | Thing[], space?: number | string): string {
   const ld = Array.isArray(json) ? asGraph(json) : withContext(json)
-  return JSON.stringify(ld, safeJsonLdReplacer, space)
+  return escapeForScript(JSON.stringify(ld, stripNulls, space))
 }

package/src/components/picture.stator.ts

@@ -17,5 +17,5 @@ import { getPicture, type PictureProps, SOURCE_TYPES } from './images.ts'
 export default function (props: PictureProps) {
   const p = props
   const { sources } = getPicture(p)
-  return html`${sources.length === 0 ? html`${Image({ ...p })}` : html`<picture>${each(sources, (s) => html`<source media="${s.media}" type="${SOURCE_TYPES[s.format]}" srcset="${s.srcset}" sizes="${s.sizes}" />`)}${Image({ ...p })}</picture>`}`
+  return html`${sources.length === 0 ? html`${Image({ ...p })}` : html`<picture>${each(sources, (s) => html`<source media="${s.media}" type="${SOURCE_TYPES[s.format]}" srcset="${s.srcset}" sizes="${s.sizes}">`)}${Image({ ...p })}</picture>`}`
 }

package/src/template/each.ts

@@ -17,6 +17,7 @@ import {
 } from '../server/render-context.ts'
 import { isReadResult, type ReadResult } from './read.ts'
 import { type HtmlFragment, isHtmlFragment } from './types.ts'
+import { VOID_ELEMENTS } from './void-elements.ts'
 
 export interface EachOptions<T> {
   /** Item identity. When present, list changes emit per-item insert/remove/move
@@ -298,23 +299,6 @@ export function renderKeyedItem<T>(
   return { html, bindings }
 }
 
-const VOID_TAGS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-])
-
 /**
  * True when `html` consists of exactly one root element (plus optional
  * surrounding whitespace). A small scanner, quote- and comment-aware — not a
@@ -361,7 +345,7 @@ export function isSingleRootElement(html: string): boolean {
     } else {
       const nameMatch = html.slice(i + 1, j).match(/^([a-zA-Z][\w-]*)/)
       const tag = nameMatch ? nameMatch[1]!.toLowerCase() : ''
-      const selfClosing = html[j - 1] === '/' || VOID_TAGS.has(tag)
+      const selfClosing = html[j - 1] === '/' || VOID_ELEMENTS.has(tag)
       if (depth === 0) {
         roots++
         if (roots > 1) return false

package/src/template/html-attributes.ts

@@ -73,6 +73,14 @@ export interface ElementSpecificAttributes {
     autofocus?: boolean
     popovertarget?: string
     popovertargetaction?: 'show' | 'hide' | 'toggle'
+    /** Per-button overrides of the owning form's submission settings — the
+     *  standard way to point one submit button in a multi-action form at a
+     *  different endpoint without a second `<form>`. */
+    formaction?: string
+    formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
+    formmethod?: 'get' | 'post' | 'dialog'
+    formnovalidate?: boolean
+    formtarget?: string
   }
   input: {
     type?: string
@@ -99,6 +107,12 @@ export interface ElementSpecificAttributes {
      *  the form's own DOM subtree (e.g. a per-row control alongside a
      *  page-wide bulk-action form). `button` already carries this. */
     form?: string
+    /** Submission overrides for `type="submit"` / `type="image"`; same as on `button`. */
+    formaction?: string
+    formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
+    formmethod?: 'get' | 'post' | 'dialog'
+    formnovalidate?: boolean
+    formtarget?: string
   }
   label: { for?: string }
   form: {

package/src/template/void-elements.ts

@@ -0,0 +1,23 @@
+/** HTML void elements: no content, no closing tag, and a trailing `/` is
+ *  meaningless. Every other element must be explicitly closed — browsers
+ *  parse `<div />` as an open tag. `param` is obsolete but still void. */
+export const VOID_ELEMENTS: ReadonlySet<string> = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+])
+
+export function isVoidElement(tag: string): boolean {
+  return VOID_ELEMENTS.has(tag.toLowerCase())
+}