Merge branch 'main' into fix-code-component

packages/cli/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @builder.io/mitosis-cli
 
+## 0.5.34
+
+### Patch Changes
+
+- Updated dependencies [cf666ff]
+  - @builder.io/[email protected]
+
+## 0.5.33
+
+### Patch Changes
+
+- Updated dependencies [50976fa]
+  - @builder.io/[email protected]
+
+## 0.5.32
+
+### Patch Changes
+
+- Updated dependencies [a38e5bb]
+  - @builder.io/[email protected]
+
+## 0.5.31
+
+### Patch Changes
+
+- Updated dependencies [d24889d]
+  - @builder.io/[email protected]
+
+## 0.5.30
+
+### Patch Changes
+
+- Updated dependencies [0c493b2]
+  - @builder.io/[email protected]
+
+## 0.5.29
+
+### Patch Changes
+
+- Updated dependencies [1d74164]
+  - @builder.io/[email protected]
+
+## 0.5.28
+
+### Patch Changes
+
+- Updated dependencies [b63279f]
+  - @builder.io/[email protected]
+
 ## 0.5.27
 
 ### Patch Changes

packages/cli/package.json

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

packages/core/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Change Log
 
+## 0.5.34
+
+### Patch Changes
+
+- cf666ff: check for null string
+
+## 0.5.33
+
+### Patch Changes
+
+- 50976fa: parseJsx accounts for JSX fragments when generating slots
+
+## 0.5.32
+
+### Patch Changes
+
+- a38e5bb: Builder: dynamic styles are mapped to bindings when generating
+
+## 0.5.31
+
+### Patch Changes
+
+- d24889d: [angular,stencil] Fix attribute-passing in options
+
+## 0.5.30
+
+### Patch Changes
+
+- 0c493b2: [Builder] Fix null check issue with localized values
+
+## 0.5.29
+
+### Patch Changes
+
+- 1d74164: adds support to Builder parser and generator for inline localized content
+
+## 0.5.28
+
+### Patch Changes
+
+- b63279f: [angular, stencil]: Add `attributePassing` to enable passing attributes like `data-*`, `aria-*` or `class` to correct child.
+
+  There is a wired behaviour for Angular and Stencil (without shadow DOM), where attributes are rendered on parent elements like this:
+
+  **Input**
+
+  ```angular2html
+  <!-- Angular -->
+  <my-component class="cool" data-nice="true" aria-label="wow"></my-component>
+  ```
+
+  **Output**
+
+  ```html
+  <!-- DOM -->
+  <my-component class="cool" data-nice="true" aria-label="wow">
+    <button class="my-component">My Component</button>
+  </my-component>
+  ```
+
+  In general, we want to pass those attributes down to the rendered child, like this:
+
+  ```html
+  <!-- DOM -->
+  <my-component>
+    <button class="my-component cool" data-nice="true" aria-label="wow">My Component</button>
+  </my-component>
+  ```
+
+  We provide 2 ways to enable this attribute passing:
+
+  **Metadata**
+
+  ```tsx
+  // my-component.lite.tsx
+  useMetadata({
+    attributePassing: {
+      enabled: true,
+      // customRef: "_myRef";
+    },
+  });
+  ```
+
+  **Config**
+
+  ```js
+  // mitosis.config.cjs
+  module.exports = {
+    // ... other settings
+    attributePassing: {
+      enabled: true,
+      // customRef: "_myRef";
+    },
+  };
+  ```
+
+  If you enable the `attributePassing` we add a new `ref` to the root element named `_root` to interact with the DOM element. If you wish to control the name of the ref, because you already have a `useRef` on your root element, you can use the `customRef` property to select it.
+
 ## 0.5.27
 
 ### Patch Changes

packages/core/package.json

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

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

@@ -1692,6 +1692,35 @@ exports[`Alpine.js > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button x-data=\\"basicRefAttributePassingComponent()\\" x-ref=\\"buttonRef\\">
+  Attribute Passing
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
+exports[`Alpine.js > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div x-data=\\"basicRefAttributePassingCustomRefComponent()\\">
+  <button x-ref=\\"buttonRef\\">Attribute Passing</button>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingCustomRefComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<style>
   .div {
@@ -4807,6 +4836,35 @@ exports[`Alpine.js > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button x-data=\\"basicRefAttributePassingComponent()\\" x-ref=\\"buttonRef\\">
+  Attribute Passing
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
+exports[`Alpine.js > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div x-data=\\"basicRefAttributePassingCustomRefComponent()\\">
+  <button x-ref=\\"buttonRef\\">Attribute Passing</button>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingCustomRefComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<style>
   .div {