release: WRNexusJS 0.2.38

packages/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "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.37",
+  "version": "0.2.38",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/cli/package.json

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

packages/cli/src/update.ts

@@ -411,6 +411,15 @@ const MIGRATIONS: Migration[] = [
       // No generated application files require automatic migration.
     },
   },
+  {
+    version: "0.2.38",
+    id: "loop-condition-bug",
+    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.37",
+  "version": "0.2.38",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/compiler/src/codegen.ts

@@ -430,17 +430,16 @@ function renderPageComponentInvocation(
   loops: string[],
   reactive: PageReactive | null,
 ): string {
-  const attrs = node.attrs.filter((attr) => attr.name !== "data-component");
+  const attrs = node.attrs
+    .filter((attr) => attr.name !== "data-component")
+    .map((attr) => renderPageComponentAttr(attr, loops))
+    .join("");
 
   const inner = node.children
     .map((child) => renderNode(child, ssrBindings, csrBindings, apiBindings, loops, reactive))
     .join("");
 
-  return `<div data-component="${attrEscape(node.tag)}"${renderAttrs(
-    attrs,
-    undefined,
-    reactive,
-  )}>${inner}</div>`;
+  return `<div data-component="${attrEscape(node.tag)}"` + `${attrs}>${inner}</div>`;
 }
 
 function renderNestedComponentInvocation(
@@ -462,9 +461,19 @@ function renderNestedComponentInvocation(
         return ` ${attr.name}`;
       }
 
-      const rendered = ` ${attr.name}="` + `${compileAttrValue(attr.value, ctx)}"`;
+      const wholeExpression = wholeAttributeExpression(attr.value);
 
-      if (!attr.value.includes("{") || !exprRefsState(attr.value, ctx.stateNames)) {
+      const compiledValue = wholeExpression
+        ? `\${__wireProp(${ctx.resolveExpr(wholeExpression)})}`
+        : compileAttrValue(attr.value, ctx);
+
+      const rendered = ` ${attr.name}="${compiledValue}"`;
+
+      if (
+        wholeExpression ||
+        !attr.value.includes("{") ||
+        !exprRefsState(attr.value, ctx.stateNames)
+      ) {
         return rendered;
       }
 
@@ -591,6 +600,28 @@ function __wrnexusEvalData(data: unknown, body: string, helpers = "", ctx: any):
   return new Function("$data", "$adapters", "const cookies = $adapters.cookies;\\nconst session = $adapters.session;\\nconst localStorage = $adapters.localStorage;\\nwith ($data ?? {}) {\\n" + helpers + "\\n" + body + "\\n}")(data, adapters);
 }
 
+function __wrnexusPropAttr(
+  value: unknown,
+): string {
+  const serialized =
+    value !== null &&
+    typeof value === "object"
+      ? JSON.stringify(value)
+      : String(value == null ? "" : value);
+
+  return serialized.replace(
+    /[&<>"]/g,
+    (character) =>
+      character === "&"
+        ? "&amp;"
+        : character === "<"
+          ? "&lt;"
+          : character === ">"
+            ? "&gt;"
+            : "&quot;",
+  );
+}
+
 async function __wrnexusCallApi(path: string, method: string, ctx: any): Promise<unknown> {
   if (typeof ctx.__wrnexusCallApi === "function") {
     return await ctx.__wrnexusCallApi(path, method);
@@ -1256,19 +1287,101 @@ function generateComponent(ast: PageAst): string {
   }
 
   out.push(`function __coerce(v: any, def: any): any {
-  if (v === undefined || v === null) return def;
-  if (typeof def === "number") return Number(v);
-  if (typeof def === "boolean") return v === true || v === "" || v === "true";
+  if (v === undefined || v === null) {
+    return def;
+  }
+
+  if (typeof def === "number") {
+    return Number(v);
+  }
+
+  if (typeof def === "boolean") {
+    return v === true || v === "" || v === "true";
+  }
+
+  if (Array.isArray(def)) {
+    if (Array.isArray(v)) {
+      return v;
+    }
+
+    if (typeof v === "string") {
+      try {
+        const parsed = JSON.parse(v);
+        return Array.isArray(parsed) ? parsed : def;
+      } catch {
+        return def;
+      }
+    }
+
+    return def;
+  }
+
+  if (def !== null && typeof def === "object") {
+    if (
+      v !== null &&
+      typeof v === "object" &&
+      !Array.isArray(v)
+    ) {
+      return v;
+    }
+
+    if (typeof v === "string") {
+      try {
+        const parsed = JSON.parse(v);
+
+        return (
+          parsed !== null &&
+          typeof parsed === "object" &&
+          !Array.isArray(parsed)
+        )
+          ? parsed
+          : def;
+      } catch {
+        return def;
+      }
+    }
+
+    return def;
+  }
+
   return String(v);
 }
+
 function __wireHtml(v: any): string {
-  return String(v == null ? "" : v).replace(/[&<>]/g, (c) => (c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;"));
-}
-function __wireAttr(v: any): string {
-  return String(v == null ? "" : v).replace(/[&<>"]/g, (c) =>
-    c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;",
+  return String(v == null ? "" : v).replace(
+    /[&<>]/g,
+    (c) =>
+      c === "&"
+        ? "&amp;"
+        : c === "<"
+          ? "&lt;"
+          : "&gt;",
   );
 }
+
+function __wireAttr(v: any): string {
+  return String(v == null ? "" : v).replace(
+    /[&<>"]/g,
+    (c) =>
+      c === "&"
+        ? "&amp;"
+        : c === "<"
+          ? "&lt;"
+          : c === ">"
+            ? "&gt;"
+            : "&quot;",
+  );
+}
+
+function __wireProp(v: any): string {
+  const value =
+    v !== null && typeof v === "object"
+      ? JSON.stringify(v)
+      : String(v == null ? "" : v);
+
+  return __wireAttr(value);
+}
+
 function __wireRaw(v: any): string {
   return String(v == null ? "" : v);
 }`);
@@ -1301,12 +1414,51 @@ function __wireRaw(v: any): string {
   return out.join("\n\n") + "\n";
 }
 
+function __wireRaw(v: any): string {
+  return String(v == null ? "" : v);
+}
+
+function wholeAttributeExpression(value: string): string | null {
+  const match = /^\s*\{([\s\S]+)\}\s*$/.exec(value);
+
+  return match?.[1]?.trim() || null;
+}
 function __wireHtml(v: any): string {
   return String(v == null ? "" : v).replace(/[&<>]/g, (c) =>
     c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;",
   );
 }
 
-function __wireRaw(v: any): string {
-  return String(v == null ? "" : v);
+function __wireAttr(v: any): string {
+  return String(v == null ? "" : v).replace(/[&<>"]/g, (c) =>
+    c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;",
+  );
+}
+
+function __wireProp(v: any): string {
+  const value =
+    v !== null && typeof v === "object" ? JSON.stringify(v) : String(v == null ? "" : v);
+
+  return __wireAttr(value);
+}
+function renderPageComponentAttr(attr: Attr, dynamicExpressions: string[]): string {
+  if (attr.event) {
+    return ` ${eventAttribute(attr.name)}="${attrEscape(attr.value)}"`;
+  }
+
+  if (attr.boolean) {
+    return ` ${attr.name}`;
+  }
+
+  const expression = wholeAttributeExpression(attr.value);
+
+  if (!expression) {
+    return ` ${attr.name}="${attrEscape(attr.value)}"`;
+  }
+
+  dynamicExpressions.push(`\${__wrnexusPropAttr(${expression})}`);
+
+  const marker = `\x00WRNEACH${dynamicExpressions.length - 1}\x00`;
+
+  return ` ${attr.name}="${marker}"`;
 }

packages/compiler/test/compiler.test.ts

@@ -243,7 +243,9 @@ component ParentCard {
 
   expect(output).toContain('data-component="ChildCard"');
 
-  expect(output).toContain('title="${__wireAttr(title)}"');
+  expect(output).toContain('title="${__wireProp(title)}"');
+
+  expect(output).toContain("function __wireProp");
 });
 
 test("parses a layout block", () => {
@@ -737,3 +739,47 @@ component Banner {
   expect(output).toContain("Visible");
   expect(output).toContain("Hidden");
 });
+test("component array props support each blocks", () => {
+  const output = generate(
+    parse(`
+component HighlightList {
+  props {
+    highlights = []
+  }
+
+  view {
+    {#each highlights as highlight}
+      <p>{highlight.title}</p>
+    {/each}
+  }
+}
+`),
+  );
+
+  expect(output).toContain("Array.isArray(def)");
+
+  expect(output).toContain("JSON.parse(v)");
+
+  expect(output).toContain("highlights");
+});
+test("page component props evaluate whole expressions", () => {
+  const output = generate(
+    parse(`
+page Home {
+  view {
+    <HighlightList
+      enabled="{true}"
+      highlights="{[
+        { title: 'First' },
+        { title: 'Second' }
+      ]}"
+    />
+  }
+}
+`),
+  );
+
+  expect(output).toContain("__wrnexusPropAttr(true)");
+
+  expect(output).toContain("__wrnexusPropAttr([");
+});

packages/core/package.json

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

packages/csr/package.json

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

packages/db/package.json

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

packages/dev-server/package.json

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

packages/encryption/package.json

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

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "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.37",
+  "version": "0.2.38",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/jwt/package.json

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

packages/mobile/package.json

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

packages/native/package.json

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

packages/oauth/package.json

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

packages/pubsub/package.json

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

packages/queue/package.json

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

packages/reactive/package.json

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

packages/router/package.json

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

packages/ssr/package.json

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

packages/styles/package.json

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

packages/test/package.json

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

packages/tracking/package.json

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

packages/ui/package.json

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

packages/uploader/package.json

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

packages/validation/package.json

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