diff --git a/.changeset/soft-moons-change.md b/.changeset/soft-moons-change.md new file mode 100644 index 0000000000..cd6f9f3c26 --- /dev/null +++ b/.changeset/soft-moons-change.md @@ -0,0 +1,5 @@ +--- +'@builder.io/mitosis': patch +--- + +[Builder]: Do not set width binding on Column if value is undefined diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0020751582..dd57d865b2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,7 +32,7 @@ We need your help! If you found a bug, it's best to [create an issue](https://gi ## Developing for Core & Testing -In `core`, we use vitest snapshots & integeration tests for test coverage. If you are solving a problem that is reproducible by a fiddle in [mitosis.builder.io/playground](/playground), we highly recommend the following flow: +In `core`, we use vitest snapshots & integration tests for test coverage. If you are solving a problem that is reproducible by a fiddle in [mitosis.builder.io/playground](/playground), we highly recommend the following flow: ### Snapshot test @@ -55,8 +55,8 @@ PS: don't worry about failing imports in the raw test TSX files. These are not a #### Create new e2e project for another target -If you want to create a new project inside ``e2e``. You should name the folder `e2e-XXX` where `XXX` should be replaced with the target. -Make sure that you change the ``name`` inside `package.json` of this project to `@builder.io/e2e-XXX`. Additionally, you need to add `private: true` to `package.json` to avoid publishing the project. +If you want to create a new project inside `e2e`. You should name the folder `e2e-XXX` where `XXX` should be replaced with the target. +Make sure that you change the `name` inside `package.json` of this project to `@builder.io/e2e-XXX`. Additionally, you need to add `private: true` to `package.json` to avoid publishing the project. ### Test your changes diff --git a/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap b/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap index ea3519501c..08dbf2445c 100644 --- a/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap +++ b/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap @@ -21,7 +21,7 @@ function MyComponent(props) { paddingRight: \\"0px\\", }} > - + - + - + { expect(mitosis.trim()).toEqual(code.trim()); }); + test('do not generate empty expression for width on Column', () => { + const content = { + data: { + blocks: [ + { + '@type': '@builder.io/sdk:Element' as const, + component: { + name: 'Columns', + options: { + columns: [{ blocks: [] }, { blocks: [], width: 50 }], + }, + }, + }, + ], + }, + }; + + const mitosisJson = builderContentToMitosisComponent(content); + + const mitosis = componentToMitosis(mitosisOptions)({ + component: mitosisJson, + }); + + expect(mitosis).toMatchInlineSnapshot(` + "import { Columns, Column } from \\"@components\\"; + + export default function MyComponent(props) { + return ( + + + + + ); + } + " + `); + }); + test('nodes as props', () => { const content = { data: { diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts index 83bcfff63a..6dc1770eb5 100644 --- a/packages/core/src/generators/mitosis/generator.ts +++ b/packages/core/src/generators/mitosis/generator.ts @@ -138,7 +138,7 @@ export const blockToMitosis = ( for (const key in json.bindings) { const value = json.bindings[key]?.code as string; - if (json.slots?.[key]) { + if (!value || json.slots?.[key]) { continue; } diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts index ca466f7ab5..64f621d228 100644 --- a/packages/core/src/parsers/builder/builder.ts +++ b/packages/core/src/parsers/builder/builder.ts @@ -347,9 +347,15 @@ const componentMappers: { block.component?.options.columns?.map((col: any, index: number) => createMitosisNode({ name: 'Column', - bindings: { - width: { code: col.width?.toString() }, - }, + /** + * If width if undefined, do not create a binding otherwise its JSX will + * be which is not valid due to the empty expression. + */ + ...(col.width !== undefined && { + bindings: { + width: { code: col.width.toString() }, + }, + }), ...(col.link && { properties: { link: col.link,