@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]

@builder.io/[email protected]

Patch Changes

• 995eb95: [All] Add new explicitBuildFileExtensions to MitosisConfig. This allows users to manage the extension of some components explicitly. This is very useful for plugins:

    /**
     * Can be used for cli builds. Preserves explicit filename extensions when regex matches, e.g.:
     * {
     *   explicitBuildFileExtension: {
     *     ".ts":/*.figma.lite.tsx/g,
     *     ".md":/*.docs.lite.tsx/g
     *   }
     * }
     */
    explicitBuildFileExtensions?: Record<string, RegExp>;

  [All] Add new pluginData object to MitosisComponent which will be filled during build via cli. Users get some additional information to use them for plugins:

    /**
     * This data is filled inside cli to provide more data for plugins
     */
  pluginData?: {
      target?: Target;
      path?: string;
      outputDir?: string;
      outputFilePath?: string;
  };

• 341f281: [All] add additional build type for Plugin to allow users to run plugins before/after cli build process

• b387d21: [React, Angular] fix: issue with state inside key attribute in Fragment.

  Example:

  <Fragment key={state.xxx + "abc"}... was generated in React with state.xxx and in Angular without this..

@builder.io/[email protected]

Patch Changes

• 995eb95: [All] Add new explicitBuildFileExtensions to MitosisConfig. This allows users to manage the extension of some components explicitly. This is very useful for plugins:

    /**
     * Can be used for cli builds. Preserves explicit filename extensions when regex matches, e.g.:
     * {
     *   explicitBuildFileExtension: {
     *     ".ts":/*.figma.lite.tsx/g,
     *     ".md":/*.docs.lite.tsx/g
     *   }
     * }
     */
    explicitBuildFileExtensions?: Record<string, RegExp>;

  [All] Add new pluginData object to MitosisComponent which will be filled during build via cli. Users get some additional information to use them for plugins:

    /**
     * This data is filled inside cli to provide more data for plugins
     */
  pluginData?: {
      target?: Target;
      path?: string;
      outputDir?: string;
      outputFilePath?: string;
  };

• 341f281: [All] add additional build type for Plugin to allow users to run plugins before/after cli build process

• Updated dependencies [995eb95]

• Updated dependencies [341f281]

• Updated dependencies [b387d21]

  • @builder.io/[email protected]