release: WRNexusJS 0.5.10

packages/compiler/package.json

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

packages/compiler/src/codegen.ts

@@ -1437,6 +1437,10 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
     }
   }
 
+  const isExplicitComponentMount = node.attrs.some(
+    (attribute) => attribute.name === "data-component",
+  );
+
   const attrs = node.attrs
     .filter((a) => a.name !== "class" && !a.name.startsWith("class:"))
     .map((a) => {
@@ -1476,7 +1480,12 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
         if (a.value === "true" || a.value === "") return ` ${a.name}`;
       }
 
-      const rendered = ` ${a.name}="${compileAttrValue(a.value, elementContext)}"`;
+      const wholeExpression = wholeAttributeExpression(a.value);
+      const compiledValue =
+        isExplicitComponentMount && wholeExpression
+          ? `\${__wireProp(${elementContext.resolveExpr(wholeExpression)})}`
+          : compileAttrValue(a.value, elementContext);
+      const rendered = ` ${a.name}="${compiledValue}"`;
 
       const referencesState = exprRefsComponentReactiveValue(a.value, ctx);
 

packages/compiler/test/compiler.test.ts

@@ -98,6 +98,20 @@ test("component event declarations compile to public root metadata", async () =>
   expect(render({})).toContain('data-wrn-events="complete"');
 });
 
+test("explicit nested component mounts serialize structured expression props", () => {
+  const output = compileWireFile(`component Shell {
+    state brand = { "label": "WRNexus" }
+    state items = [{ "label": "Home", "href": "/" }]
+    view {
+      <div data-component="Navbar" brand={brand} items={items}></div>
+    }
+  }`);
+
+  expect(output).toContain('data-component="Navbar"');
+  expect(output).toContain('brand="${__wireProp(brand)}"');
+  expect(output).toContain('items="${__wireProp(items)}"');
+});
+
 test("typed props, required props, state, custom types, and function parameters compile", () => {
   const source = `component TypedPicker {
   types {