mitosis.config.js

/**
 * Mitosis build configuration for @bitcode/ui.
 *
 * Targets (per ADR-006 §6):
 *   - react        : web React 18+ (consumed by Vite/Tauri)
 *   - vue          : web Vue 3 (consumed by Vite)
 *   - reactNative  : RN with NativeWind className output (consumed by Metro)
 *   - stencil      : legacy Web Components target (frozen — no new features)
 *
 * NativeWind support:
 *   `stylesType: 'native-wind'` instructs Mitosis to combine static + dynamic
 *   class state into a single `className` prop on each JSX node, which
 *   NativeWind v4's babel transform then compiles into RN styles. Mitosis
 *   0.13.1's upstream plugin has a bug stringifying dynamic class bindings
 *   to "[object Object]"; we ship a `patch-package` patch that fixes the
 *   plugin in place — see `patches/@builder.io+mitosis+0.13.1.patch`.
 *
 * @type {import('@builder.io/mitosis').MitosisConfig}
 */
export default {
  files: 'src/**/**.lite.tsx',
  // Note: target key is camelCase 'reactNative' (matches the export name in
  // @builder.io/mitosis targets registry). The output folder is kebab-case
  // 'react-native' for filesystem readability — see getTargetPath below.
  targets: ['stencil', 'react', 'vue', 'reactNative'],
  dest: 'output',
  commonOptions: {
    typescript: true,
    prettier: true,
  },
  options: {
    stencil: {
      prefix: 'bc',
    },
    react: {
      stateType: 'useState',
      stylesType: 'styled-jsx',
      type: 'dom',
    },
    vue: {
      api: 'composition',
      vueVersion: 3,
      typescript: true,
    },
    reactNative: {
      stateType: 'useState',
      stylesType: 'native-wind',
    },
  },
  getTargetPath: ({ target }) => {
    switch (target) {
      case 'stencil':
        return 'stencil';
      case 'react':
        return 'react';
      case 'vue':
        return 'vue';
      case 'reactNative':
        return 'react-native';
      default:
        return target;
    }
  },
};