Hello {name}
+Text is escaped by default.
+ {unsafeHTML("")} +
")} +
Element middleware
+ External link +
+ Hello {""}
+ {unsafeHTML("")} +
Hello {"<&'\""}
)).toBe( + 'Hello <&'"
', + ); +}); + +test("components", () => { + function Layout({ title, children }: PropsWithChildren<{ title: string }>) { + return ( +{title}
+ {children} +-
+ {items.map((item) => (
+
- {item} + ))} +
Items
- one
- two
one
+two
+ , + ), + ).toBe("one
two
"); +}); + +test("raw html", () => { + expect(render({"escaped"}
)).toBe(
+ "<strong>escaped</strong>
",
+ );
+ expect(render({unsafeHTML("trusted")}
)).toBe(
+ "trusted
",
+ );
+});
+
+test("attributes", () => {
+ expect(
+ render(
+ ,
+ ),
+ ).toBe('');
+ expect(render()).toBe('');
+});
+
+test("element middleware", () => {
+ expect(
+ render(Docs, {
+ element: [
+ ({ tag, props }) => (tag === "a" ? { ...props, target: "_blank" } : undefined),
+ ({ tag, props }) => {
+ if (tag === "a") props["rel"] = "noreferrer";
+ },
+ ],
+ }),
+ ).toBe('Docs');
+ expect(
+ render(Hi
, { + element: [[({ props }) => ({ ...props, class: "message" })]], + }), + ).toBe(''); +}); + +test("style", () => { + expect( + render( + , + ), + ).toBe(''); + expect(render()).toBe( + '', + ); +}); + +test("children arrays and null", () => { + function Box({ children }: PropsWithChildren) { + return{children}
;
+ }
+
+ expect(render(onetwo
");
+ expect(render(jsx("div", { children: null }))).toBe("");
+});
+
+test("head hoisting", () => {
+ function Page() {
+ return (
+ <>
+
+
+ ,
+ ),
+ ).resolves.toBe('
');
+ await expect(
+ renderAsync(, {
+ element: async ({ tag, props }) => {
+ if (tag !== "img") return;
+
+ await Promise.resolve();
+ props["width"] = 1200;
+ props["height"] = 800;
+ },
+ }),
+ ).resolves.toBe('');
+});
+
+test("async head", async () => {
+ await expect(
+ renderAsync(
+
+
+ Base
+
+
+
+
+
+
+ ,
+ ),
+ ).resolves.toBe(
+ 'Base ',
+ );
+});
+
+test("sync rejects async", () => {
+ async function Message() {
+ return Async;
+ }
+
+ expect(() => render({children} ;
+ * }
+ *
+ * render(Hello {""} );
+ * // "Hello <Henry> "
+ * ```
+ *
+ * ## Rendering Rules
+ *
+ * ### Escaping
+ *
+ * Text and attributes are escaped by default. `null`, `undefined`, and booleans
+ * render nothing. Arrays and other iterables render their children in order.
+ * Use {@link unsafeHTML} only for trusted markup that should be inserted as-is.
+ *
+ * ### Styles
+ *
+ * `style` accepts a CSS string or an object. Object styles accept camelCase,
+ * hyphenated names, and custom properties. Finite numeric values get `px`.
+ * The exceptions are `0`, custom properties, and known unitless properties.
+ *
+ * ### Element middleware
+ *
+ * Pass `element` to {@link render} or {@link renderAsync} to inspect or change
+ * intrinsic element props before they are written. Mutate `props` or return a
+ * replacement props object. Async middleware is supported by {@link renderAsync}.
+ *
+ * ```tsx
+ * render(Docs, {
+ * element({ tag, props }) {
+ * if (tag === "a") props["rel"] = "noreferrer";
+ * },
+ * });
+ * ```
+ *
+ * ### Head hoisting
+ *
+ * All `` elements are merged into one top-level ``. Page components
+ * can set titles and metadata. A layout can still own the document shell.
+ *
+ * ```tsx
+ * render( Page );
+ * // "Page "
+ * ```
+ *
+ * ### Async rendering
+ *
+ * JSX can contain async components, Promise children, and Promise attributes.
+ * {@link render} stays synchronous and throws when it sees a Promise, so async
+ * work is not accidentally omitted. Use {@link renderAsync} to await the whole tree.
+ *
+ * ```tsx
+ * import { renderAsync } from "simplejsx";
+ *
+ * const title = Promise.resolve("a&b");
+ * const name = Promise.resolve("");
+ *
+ * await renderAsync(;
+type ElementMiddlewareMutation = (element: ElementMiddlewareArgs) => MaybePromise;
+
+/** Runs before an intrinsic element is serialized. */
+export type ElementMiddleware = ElementMiddlewareReplacement | ElementMiddlewareMutation;
+
+export type RenderOptions = {
+ /** Runs before each intrinsic element is serialized. */
+ element?: ElementMiddleware | readonly (ElementMiddleware | readonly ElementMiddleware[])[];
+};
+
+type HeadRoot = {
+ headAttributes?: string;
+ headChildren: string[];
+};
+
+type RenderContext = {
+ root: HeadRoot;
+ elementMiddleware: readonly ElementMiddleware[];
+ parentTag?: string;
+};
+
+/** JSX runtime entry used by TypeScript. Prefer JSX syntax over calling this directly. */
+export function jsx(type: ElementType, props: Props | null, _key?: unknown): JSXNode {
+ return new JSXNode(type, props ? { ...props } : {});
+}
+
+/** JSX runtime entry used by TypeScript for elements with multiple children. */
+export const jsxs: typeof jsx = jsx;
+
+/** Development JSX runtime entry used by TypeScript-compatible compilers. */
+export function jsxDEV(
+ type: ElementType,
+ props: Props | null,
+ key?: unknown,
+ _isStaticChildren?: boolean,
+ _source?: unknown,
+ _self?: unknown,
+): JSXNode {
+ return jsx(type, props, key);
+}
+
+/**
+ * Groups JSX children without adding a wrapper element.
+ *
+ * @example
+ * ```tsx
+ * render(<>");
+ *
+ * await renderAsync( {
+ const root: HeadRoot = { headChildren: [] };
+ const elementMiddleware: readonly ElementMiddleware[] = options?.element
+ ? Array.isArray(options.element)
+ ? options.element.flat()
+ : [options.element]
+ : [];
+ return renderHead(root, await renderChildAsync(value, { root, elementMiddleware }));
+}
+
+/** Escapes HTML-sensitive characters: `&`, `<`, `>`, `"`, and `'`. */
+export function escapeHTML(value: string): string {
+ return value.replace(/[&<>"']/g, (character) => {
+ switch (character) {
+ case "&":
+ return "&";
+ case "<":
+ return "<";
+ case ">":
+ return ">";
+ case '"':
+ return """;
+ case "'":
+ return "'";
+ default:
+ return character;
+ }
+ });
+}
+
+function renderChildSync(value: Child, context: RenderContext): string {
+ if (value === null || value === undefined || typeof value === "boolean") return "";
+ if (typeof value === "string") return escapeHTML(value);
+ if (typeof value === "number" || typeof value === "bigint") return String(value);
+ if (value instanceof HTML) return value.toString();
+ if (isPromiseLike(value)) throw new Error(asyncRenderError);
+
+ if (value instanceof JSXNode) {
+ if (typeof value.type === "function") {
+ const result = value.type(value.props);
+ if (isPromiseLike(result)) throw new Error(asyncRenderError);
+ return renderChildSync(result, context);
+ }
+ return renderElementSync(value.type, value.props, context);
+ }
+
+ if (isIterable(value)) {
+ let html = "";
+ for (const child of value) html += renderChildSync(child, context);
+ return html;
+ }
+
+ throw new TypeError(`simplejsx: cannot render ${typeof value} as a child.`);
+}
+
+async function renderChildAsync(value: Child, context: RenderContext): Promise {
+ if (isPromiseLike(value)) return renderChildAsync((await value) as Child, context);
+ if (value === null || value === undefined || typeof value === "boolean") return "";
+ if (typeof value === "string") return escapeHTML(value);
+ if (typeof value === "number" || typeof value === "bigint") return String(value);
+ if (value instanceof HTML) return value.toString();
+
+ if (value instanceof JSXNode) {
+ if (typeof value.type === "function") return renderChildAsync(value.type(value.props), context);
+ return renderElementAsync(value.type, value.props, context);
+ }
+
+ if (isIterable(value)) {
+ let html = "";
+ for (const child of value) html += await renderChildAsync(child, context);
+ return html;
+ }
+
+ throw new TypeError(`simplejsx: cannot render ${typeof value} as a child.`);
+}
+
+function renderElementSync(tag: string, props: Props, context: RenderContext): string {
+ if (!tag || tag.startsWith("!") || tag.startsWith("?") || hasInvalidAttributeNameCharacter(tag)) {
+ throw new Error(`simplejsx: invalid JSX tag name \`${tag}\`.`);
+ }
+
+ props = applyElementMiddlewareSync(tag, props, context);
+ const lowerTag = tag.toLowerCase();
+ const attributes = renderAttributesSync(props);
+
+ const children = props.children;
+ const nextContext = { ...context, parentTag: lowerTag };
+ if (lowerTag === "head") {
+ return collectHead(context, attributes, renderChildSync(children, nextContext));
+ }
+
+ const html = `<${tag}${attributes}`;
+ if (!voidTags.has(lowerTag)) return `${html}>${renderChildSync(children, nextContext)}`;
+
+ if (renderChildSync(children, nextContext))
+ throw new Error(`simplejsx: void element <${tag}> cannot have children.`);
+ return `${html}>`;
+}
+
+async function renderElementAsync(tag: string, props: Props, context: RenderContext): Promise {
+ if (!tag || tag.startsWith("!") || tag.startsWith("?") || hasInvalidAttributeNameCharacter(tag)) {
+ throw new Error(`simplejsx: invalid JSX tag name \`${tag}\`.`);
+ }
+
+ props = await applyElementMiddlewareAsync(tag, props, context);
+ const lowerTag = tag.toLowerCase();
+ const attributes = await renderAttributesAsync(props);
+
+ const children = props.children;
+ const nextContext = { ...context, parentTag: lowerTag };
+ if (lowerTag === "head") {
+ return collectHead(context, attributes, await renderChildAsync(children, nextContext));
+ }
+
+ const html = `<${tag}${attributes}`;
+ if (!voidTags.has(lowerTag)) return `${html}>${await renderChildAsync(children, nextContext)}`;
+
+ if (await renderChildAsync(children, nextContext))
+ throw new Error(`simplejsx: void element <${tag}> cannot have children.`);
+ return `${html}>`;
+}
+
+function applyElementMiddlewareSync(tag: string, props: Props, context: RenderContext): Props {
+ if (!context.elementMiddleware.length) return props;
+
+ let nextProps = { ...props };
+ for (const middleware of context.elementMiddleware) {
+ const result = middleware({ tag, props: nextProps });
+ if (isPromiseLike(result)) throw new Error(asyncRenderError);
+ if (result !== null && result !== undefined) nextProps = result;
+ }
+ return nextProps;
+}
+
+async function applyElementMiddlewareAsync(
+ tag: string,
+ props: Props,
+ context: RenderContext,
+): Promise {
+ if (!context.elementMiddleware.length) return props;
+
+ let nextProps = { ...props };
+ for (const middleware of context.elementMiddleware) {
+ const result = middleware({ tag, props: nextProps });
+ const resolved = isPromiseLike(result) ? await result : result;
+ if (resolved !== null && resolved !== undefined) nextProps = resolved;
+ }
+ return nextProps;
+}
+
+function renderAttributesSync(props: Props): string {
+ let attributes = "";
+ for (const [key, value] of Object.entries(props)) {
+ const name = normalizeAttributeName(key);
+ if (!name || value === null || value === undefined) continue;
+ if (isPromiseLike(value)) throw new Error(asyncRenderError);
+ attributes += renderAttribute(name, value);
+ }
+ return attributes;
+}
+
+async function renderAttributesAsync(props: Props): Promise {
+ let attributes = "";
+ for (const [key, value] of Object.entries(props)) {
+ const name = normalizeAttributeName(key);
+ if (!name || value === null || value === undefined) continue;
+ const attributeValue = isPromiseLike(value) ? await value : value;
+ if (attributeValue === null || attributeValue === undefined) continue;
+ attributes += renderAttribute(name, attributeValue);
+ }
+ return attributes;
+}
+
+function collectHead(context: RenderContext, attributes: string, children: string): string {
+ if (context.root.headAttributes === undefined && (!context.parentTag || context.parentTag === "html")) {
+ context.root.headAttributes = attributes;
+ }
+ context.root.headChildren.push(children);
+ return "";
+}
+
+function renderHead(root: HeadRoot, html: string): string {
+ if (!root.headChildren.length) return html;
+
+ // Head elements render out-of-band so page components can add metadata from anywhere in the tree.
+ const head = `${root.headChildren.join("")}`;
+ const bodyIndex = html.search(/)/i);
+ if (bodyIndex !== -1) return `${html.slice(0, bodyIndex)}${head}${html.slice(bodyIndex)}`;
+
+ const htmlTag = html.match(/^]*)?>/i)?.[0];
+ return htmlTag ? `${htmlTag}${head}${html.slice(htmlTag.length)}` : `${head}${html}`;
+}
+
+function renderAttribute(name: string, value: unknown): string {
+ if (name === "style" && typeof value === "object" && value !== null && !(value instanceof HTML)) {
+ return ` style="${escapeHTML(serializeStyle(value as Record))}"`;
+ }
+
+ if (typeof value === "boolean") {
+ if (booleanAttributes.has(name)) return value ? ` ${name}` : "";
+ return ` ${name}="${value}"`;
+ }
+
+ if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+ return ` ${name}="${escapeHTML(String(value))}"`;
+ }
+
+ if (value instanceof HTML) return ` ${name}="${escapeHTML(value.toString())}"`;
+
+ if (typeof value === "function") {
+ if (name.startsWith("on") || name === "ref") return "";
+ throw new TypeError(`simplejsx: cannot render function prop \`${name}\`.`);
+ }
+
+ throw new TypeError(`simplejsx: cannot render ${typeof value} prop \`${name}\`.`);
+}
+
+function normalizeAttributeName(key: string): string | null {
+ if (key === "children" || key === "key") return null;
+ const name = attributeAliases.get(key) ?? key;
+ return name && !hasInvalidAttributeNameCharacter(name) ? name : null;
+}
+
+function serializeStyle(style: Record): string {
+ let css = "";
+ for (const [rawName, rawValue] of Object.entries(style)) {
+ if (rawValue === null || rawValue === undefined) continue;
+
+ const name = rawName.startsWith("--")
+ ? rawName
+ : rawName.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`);
+ let validName = !!name;
+ for (let index = 0; index < name.length; index++) {
+ const code = name.charCodeAt(index);
+ if (code <= 0x1f || (code >= 0x7f && code <= 0x9f) || invalidStylePropertyNameCodes.has(code)) {
+ validName = false;
+ break;
+ }
+ }
+ if (!validName) continue;
+
+ let value: string | null = null;
+ if (typeof rawValue === "string") value = rawValue;
+ if (typeof rawValue === "number" && Number.isFinite(rawValue)) {
+ value =
+ rawValue === 0 || name.startsWith("--") || unitlessStyleProperties.has(name)
+ ? `${rawValue}`
+ : `${rawValue}px`;
+ }
+ if (value !== null) css += `${name}:${value};`;
+ }
+ return css;
+}
+
+function hasInvalidAttributeNameCharacter(name: string): boolean {
+ for (let index = 0; index < name.length; index++) {
+ const code = name.charCodeAt(index);
+ if (code <= 0x1f || (code >= 0x7f && code <= 0x9f) || invalidAttributeNameCodes.has(code)) return true;
+ }
+ return false;
+}
+
+function isPromiseLike(value: unknown): value is PromiseLike {
+ return (
+ (typeof value === "object" || typeof value === "function") &&
+ value !== null &&
+ "then" in value &&
+ typeof value.then === "function"
+ );
+}
+
+function isIterable(value: unknown): value is Iterable {
+ return typeof value === "object" && value !== null && Symbol.iterator in value;
+}
diff --git a/packages/simplejsx/lib/jsx-dev-runtime.ts b/packages/simplejsx/lib/jsx-dev-runtime.ts
new file mode 100644
index 0000000..be11799
--- /dev/null
+++ b/packages/simplejsx/lib/jsx-dev-runtime.ts
@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxDEV, jsxs } from "./index.js";
+export type { JSX } from "./index.js";
diff --git a/packages/simplejsx/lib/jsx-runtime.ts b/packages/simplejsx/lib/jsx-runtime.ts
new file mode 100644
index 0000000..250283c
--- /dev/null
+++ b/packages/simplejsx/lib/jsx-runtime.ts
@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxs } from "./index.js";
+export type { JSX } from "./index.js";
diff --git a/packages/simplejsx/lib/node.ts b/packages/simplejsx/lib/node.ts
new file mode 100644
index 0000000..3cb135a
--- /dev/null
+++ b/packages/simplejsx/lib/node.ts
@@ -0,0 +1,29 @@
+import type { ElementType, Props } from "./types.js";
+
+/** Branded wrapper so raw HTML has to be opted into with `unsafeHTML()`. */
+export class HTML {
+ readonly #value: string;
+
+ private constructor(value: string) {
+ this.#value = value;
+ }
+
+ static from(value: string): HTML {
+ return new HTML(value);
+ }
+
+ toString(): string {
+ return this.#value;
+ }
+}
+
+/** Keeps JSX lazy so components and promises resolve during rendering. */
+export class JSXNode {
+ readonly type: ElementType;
+ readonly props: Props;
+
+ constructor(type: ElementType, props: Props) {
+ this.type = type;
+ this.props = props;
+ }
+}
diff --git a/packages/simplejsx/lib/types.ts b/packages/simplejsx/lib/types.ts
new file mode 100644
index 0000000..a1b07a0
--- /dev/null
+++ b/packages/simplejsx/lib/types.ts
@@ -0,0 +1,80 @@
+import type { Properties, PropertiesHyphen } from "csstype";
+import type { HTML, JSXNode } from "./node.js";
+
+export type MaybePromise = T | Promise;
+
+export type CSSProperties = Properties &
+ PropertiesHyphen & {
+ [property: `--${string}`]: string | number | null | undefined;
+ };
+
+type ChildValue = HTML | JSXNode | string | number | bigint | boolean | null | undefined | Iterable;
+
+export type Child = ChildValue | Promise;
+export type Props = Record & {
+ children?: Child;
+};
+export type Component> = (props: ComponentProps) => Child;
+export type PropsWithChildren> = ComponentProps & {
+ children?: Child;
+};
+export type ElementType> = string | Component;
+export type AttributeValue = string | number | bigint | boolean | null | undefined;
+
+/**
+ * Global attributes available on all elements.
+ *
+ * Common camelCase aliases (className, htmlFor, etc.) are included for
+ * React/Preact familiarity. The renderer maps them to their HTML equivalents.
+ */
+export type HTMLAttributes = {
+ children?: Child;
+ class?: MaybePromise;
+ id?: MaybePromise;
+ style?: MaybePromise;
+ [attribute: `aria-${string}`]: MaybePromise;
+ [attribute: `data-${string}`]: MaybePromise;
+ [attribute: string]: unknown;
+};
+
+/**
+ * Derives element-specific attributes from a DOM element interface.
+ *
+ * Filters out inherited base properties and methods, keeping DOM property
+ * names as-is (camelCase). The renderer handles conversion to HTML attributes.
+ */
+type ElementSpecific = {
+ [K in keyof T as K extends keyof Base
+ ? never
+ : T[K] extends (...args: any[]) => any
+ ? never
+ : K extends string
+ ? K
+ : never]?: MaybePromise;
+};
+
+export namespace JSX {
+ export type Element = JSXNode;
+ export type ElementType = keyof IntrinsicElements | Component;
+
+ export interface ElementChildrenAttribute {
+ children: Child;
+ }
+
+ export type IntrinsicAttributes = {};
+
+ type HTMLIntrinsicElements = {
+ [Tag in keyof HTMLElementTagNameMap]: HTMLAttributes &
+ ElementSpecific;
+ };
+
+ type SVGIntrinsicElements = {
+ [Tag in keyof SVGElementTagNameMap as Tag extends keyof HTMLElementTagNameMap
+ ? never
+ : Tag]: HTMLAttributes & ElementSpecific;
+ };
+
+ export interface IntrinsicElements extends HTMLIntrinsicElements, SVGIntrinsicElements {
+ [tagName: string]: HTMLAttributes;
+ }
+}
diff --git a/packages/simplejsx/package.json b/packages/simplejsx/package.json
new file mode 100644
index 0000000..687894a
--- /dev/null
+++ b/packages/simplejsx/package.json
@@ -0,0 +1,70 @@
+{
+ "name": "simplejsx",
+ "version": "0.1.0",
+ "support": "unstable",
+ "description": "Minimal JSX templating for safe HTML strings",
+ "keywords": [
+ "jsx",
+ "html",
+ "template",
+ "templating",
+ "ssg",
+ "ssr"
+ ],
+ "homepage": "https://github.com/explodingcamera/esm/tree/main/packages/simplejsx",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/explodingcamera/esm.git",
+ "directory": "packages/simplejsx"
+ },
+ "license": "MIT",
+ "author": "Henry Gressmann ",
+ "type": "module",
+ "sideEffects": false,
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.mts",
+ "import": "./dist/index.mjs",
+ "default": "./dist/index.mjs"
+ },
+ "./jsx-runtime": {
+ "types": "./dist/jsx-runtime.d.mts",
+ "import": "./dist/jsx-runtime.mjs",
+ "default": "./dist/jsx-runtime.mjs"
+ },
+ "./jsx-dev-runtime": {
+ "types": "./dist/jsx-dev-runtime.d.mts",
+ "import": "./dist/jsx-dev-runtime.mjs",
+ "default": "./dist/jsx-dev-runtime.mjs"
+ }
+ },
+ "main": "dist/index.mjs",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.mts",
+ "source": "lib/index.ts",
+ "files": [
+ "dist",
+ "lib/elements.ts",
+ "lib/index.ts",
+ "lib/jsx-dev-runtime.ts",
+ "lib/jsx-runtime.ts",
+ "lib/node.ts",
+ "lib/types.ts"
+ ],
+ "scripts": {
+ "prepublishOnly": "bun run --cwd ../.. build"
+ },
+ "tsdown": {
+ "entry": [
+ "lib/index.ts",
+ "lib/jsx-runtime.ts",
+ "lib/jsx-dev-runtime.ts"
+ ]
+ },
+ "dependencies": {
+ "csstype": "^3.2.3"
+ },
+ "engines": {
+ "node": ">=22.0.0"
+ }
+}
diff --git a/packages/spaify/CHANGELOG.md b/packages/spaify/CHANGELOG.md
index 98e60a3..1d279a3 100644
--- a/packages/spaify/CHANGELOG.md
+++ b/packages/spaify/CHANGELOG.md
@@ -1,54 +1,22 @@
-# spaify [](https://paka.dev/npm/spaify) [](https://www.npmjs.com/package/spaify)
+# Changelog
-## 0.0.8
+All notable changes to this project will be documented in this file.
-### Patch Changes
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/2.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-- fix: update build scripts
+## [0.0.8]
-## 0.0.7
+- Update build scripts.
-### Patch Changes
+## [0.0.3]
-- [`7adf233`](https://github.com/explodingcamera/esm/commit/7adf23335c7ae82b5237e3bb8e5288fdaf78b701) - chore: update dependencies
+- Support nested anchor tags.
-## 0.0.6
+## [0.0.2]
-### Patch Changes
+- Add script handling.
-- [`2b328ea`](https://github.com/explodingcamera/esm/commit/2b328eacef3fe12dcce1587d4f7f3dce14f26764) - update dependencies
+## [0.0.1]
-## 0.0.5
-
-### Patch Changes
-
-- update dependencies
-
-- [`3169f4f`](https://github.com/explodingcamera/esm/commit/3169f4f5924f4e870bf25910ab2e9c79fd718057) - chore: update dependencies
-
-## 0.0.4
-
-### Patch Changes
-
-- chore: update dependencies
-
-- [`b8b2d3d`](https://github.com/explodingcamera/esm/commit/b8b2d3dbb0c99159f5d643f476e623cd56278017) - update dependencies
-
-## 0.0.3
-
-### Patch Changes
-
-- feat: nested a tags
-
-## 0.0.2
-
-### Patch Changes
-
-- [`67ec722`](https://github.com/explodingcamera/esm/commit/67ec722d0193008b3ff5487b5685a71d4b2e7999) - feat: scripts
-
-## 0.0.1
-
-### Patch Changes
-
-- [`28b2765`](https://github.com/explodingcamera/esm/commit/28b276523ad007ab9ae0402a7d5d5b7360f1d7ed) - initial release
-- [`28b2765`](https://github.com/explodingcamera/esm/commit/28b276523ad007ab9ae0402a7d5d5b7360f1d7ed) - chore: update dependencies
+- Initial release.
diff --git a/packages/spaify/LICENSE.md b/packages/spaify/LICENSE.md
new file mode 100644
index 0000000..bd0e8bf
--- /dev/null
+++ b/packages/spaify/LICENSE.md
@@ -0,0 +1,19 @@
+Copyright (c) 2023-2026 Henry Gressmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/spaify/package.json b/packages/spaify/package.json
index 4be34ab..78be30f 100644
--- a/packages/spaify/package.json
+++ b/packages/spaify/package.json
@@ -8,10 +8,17 @@
"turbolinks"
],
"homepage": "https://github.com/explodingcamera/esm/tree/main/packages/spaify",
- "repository": "https://github.com/explodingcamera/esm",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/explodingcamera/esm.git",
+ "directory": "packages/spaify"
+ },
"license": "MIT",
"author": "Henry Gressmann ",
"type": "module",
+ "sideEffects": [
+ "./dist/default.mjs"
+ ],
"exports": {
".": {
"types": "./dist/index.d.mts",
@@ -30,6 +37,9 @@
"files": [
"dist"
],
+ "scripts": {
+ "prepublishOnly": "bun run --cwd ../.. build"
+ },
"tsdown": {
"entry": [
"lib/index.ts",
Asyncx<y
');
+ await expect(
+ renderAsync(),
+ ).resolves.toBe("");
+ await expect(
+ renderAsync(jsx("img", { src: "/image.png" }), {
+ element: async ({ tag, props }) =>
+ tag === "img" ? { ...props, alt: Promise.resolve("A&B") } : undefined,
+ }),
+ ).resolves.toBe('');
+ await expect(
+ renderAsync(, {
+ element: async ({ tag, props }) => {
+ if (tag !== "img") return;
+
+ await Promise.resolve();
+ props["width"] = 1200;
+ props["height"] = 800;
+ },
+ }),
+ ).resolves.toBe('');
+});
+
+test("async head", async () => {
+ await expect(
+ renderAsync(
+
+
+ {Promise.resolve("Async")}
)).toThrow("renderAsync");
+ expect(() => render(, { element: async () => {} })).toThrow("renderAsync");
+});
+
+test("function attrs", () => {
+ expect(
+ render(
+ ,
+ ),
+ ).toBe('');
+ expect(() => render(jsx("div", { value: () => {} }))).toThrow("function prop");
+});
+
+test("void children", () => {
+ expect(() => render(jsx("input", { children: "bad" }))).toThrow("void element");
+});
diff --git a/packages/simplejsx/lib/index.ts b/packages/simplejsx/lib/index.ts
new file mode 100644
index 0000000..a6368f4
--- /dev/null
+++ b/packages/simplejsx/lib/index.ts
@@ -0,0 +1,508 @@
+/**
+ * Minimal JSX templating for safe HTML strings.
+ *
+ * `simplejsx` renders JSX to escaped HTML strings. It works well for
+ * server-side templates, static sites, emails, and other places where a string
+ * is the whole output. This is not a React replacement and does not handle
+ * browser interactivity.
+ *
+ * @remarks
+ * ## Setup
+ *
+ * Use the automatic JSX runtime. In TypeScript projects, put this in `tsconfig.json`:
+ *
+ * ```json
+ * {
+ * "compilerOptions": {
+ * "jsx": "react-jsx",
+ * "jsxImportSource": "simplejsx"
+ * }
+ * }
+ * ```
+ *
+ * In Deno, use `"jsxImportSource": "npm:simplejsx"` unless an import map points
+ * `simplejsx` at the package.
+ *
+ * ## Render HTML
+ *
+ * ```tsx
+ * import { render, type PropsWithChildren } from "simplejsx";
+ *
+ * function Layout({ children }: PropsWithChildren) {
+ * return Hello {name}
); + * // "Hello <Henry>
" + * ``` + * + * @packageDocumentation + */ +import { + attributeAliases, + booleanAttributes, + invalidAttributeNameCodes, + invalidStylePropertyNameCodes, + unitlessStyleProperties, + voidTags, +} from "./elements.js"; +import { HTML, JSXNode } from "./node.js"; +import type { Child, ElementType, MaybePromise, Props, PropsWithChildren } from "./types.js"; + +export { HTML, JSXNode } from "./node.js"; +export type { + AttributeValue, + Child, + Component, + CSSProperties, + ElementType, + HTMLAttributes, + JSX, + MaybePromise, + Props, + PropsWithChildren, +} from "./types.js"; + +const asyncRenderError = "simplejsx: render() encountered async content. Use renderAsync() instead."; + +export type ElementMiddlewareArgs = { + tag: string; + props: Props; +}; + +type ElementMiddlewareReplacement = ( + element: ElementMiddlewareArgs, +) => MaybePromiseone
two
); + * // "one
two
" + * ``` + */ +export function Fragment({ children }: PropsWithChildren): Child { + return children; +} + +/** + * Marks trusted markup as already-safe HTML. + * + * Use this only for HTML you control. Plain strings are escaped by default. + * + * @example + * ```tsx + * render({unsafeHTML("trusted")}
);
+ * // "trusted
"
+ * ```
+ */
+export function unsafeHTML(value: string): HTML {
+ return HTML.from(value);
+}
+
+/**
+ * Renders JSX to an HTML string synchronously.
+ *
+ * Throws if it encounters async content so Promises are never silently skipped.
+ *
+ * @example
+ * ```tsx
+ * render(Hello {"
Hello <Henry>
" + * ``` + */ +export function render(value: Child, options?: RenderOptions): string { + const root: HeadRoot = { headChildren: [] }; + const elementMiddleware: readonly ElementMiddleware[] = options?.element + ? Array.isArray(options.element) + ? options.element.flat() + : [options.element] + : []; + return renderHead(root, renderChildSync(value, { root, elementMiddleware })); +} + +/** + * Renders JSX to an HTML string and awaits async content. + * + * Use this for async components, promise children, promise attributes, or async + * element middleware. + * + * @example + * ```tsx + * const title = Promise.resolve("a&b"); + * const message = Promise.resolve("Hello{message}
); + * // "Hello <Henry>
" + * ``` + */ +export async function renderAsync(value: Child, options?: RenderOptions): Promise