@builder.io/[email protected]

Patch Changes

• 1d74164: adds support to Builder parser and generator for inline localized content

@builder.io/[email protected]

Patch Changes

• Updated dependencies [1d74164]
  • @builder.io/[email protected]

@builder.io/[email protected]

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

  <!-- Angular -->
  <my-component class="cool" data-nice="true" aria-label="wow"></my-component>
  

  Output

  <!-- 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:

  <!-- 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

  // my-component.lite.tsx
  useMetadata({
    attributePassing: {
      enabled: true,
      // customRef: "_myRef";
    },
  });

  Config

  // 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.

@builder.io/[email protected]

Patch Changes

• Updated dependencies [b63279f]
  • @builder.io/[email protected]

@builder.io/[email protected]

Patch Changes

• 92ad2c6: Misc: stop using fs-extra-promise dependency

@builder.io/[email protected]

Patch Changes

• 57bdffe: [angular] fix issue with definite assignment (!) for props with defaultProps

@builder.io/[email protected]

Patch Changes

• af43f50: [All] Refactored useMetadata hook to enable import resolution instead of simple JSON5 parsing.

  You could use a normal JS Object and import it inside your *.lite.tsx file like this:

  // data.ts
  
  export const myMetadata: Record<string, string | number> = {
    a: 'b',
    c: 1,
  };

  // my-button.lite.tsx
  import { useMetadata } from '@builder.io/mitosis';
  import { myMetadata } from './data.ts';
  
  useMetadata({
    x: 'y',
    my: myMetadata,
  });
  
  export default function MyButton() {
    return <button></button>;
  }

• 20ad8dc: [angular]: Fix issue with events forced to become toLowerCase().

  Based on choosing-event-names custom events are camelCase.
  DOM events are always lower-cased for Angular components.

  Checkout event-handlers.ts for a list of all events that are automatically lower-cased. Everything else will be treated as a custom event and therefore camelCased.

  If you need some other event to be lower-cased you can use useMetadata.angular.nativeEvents:

  import { useMetadata } from '@builder.io/mitosis';
  
  useMetadata({
    angular: {
      nativeEvents: ['onNativeEvent'],
    },
  });
  
  export default function MyComponent(props) {
    return (
      <div>
        <input onNativeEvent={(event) => console.log(event)} />
        Hello!
      </div>
    );
  }

@builder.io/[email protected]

Patch Changes

• 92ad2c6: Misc: stop using fs-extra-promise dependency
• Updated dependencies [92ad2c6]
  • @builder.io/[email protected]

@builder.io/[email protected]

Patch Changes

• Updated dependencies [57bdffe]
  • @builder.io/[email protected]

@builder.io/[email protected]

Patch Changes

• Updated dependencies [af43f50]
• Updated dependencies [20ad8dc]
  • @builder.io/[email protected]