feat: element middlewares, general cleanup

Signed-off-by: Henry <mail@henrygressmann.de>

Author: explodingcamera

biome.json

@@ -30,7 +30,8 @@
 			},
 			"complexity": {
 				"noBannedTypes": "off",
-				"noForEach": "off"
+				"noForEach": "off",
+				"useLiteralKeys": "off"
 			}
 		}
 	}

examples/simplejsx/README.md

@@ -5,4 +5,5 @@ Run this example from the repo root:
 ```bash
 bun run build
 bun examples/simplejsx/index.tsx
+bun examples/simplejsx/middleware.tsx
 ```

examples/simplejsx/middleware.tsx

@@ -0,0 +1,52 @@
+/** @jsxImportSource simplejsx */
+import { renderAsync, type ElementMiddleware, type PropsWithChildren } from "simplejsx";
+
+function Document({ children }: PropsWithChildren) {
+	return (
+		<html lang="en">
+			<head>
+				<meta charset="utf-8" />
+				<title>simplejsx middleware</title>
+			</head>
+			<body>{children}</body>
+		</html>
+	);
+}
+
+const externalLinks: ElementMiddleware = ({ tag, props }) => {
+	if (tag !== "a" || typeof props["href"] !== "string") return;
+	if (!props["href"].startsWith("https://")) return;
+
+	return { ...props, target: "_blank", rel: "noreferrer" };
+};
+
+const imageMetadata: ElementMiddleware = async ({ tag, props }) => {
+	if (tag !== "img" || typeof props["src"] !== "string") return;
+
+	const size = await getImageSize(props["src"]);
+	return {
+		...props,
+		loading: props["loading"] ?? "lazy",
+		width: size.width,
+		height: size.height,
+	};
+};
+
+async function getImageSize(_src: string) {
+	return { width: 1200, height: 800 };
+}
+
+const html = await renderAsync(
+	<Document>
+		<main>
+			<h1>Element middleware</h1>
+			<a href="https://example.com">External link</a>
+			<img src="/photo.jpg" alt="A mountain lake" />
+		</main>
+	</Document>,
+	{
+		element: [externalLinks, imageMetadata],
+	},
+);
+
+console.log(`<!doctype html>${html}`);

packages/css/package.json

@@ -4,10 +4,18 @@
 	"description": "",
 	"keywords": [],
 	"homepage": "https://github.com/explodingcamera/esm/tree/main/packages/css",
-	"repository": "https://github.com/explodingcamera/esm",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/explodingcamera/esm.git",
+		"directory": "packages/css"
+	},
 	"license": "MIT",
 	"author": "Henry Gressmann <npm@henrygressmann.de>",
 	"type": "module",
+	"sideEffects": [
+		"*.css",
+		"*.js"
+	],
 	"exports": {
 		"./reset": "./reset.js",
 		"./reset.css": "./reset.css",

packages/minify-literals/package.json

@@ -11,10 +11,15 @@
 		"template-literals"
 	],
 	"homepage": "https://github.com/explodingcamera/esm/tree/main/packages/minify-literals",
-	"repository": "https://github.com/explodingcamera/esm",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/explodingcamera/esm.git",
+		"directory": "packages/minify-literals"
+	},
 	"license": "MIT",
 	"author": "Henry Gressmann <npm@henrygressmann.de>",
 	"type": "module",
+	"sideEffects": false,
 	"exports": {
 		".": {
 			"types": "./dist/index.d.mts",
@@ -28,6 +33,9 @@
 	"files": [
 		"dist"
 	],
+	"scripts": {
+		"prepublishOnly": "bun run --cwd ../.. build"
+	},
 	"tsdown": {
 		"entry": "lib/index.ts"
 	},

packages/rollup-plugin-minify-template-literals/package.json

@@ -16,10 +16,15 @@
 		"template-literals"
 	],
 	"homepage": "https://github.com/explodingcamera/esm/tree/main/packages/rollup-plugin-minify-template-literals",
-	"repository": "https://github.com/explodingcamera/esm",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/explodingcamera/esm.git",
+		"directory": "packages/rollup-plugin-minify-template-literals"
+	},
 	"license": "MIT",
 	"author": "Henry Gressmann <npm@henrygressmann.de>",
 	"type": "module",
+	"sideEffects": false,
 	"exports": {
 		".": {
 			"types": "./dist/index.d.mts",
@@ -33,6 +38,9 @@
 	"files": [
 		"dist"
 	],
+	"scripts": {
+		"prepublishOnly": "bun run --cwd ../.. build"
+	},
 	"tsdown": {
 		"entry": "lib/index.ts",
 		"deps": {

packages/simplejsx/README.md

@@ -1,10 +1,10 @@
 # simplejsx
 
-A minimal JSX templating library for rendering safe HTML strings.
+Minimal JSX templating for safe HTML strings.
 
-`simplejsx` is a small JSX-to-HTML renderer for server-side templates, static site generation, emails,
-and other places where you just want to emit HTML. It is not a React replacement: there are no hooks,
-DOM rendering, hydration, Suspense, or React compatibility APIs.
+`simplejsx` renders JSX to 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.
 
 Full API docs: [jsdocs.io/package/simplejsx](https://www.jsdocs.io/package/simplejsx)  
 Examples: [`examples/simplejsx`](../../examples/simplejsx)
@@ -17,7 +17,7 @@ npm install simplejsx
 
 ## Setup
 
-Use the automatic JSX runtime with `jsxImportSource` to use `simplejsx` as the JSX factory. In `tsconfig.json`:
+Use the automatic JSX runtime with `jsxImportSource`. In `tsconfig.json`:
 
 ```json
 {
@@ -54,11 +54,14 @@ const html = render(
 );
 ```
 
-Text and attributes are escaped by default. Use `renderAsync()` for async components, promise children,
-or promise attributes. Nested `<head>` elements are merged into the top-level `<head>`, so page
-components can set titles and metadata from inside a shared layout.
+## Behavior
+
+- Text and attributes are escaped by default. Use `unsafeHTML()` only for trusted markup.
+- `style` supports strings and objects, e.g. `style="color:red"` or `style={{ marginTop: 8 }}`.
+- `renderAsync()` awaits async components, promise children, and promise attributes.
+- Nested `<head>` elements are merged into the top-level `<head>`.
 
 ## See Also
 
-- [Hono JSX](https://hono.dev/docs/guides/jsx) - JSX rendering for Hono apps, with a much broader runtime + dom API.
-- [Preact](https://preactjs.com/) - React-compatible UI components with DOM rendering and hydration.
+- [Hono JSX](https://hono.dev/docs/guides/jsx) for Hono apps. It has a much broader runtime and DOM API.
+- [Preact](https://preactjs.com/) for React-compatible UI components, DOM rendering, and hydration.

packages/simplejsx/lib/index.test.tsx

@@ -66,6 +66,24 @@ test("attributes", () => {
 	expect(render(<input disabled checked={false} value="name" />)).toBe('<input disabled value="name">');
 });
 
+test("element middleware", () => {
+	expect(
+		render(<a href="/docs">Docs</a>, {
+			element: [
+				({ tag, props }) => (tag === "a" ? { ...props, target: "_blank" } : undefined),
+				({ tag, props }) => {
+					if (tag === "a") props["rel"] = "noreferrer";
+				},
+			],
+		}),
+	).toBe('<a href="/docs" target="_blank" rel="noreferrer">Docs</a>');
+	expect(
+		render(<p>Hi</p>, {
+			element: [[({ props }) => ({ ...props, class: "message" })]],
+		}),
+	).toBe('<p class="message">Hi</p>');
+});
+
 test("style", () => {
 	expect(
 		render(
@@ -79,6 +97,18 @@ test("style", () => {
 			/>,
 		),
 	).toBe('<div style="margin-top:10px;opacity:0.5;--gap:2;background-color:red;"></div>');
+	expect(render(<div style={'color: red; --label: "a&b";'} />)).toBe(
+		'<div style="color: red; --label: &quot;a&amp;b&quot;;"></div>',
+	);
+});
+
+test("children arrays and null", () => {
+	function Box({ children }: PropsWithChildren) {
+		return <div>{children}</div>;
+	}
+
+	expect(render(<Box>{[<span>one</span>, null, "two"]}</Box>)).toBe("<div><span>one</span>two</div>");
+	expect(render(jsx("div", { children: null }))).toBe("<div></div>");
 });
 
 test("head hoisting", () => {
@@ -138,6 +168,26 @@ test("async", async () => {
 			</div>,
 		),
 	).resolves.toBe('<div title="a&amp;b"><strong>Async</strong>x&lt;y</div>');
+	await expect(
+		renderAsync(<div title={Promise.resolve(null)} data-id={Promise.resolve(undefined)} />),
+	).resolves.toBe("<div></div>");
+	await expect(
+		renderAsync(jsx("img", { src: "/image.png" }), {
+			element: async ({ tag, props }) =>
+				tag === "img" ? { ...props, alt: Promise.resolve("A&B") } : undefined,
+		}),
+	).resolves.toBe('<img src="/image.png" alt="A&amp;B">');
+	await expect(
+		renderAsync(<img src="/photo.jpg" alt="Mountain lake" />, {
+			element: async ({ tag, props }) => {
+				if (tag !== "img") return;
+
+				await Promise.resolve();
+				props["width"] = 1200;
+				props["height"] = 800;
+			},
+		}),
+	).resolves.toBe('<img src="/photo.jpg" alt="Mountain lake" width="1200" height="800">');
 });
 
 test("async head", async () => {
@@ -166,6 +216,7 @@ test("sync rejects async", () => {
 
 	expect(() => render(<Message />)).toThrow("renderAsync");
 	expect(() => render(<div>{Promise.resolve("Async")}</div>)).toThrow("renderAsync");
+	expect(() => render(<div />, { element: async () => {} })).toThrow("renderAsync");
 });
 
 test("function attrs", () => {