twynejs 1.0.4 → 1.0.5

package/dist/jsx-runtime.d.ts

@@ -4,6 +4,46 @@ export interface HtmlValue {
     readonly value: string;
     toString(): string;
 }
+/**
+ * Registers the CSS-module map `jsx()` should use to resolve plain class
+ * names for the *current* render, so you don't have to write
+ * `className={styles.title}` on every single element. Call it once,
+ * before building the JSX tree that should use it — typically as the
+ * first line of a page's `mount()`:
+ *
+ * ```tsx
+ * import styles from "./about.module.css";
+ * import { useStyles } from "twynejs/jsx-runtime";
+ *
+ * export default function mount(el: HTMLElement) {
+ *   useStyles(styles);
+ *   el.innerHTML = (
+ *     <>
+ *       <h1 className="title">About</h1>
+ *       <p className="title lead">Still just a plain string.</p>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * Every whitespace-separated class token that matches a key in `styles`
+ * is swapped for its scoped/hashed value (`"title"` → `styles.title`,
+ * e.g. `"_title_a1b2c3_1"`); any token that doesn't match (utility
+ * classes, classes from a global stylesheet, …) is left exactly as
+ * written. Pass `null` (or nothing) to go back to plain, unresolved class
+ * names.
+ *
+ * Because this whole library renders synchronously — there is no `await`
+ * between `useStyles()` and the `jsx()` calls it applies to — one
+ * module-level value is enough for a single page's render. It does,
+ * however, stay set until something changes it again: if your app's
+ * router calls multiple pages' `mount()` functions over the page's
+ * lifetime (as the `singleFile` hash-router example does), call
+ * `useStyles(null)` right before invoking a page's `mount()` (or have
+ * every page call `useStyles()` itself, even with `null`) so a previous
+ * page's classes can't leak into one that doesn't expect them.
+ */
+export declare function useStyles(styles: Record<string, string> | null): void;
 export declare function jsx(tag: string | ((props: any) => any), props: Record<string, any> | null, ...children: any[]): HtmlValue | string;
 export declare function jsxs(tag: string | ((props: any) => any), props: Record<string, any> | null): HtmlValue | string;
 export declare function Fragment(props: {

package/dist/jsx-runtime.js

@@ -1,5 +1,64 @@
 // Custom JSX Runtime for the SSG Pages Plugin
 const HTML = Symbol("html");
+/**
+ * The CSS-module map (e.g. `import styles from "./about.module.css"`)
+ * that `jsx()` should currently consult when resolving `class`/
+ * `className` attribute values — see `useStyles()` below.
+ */
+let activeStyles = null;
+/**
+ * Registers the CSS-module map `jsx()` should use to resolve plain class
+ * names for the *current* render, so you don't have to write
+ * `className={styles.title}` on every single element. Call it once,
+ * before building the JSX tree that should use it — typically as the
+ * first line of a page's `mount()`:
+ *
+ * ```tsx
+ * import styles from "./about.module.css";
+ * import { useStyles } from "twynejs/jsx-runtime";
+ *
+ * export default function mount(el: HTMLElement) {
+ *   useStyles(styles);
+ *   el.innerHTML = (
+ *     <>
+ *       <h1 className="title">About</h1>
+ *       <p className="title lead">Still just a plain string.</p>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * Every whitespace-separated class token that matches a key in `styles`
+ * is swapped for its scoped/hashed value (`"title"` → `styles.title`,
+ * e.g. `"_title_a1b2c3_1"`); any token that doesn't match (utility
+ * classes, classes from a global stylesheet, …) is left exactly as
+ * written. Pass `null` (or nothing) to go back to plain, unresolved class
+ * names.
+ *
+ * Because this whole library renders synchronously — there is no `await`
+ * between `useStyles()` and the `jsx()` calls it applies to — one
+ * module-level value is enough for a single page's render. It does,
+ * however, stay set until something changes it again: if your app's
+ * router calls multiple pages' `mount()` functions over the page's
+ * lifetime (as the `singleFile` hash-router example does), call
+ * `useStyles(null)` right before invoking a page's `mount()` (or have
+ * every page call `useStyles()` itself, even with `null`) so a previous
+ * page's classes can't leak into one that doesn't expect them.
+ */
+export function useStyles(styles) {
+    activeStyles = styles;
+}
+function resolveClassName(value) {
+    if (!activeStyles) {
+        return value;
+    }
+    const styles = activeStyles;
+    return value
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((token) => styles[token] ?? token)
+        .join(" ");
+}
 function renderChildren(children) {
     return children
         .flat(Infinity)
@@ -47,6 +106,13 @@ export function jsx(tag, props, ...children) {
         if (typeof value === "boolean" && booleanHtmlAttributes.has(attribute)) {
             return value ? ` ${attribute}` : "";
         }
+        // `class`/`className`: plain class-name tokens get resolved against
+        // whatever `useStyles()` last registered, so authors can keep
+        // writing ordinary string class names instead of `styles.xxx` on
+        // every element.
+        if (attribute === "class" && typeof value === "string") {
+            value = resolveClassName(value);
+        }
         // Alles andere (inkl. data-*/aria-*) bekommt immer einen expliziten
         // String-Wert, damit z.B. dataset.nested === "false" verlässlich geht.
         if (typeof value === "boolean") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twynejs",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "twine A Vite SSG plugin that turns .ts/.tsx pages, Markdown docs and Liquid/EJS templates into a multi-page static build with a virtual:pages module.",
   "type": "module",
   "main": "./dist/index.js",