diff --git a/packages/compiler/src/codegen.ts b/packages/compiler/src/codegen.ts
index e19d57dd..08c23a3c 100644
--- a/packages/compiler/src/codegen.ts
+++ b/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
diff --git a/packages/compiler/test/compiler.test.ts b/packages/compiler/test/compiler.test.ts
index 45fcb76e..737e18b5 100644
--- a/packages/compiler/test/compiler.test.ts
+++ b/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 { } }`),
+ ),
+ ).toThrow("WRN-PROP-INLINE-OBJECT");
+
+ expect(() =>
+ generate(
+ parse(`component Example { state items = [{ a: 1 }] view { } }`),
+ ),
+ ).not.toThrow();
+});
test("component functions are available during server rendering", () => {
const output = generate(
parse(`