Merge branch 'main' of github.com:BuilderIO/mitosis into fix/docs-can…

…onical

.changeset/config.json

@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [["@builder.io/mitosis", "@builder.io/mitosis-cli"]],
   "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "origin/main",
   "updateInternalDependencies": "patch",
   "ignore": [
     "@builder.io/mitosis-fiddle",

.yarnrc.yml

@@ -5,3 +5,5 @@ enableGlobalCache: true
 nmHoistingLimits: workspaces
 
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

README.MD

@@ -23,7 +23,7 @@
 
 ## Overview
 
-Mitosis provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.
+[Mitosis](https://mitosis.builder.io/docs/overview/) provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.
 
 Using Mitosis, you can:
 

packages/cli/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @builder.io/mitosis-cli
 
+## 0.4.5
+
+### Patch Changes
+
+- Updated dependencies [428b3ab]
+  - @builder.io/[email protected]
+
+## 0.4.4
+
+### Patch Changes
+
+- Updated dependencies [ad7e576]
+- Updated dependencies [52dc749]
+  - @builder.io/[email protected]
+
+## 0.4.3
+
+### Patch Changes
+
+- Updated dependencies [1bf28ea]
+- Updated dependencies [814d171]
+- Updated dependencies [531c15c]
+- Updated dependencies [84038d5]
+  - @builder.io/[email protected]
+
 ## 0.4.2
 
 ### Patch Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.4.2",
+  "version": "0.4.5",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {

packages/core/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 0.4.5
+
+### Patch Changes
+
+- 428b3ab: chore: update internal structure for generators and add more information for options and metadata
+
+## 0.4.4
+
+### Patch Changes
+
+- ad7e576: [Builder]: fix Text node crash with bindings
+- 52dc749: [Builder]: preserve global CSS when converting from/to Builder JSON.
+
+## 0.4.3
+
+### Patch Changes
+
+- 1bf28ea: Builder: fix: ensure component name suffix
+- 814d171: Angular: Feature: custom template selectors using metadata hook.
+- 531c15c: fix: check string value in `isUpperCase`
+- 84038d5: Angular: Feat: support destructuring of props or state objects with attributes as well as event listeners directly inside an HTML element
+
 ## 0.4.2
 
 ### Patch Changes

packages/core/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.4.2",
+  "version": "0.4.5",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

packages/core/src/__tests__/__snapshots__/builder.test.ts.snap

@@ -1643,6 +1643,101 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Builder > Text with bindings 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "<p>Time left: {state.timeLeft} seconds</p>",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": undefined,
+  "meta": {
+    "useMetadata": {
+      "httpRequests": undefined,
+    },
+  },
+  "name": "MyComponent",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Builder > Text with bindings 2`] = `
+"export default function MyComponent(props) {
+  return (
+    <div>
+      <p>Time left: {state.timeLeft} seconds</p>
+    </div>
+  );
+}
+"
+`;
+
+exports[`Builder > Text with bindings 3`] = `
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [
+          {
+            "@type": "@builder.io/sdk:Element",
+            "bindings": {},
+            "component": {
+              "name": "Text",
+              "options": {
+                "text": "<p>Time left: {{state.timeLeft}} seconds</p>",
+              },
+            },
+            "tagName": "span",
+          },
+        ],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "properties": {},
+        "tagName": "div",
+      },
+    ],
+    "jsCode": "",
+    "tsCode": "",
+  },
+}
+`;
+
 exports[`Builder > binding 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -1723,6 +1818,7 @@ exports[`Builder > binding 1`] = `
   "name": "MyComponent",
   "refs": {},
   "state": {},
+  "style": "builder-component { max-width: none !important; }",
   "subComponents": [],
 }
 `;
@@ -1731,6 +1827,8 @@ exports[`Builder > binding 2`] = `
 "import { Button } from \\"@components\\";
 
 export default function MyComponent(props) {
+  useStyle(\`builder-component { max-width: none !important; }\`);
+
   return (
     <>
       <Button label=\\"hello\\" label={state.text} />
@@ -2003,6 +2101,51 @@ alert('hi');",
 }
 `;
 
+exports[`Builder > preserve cssCode when converting 1`] = `
+".foo {
+  background: green;
+}
+
+.bar {
+  font-weight: bold;
+}"
+`;
+
+exports[`Builder > preserve cssCode when converting 2`] = `
+".foo {
+  background: green;
+}
+
+.bar {
+  font-weight: bold;
+}"
+`;
+
+exports[`Builder > preserve cssCode when converting 3`] = `
+"export default function MyComponent(props) {
+  useStyle(\`.foo {
+  background: green;
+}
+
+.bar {
+  font-weight: bold;
+}\`);
+
+  return <></>;
+}
+"
+`;
+
+exports[`Builder > preserve cssCode when converting 4`] = `
+".foo {
+  background: green;
+}
+
+.bar {
+  font-weight: bold;
+}"
+`;
+
 exports[`Builder > slots 1`] = `
 {
   "@type": "@builder.io/mitosis/component",

packages/core/src/__tests__/builder.test.ts

@@ -18,6 +18,7 @@ import customComponentSlotPropertyContent from './data/builder/custom-component-
 import lazyLoadSection from './data/builder/lazy-load-section.json?raw';
 import slotsContent from './data/builder/slots.json?raw';
 import slots2Content from './data/builder/slots2.json?raw';
+import textBindings from './data/builder/text-bindings.json?raw';
 
 const mitosisOptions: ToMitosisOptions = {
   format: 'legacy',
@@ -89,6 +90,18 @@ describe('Builder', () => {
     expect(html).toMatchSnapshot();
   });
 
+  test('Text with bindings', async () => {
+    const originalBuilder = JSON.parse(textBindings);
+    const component = builderContentToMitosisComponent(originalBuilder);
+    const mitosisJsx = componentToMitosis()({ component });
+
+    expect(component).toMatchSnapshot();
+    expect(mitosisJsx).toMatchSnapshot();
+
+    const backToBuilder = componentToBuilder()({ component });
+    expect(backToBuilder).toMatchSnapshot();
+  });
+
   test('Regenerate Image', () => {
     const code = dedent`
       import { useStore } from "@builder.io/mitosis";
@@ -413,6 +426,36 @@ describe('Builder', () => {
     });
     expect(mitosis).toMatchSnapshot();
   });
+
+  test('preserve cssCode when converting', () => {
+    const builderJson: BuilderContent = {
+      data: {
+        cssCode: dedent`
+        .foo {
+          background: green;
+        }
+        
+        .bar {
+          font-weight: bold;
+        }
+      `,
+        blocks: [],
+      },
+    };
+    const builderToMitosis = builderContentToMitosisComponent(builderJson);
+    expect(builderToMitosis.meta.cssCode).toMatchSnapshot();
+
+    const mitosisToBuilder = componentToBuilder()({ component: builderToMitosis })!;
+    expect(mitosisToBuilder.data!.cssCode).toMatchSnapshot();
+
+    const jsx = componentToMitosis(mitosisOptions)({
+      component: builderToMitosis,
+    });
+    expect(jsx).toMatchSnapshot();
+
+    const jsxToMitosis = parseJsx(jsx);
+    expect(jsxToMitosis.style).toMatchSnapshot();
+  });
 });
 
 const bindingJson = {

packages/core/src/__tests__/data/builder/text-bindings.json

@@ -0,0 +1,17 @@
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "@version": 2,
+        "id": "builder-170e19cac58e4c28998d443a9dce80b4",
+        "component": {
+          "name": "Text",
+          "options": {
+            "text": "<p>Time left: {{state.timeLeft}} seconds</p>"
+          }
+        }
+      }
+    ]
+  }
+}