@vesk/compiler 0.2.92 → 0.2.94

package/dist/acorn-ts-plugin/index.js

@@ -774,6 +774,7 @@ function generateJsxParser(acorn, acornTypeScript, Parser, jsxOptions) {
           return node;
         case tok.jsxTagStart:
         case tt.string:
+        case tt.backQuote:
           return this.parseExprAtom();
         default:
           this.raise(this.start, "JSX value should be either an expression or a quoted JSX text");

package/dist/client-codegen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-codegen.d.ts","sourceRoot":"","sources":["../src/client-codegen.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAuB,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAGL,cAAc,EAQd,gBAAgB,EAUjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAkGxD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI1D;AAiDD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,gBAAgB,GAAG,cAAc,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAgJlI;AAID,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAI5E;AAyCD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,EAAE,CAuB9F;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAY5F;AAoFD,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,SAAS,CAQtE;AAupED,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAe3C;AAuKD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAuED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAOpQ;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,MAAM,GAAG,IAAI,EAC7B,UAAU,CAAC,EAAE,MAAM,EACnB,IAAI,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAAC,aAAa,EAAE,MAAM,EAAE,CAAC;IAAC,cAAc,EAAE,MAAM,EAAE,CAAA;CAAE,CAyC5J;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAG/E;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"client-codegen.d.ts","sourceRoot":"","sources":["../src/client-codegen.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAuB,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAGL,cAAc,EAQd,gBAAgB,EAUjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAkGxD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI1D;AAiDD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,gBAAgB,GAAG,cAAc,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAgJlI;AAID,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAI5E;AAyCD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,EAAE,CAuB9F;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,MAAM,CAY5F;AAoFD,qDAAqD;AACrD,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,SAAS,CAQtE;AA0uED,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAe3C;AAuKD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAwED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAOpQ;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,MAAM,GAAG,IAAI,EAC7B,UAAU,CAAC,EAAE,MAAM,EACnB,IAAI,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAAC,aAAa,EAAE,MAAM,EAAE,CAAC;IAAC,cAAc,EAAE,MAAM,EAAE,CAAA;CAAE,CAyC5J;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAG/E;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/client-codegen.js

@@ -539,6 +539,15 @@ class Ctx {
     // item element already claimed by key) instead of walking for a new element.
     rootClaim = false;
     walker = '__hydrate';
+    // Registry a hydrate-mode component call must resolve through. The hydrate
+    // bundle registers its functions under `__hydrators`, while non-hydrate
+    // nested renders (children of self-claiming components, client-only blocks,
+    // fresh map items) must keep calling the plain `__components` map. Emitting
+    // the hydrate registry name directly avoids the old global
+    // `__components` → `__hydrators` text rewrite, which also rewrote those
+    // nested fresh-render calls and handed them the 3-argument hydrator with no
+    // walker (`Cannot read properties of undefined (reading 'root')`).
+    hydrateRegistry = '__hydrators';
     asyncComps = new Set();
     isAsyncScope = false;
     // While emitting a loop body, names the boolean flag a `break` sets (see
@@ -676,6 +685,7 @@ function emitNode(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__com
             ctx.push(`    const __slot = createLayoutSlot(${ctx.walker}, ${parentVar});`);
             ctx.push(`    const __child = props.children(__slot.walker);`);
             ctx.push(`    if (__child && typeof __child.then === 'function') __pendingChild = __slot.track(__child);`);
+            ctx.push(`    else if (__child && __child.nodeType === 11) ${parentVar}.appendChild(__child);`);
             ctx.push(`  } else {`);
             ctx.push(`    ${parentVar}.appendChild(props.children);`);
             ctx.push(`  }`);
@@ -1260,6 +1270,65 @@ function emitFragment(ctx, nodes, tracked, effectsVar) {
     ctx.push(`return $f; })();`);
     return frag;
 }
+/**
+ * True when any node in the subtree is a layout `{props.children}` slot.
+ *
+ * A slot must be hydrated on the walker scoped to the element that will
+ * actually contain it. Building the children fragment eagerly on the caller's
+ * walker is only correct when the callee appends that fragment to its own
+ * mount point. A component that forwards children through a scoped container
+ * (e.g. a shell that renders `{props.children}` inside `<main>`) invokes the
+ * child hydrator with a sub-walker; passing an eagerly-built fragment skips
+ * that scope and lets the page claim the shell's own SSR root.
+ */
+function containsSlot(nodes) {
+    for (const node of nodes) {
+        if (node instanceof SlotNode)
+            return true;
+        if (node instanceof StaticNode) {
+            if (containsSlot(node.children))
+                return true;
+        }
+        else if (node instanceof ComponentCall) {
+            if (containsSlot(node.children))
+                return true;
+        }
+        else if (node instanceof OpaqueDynamicRegion) {
+            if (containsSlot(node.consequentNodes) || containsSlot(node.alternateNodes))
+                return true;
+        }
+        else if (node instanceof MapRegion) {
+            if (containsSlot(node.bodyTemplate) || containsSlot(node.alternateNodes))
+                return true;
+        }
+        else if (node instanceof WhileLoop) {
+            if (containsSlot(node.bodyTemplate))
+                return true;
+        }
+        else if (node instanceof ForLoop) {
+            if (containsSlot(node.bodyTemplate))
+                return true;
+        }
+        else if (node instanceof SwitchBlock) {
+            for (const c of node.cases)
+                if (containsSlot(c.body))
+                    return true;
+        }
+        else if (node instanceof TryCatch) {
+            if (containsSlot(node.bodyTemplate) || containsSlot(node.catchBody))
+                return true;
+        }
+        else if (node instanceof ServerBlock || node instanceof ClientBlock || node instanceof HeadBlock) {
+            if (containsSlot(node.children))
+                return true;
+        }
+        else if (node instanceof PropSlot) {
+            if (containsSlot(node.body))
+                return true;
+        }
+    }
+    return false;
+}
 function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix = '__components', skipK = 0, regionBudget) {
     const propsEntries = node.props.map((p) => {
         if (typeof p.value === 'string')
@@ -1322,7 +1391,7 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
         const access = calleeExpr
             ?? (ctx.importedNames.has(node.componentName)
                 ? node.componentName
-                : `__components[${JSON.stringify(node.componentName)}]`);
+                : `${ctx.hydrateRegistry}[${JSON.stringify(node.componentName)}]`);
         // Registry lookups can resolve to `undefined` when a JSX tag names a
         // component that was never declared, imported, or registered (e.g.
         // `<Slot/>` in a framework where `{props.children}` is the channel).
@@ -1397,20 +1466,56 @@ function emitComponentCall(ctx, node, tracked, effectsVar, parentVar, compPrefix
             // fresh and let the runtime component adopt the existing root.
             if (wipeMount || ctx.selfClaimNames.has(node.componentName))
                 ctx.hydrate = false;
-            ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
-            const savedEffects = ctx.effects;
-            ctx.effects = [];
-            for (const child of regChildren) {
-                const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
-                if (childVar)
-                    ctx.push(`$f.appendChild(${childVar});`);
+            // A slot nested under a compiled component must be built by that
+            // component's scoped walker, not the caller's. Pass children as a lazy
+            // hydrator so the callee can invoke it with the walker for the element
+            // that actually contains the slot (e.g. `<main>` in a shell). Eagerly
+            // building the fragment here hydrates the page against the shell's own
+            // SSR root, which detaches the shell on hydration.
+            const lazySlotChildren = ctx.hydrate && !plainTarget && !ctx.selfClaimNames.has(node.componentName) && containsSlot(regChildren);
+            if (lazySlotChildren) {
+                const fnVar = ctx.n();
+                const savedLines = ctx.lines;
+                const savedEffects = ctx.effects;
+                const savedWalker = ctx.walker;
+                ctx.lines = [];
+                ctx.effects = [];
+                ctx.walker = '__childWalker';
+                ctx.push(`const $f = document.createDocumentFragment();`);
+                for (const child of regChildren) {
+                    const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
+                    if (childVar)
+                        ctx.push(`$f.appendChild(${childVar});`);
+                }
+                for (const eff of ctx.effects)
+                    ctx.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr(eff)});` : eff);
+                ctx.push(`return $f;`);
+                const body = ctx.lines.join('\n');
+                ctx.lines = savedLines;
+                ctx.effects = savedEffects;
+                ctx.walker = savedWalker;
+                const asyncKw = ctx.isAsyncScope ? 'async ' : '';
+                ctx.push(`const ${fnVar} = ${asyncKw}(__childWalker) => {`);
+                ctx.push(indent(body));
+                ctx.push(`};`);
+                propsEntries.push(`children: ${fnVar}`);
+            }
+            else {
+                ctx.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
+                const savedEffects = ctx.effects;
+                ctx.effects = [];
+                for (const child of regChildren) {
+                    const childVar = emitNode(ctx, child, tracked, effectsVar, '$f');
+                    if (childVar)
+                        ctx.push(`$f.appendChild(${childVar});`);
+                }
+                for (const eff of ctx.effects)
+                    ctx.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr(eff)});` : eff);
+                ctx.effects = savedEffects;
+                ctx.push(`return $f; })();`);
+                propsEntries.push(`children: ${frag}`);
             }
-            for (const eff of ctx.effects)
-                ctx.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr(eff)});` : eff);
-            ctx.effects = savedEffects;
             ctx.hydrate = savedHydrate;
-            ctx.push(`return $f; })();`);
-            propsEntries.push(`children: ${frag}`);
         }
         // Deposit the residue for the child's first top-level claim (it runs on
         // this same walker with its own zero `topPendingSkip`). A region budget is
@@ -1658,7 +1763,7 @@ function emitTryCatch(ctx, node, tracked, effectsVar, parentVar, skipK = 0, regi
       ${effArr}.length = 0;
       __cleanup(${anchor}, ${endAnchor});
       try { ${asyncKw}${tryRenderComp}(); } catch(${catchParam}) { ${hasCatch ? `${asyncKw}${catchRenderComp}(${catchParam});` : 'throw ${catchParam};'} }
-    });
+    }, true);
   }`);
     return null;
 }
@@ -1757,7 +1862,7 @@ function emitOpaque(ctx, node, tracked, effTarget, parentVar, skipK = 0, regionB
           ${effInner}
           __iv = __new;
         }
-      });`;
+      }, true);`;
         if (effTarget) {
             ctx.push(`${effTarget}.push((() => {
       let __iv = ${branchInit};
@@ -1858,7 +1963,7 @@ function emitOpaque(ctx, node, tracked, effTarget, parentVar, skipK = 0, regionB
         ${renderBranch}
         __iv = __nv;
       }
-    });`;
+    }, true);`;
     // A static condition renders once; an effect referencing it would only ever
     // reference statement/loop-local bindings that are out of scope at the flush
     // site (e.g. `const pages = …; if (pages.length > 0)` inside a for-of body).
@@ -1964,7 +2069,7 @@ function emitWhileLoop(ctx, node, tracked, parentVar, skipK = 0, regionBudget) {
       __busy = false;
       __iv = (${condExpr});
     }
-  });
+  }, true);
 }`);
     return null;
 }
@@ -2078,7 +2183,7 @@ function emitForLoop(ctx, node, tracked, parentVar, skipK = 0, regionBudget) {
       __busy = false;
       __iv = (${srcExpr});
     }
-  });
+  }, true);
 }`);
     }
     else {
@@ -2147,7 +2252,7 @@ function emitForLoop(ctx, node, tracked, parentVar, skipK = 0, regionBudget) {
     __cleanup(${anchor}, ${endAnchor});
     ${ctx.isAsyncScope ? 'await ' : ''}${renderLoop}();
     __busy = false;
-  });
+  }, true);
 }`);
         }
     }
@@ -2224,7 +2329,7 @@ function emitSwitchBlock(ctx, node, tracked, parentVar, skipK = 0, regionBudget)
       __busy = false;
       __iv = (${discExpr});
     }
-  });
+  }, true);
 }`);
     return null;
 }
@@ -2447,7 +2552,7 @@ function emitMap(ctx, node, tracked, effTarget, parentVar, skipK = 0, regionBudg
     ${effectsVar}.length = 0;
     __cleanup(${anchor}, ${endAnchor});
     if (__new) { ${initList}(); } else { ${aw}${emptyRenderName}(); }
-  })`);
+  }, true)`);
         }
         else {
             ctx.push(`${initList}();`);
@@ -2457,7 +2562,7 @@ function emitMap(ctx, node, tracked, effTarget, parentVar, skipK = 0, regionBudg
     const __nv = ${arrExpr};
     if (__first) { __first = false; __nv; ${breakReset}${reconciler}(${arrExpr}); return; }
     ${breakVar ? `if (${breakVar}) ${breakVar} = false;` : ''}${reconciler}(${arrExpr});
-  })`);
+  }, true)`);
         }
     }
     else {
@@ -2515,7 +2620,7 @@ ${renderAllItems('        ', null)}
     if (__new) {
 ${renderAllItems('      ', null)}
     } else { ${aw}${emptyRenderName}(${collectVar ? collectVar : ''}); }
-  })`);
+  }, true)`);
         }
         else {
             const collectVar = hyd ? ctx.n() : null;
@@ -2533,7 +2638,7 @@ ${renderAllItems('      ', null)}
     ${effectsVar}.length = 0;
     __cleanup(${anchor}, ${endAnchor});
 ${renderAllItems('    ', null)}
-  })`);
+  }, true)`);
         }
     }
     return null;
@@ -2746,7 +2851,8 @@ function buildParamInit(paramNames, propsAlias = null) {
 }
 function buildComponentMap(irRoot, hydrate = false, alloc, markerless = true) {
     const mapLines = [];
-    mapLines.push(`const __components = {};`);
+    const registry = hydrate ? '__hydrators' : '__components';
+    mapLines.push(`const ${registry} = {};`);
     const asyncComps = computeAsyncComponents(irRoot.components);
     // Wipe-style router components (Link/NavLink) replace their SSR children on
     // hydration, so their children fragments must be rebuilt in full. Track the
@@ -2788,11 +2894,11 @@ function buildComponentMap(irRoot, hydrate = false, alloc, markerless = true) {
                 ? `__hydrate.claimOnly(undefined, (typeof __hydrate.takeSkipK === 'function' ? __hydrate.takeSkipK() : 0))`
                 : `__hydrate.claimOnly()`;
             const stub = `(props, __registry, __hydrate) => { return ${claimExpr}; }`;
-            mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${stub};`);
+            mapLines.push(`${registry}[${JSON.stringify(comp.name)}] = ${stub};`);
             continue;
         }
         const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames, selfClaimNames, alloc, markerless);
-        mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${code};`);
+        mapLines.push(`${registry}[${JSON.stringify(comp.name)}] = ${code};`);
     }
     mapLines.push(`function __cleanup(start, end) {`);
     mapLines.push(`\tlet n = start.nextSibling;`);
@@ -3117,13 +3223,14 @@ function emitClientFromIR(ir, options) {
     const importLines = ir.imports.length > 0 ? ir.imports.join('\n') + '\n' : '';
     const topCode = (options.includeTopLevel === false ? [] : transformTopLevelForActions(ir.topLevelCode, 'client')).join('\n') + '\n';
     const exportLines = [];
+    const registry = options.hydrate ? '__hydrators' : '__components';
     for (const comp of ir.components) {
         if (comp.exported) {
             if (comp.defaultExport) {
-                exportLines.push(`export default __components[${JSON.stringify(comp.name)}];`);
+                exportLines.push(`export default ${registry}[${JSON.stringify(comp.name)}];`);
             }
             else {
-                exportLines.push(`export const ${comp.name} = __components[${JSON.stringify(comp.name)}];`);
+                exportLines.push(`export const ${comp.name} = ${registry}[${JSON.stringify(comp.name)}];`);
             }
         }
     }

package/dist/errors.d.ts

@@ -104,6 +104,34 @@ export declare class VeskError extends Error {
     static attrJsxElement(context?: VeskErrorOptions & {
         attr?: string;
     }): VeskError;
+    /**
+     * A `{ ... }` block statement wrapping regular JS in statement mode.
+     * Vesk statement mode doesn't need braces around statements —
+     * `if (cond) { <jsx/> }` is written without the outer `{ }`.
+     */
+    static blockStatementInStatementMode(context?: VeskErrorOptions): VeskError;
+    /**
+     * An opening JSX tag was never closed, e.g. `<div><span>hello</div>`.
+     * Acorn reports this as "Expected corresponding JSX closing tag for <span>"
+     * or, when wrapped in a component body, as a generic "Unexpected token".
+     */
+    static jsxUnclosedTag(tagName: string, context?: VeskErrorOptions & {
+        closingTag?: string;
+        suggestedFix?: string;
+    }): VeskError;
+    /**
+     * A JSX closing tag doesn't match the most recent opening tag,
+     * e.g. `<div></span>`.
+     */
+    static jsxMismatchedTag(openingTag: string, closingTag: string, context?: VeskErrorOptions): VeskError;
+    /**
+     * JSX content was never terminated before end of file, e.g. `<div>` with no `>`.
+     */
+    static jsxUnterminated(context?: VeskErrorOptions): VeskError;
+    /**
+     * An empty JSX expression container `{}`, which is not allowed.
+     */
+    static jsxEmptyExpression(context?: VeskErrorOptions): VeskError;
     toString(): string;
     toJSON(): Record<string, unknown>;
 }

package/dist/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"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"}

package/dist/errors.js

@@ -389,38 +389,146 @@ export class VeskError extends Error {
             tip: 'JSX elements are content. They render inside an element or travel as a component prop — never as an attribute value on an HTML tag.',
         });
     }
+    /**
+     * A `{ ... }` block statement wrapping regular JS in statement mode.
+     * Vesk statement mode doesn't need braces around statements —
+     * `if (cond) { <jsx/> }` is written without the outer `{ }`.
+     */
+    static blockStatementInStatementMode(context = {}) {
+        return new VeskError('Unnecessary `{ ... }` block around statements in statement mode. Vesk statement mode does not use braces around `if`/`for`/`while`/etc. — write the statement directly.', {
+            ...context,
+            code: context.code || 'V0424',
+            suggestions: [
+                'Remove the outer `{ }` and write the statement directly:',
+                '  `{ if (cond) { <div/> } }` → `if (cond) { <div/> }`',
+                'Braces are only needed around JSX expression containers `{ expr }` inside JSX, not around statements.',
+            ],
+            nextSteps: [
+                'Delete the opening `{` and closing `}` that wrap the statement.',
+                'If you meant to group multiple statements, they can appear directly one after another in statement mode.',
+            ],
+            tip: 'Vesk statement mode accepts bare JSX, if/for/while/switch/try without wrapping braces — no `{ }` needed around statements.',
+        });
+    }
+    /**
+     * An opening JSX tag was never closed, e.g. `<div><span>hello</div>`.
+     * Acorn reports this as "Expected corresponding JSX closing tag for <span>"
+     * or, when wrapped in a component body, as a generic "Unexpected token".
+     */
+    static jsxUnclosedTag(tagName, context = {}) {
+        const closing = context.closingTag ?? `</${tagName}>`;
+        return new VeskError(`Unclosed JSX tag \`<${tagName}>\` — expected \`${closing}\` before the closing tag.`, {
+            ...context,
+            code: context.code || 'V0420',
+            suggestions: [
+                `Add \`${closing}\` to close the \`<${tagName}>\` tag.`,
+                `Every opening JSX tag must have a matching closing tag: \`<${tagName}></${tagName}>\`.`,
+            ],
+            nextSteps: [
+                context.suggestedFix ?? `Insert \`${closing}\` right before the tag that closes the parent element.`,
+                `Check that all JSX elements in this component are properly closed and nested.`,
+            ],
+            tip: `The \`<${tagName}>\` tag on the marked line was opened but never closed.`,
+        });
+    }
+    /**
+     * A JSX closing tag doesn't match the most recent opening tag,
+     * e.g. `<div></span>`.
+     */
+    static jsxMismatchedTag(openingTag, closingTag, context = {}) {
+        return new VeskError(`Expected closing tag \`</${openingTag}>\` to match \`<${openingTag}>\`, but found \`</${closingTag}>\`.`, {
+            ...context,
+            code: context.code || 'V0421',
+            suggestions: [
+                `Change \`</${closingTag}>\` to \`</${openingTag}>\` to close the \`<${openingTag}>\` tag.`,
+                `Or change the opening tag to \`<${closingTag}>\` if that was the intended element.`,
+            ],
+            nextSteps: [
+                `Fix the mismatched tag on the marked line so opening and closing tags agree.`,
+            ],
+            tip: `JSX closing tags must match their opening tag: \`<${openingTag}></${openingTag}>\`, not \`<${openingTag}></${closingTag}>\`.`,
+        });
+    }
+    /**
+     * JSX content was never terminated before end of file, e.g. `<div>` with no `>`.
+     */
+    static jsxUnterminated(context = {}) {
+        return new VeskError('Unterminated JSX contents — the JSX block was never closed before the end of the file.', {
+            ...context,
+            code: context.code || 'V0422',
+            suggestions: [
+                'Close the JSX element with `>` or `/>` before the end of the file.',
+                'Make sure every `<` that opens a JSX tag has a matching `>` (or `/>`).',
+            ],
+            nextSteps: [
+                'Add the missing `>` or `/>` to close the JSX tag.',
+                'Check that no string or comment is swallowing the closing bracket.',
+            ],
+            tip: 'The JSX block on the marked line was opened but never terminated.',
+        });
+    }
+    /**
+     * An empty JSX expression container `{}`, which is not allowed.
+     */
+    static jsxEmptyExpression(context = {}) {
+        return new VeskError('Empty JSX expression container `{}` — JSX expressions must contain a value.', {
+            ...context,
+            code: context.code || 'V0423',
+            suggestions: [
+                'Fill the braces with an expression: `{ count }`, `{ item.name }`, or `{ true }`.',
+                'If you meant literal braces, escape them: `{ \'{\' }` and `{ \'}\' }`.',
+            ],
+            nextSteps: [
+                'Replace `{}` with a real expression, or remove the empty braces.',
+            ],
+            tip: '`{}` is not valid JSX — put a value inside the braces.',
+        });
+    }
     toString() {
-        let out = this.code ? `[vesk ${this.code}] ${this.message}` : `[vesk] ${this.message}`;
+        const lines = [];
+        // Header: `error[V####]: message` — rustc-style error code first.
+        lines.push(this.code ? `error[${this.code}]: ${this.message}` : `error: ${this.message}`);
+        // Location: `--> file:line:col`
+        let loc = '  --> ';
+        let hasLoc = false;
         if (this.file) {
-            out += `\n  File: ${this.file}`;
-            if (this.line) {
-                out += `:${this.line}`;
-                if (this.column)
-                    out += `:${this.column}`;
-            }
-            if (this.line && this.column)
-                out += ` (line ${this.line}, column ${this.column})`;
-            else if (this.line)
-                out += ` (line ${this.line})`;
+            loc += this.file;
+            hasLoc = true;
         }
-        else if (this.line) {
-            out += `\n  at line ${this.line}${this.column ? `, column ${this.column}` : ''}`;
+        if (this.line) {
+            loc += `:${this.line}`;
+            hasLoc = true;
+        }
+        if (this.column) {
+            loc += `:${this.column}`;
+            hasLoc = true;
         }
-        if (this.code)
-            out += `\n\n${this.code}`;
-        if (this.suggestions.length) {
-            out += '\n\n  Suggestions:';
-            for (const s of this.suggestions.slice(0, 4))
-                out += `\n    • ${s}`;
+        if (hasLoc)
+            lines.push(loc);
+        // Code frame: source context with a `^` caret under the offending column.
+        if (this.frame) {
+            lines.push('  |');
+            for (const frameLine of this.frame.split('\n')) {
+                lines.push(`  ${frameLine}`);
+            }
         }
-        if (this.nextSteps.length) {
-            out += '\n\n  Next steps:';
-            for (const s of this.nextSteps.slice(0, 4))
-                out += `\n    • ${s}`;
+        else if (this.line) {
+            lines.push('  |');
         }
+        // Help lines, rustc-style `= help:` — tip first, then next steps / suggestions.
+        const help = [];
         if (this.tip)
-            out += `\n\n  Tip: ${this.tip}`;
-        return out;
+            help.push(this.tip);
+        for (const s of this.nextSteps)
+            help.push(s);
+        for (const s of this.suggestions)
+            help.push(s);
+        if (help.length) {
+            lines.push('  |');
+            for (const h of help)
+                lines.push(`= help: ${h}`);
+        }
+        return lines.join('\n');
     }
     toJSON() {
         return {

package/dist/ir-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ir-generator.d.ts","sourceRoot":"","sources":["../src/ir-generator.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EAuBP,MAAM,uBAAuB,CAAC;AAkW/B,wBAAgB,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkCnL;AAsvDD,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAsV9E"}
+{"version":3,"file":"ir-generator.d.ts","sourceRoot":"","sources":["../src/ir-generator.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EAuBP,MAAM,uBAAuB,CAAC;AAkW/B,wBAAgB,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkCnL;AA0yDD,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAsV9E"}

package/dist/ir-generator.js

@@ -974,6 +974,12 @@ function processAttribute(source, attr) {
         return { name, value: '' };
     if (attr.value.type === 'Literal')
         return { name, value: String(attr.value.value) };
+    if (attr.value.type === 'TemplateLiteral') {
+        // A bare backtick template literal in a JSX attribute, e.g.
+        // `<Link href=`/admin/learners/${id}` />`. It is a dynamic value, so it
+        // becomes an attribute binding rather than a static string.
+        return { name, value: toExpression(source, attr.value) };
+    }
     if (attr.value.type === 'JSXExpressionContainer') {
         const expr = attr.value.expression;
         if (expr.type === 'Literal')
@@ -1596,6 +1602,11 @@ function extractProps(source, element) {
                 }
                 value = toExpression(source, expr);
             }
+            else if (attr.value.type === 'TemplateLiteral') {
+                // A bare backtick template literal prop value, e.g.
+                // `<Comp href=`/admin/learners/${id}` />`.
+                value = toExpression(source, attr.value);
+            }
             else {
                 value = new Expression(JSON.stringify(attr.value.value));
             }
@@ -1765,6 +1776,8 @@ function isStatementMode(bodyStmts) {
     if (bodyStmts.some((s) => s.type === 'JSXElement' || s.type === 'JSXExpressionContainer' || s.type === 'JSXFragment'))
         return true;
     for (const stmt of bodyStmts) {
+        if (stmt.type === 'BlockStatement' && hasJSXInSubtree(stmt))
+            return true;
         if (stmt.type === 'IfStatement' && !isGuardClause(stmt) && hasJSXInSubtree(stmt))
             return true;
         if (stmt.type === 'ForOfStatement' && hasJSXInSubtree(stmt))
@@ -1928,6 +1941,57 @@ function processStatementModeBody(source, bodyStmts, filename) {
             if (refName)
                 nodes.push(new ComponentRef(refName));
         }
+        else if (stmt.type === 'VariableDeclaration') {
+            // Plain variable declarations (`const items = [1, 2, 3]`, `let x = 1`)
+            // that are not track() declarations are regular JavaScript. Emit them
+            // verbatim as runtime statements so they execute in statement mode.
+            const raw = getSource(source, stmt);
+            if (raw)
+                nodes.push(new RuntimeStatement(raw, stmt, source));
+        }
+        else if (stmt.type === 'BlockStatement') {
+            // Braces around statements are unnecessary in Vesk statement mode —
+            // `if (cond) { <jsx/> }` is written without the outer `{ }`. If the
+            // block contains only JSX children, unwrap them; otherwise give a
+            // clear error (braces around `if`/`for`/`const`/etc. are not needed).
+            const innerStmts = stmt.body || [];
+            const hasNonJSX = innerStmts.some((s) => s.type !== 'JSXElement' && s.type !== 'JSXExpressionContainer' && s.type !== 'JSXFragment');
+            if (hasNonJSX) {
+                const start = stmt.start ?? 0;
+                let line = 1;
+                let column = 1;
+                for (let i = 0; i < start && i < source.length; i++) {
+                    if (source.charCodeAt(i) === 10) {
+                        line++;
+                        column = 1;
+                    }
+                    else {
+                        column++;
+                    }
+                }
+                throw VeskError.blockStatementInStatementMode({
+                    file: filename || '',
+                    line,
+                    column,
+                    code: codeFrame(source, line, column),
+                });
+            }
+            // Pure JSX block: unwrap the children directly.
+            for (const child of innerStmts) {
+                if (child.type === 'JSXElement') {
+                    nodes.push(...processJSXElement(source, child));
+                }
+                else if (child.type === 'JSXExpressionContainer') {
+                    if (child.expression.type === 'JSXEmptyExpression')
+                        continue;
+                    nodes.push(...exprToIR(source, child.expression));
+                }
+                else if (child.type === 'JSXFragment') {
+                    for (const c of child.children)
+                        nodes.push(...processJSXChildren(source, [c]));
+                }
+            }
+        }
         else if (stmt.type === 'IfStatement') {
             // Guard-clause early return (`if (c) return X` with no else): everything
             // after this statement becomes the alternate branch, mirroring
@@ -2388,7 +2452,7 @@ export function generateIR(ast, source, filename) {
                 for (const spec of node.specifiers) {
                     if (spec.importKind === 'type')
                         continue;
-                    if (spec.type === 'ImportSpecifier') {
+                    if (spec.type === 'ImportSpecifier' || spec.type === 'ImportDefaultSpecifier' || spec.type === 'ImportNamespaceSpecifier') {
                         importedNames.add(spec.local.name);
                     }
                 }