feat: add attribute passing for angular and stencil (#1665)

* feat: add attribute passing for angular and stencil * fix: issue with wrong path for builder.test.ts * chore: update snapshots * Update packages/core/src/__tests__/angular.test.ts * Revert "Update packages/core/src/__tests__/angular.test.ts" This reverts commit 983d6b9. --------- Co-authored-by: Sami Jaber <[email protected]> Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Jan 20, 2025 · b63279f · b63279f
1 parent ed0d7fa
commit b63279f
Show file tree

Hide file tree

Showing 49 changed files with 6,441 additions and 572 deletions.
diff --git a/.changeset/good-books-move.md b/.changeset/good-books-move.md
@@ -0,0 +1,61 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[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.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/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 {