Merge branch 'main' into fix-fragment-with-state-in-key

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
 

packages/cli/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @builder.io/mitosis-cli
 
+## 0.5.23
+
+### Patch Changes
+
+- Updated dependencies [772d6f5]
+  - @builder.io/[email protected]
+
+## 0.5.22
+
+### Patch Changes
+
+- Updated dependencies [d52fe59]
+  - @builder.io/[email protected]
+
+## 0.5.21
+
+### Patch Changes
+
+- Updated dependencies [73a55a3]
+- Updated dependencies [10a168d]
+  - @builder.io/[email protected]
+
 ## 0.5.20
 
 ### Patch Changes

packages/cli/package.json

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

packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap

@@ -21,7 +21,7 @@ function MyComponent(props) {
         paddingRight: \\"0px\\",
       }}
     >
-      <Column width={}>
+      <Column>
         <Image
           image=\\"https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F8e096f01b00343dca3952d645f7ae024?width=998&height=1000\\"
           backgroundPosition=\\"center\\"
@@ -111,7 +111,7 @@ function MyComponent(props) {
           </div>
         </div>
       </Column>
-      <Column width={}>
+      <Column>
         <Image
           image=\\"https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F70c33c597e9946e9a79ab99ad9a999d3?width=998&height=1000\\"
           backgroundPosition=\\"center\\"
@@ -211,7 +211,7 @@ function MyComponent(props) {
           </div>
         </div>
       </Column>
-      <Column width={}>
+      <Column>
         <Image
           image=\\"https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F226d855cb0ee46e4a2c7baa6990c1118?width=998&height=1000\\"
           backgroundPosition=\\"center\\"

packages/core/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 0.5.23
+
+### Patch Changes
+
+- 772d6f5: Angular selector support in code generation
+
+## 0.5.22
+
+### Patch Changes
+
+- d52fe59: [Builder]: bound media query styles are not converted to strings
+
+## 0.5.21
+
+### Patch Changes
+
+- 73a55a3: [Builder]: Do not set width binding on Column if value is undefined
+- 10a168d: [Builder] preserve bound media query styles when converting to Mitosis
+
 ## 0.5.20
 
 ### Patch Changes

packages/core/package.json

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

packages/core/src/__tests__/angular.selector.test.ts

@@ -0,0 +1,32 @@
+import { parse } from '../generators/angular/parse-selector';
+
+describe('Angular selectors', () => {
+  test('should parse gnarly selectors', () => {
+    expect(parse('ccc.c1#wat[co].c2[counter="cool"]#wat[x=\'y\'].c3')).toEqual({
+      element: 'ccc',
+      classNames: ['c1', 'c2', 'c3'],
+      attributes: {
+        co: '',
+        counter: 'cool',
+        id: 'wat',
+        x: 'y',
+      },
+    });
+  });
+
+  test('parsing multiple returns only the first', () => {
+    expect(parse('dropzone, [dropzone]')).toEqual({
+      element: 'dropzone',
+      classNames: [],
+      attributes: {},
+    });
+  });
+
+  test(':not parses but is unused', () => {
+    expect(parse('list-item:not(.foo)')).toEqual({
+      element: 'list-item',
+      classNames: [],
+      attributes: {},
+    });
+  });
+});

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

@@ -593,6 +593,44 @@ describe('Builder', () => {
     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 (
+          <Columns>
+            <Column />
+            <Column width={50} />
+          </Columns>
+        );
+      }
+      "
+    `);
+  });
+
   test('nodes as props', () => {
     const content = {
       data: {
@@ -637,6 +675,56 @@ describe('Builder', () => {
       'world',
     );
   });
+
+  test('preserve bound media query styles when converting to mitosis', () => {
+    const content = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            bindings: {
+              'responsiveStyles.small.left': 'state.left',
+              'responsiveStyles.small.top': 'state.top',
+              'responsiveStyles.large.color': 'state.color',
+              'style.fontSize': 'state.fontSize',
+            },
+          },
+        ],
+      },
+    };
+
+    const mitosis = builderContentToMitosisComponent(content);
+    expect(mitosis.children[0].bindings).toMatchInlineSnapshot(`
+      {
+        "style": {
+          "bindingType": "expression",
+          "code": "{ fontSize: state.fontSize, \\"@media (max-width: 640px)\\": { left: state.left, top: state.top }, \\"@media (max-width: 1200px)\\": { color: state.color }, }",
+          "type": "single",
+        },
+      }
+    `);
+
+    const jsx = componentToMitosis()({ component: mitosis });
+    expect(jsx).toMatchInlineSnapshot(`
+      "export default function MyComponent(props) {
+        return (
+          <div
+            style={{
+              fontSize: state.fontSize,
+              \\"@media (max-width: 640px)\\": {
+                left: state.left,
+                top: state.top,
+              },
+              \\"@media (max-width: 1200px)\\": {
+                color: state.color,
+              },
+            }}
+          />
+        );
+      }
+      "
+    `);
+  });
 });
 
 const bindingJson = {

packages/core/src/generators/angular/index.ts

@@ -63,6 +63,8 @@ import {
   ToAngularOptions,
 } from './types';
 
+import { parse } from './parse-selector';
+
 const { types } = babel;
 
 const mappers: {
@@ -428,10 +430,44 @@ export const blockToAngular = ({
 
     str += `</ng-container>`;
   } else {
-    const elSelector = childComponents.find((impName) => impName === json.name)
-      ? kebabCase(json.name)
-      : json.name;
-    str += `<${elSelector} `;
+    let element,
+      classNames: string[] = [],
+      attributes;
+
+    const isComponent = childComponents.find((impName) => impName === json.name);
+
+    if (isComponent) {
+      const selector = json.meta.selector || blockOptions?.selector;
+      if (selector) {
+        try {
+          ({ element, classNames, attributes } = parse(`${selector}`));
+        } catch {
+          element = kebabCase(json.name);
+        }
+      } else {
+        element = kebabCase(json.name);
+      }
+    } else {
+      element = json.name;
+    }
+
+    str += `<${element} `;
+
+    // TODO: merge with existing classes/bindings
+    if (classNames.length) {
+      str += `class="${classNames.join(' ')}" `;
+    }
+
+    // TODO: Merge with existing properties
+    if (attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        if (value) {
+          str += `${key}=${JSON.stringify(value)} `;
+        } else {
+          str += `${key} `;
+        }
+      });
+    }
 
     for (const key in json.properties) {
       if (key.startsWith('$')) {
@@ -517,7 +553,7 @@ export const blockToAngular = ({
         .join('\n');
     }
 
-    str += `</${elSelector}>`;
+    str += `</${element}>`;
   }
   return str;
 };

packages/core/src/generators/angular/parse-selector.ts

@@ -0,0 +1,17 @@
+import { CssSelector } from '@angular/compiler';
+
+export function parse(selector: string) {
+  const { element, classNames, attrs } = CssSelector.parse(selector)[0];
+  const attributes = attrs.reduce((acc, attr, i) => {
+    if (i % 2 === 0) {
+      acc[attr] = attrs[i + 1];
+    }
+    return acc;
+  }, {} as Record<string, string>);
+
+  return {
+    element,
+    classNames,
+    attributes,
+  };
+}

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;
     }