add slots support for builder and mitosis jsx (#1595)

* add slots support for builder and mitosis jsx that way the AI will work correctly with child nodes that are not direct children needed for components registered with builder that are like <Layout top={...} left={...} /> currently those don't go to mitosis JSX and see the AI cannot "see" these and things break * minor fix * resolve * fix build * clean up test logs to try to make sense of the failing tests from the output * working * fix * Create poor-fans-help.md --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Oct 18, 2024 · 7a099d2 · 7a099d2
1 parent 3f0168a
commit 7a099d2
Show file tree

Hide file tree

Showing 13 changed files with 281 additions and 15 deletions.
diff --git a/.changeset/poor-fans-help.md b/.changeset/poor-fans-help.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/mitosis": patch
+---
+
+[Builder,Mitosis] Feature: add Slots support.
diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -1951,7 +1951,7 @@ exports[`Builder > Text with bindings 3`] = `
 }
 `;
 
-exports[`Builder > binding 1`] = `
+exports[`Builder > bindings 1`] = `
 {
  "@type": "@builder.io/mitosis/component",
  "children": [
@@ -2036,7 +2036,7 @@ exports[`Builder > binding 1`] = `
 }
 `;
 
-exports[`Builder > binding 2`] = `
+exports[`Builder > bindings 2`] = `
 "import { Button } from \\"@components\\";
 
 export default function MyComponent(props) {
@@ -2314,6 +2314,176 @@ alert('hi');",
 }
 `;
 
+exports[`Builder > nodes as props 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "Foo",
+ "properties": {
+ "$tagName": undefined,
+ },
+ "scope": {},
+ "slots": {
+ "prop": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "Bar",
+ "properties": {
+ "hello": "world",
+ },
+ "scope": {},
+ "slots": {},
+ },
+ ],
+ },
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "exports": {},
+ "hooks": {
+ "onEvent": [],
+ "onMount": [],
+ },
+ "imports": [],
+ "inputs": undefined,
+ "meta": {
+ "useMetadata": {
+ "httpRequests": undefined,
+ },
+ },
+ "name": "MyComponent",
+ "refs": {},
+ "state": {},
+ "subComponents": [],
+}
+`;
+
+exports[`Builder > nodes as props 2`] = `
+"import { Foo, Bar } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return <Foo prop={<Bar hello=\\"world\\" />} />;
+}
+"
+`;
+
+exports[`Builder > nodes as props 3`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "prop": {
+ "code": "<Bar hello=\\"world\\" />",
+ "type": "single",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "Foo",
+ "properties": {},
+ "scope": {},
+ "slots": {
+ "prop": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "Bar",
+ "properties": {
+ "hello": "world",
+ },
+ "scope": {},
+ },
+ ],
+ },
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "exports": {},
+ "hooks": {
+ "onEvent": [],
+ "onMount": [],
+ },
+ "imports": [
+ {
+ "importKind": "value",
+ "imports": {
+ "Bar": "Bar",
+ "Foo": "Foo",
+ },
+ "path": "@components",
+ },
+ ],
+ "inputs": [],
+ "meta": {},
+ "name": "MyComponent",
+ "refs": {},
+ "state": {},
+ "subComponents": [],
+}
+`;
+
+exports[`Builder > nodes as props 4`] = `
+{
+ "data": {
+ "blocks": [
+ {
+ "@type": "@builder.io/sdk:Element",
+ "actions": {},
+ "bindings": {},
+ "children": [],
+ "code": {
+ "actions": {},
+ "bindings": {},
+ },
+ "component": {
+ "name": "Foo",
+ "options": {
+ "prop": [
+ {
+ "@type": "@builder.io/sdk:Element",
+ "actions": {},
+ "bindings": {},
+ "children": [],
+ "code": {
+ "actions": {},
+ "bindings": {},
+ },
+ "component": {
+ "name": "Bar",
+ "options": {
+ "hello": "world",
+ },
+ },
+ },
+ ],
+ },
+ },
+ },
+ ],
+ "jsCode": "",
+ "tsCode": "",
+ },
+}
+`;
+
 exports[`Builder > preserve cssCode when converting 1`] = `
 ".foo {
  background: green;

diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -418,7 +418,7 @@ describe('Builder', () => {
  expect(out).toMatchSnapshot();
  });
 
- test('binding', () => {
+ test('bindings', () => {
  const component = builderContentToMitosisComponent(bindingJson as any as BuilderContent);
  expect(component).toMatchSnapshot();
  const mitosis = componentToMitosis(mitosisOptions)({
@@ -546,6 +546,51 @@ describe('Builder', () => {
  });
  expect(mitosis.trim()).toEqual(code.trim());
  });
+
+ test('nodes as props', () => {
+ const content = {
+ data: {
+ blocks: [
+ {
+ '@type': '@builder.io/sdk:Element' as const,
+ component: {
+ name: 'Foo',
+ options: {
+ prop: [
+ {
+ '@type': '@builder.io/sdk:Element' as const,
+ component: {
+ name: 'Bar',
+ options: {
+ hello: 'world',
+ },
+ },
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ };
+
+ const mitosisJson = builderContentToMitosisComponent(content);
+ expect(mitosisJson).toMatchSnapshot();
+ const mitosis = componentToMitosis(mitosisOptions)({
+ component: mitosisJson,
+ });
+
+ expect(mitosis).toMatchSnapshot();
+
+ const builder = parseJsx(mitosis);
+ expect(builder).toMatchSnapshot();
+ const json = componentToBuilder()({ component: builder });
+ expect(json).toMatchSnapshot();
+ expect(json.data?.blocks?.[0]?.component?.name).toBe('Foo');
+ expect(json.data?.blocks?.[0]?.component?.options?.prop?.[0]?.component?.options.hello).toBe(
+ 'world',
+ );
+ });
 });
 
 const bindingJson = {

diff --git a/packages/core/src/generators/builder/generator.ts b/packages/core/src/generators/builder/generator.ts
@@ -103,7 +103,6 @@ const componentMappers: {
  'Personalization',
  ];
  block.children!.forEach((item) => {
- console.log('item', item);
  if (item.component && validFakeNodeNames.includes(item.component?.name)) {
  let query: any;
  if (item.component.options.query) {
@@ -297,11 +296,17 @@ export const blockToBuilder = (
  if (!(parsed instanceof Error)) {
  componentOptions[key] = parsed;
  } else {
- builderBindings[`component.options.${key}`] = bindings[key]!.code;
+ if (!json.slots?.[key]) {
+ builderBindings[`component.options.${key}`] = bindings[key]!.code;
+ }
  }
  }
  }
 
+ for (const key in json.slots) {
+ componentOptions[key] = json.slots[key].map((node) => blockToBuilder(node, options));
+ }
+
  const hasCss = !!bindings.css?.code;
 
  let responsiveStyles: {
@@ -338,7 +343,9 @@ export const blockToBuilder = (
 
  if (thisIsComponent) {
  for (const key in json.bindings) {
- builderBindings[`component.options.${key}`] = json.bindings[key]!.code;
+ if (!json.slots?.[key]) {
+ builderBindings[`component.options.${key}`] = json.bindings[key]!.code;
+ }
  }
  }
 

diff --git a/packages/core/src/generators/context/angular.ts b/packages/core/src/generators/context/angular.ts
@@ -35,7 +35,9 @@ export default class ${context.name}Context {
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }

diff --git a/packages/core/src/generators/context/helpers/context-with-symbol-key.ts b/packages/core/src/generators/context/helpers/context-with-symbol-key.ts
@@ -24,7 +24,9 @@ export const getContextWithSymbolKey =
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }

diff --git a/packages/core/src/generators/context/qwik.ts b/packages/core/src/generators/context/qwik.ts
@@ -23,7 +23,9 @@ export const contextToQwik =
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }

diff --git a/packages/core/src/generators/context/react.ts b/packages/core/src/generators/context/react.ts
@@ -28,7 +28,9 @@ export const contextToReact =
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }

diff --git a/packages/core/src/generators/context/rsc.ts b/packages/core/src/generators/context/rsc.ts
@@ -26,7 +26,9 @@ export const contextToRsc =
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }

diff --git a/packages/core/src/generators/context/solid.ts b/packages/core/src/generators/context/solid.ts
@@ -24,7 +24,9 @@ export const contextToSolid =
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }

diff --git a/packages/core/src/generators/context/svelte.ts b/packages/core/src/generators/context/svelte.ts
@@ -38,7 +38,9 @@ export default {
  ],
  });
  } catch (err) {
- console.error('Format error for file:', str);
+ if (process.env.NODE_ENV !== 'test') {
+ console.error('Format error for file:', str);
+ }
  throw err;
  }
  }