diff --git a/.changeset/good-books-move.md b/.changeset/good-books-move.md deleted file mode 100644 index f390730459..0000000000 --- a/.changeset/good-books-move.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -'@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 - - -``` - -**Output** - -```html - - - - -``` - -In general, we want to pass those attributes down to the rendered child, like this: - -```html - - - - -``` - -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/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 518537720d..e6e61fbc76 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,12 @@ # @builder.io/mitosis-cli +## 0.5.28 + +### Patch Changes + +- Updated dependencies [b63279f] + - @builder.io/mitosis@0.5.28 + ## 0.5.27 ### Patch Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index 1b9414e488..4fb7d5e4fe 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@builder.io/mitosis-cli", - "version": "0.5.27", + "version": "0.5.28", "description": "mitosis CLI", "types": "build/types/types.d.ts", "bin": { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 35fd88b3e2..a78b0c4f41 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,67 @@ # Change Log +## 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 + + + ``` + + **Output** + + ```html + + + + + ``` + + In general, we want to pass those attributes down to the rendered child, like this: + + ```html + + + + + ``` + + 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 diff --git a/packages/core/package.json b/packages/core/package.json index 8b665eeb1f..fc50e00064 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -22,7 +22,7 @@ "name": "Builder.io", "url": "https://www.builder.io" }, - "version": "0.5.27", + "version": "0.5.28", "homepage": "https://github.com/BuilderIO/mitosis", "main": "./dist/src/index.js", "exports": {