diff --git a/.changeset/green-tables-yell.md b/.changeset/green-tables-yell.md new file mode 100644 index 0000000000..66268fbbe7 --- /dev/null +++ b/.changeset/green-tables-yell.md @@ -0,0 +1,5 @@ +--- +'@builder.io/mitosis': patch +--- + +Fix multi line bindings from Mitosis to Builder diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap index f33e3f20f7..3baaeb9edb 100644 --- a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap @@ -920,6 +920,12 @@ exports[`Builder > Regenerate custom Hero 1`] = ` "code": "400", "type": "single", }, + "multiBinding": { + "code": "{ + hello: state.message +}", + "type": "single", + }, }, "children": [], "meta": {}, @@ -969,12 +975,18 @@ exports[`Builder > Regenerate custom Hero 2`] = ` "actions": {}, "bindings": { "component.options.height": "400", + "component.options.multiBinding": " return { + hello: state.message +}", }, "children": [], "code": { "actions": {}, "bindings": { "component.options.height": "400", + "component.options.multiBinding": "{ + hello: state.message +}", }, }, "component": { @@ -1021,6 +1033,12 @@ exports[`Builder > Regenerate custom Hero 3`] = ` "code": "400", "type": "single", }, + "multiBinding": { + "code": "{ + hello: state.message +}", + "type": "single", + }, }, "children": [], "meta": {}, diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts index e8031d5213..39d02a75ca 100644 --- a/packages/core/src/__tests__/builder.test.ts +++ b/packages/core/src/__tests__/builder.test.ts @@ -296,6 +296,9 @@ describe('Builder', () => { image="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F52dcecf48f9c48cc8ddd8f81fec63236" buttonLink="https://example.com" buttonText="Click" + multiBinding={{ + hello: state.message, + }} height={400} css={{ display: "flex", diff --git a/packages/core/src/generators/builder/generator.ts b/packages/core/src/generators/builder/generator.ts index ba7d320cc8..6254bebf11 100644 --- a/packages/core/src/generators/builder/generator.ts +++ b/packages/core/src/generators/builder/generator.ts @@ -481,6 +481,20 @@ export const componentToBuilder = if (value) { set(el, 'component.options.symbol.content', value); } + if (el.bindings) { + for (const [key, value] of Object.entries(el.bindings)) { + if (value.match(/\n|;/)) { + if (!el.code) { + el.code = {}; + } + if (!el.code.bindings) { + el.code.bindings = {}; + } + el.code.bindings[key] = value; + el.bindings[key] = ` return ${value}`; + } + } + } } });