fix(compiler): diagnose inline object component props

packages/compiler/src/codegen.ts

@@ -742,6 +742,13 @@ function renderNestedComponentInvocation(
         return ` ${attr.name}`;
       }
 
+      if (/^\s*\{\{[\s\S]*\}\}\s*$/.test(attr.value)) {
+        throw new Error(
+          `WRN-PROP-INLINE-OBJECT: '${attr.name}' uses an inline object or array prop. ` +
+            `Hoist it to state and pass ${attr.name}={yourState} instead.`,
+        );
+      }
+
       const wholeExpression = wholeAttributeExpression(attr.value);
 
       const compiledValue = wholeExpression

packages/compiler/test/compiler.test.ts

@@ -1083,6 +1083,19 @@ page Home {
 
   expect(output).toContain("__wrnexusPropAttr([");
 });
+test("rejects inline object props with a hoisting diagnostic", () => {
+  expect(() =>
+    generate(
+      parse(`component Example { view { <Child items={{ a: 1 }} /> } }`),
+    ),
+  ).toThrow("WRN-PROP-INLINE-OBJECT");
+
+  expect(() =>
+    generate(
+      parse(`component Example { state items = [{ a: 1 }] view { <Child items={items} /> } }`),
+    ),
+  ).not.toThrow();
+});
 test("component functions are available during server rendering", () => {
   const output = generate(
     parse(`