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(`