@vesk/compiler 0.2.50-canary.10 → 0.2.50-canary.11

package/dist/server-jsgen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-jsgen.d.ts","sourceRoot":"","sources":["../src/server-jsgen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAOzE,OAAO,EAAkG,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAoDrK,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAgEjJ;AA4XD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAqD1F;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB;AAuFD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAkCzE;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAYhG"}
+{"version":3,"file":"server-jsgen.d.ts","sourceRoot":"","sources":["../src/server-jsgen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAOzE,OAAO,EAAkG,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AA4DrK,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CA4EjJ;AAyZD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAwD1F;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB;AAuFD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAkCzE;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAYhG"}

package/dist/server-jsgen.js

@@ -3,6 +3,13 @@ import { isStaticIR, collectTrackedNames, transformTracked, transformTrackedInit
 import { unwrapTrackCall, stripTrackGeneric, hasTopLevelComma, skipWhitespace, findBalancedEnd, startsWithIdentifier, callsIdentifier } from '@vesk/compiler/src/scan';
 import { escapeHtml, indent, exprJS, extractTopLevelNames, extractRuntimeNames, buildParamInit, __vskHydrate, __vskMarkerless, __vskImportedNames, setVskImportedNames, setVskForceClaim, takeVskForceClaim, nextVskId, } from '@vesk/compiler/src/server-utils';
 import { localValueImportNames } from '@vesk/compiler/src/module-imports';
+import { lowerJsxInExpression } from '@vesk/compiler/src/server-jsx-lowering';
+import { print } from 'esrap';
+import tsPrinter from 'esrap/languages/ts';
+/** Print an already-lowered AST with the plain TS printer (no JSX remains). */
+function printLoweredTs(ast) {
+    return print(ast, tsPrinter()).code;
+}
 import { vskImportValueNames } from '@vesk/compiler/src/vsk-imports';
 // Hydrate-mode component-boundary wrapper. Each server-rendered component call
 // is preceded by a `<!--vsk-->` marker and a single container element: the
@@ -107,8 +114,17 @@ export function irNodeToJS(node, importedNames, isAsync = false, tracked) {
             `})();`,
         ].join('\n');
     }
-    if (node instanceof RuntimeStatement)
+    if (node instanceof RuntimeStatement) {
+        const stmt = node;
+        const lowered = stmt.ast ? lowerJsxInExpression(stmt.ast) : null;
+        if (lowered && lowered !== stmt.ast && (tracked?.size ?? 0) === 0) {
+            return semicolonizeStatement(printLoweredTs(lowered));
+        }
+        if (lowered && lowered !== stmt.ast) {
+            return semicolonizeStatement(transformTracked({ ...node, ast: lowered }, tracked || new Map()));
+        }
         return semicolonizeStatement(transformTracked(node, tracked || new Map()));
+    }
     if (node instanceof SlotNode) {
         // Markerless mode drops the slot boundary comments: SSR output is plain
         // HTML and slot claims scope structurally (createLayoutSlot subject to the
@@ -133,7 +149,21 @@ function isEvent(target) {
     return !!target && target.startsWith('on') && target.length > 2;
 }
 function exprJSX(node, tracked) {
-    return exprJS(transformTracked(node, tracked || new Map()));
+    // A function-valued child — `<For each={items}>{(item) => <li/>}</For>` —
+    // carries JSX inside an EXPRESSION, and the server has no IR node for it, so
+    // it used to be printed verbatim and the render threw "Unexpected token '<'".
+    // Lower it to the string the body emitter would have produced. Client output
+    // is untouched (a chunk goes through esbuild's tsx loader, so JSX is legal
+    // there).
+    const lowered = node.ast ? lowerJsxInExpression(node.ast) : null;
+    const didLower = lowered !== node.ast;
+    if (didLower && (tracked?.size ?? 0) === 0) {
+        // `transformTracked` returns the RAW source when there is nothing to
+        // rewrite, which would throw the lowering away. With no tracked names there
+        // are no rewrites to lose.
+        return exprJS(printLoweredTs(lowered));
+    }
+    return exprJS(transformTracked({ ...node, ast: lowered }, tracked || new Map()));
 }
 function staticNodeToJS(node, isAsync = false, tracked) {
     const lines = [];
@@ -461,19 +491,35 @@ function componentCallToJS(node, importedNames, isAsync = false, tracked) {
         }
     }
     if (regularChildren.length > 0) {
-        const childLines = [];
-        for (const child of regularChildren) {
-            const code = irNodeToJS(child, importedNames, isAsync, tracked);
-            if (code)
-                childLines.push(code);
+        // A single function-valued child (`<For each={items}>{(item) => …}</For>`,
+        // or a reference to one) must stay a FUNCTION: `For` calls it per item.
+        // Wrapping it in the `(() => { const __out = []; … })()` text emitter made it
+        // return undefined, so For rendered an empty list.
+        const fnType = regularChildren.length === 1 && regularChildren[0] instanceof DynamicBinding && regularChildren[0].kind === 'text'
+            ? regularChildren[0].expression.ast?.type
+            : null;
+        const isFnChild = fnType === 'ArrowFunctionExpression'
+            || fnType === 'FunctionExpression'
+            || fnType === 'Identifier'
+            || fnType === 'MemberExpression';
+        if (isFnChild) {
+            propsEntries.push(`children: ${exprJSX(regularChildren[0].expression, tracked)}`);
         }
-        if (childLines.length > 0) {
-            const childrenVar = `__ch${nextVskId()}`;
-            propsEntries.push(`children: ${childrenVar}`);
-            lines.push(`const ${childrenVar} = ${isAsync ? 'await (async ' : '('}() => {`);
-            lines.push(`const __out = [];`);
-            lines.push(indent(childLines.join('\n')));
-            lines.push(`return __out.join(''); })();`);
+        else {
+            const childLines = [];
+            for (const child of regularChildren) {
+                const code = irNodeToJS(child, importedNames, isAsync, tracked);
+                if (code)
+                    childLines.push(code);
+            }
+            if (childLines.length > 0) {
+                const childrenVar = `__ch${nextVskId()}`;
+                propsEntries.push(`children: ${childrenVar}`);
+                lines.push(`const ${childrenVar} = ${isAsync ? 'await (async ' : '('}() => {`);
+                lines.push(`const __out = [];`);
+                lines.push(indent(childLines.join('\n')));
+                lines.push(`return __out.join(''); })();`);
+            }
         }
     }
     const propsObj = `{ ${propsEntries.join(', ')} }`;
@@ -503,10 +549,10 @@ function componentCallToJS(node, importedNames, isAsync = false, tracked) {
     }
     const callExpr = `${awaitKw}${calleeVar}(${propsObj}, __registry, (${calleeVar}.__veskScope || __vesk))`;
     if (__vskHydrate && !__vskMarkerless) {
-        lines.push(`__out.push(${JSON.stringify(componentMarker(compName))} + (${callExpr} || ''));`);
+        lines.push(`__out.push(${JSON.stringify(componentMarker(compName))} + __flat(${callExpr}));`);
     }
     else {
-        lines.push(`__out.push(${callExpr} || '');`);
+        lines.push(`__out.push(__flat(${callExpr}));`);
     }
     return lines.join('\n');
 }
@@ -524,6 +570,9 @@ export function generateFunctionBody(comp, importedNames) {
     lines.push(`const __styleText = (v) => { if (typeof v === 'string') return v; if (v && typeof v === 'object') { let s = ''; for (const k in v) { const x = v[k]; if (x == null || x === false) continue; s += k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()) + ':' + x + ';'; } return s; } return String(v); };`);
     lines.push(`const __attr = (n, v) => (v == null || v === false) ? '' : ' ' + n + '="' + __escape(n === 'style' ? __styleText(v) : String(v)) + '"';`);
     lines.push(`const raw = (s) => s == null ? '' : String(s);`);
+    // A component may return an ARRAY of strings (`<For>` maps its children), and
+    // `Array#toString` joins the rows with commas — `<li>a</li>,<li>b</li>`.
+    lines.push(`const __flat = (v) => Array.isArray(v) ? v.join('') : (v == null ? '' : String(v));`);
     lines.push(`const __tk = globalThis.__vsk_ssr_token || '';`);
     if (asyncMode) {
         lines.push(`const __pk = __tk ? '__vsk_ssr_promises_' + __tk : '__vsk_ssr_promises';`);

package/dist/server-jsx-lowering.d.ts

@@ -0,0 +1,16 @@
+/** True when `node` contains JSX anywhere. */
+export declare function containsJsx(node: unknown, depth?: number): boolean;
+declare const RAW = "__raw";
+/**
+ * JSX text semantics, matching what the compiler emits for StaticNode text:
+ * lines are trimmed, blank lines vanish, and interior newlines collapse to a
+ * single space. Getting this wrong is visible as stray whitespace in SSR HTML.
+ */
+export declare function normalizeJsxText(value: string): string;
+/**
+ * Rewrite every JSX node inside `ast` into the string it would have rendered.
+ * Returns the original node when there is no JSX, so the common path is free.
+ */
+export declare function lowerJsxInExpression(ast: unknown): unknown;
+export { RAW as RAW_HELPER };
+//# sourceMappingURL=server-jsx-lowering.d.ts.map

package/dist/server-jsx-lowering.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-jsx-lowering.d.ts","sourceRoot":"","sources":["../src/server-jsx-lowering.ts"],"names":[],"mappings":"AAwBA,8CAA8C;AAC9C,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,SAAI,GAAG,OAAO,CAa7D;AAKD,QAAA,MAAM,GAAG,UAAU,CAAC;AAEpB;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAiBtD;AAiLD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAG1D;AAED,OAAO,EAAE,GAAG,IAAI,UAAU,EAAE,CAAC"}

package/dist/server-jsx-lowering.js

@@ -0,0 +1,226 @@
+/** True when `node` contains JSX anywhere. */
+export function containsJsx(node, depth = 0) {
+    if (!node || typeof node !== 'object' || depth > 40)
+        return false;
+    if (Array.isArray(node)) {
+        for (const item of node)
+            if (containsJsx(item, depth + 1))
+                return true;
+        return false;
+    }
+    const type = node.type;
+    if (type === 'JSXElement' || type === 'JSXFragment')
+        return true;
+    for (const key of Object.keys(node)) {
+        const value = node[key];
+        if (value && typeof value === 'object' && containsJsx(value, depth + 1))
+            return true;
+    }
+    return false;
+}
+/** The helper names the generated server body already defines. */
+const ESCAPE = '__escape';
+const ATTR = '__attr';
+const RAW = '__raw';
+/**
+ * JSX text semantics, matching what the compiler emits for StaticNode text:
+ * lines are trimmed, blank lines vanish, and interior newlines collapse to a
+ * single space. Getting this wrong is visible as stray whitespace in SSR HTML.
+ */
+export function normalizeJsxText(value) {
+    const lines = value.split(/\r\n|\n|\r/);
+    let lastNonEmpty = -1;
+    for (let i = 0; i < lines.length; i++) {
+        if (/[^ \t]/.test(lines[i]))
+            lastNonEmpty = i;
+    }
+    let out = '';
+    for (let i = 0; i < lines.length; i++) {
+        let line = lines[i].replace(/\t/g, ' ');
+        if (i !== 0)
+            line = line.replace(/^ +/, '');
+        if (i !== lines.length - 1)
+            line = line.replace(/ +$/, '');
+        if (line) {
+            if (i !== lastNonEmpty)
+                line += ' ';
+            out += line;
+        }
+    }
+    return out;
+}
+function lower(node, ctx) {
+    if (Array.isArray(node))
+        return node.map((n) => lower(n, ctx));
+    if (!node || typeof node !== 'object')
+        return node;
+    const n = node;
+    if (n.type === 'JSXElement') {
+        const opening = n.openingElement;
+        const name = jsxTagName(opening.name);
+        const attrs = lowerAttributes(opening.attributes, ctx);
+        const children = lowerChildren(n.children, ctx);
+        // statics[0] opens the tag, attributes interleave, then '>', then children,
+        // then the closing tag. Getting the '>' placement wrong silently produced
+        // `<lia</li>` — a tag that never closes and swallows the next element.
+        const statics = [`<${name}`, ...attrs.statics.slice(1)];
+        statics[statics.length - 1] += '>';
+        const quasis = [...statics, `</${name}>`];
+        const expressions = [...attrs.exprs, ...children];
+        return template(quasis, expressions);
+    }
+    if (n.type === 'JSXFragment') {
+        return template(['', ''], lowerChildren(n.children, ctx));
+    }
+    // Any other node: rebuild it with lowered children.
+    const out = {};
+    for (const key of Object.keys(n)) {
+        if (key === 'type' || key === 'start' || key === 'end' || key === 'loc' || key === 'range') {
+            out[key] = n[key];
+            continue;
+        }
+        const value = n[key];
+        out[key] = value && typeof value === 'object' ? lower(value, ctx) : value;
+    }
+    return out;
+}
+function jsxTagName(nameNode) {
+    const n = nameNode;
+    if (!n)
+        return 'div';
+    if (n.type === 'JSXIdentifier')
+        return String(n.name);
+    if (n.type === 'JSXMemberExpression') {
+        const object = jsxTagName(n.object);
+        const property = n.property;
+        return `${object}.${String(property?.name)}`;
+    }
+    if (n.type === 'JSXNamespacedName') {
+        const ns = n.namespace;
+        const name = n.name;
+        return `${String(ns?.name)}:${String(name?.name)}`;
+    }
+    return 'div';
+}
+function lowerAttributes(attrs, ctx) {
+    const statics = [''];
+    const exprs = [];
+    const push = (text, expr) => {
+        if (expr === undefined) {
+            statics[statics.length - 1] += text;
+            return;
+        }
+        statics[statics.length - 1] += text;
+        statics.push('');
+        exprs.push(expr);
+    };
+    for (const attr of attrs || []) {
+        const a = attr;
+        if (a.type === 'JSXSpreadAttribute') {
+            // A spread inside a function-valued child is not lowered; dropping it
+            // would be silently wrong, so it is reported instead.
+            console.error('[vesk] a spread attribute in a JSX expression is not supported yet (dropped):', String(a.argument ?? '').slice(0, 60));
+            continue;
+        }
+        const name = jsxAttrName(a.name);
+        const value = a.value;
+        if (value === null || value === undefined) {
+            push(` ${name}`);
+            continue;
+        }
+        if (value.type === 'StringLiteral') {
+            push(` ${name}="${escapeAttrText(String(value.value))}"`);
+            continue;
+        }
+        if (value.type === 'JSXExpressionContainer') {
+            const inner = value.expression;
+            if (!inner || inner.type === 'JSXEmptyExpression') {
+                push(` ${name}="true"`);
+                continue;
+            }
+            push(` ${name}="`, callNode(ATTR, [literal(name), coerceString(lower(inner, ctx))]));
+            push('"');
+            continue;
+        }
+        push(` ${name}="`, callNode(ATTR, [literal(name), coerceString(lower(value, ctx))]));
+        push('"');
+    }
+    return { statics, exprs };
+}
+function jsxAttrName(nameNode) {
+    const n = nameNode;
+    if (!n)
+        return 'data';
+    if (n.type === 'JSXIdentifier')
+        return String(n.name);
+    return jsxTagName(n);
+}
+function lowerChildren(children, ctx) {
+    const out = [];
+    for (const child of children || []) {
+        const c = child;
+        if (c.type === 'JSXText') {
+            const text = normalizeJsxText(String(c.value ?? ''));
+            if (text)
+                out.push(literal(text));
+            continue;
+        }
+        if (c.type === 'JSXExpressionContainer') {
+            const inner = c.expression;
+            if (!inner || inner.type === 'JSXEmptyExpression')
+                continue;
+            const lowered = lower(inner, ctx);
+            out.push(coerceString(lowered));
+            continue;
+        }
+        const lowered = lower(c, ctx);
+        out.push(coerceString(lowered));
+    }
+    return out;
+}
+/** `{v}` in HTML output must be escaped, exactly as the body emitter does. */
+function coerceString(node) {
+    if (!node || typeof node !== 'object')
+        return callNode(ESCAPE, [literal(String(node))]);
+    const n = node;
+    // Already a template literal we built: its parts are static text, but any
+    // expression inside came from a nested container that escaped itself.
+    if (n.type === 'TemplateLiteral')
+        return n;
+    if (n.type === 'Literal' || n.type === 'StringLiteral')
+        return callNode(ESCAPE, [node]);
+    return callNode(ESCAPE, [callNode('String', [node])]);
+}
+/** Assemble a template literal: `statics.length === expressions.length + 1`. */
+function template(statics, expressions) {
+    const quasis = statics.map((raw, i) => ({
+        type: 'TemplateElement',
+        value: { raw },
+        tail: i === statics.length - 1,
+    }));
+    return { type: 'TemplateLiteral', quasis, expressions };
+}
+function literal(value) {
+    return { type: 'Literal', value };
+}
+function callNode(callee, args) {
+    return {
+        type: 'CallExpression',
+        callee: { type: 'Identifier', name: callee },
+        arguments: args,
+        optional: false,
+    };
+}
+function escapeAttrText(value) {
+    return value.split('&').join('&amp;').split('<').join('&lt;').split('>').join('&gt;').split('"').join('&quot;');
+}
+/**
+ * Rewrite every JSX node inside `ast` into the string it would have rendered.
+ * Returns the original node when there is no JSX, so the common path is free.
+ */
+export function lowerJsxInExpression(ast) {
+    if (!containsJsx(ast))
+        return ast;
+    return lower(ast, { track: false });
+}
+export { RAW as RAW_HELPER };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/compiler",
-  "version": "0.2.50-canary.10",
+  "version": "0.2.50-canary.11",
   "type": "module",
   "description": "Vesk compiler — lexer, parser, semantic analysis, IR, codegen",
   "main": "./dist/index.js",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@sveltejs/acorn-typescript": "^1.0.0",
-    "@vesk/types": "^0.2.50-canary.10",
+    "@vesk/types": "^0.2.50-canary.11",
     "acorn": "^8.15.0",
     "esrap": "^2.3.0",
     "is-reference": "^3.0.0",