release: WRNexusJS 0.2.36

packages/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",

packages/authz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/cli/src/update.ts

@@ -402,6 +402,15 @@ const MIGRATIONS: Migration[] = [
       // No generated application files require automatic migration.
     },
   },
+  {
+    version: "0.2.37",
+    id: "loop-condition-fix",
+    description:
+      "Adds server-rendered component each/if blocks and fixes dynamic component rendering.",
+    apply() {
+      // No generated application files require automatic migration.
+    },
+  },
 ];
 
 /** Release tooling uses this to require an explicit migration entry per version. */

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/compiler/src/codegen.ts

@@ -15,6 +15,8 @@
  *   realtime {..}      -> export const websocket = { evt(ws, ...args) { b } }
  */
 
+import { Buffer } from "node:buffer";
+
 import { VOID_ELEMENTS, type Attr, type DataMode, type PageAst, type ViewNode } from "./parser.ts";
 
 interface RenderBinding {
@@ -804,6 +806,8 @@ interface CompCtx {
   /** `data-for` loop variables in scope — their mustaches stay literal for the
    * client's list renderer (never baked server-side, since they have no value). */
   loopVars?: Set<string>;
+  /** Local identifiers introduced by server-rendered `{#each}` blocks. */
+  serverLocals?: Set<string>;
 }
 
 interface ComponentBehavior {
@@ -940,9 +944,19 @@ function exprRefsState(expr: string, stateNames: Set<string>): boolean {
 }
 
 function viewHasEvents(nodes: ViewNode[]): boolean {
-  return nodes.some(
-    (n) => n.type === "element" && (n.attrs.some((a) => a.event) || viewHasEvents(n.children)),
-  );
+  return nodes.some((node) => {
+    if (node.type === "text") return false;
+
+    if (node.type === "each") {
+      return viewHasEvents(node.body) || viewHasEvents(node.empty);
+    }
+
+    if (node.type === "if") {
+      return node.branches.some((branch) => viewHasEvents(branch.body));
+    }
+
+    return node.attrs.some((attr) => attr.event) || viewHasEvents(node.children);
+  });
 }
 
 /**
@@ -1004,14 +1018,65 @@ function compileAttrValue(raw: string, ctx: CompCtx): string {
   return out + escLit(attrEscape(raw.slice(last)));
 }
 
+function renderComponentIfNode(node: IfNode, ctx: CompCtx): string {
+  let expression = "``";
+
+  for (let index = node.branches.length - 1; index >= 0; index--) {
+    const branch = node.branches[index]!;
+    const body = branch.body.map((child) => renderComponentNode(child, ctx)).join("");
+    const bodyExpression = "`" + body + "`";
+
+    expression =
+      branch.cond === null
+        ? bodyExpression
+        : `(${ctx.resolveExpr(branch.cond)}) ? ${bodyExpression} : ${expression}`;
+  }
+
+  return "${" + expression + "}";
+}
+
+function renderComponentEachNode(node: EachNode, ctx: CompCtx): string {
+  const item = node.item;
+  const index = node.index ?? "__wi";
+  const list = ctx.resolveExpr(node.list);
+
+  const childCtx: CompCtx = {
+    ...ctx,
+    serverLocals: new Set([...(ctx.serverLocals ?? []), item, index]),
+  };
+
+  const body = node.body.map((child) => renderComponentNode(child, childCtx)).join("");
+  const empty = node.empty.map((child) => renderComponentNode(child, ctx)).join("");
+
+  return (
+    "${(() => { const __wl = Array.isArray(" +
+    list +
+    ") ? (" +
+    list +
+    ") : []; return __wl.length ? __wl.map((" +
+    item +
+    ", " +
+    index +
+    ") => `" +
+    body +
+    '`).join("") : `' +
+    empty +
+    "`; })()}"
+  );
+}
+
 /** Render a component view node into template-literal-ready source. */
 function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
   if (node.type === "text") return compileText(node.value, ctx);
-  if (node.type === "each" || node.type === "if") {
-    throw new Error(
-      "Server `{#each}` / `{#if}` blocks are supported in pages, not components. Move them into a page (or use data-for / data-show on the client).",
-    );
+
+  if (node.type === "each") {
+    return renderComponentEachNode(node, ctx);
   }
+
+  if (node.type === "if") {
+    return renderComponentIfNode(node, ctx);
+  }
+
   if (isComponentTag(node.tag)) {
     return renderNestedComponentInvocation(node, ctx);
   }
@@ -1080,6 +1145,9 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
     : "";
 
   const classBindings = conditionalClasses
+    .filter(({ expression }) => {
+      return !ctx.serverLocals || !exprRefsState(expression, ctx.serverLocals);
+    })
     .map(({ className, expression }, index) => {
       const marker = attrEscape(JSON.stringify([className, expression]));
 
@@ -1200,6 +1268,9 @@ function __wireAttr(v: any): string {
   return String(v == null ? "" : v).replace(/[&<>"]/g, (c) =>
     c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;",
   );
+}
+function __wireRaw(v: any): string {
+  return String(v == null ? "" : v);
 }`);
 
   if (needsScope) {

packages/compiler/src/parser.ts

@@ -469,13 +469,6 @@ export function parseHtmlView(src: string, pos: number): { nodes: ViewNode[]; en
 
   const isTagNamePart = (c: string): boolean => /[A-Za-z0-9_$:.-]/.test(c);
 
-  const isAttributeNamePart = (c: string, next: string | undefined): boolean => {
-    if (c === "/") {
-      return next !== ">";
-    }
-
-    return /[A-Za-z0-9_$:.[\]%-]/.test(c);
-  };
   const isWs = (c: string): boolean => c === " " || c === "\t" || c === "\n" || c === "\r";
 
   const fail = (msg: string): never => {

packages/compiler/test/compiler.test.ts

@@ -689,3 +689,51 @@ component PageHeader {
 
   expect(output).toContain("dark:bg-white/10");
 });
+test("components support each blocks", () => {
+  const output = generate(
+    parse(`
+component PageHeader {
+  props {
+    highlights = []
+  }
+
+  view {
+    <div>
+      {#each highlights as highlight}
+        <span>{highlight.title}</span>
+      {/each}
+    </div>
+  }
+}
+`),
+  );
+
+  expect(output).toContain("highlights");
+
+  expect(output).toContain("highlight.title");
+
+  expect(output).not.toContain("supported in pages, not components");
+});
+test("components support if blocks", () => {
+  const output = generate(
+    parse(`
+component Banner {
+  props {
+    visible = true
+  }
+
+  view {
+    {#if visible}
+      <div>Visible</div>
+    {:else}
+      <div>Hidden</div>
+    {/if}
+  }
+}
+`),
+  );
+
+  expect(output).toContain("visible");
+  expect(output).toContain("Visible");
+  expect(output).toContain("Hidden");
+});

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/db/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/jwt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/oauth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/pubsub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/queue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/reactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/uploader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": true,
   "type": "module",
   "main": "src/index.ts",