redweb 0.16.3 → 0.16.4

package/index.d.ts

@@ -725,10 +725,13 @@ declare module 'redweb' {
     export function attribute(value: string | number | bigint | boolean): HtmlAttribute;
     export function url(value: string): HtmlUrl;
     export function each<Item>(items: readonly Item[], render: (item: Item, index: number) => HtmlFragment): HtmlFragment;
+    /** Escaped JS/TS/TSX token markup, including references inside rw-* JSX expressions. */
+    export function highlightCode(source: string, language: string): HtmlFragment;
     export function codeBlock(code: unknown, options?: {
         language?: string;
         label?: string;
-        highlight?: (source: string, language: string) => HtmlFragment;
+        /** Defaults to Redweb's JS/TS/TSX highlighter. false keeps escaped plain text. */
+        highlight?: false | ((source: string, language: string) => HtmlFragment);
     }): HtmlFragment;
 
     export type LivePageClass = new () => object;

package/index.js

@@ -19,7 +19,7 @@ const { Application, defineApp } = require('./src/Application');
 const { connectedClients, ConnectedClients, ConnectedClient, ClientError } = require('./src/ws/ConnectedClients');
 const HttpServer = require('./src/http/HttpServer');
 const HttpsServer = require('./src/http/HttpsServer');
-const { action, attribute, codeBlock, component, defineSite, each, exportStatic, html, HtmlRenderer, inject, LiveHtmlServer, LivePage, LiveResource, liveResource, page, resource, start, state, upload, url, view } = require('./src/htmx');
+const { action, attribute, codeBlock, component, defineSite, each, exportStatic, highlightCode, html, HtmlRenderer, inject, LiveHtmlServer, LivePage, LiveResource, liveResource, page, resource, start, state, upload, url, view } = require('./src/htmx');
 module.exports = {
     Application,
     defineApp,
@@ -53,6 +53,7 @@ module.exports = {
     defineSite,
     each,
     exportStatic,
+    highlightCode,
     html,
     HtmlRenderer,
     inject,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redweb",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "A small Node.js foundation for HTTP, WebSockets, multiplayer services, and server-rendered HTML",
   "main": "index.js",
   "types": "index.d.ts",
@@ -39,6 +39,7 @@
       "default": "./jsx-dev-runtime.js"
     },
     "./tsconfig.json": "./config/tsconfig.json",
+    "./code-highlight.css": "./styles/code-highlight.css",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -114,6 +115,7 @@
     "bin",
     "config",
     "src/*",
+    "styles",
     "client.js",
     "client.d.ts",
     "contract.js",
@@ -163,7 +165,9 @@
     "ws": "^8.21.3"
   },
   "overrides": {
-    "express": { "qs": "6.16.0" }
+    "express": {
+      "qs": "6.16.0"
+    }
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",

package/src/htmx/CodeHighlight.js

@@ -0,0 +1,98 @@
+const KEYWORDS = new Set([
+    'async', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue',
+    'default', 'delete', 'do', 'else', 'export', 'extends', 'finally', 'for',
+    'from', 'function', 'if', 'import', 'in', 'instanceof', 'let', 'new',
+    'of', 'return', 'static', 'super', 'switch', 'throw', 'try', 'typeof',
+    'var', 'while', 'yield',
+]);
+const LITERALS = new Set(['false', 'null', 'true', 'undefined']);
+const LANGUAGES = new Set(['js', 'javascript', 'ts', 'typescript', 'tsx']);
+const identifierStart = character => /[A-Za-z_$]/.test(character);
+const identifierPart = character => /[A-Za-z0-9_$]/.test(character);
+
+function actionAttributeBefore(source, brace) {
+    let index = brace - 1;
+    while (index >= 0 && /\s/.test(source[index])) index -= 1;
+    if (source[index] !== '=') return false;
+    index -= 1;
+    while (index >= 0 && /\s/.test(source[index])) index -= 1;
+    const end = index + 1;
+    while (index >= 0 && /[\w-]/.test(source[index])) index -= 1;
+    return /^rw-[\w-]+$/.test(source.slice(index + 1, end));
+}
+
+function quotedEnd(source, start) {
+    const quote = source[start];
+    let index = start + 1;
+    while (index < source.length) {
+        if (source[index] === '\\') index += 2;
+        else if (source[index++] === quote) break;
+    }
+    return index;
+}
+
+function tokens(source) {
+    const result = [];
+    let index = 0;
+    let actionDepth = 0;
+    const push = (kind, end) => {
+        result.push({ kind, value: source.slice(index, end) });
+        index = end;
+    };
+    while (index < source.length) {
+        if (source.startsWith('//', index)) {
+            const newline = source.indexOf('\n', index);
+            push('comment', newline < 0 ? source.length : newline);
+            continue;
+        }
+        if (source.startsWith('/*', index)) {
+            const close = source.indexOf('*/', index + 2);
+            push('comment', close < 0 ? source.length : close + 2);
+            continue;
+        }
+        const character = source[index];
+        if (character === '{') {
+            if (actionDepth) actionDepth += 1;
+            else if (actionAttributeBefore(source, index)) actionDepth = 1;
+            push('plain', index + 1);
+            continue;
+        }
+        if (character === '}') {
+            if (actionDepth) actionDepth -= 1;
+            push('plain', index + 1);
+            continue;
+        }
+        if (character === "'" || character === '"' || character === '`') {
+            push('string', quotedEnd(source, index));
+            continue;
+        }
+        if (/\d/.test(character)) {
+            const match = /^(?:0[xob][\da-f]+|\d+(?:\.\d+)?(?:e[+-]?\d+)?)/i.exec(source.slice(index));
+            push('number', index + match[0].length);
+            continue;
+        }
+        if (identifierStart(character)) {
+            let end = index + 1;
+            while (end < source.length && identifierPart(source[end])) end += 1;
+            const value = source.slice(index, end);
+            push(KEYWORDS.has(value) ? 'keyword' : LITERALS.has(value) ? 'literal' : actionDepth ? 'reference' : 'plain', end);
+            continue;
+        }
+        let end = index + 1;
+        while (end < source.length && !source.startsWith('//', end) && !source.startsWith('/*', end)
+            && !['{', '}', "'", '"', '`'].includes(source[end]) && !/\d/.test(source[end])
+            && !identifierStart(source[end])) end += 1;
+        push('plain', end);
+    }
+    return result;
+}
+
+function highlightCode(source, language) {
+    const { html } = require('./Html');
+    if (!LANGUAGES.has(language)) return html`${source}`;
+    return html`${tokens(source).map(token => token.kind === 'plain'
+        ? html`${token.value}`
+        : html`<span class="${`token-${token.kind}`}">${token.value}</span>`)}`;
+}
+
+module.exports = { highlightCode };

package/src/htmx/Html.js

@@ -123,12 +123,13 @@ function codeBlock(code, options = {}) {
         throw new TypeError('codeBlock() language must be a safe name of at most 32 characters.');
     }
     if (typeof label !== 'string') throw new TypeError('codeBlock() label must be a string.');
-    if (highlight !== undefined && typeof highlight !== 'function') throw new TypeError('codeBlock() highlight must be a function.');
+    if (highlight !== undefined && highlight !== false && typeof highlight !== 'function') throw new TypeError('codeBlock() highlight must be a function or false.');
     const caption = label ? html`<figcaption>${label}</figcaption>` : html``;
     let content = isHtml(code) ? code : String(code ?? '');
-    if (highlight) {
+    const highlighter = highlight === false ? undefined : highlight ?? (isHtml(code) ? undefined : require('./CodeHighlight').highlightCode);
+    if (highlighter) {
         if (isHtml(code)) throw new TypeError('codeBlock() cannot highlight an HtmlFragment.');
-        content = synchronous(highlight(content, language), 'codeBlock() highlight must render synchronously.');
+        content = synchronous(highlighter(content, language), 'codeBlock() highlight must render synchronously.');
         if (!isHtml(content)) throw new TypeError('codeBlock() highlight must return an HtmlFragment.');
     }
     return html`<figure class="redweb-code">${caption}<pre><code class="${attribute(`language-${language}`)}">${content}</code></pre></figure>`;

package/src/htmx/index.js

@@ -2,10 +2,11 @@ const HtmlRenderer = require('./HtmlRenderer');
 const LiveHtmlServer = require('./LiveHtmlServer');
 const LivePage = require('./LivePage');
 const { attribute, codeBlock, each, html, safeUrl: url } = require('./Html');
+const { highlightCode } = require('./CodeHighlight');
 const { action, component, inject, page, resource, state, upload, view } = require('./metadata');
 const { LiveResource, liveResource } = require('./LiveResource');
 const { start } = require('./start');
 const { exportStatic } = require('./StaticExporter');
 const { defineSite } = require('./StaticSite');
 
-module.exports = { action, attribute, codeBlock, component, defineSite, each, exportStatic, html, HtmlRenderer, inject, LiveHtmlServer, LivePage, LiveResource, liveResource, page, resource, start, state, upload, url, view };
+module.exports = { action, attribute, codeBlock, component, defineSite, each, exportStatic, highlightCode, html, HtmlRenderer, inject, LiveHtmlServer, LivePage, LiveResource, liveResource, page, resource, start, state, upload, url, view };

package/styles/code-highlight.css

@@ -0,0 +1,16 @@
+.redweb-code {
+    color: #e5e7eb;
+    background: #111827;
+    border-radius: 0.75rem;
+    overflow: hidden;
+}
+.redweb-code pre {
+    overflow-x: auto;
+    padding: 1rem;
+}
+.redweb-code .token-comment { color: #7dd3fc; }
+.redweb-code .token-keyword { color: #93c5fd; }
+.redweb-code .token-literal { color: #c4b5fd; }
+.redweb-code .token-number { color: #fcd34d; }
+.redweb-code .token-string { color: #fca5a5; }
+.redweb-code .token-reference { color: #a7f3d0; }