Function componentToMitosis

packages/core/src/generators/mitosis/generator.ts:306–427

(toMitosisOptions = {})

export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>> =
  (toMitosisOptions = {}) =>
  ({ component }) => {
    const options: ToMitosisOptions = {
      format: DEFAULT_FORMAT,
      ...toMitosisOptions,
    };

    if (options.format === 'react') {
      return componentToReact({
        format: 'lite',
        stateType: 'useState',
        stylesType: 'emotion',
        prettier: options.prettier,
      })({ component });
    }

    let json = fastClone(component);

    if (options.plugins) {
      json = runPreJsonPlugins({ json, plugins: options.plugins });
    }

    const domRefs = getRefs(component);
    // grab refs not used for bindings
    const jsRefs = Object.keys(component.refs).filter((ref) => domRefs.has(ref));

    const refs = [...jsRefs, ...Array.from(domRefs)];

    mapRefs(json, (refName) => {
      return `${refName}${domRefs.has(refName) ? `.current` : ''}`;
    });

    const addWrapper = json.children.length !== 1 || isRootTextNode(json);

    const components = Array.from(getComponents(json));
    const mitosisCoreComponents: string[] = [];
    if (!options.nativeConditionals) {
      mitosisCoreComponents.push('Show');
    }
    if (!options.nativeLoops) {
      mitosisCoreComponents.push('For');
    }

    const mitosisComponents = components.filter((item) => mitosisCoreComponents.includes(item));
    const otherComponents = components.filter((item) => !mitosisCoreComponents.includes(item));

    if (options.plugins) {
      json = runPostJsonPlugins({ json, plugins: options.plugins });
    }

    const hasState = checkHasState(component);

    const needsMitosisCoreImport = Boolean(hasState || refs.length || mitosisComponents.length);

    const stringifiedUseMetadata = json5.stringify(component.meta.useMetadata);

    // TODO: smart only pull in imports as needed
    let str = dedent`