@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/generators/react/generator.js

@@ -0,0 +1,399 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToReact = exports.componentToPreact = exports.contextPropDrillingKey = void 0;
+const default_props_1 = require("../../generators/react/helpers/default-props");
+const hooks_1 = require("../../generators/react/helpers/hooks");
+const bindings_1 = require("../../helpers/bindings");
+const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const get_props_ref_1 = require("../../helpers/get-props-ref");
+const get_refs_1 = require("../../helpers/get-refs");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const getters_to_functions_1 = require("../../helpers/getters-to-functions");
+const handle_missing_state_1 = require("../../helpers/handle-missing-state");
+const is_root_text_node_1 = require("../../helpers/is-root-text-node");
+const map_refs_1 = require("../../helpers/map-refs");
+const merge_options_1 = require("../../helpers/merge-options");
+const nullable_1 = require("../../helpers/nullable");
+const on_event_1 = require("../../helpers/on-event");
+const process_code_1 = require("../../helpers/plugins/process-code");
+const process_http_requests_1 = require("../../helpers/process-http-requests");
+const render_imports_1 = require("../../helpers/render-imports");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
+const state_1 = require("../../helpers/state");
+const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const collect_styled_components_1 = require("../../helpers/styles/collect-styled-components");
+const helpers_1 = require("../../helpers/styles/helpers");
+const plugins_1 = require("../../modules/plugins");
+const core_1 = require("@babel/core");
+const hash_sum_1 = __importDefault(require("hash-sum"));
+const json5_1 = __importDefault(require("json5"));
+const standalone_1 = require("prettier/standalone");
+const context_1 = require("../helpers/context");
+const rsc_1 = require("../helpers/rsc");
+const react_native_1 = require("../react-native");
+const blocks_1 = require("./blocks");
+const helpers_2 = require("./helpers");
+const state_2 = require("./helpers/state");
+exports.contextPropDrillingKey = '_context';
+/**
+ * If the root Mitosis component only has 1 child, and it is a `Show`/`For` node, then we need to wrap it in a fragment.
+ * Otherwise, we end up with invalid React render code.
+ */
+const isRootSpecialNode = (json) => json.children.length === 1 && ['Show', 'For'].includes(json.children[0].name);
+const getRefsString = (json, refs, options) => {
+    var _a, _b;
+    let hasStateArgument = false;
+    let code = '';
+    const domRefs = (0, get_refs_1.getRefs)(json);
+    for (const ref of refs) {
+        const typeParameter = ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.typeParameter) || '';
+        // domRefs must have null argument
+        const argument = ((_b = json['refs'][ref]) === null || _b === void 0 ? void 0 : _b.argument) || (domRefs.has(ref) ? 'null' : '');
+        hasStateArgument = /state\./.test(argument);
+        code += `\nconst ${ref} = useRef${typeParameter && options.typescript ? `<${typeParameter}>` : ''}(${(0, state_2.processHookCode)({
+            str: argument,
+            options,
+        })});`;
+    }
+    return [hasStateArgument, code];
+};
+function provideContext(json, options) {
+    if (options.contextType === 'prop-drill') {
+        let str = '';
+        for (const key in json.context.set) {
+            const { name, ref, value } = json.context.set[key];
+            if (value) {
+                str += `
+          ${exports.contextPropDrillingKey}.${name} = ${(0, get_state_object_string_1.stringifyContextValue)(value)};
+        `;
+            }
+            // TODO: support refs. I'm not sure what those are so unclear how to support them
+        }
+        return str;
+    }
+    else {
+        for (const key in json.context.set) {
+            const { name, ref, value } = json.context.set[key];
+            if (value) {
+                json.children = [
+                    (0, create_mitosis_node_1.createMitosisNode)({
+                        name: `${name}.Provider`,
+                        children: json.children,
+                        ...(value && {
+                            bindings: {
+                                value: (0, bindings_1.createSingleBinding)({
+                                    code: (0, get_state_object_string_1.stringifyContextValue)(value),
+                                }),
+                            },
+                        }),
+                    }),
+                ];
+            }
+            else if (ref) {
+                json.children = [
+                    (0, create_mitosis_node_1.createMitosisNode)({
+                        name: `${name}.Provider`,
+                        children: json.children,
+                        ...(ref && {
+                            bindings: {
+                                value: (0, bindings_1.createSingleBinding)({ code: ref }),
+                            },
+                        }),
+                    }),
+                ];
+            }
+        }
+    }
+}
+function getContextString(component, options) {
+    let str = '';
+    for (const key in component.context.get) {
+        if (options.contextType === 'prop-drill') {
+            str += `
+        const ${key} = ${exports.contextPropDrillingKey}['${component.context.get[key].name}'];
+      `;
+        }
+        else {
+            str += `
+        const ${key} = useContext(${component.context.get[key].name});
+      `;
+        }
+    }
+    return str;
+}
+const componentToPreact = (reactOptions = {}) => (0, exports.componentToReact)({
+    ...reactOptions,
+    preact: true,
+});
+exports.componentToPreact = componentToPreact;
+const componentToReact = (reactOptions = {}) => ({ component, path }) => {
+    let json = (0, fast_clone_1.fastClone)(component);
+    const target = reactOptions.preact
+        ? 'preact'
+        : reactOptions.type === 'native'
+            ? 'reactNative'
+            : reactOptions.type === 'taro'
+                ? 'taro'
+                : reactOptions.rsc
+                    ? 'rsc'
+                    : 'react';
+    const stateType = reactOptions.stateType || 'useState';
+    const DEFAULT_OPTIONS = {
+        addUseClientDirectiveIfNeeded: true,
+        stateType,
+        stylesType: 'styled-jsx',
+        styleTagsPlacement: 'bottom',
+        type: 'dom',
+        plugins: [
+            (0, on_event_1.processOnEventHooksPlugin)({ setBindings: false }),
+            ...(stateType === 'variables'
+                ? [
+                    (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType, json) => (code, hookType) => {
+                        if (codeType === 'types')
+                            return code;
+                        code = (0, replace_identifiers_1.replaceNodes)({
+                            code,
+                            nodeMaps: Object.entries(json.state)
+                                .filter(([key, value]) => (value === null || value === void 0 ? void 0 : value.type) === 'getter')
+                                .map(([key, value]) => {
+                                const expr = core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(key));
+                                return {
+                                    from: expr,
+                                    // condition: (path) => !types.isObjectMethod(path.parent),
+                                    to: core_1.types.callExpression(expr, []),
+                                };
+                            }),
+                        });
+                        code = (0, replace_identifiers_1.replaceStateIdentifier)(null)(code);
+                        return code;
+                    }),
+                ]
+                : []),
+        ],
+    };
+    const options = (0, merge_options_1.initializeOptions)({
+        target,
+        component,
+        defaults: DEFAULT_OPTIONS,
+        userOptions: reactOptions,
+    });
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    let str = _componentToReact(json, options);
+    str +=
+        '\n\n\n' +
+            json.subComponents.map((item) => _componentToReact(item, options, true)).join('\n\n\n');
+    if (options.plugins) {
+        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    if (options.prettier !== false) {
+        try {
+            str = (0, standalone_1.format)(str, {
+                parser: 'typescript',
+                plugins: [
+                    require('prettier/parser-typescript'), // To support running in browsers
+                    require('prettier/parser-postcss'),
+                ],
+            })
+                // Remove spaces between imports
+                .replace(/;\n\nimport\s/g, ';\nimport ');
+        }
+        catch (err) {
+            if (process.env.NODE_ENV !== 'test') {
+                console.error('Format error for file:', str);
+            }
+            throw err;
+        }
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
+};
+exports.componentToReact = componentToReact;
+const isRSC = (json, options) => {
+    var _a, _b;
+    // When using RSC generator, we check `componentType` field in metadata to determine if it's a server component
+    const componentType = (_b = (_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.rsc) === null || _b === void 0 ? void 0 : _b.componentType;
+    if (options.rsc && (0, nullable_1.checkIsDefined)(componentType)) {
+        return componentType === 'server';
+    }
+    return !(0, rsc_1.checkIfIsClientComponent)(json);
+};
+const checkShouldAddUseClientDirective = (json, options) => {
+    if (!options.addUseClientDirectiveIfNeeded)
+        return false;
+    if (options.type === 'native')
+        return false;
+    if (options.preact)
+        return false;
+    return !isRSC(json, options);
+};
+const generateStyleTags = (placement, json, options, componentHasStyles, css, shouldInjectCustomStyles) => {
+    if (placement !== options.styleTagsPlacement)
+        return '';
+    return (0, dedent_1.dedent) `
+  ${componentHasStyles && options.stylesType === 'styled-jsx'
+        ? `<style jsx>{\`${css}\`}</style>`
+        : ''}
+  ${componentHasStyles && options.stylesType === 'style-tag' ? `<style>{\`${css}\`}</style>` : ''}
+  ${shouldInjectCustomStyles ? `<style>{\`${json.style}\`}</style>` : ''}
+  `;
+};
+const _componentToReact = (json, options, isSubComponent = false) => {
+    var _a, _b, _c, _d, _e, _f;
+    (0, process_http_requests_1.processHttpRequests)(json);
+    (0, handle_missing_state_1.handleMissingState)(json);
+    (0, helpers_2.processTagReferences)(json, options);
+    const contextStr = provideContext(json, options);
+    const componentHasStyles = (0, helpers_1.hasCss)(json);
+    if (options.stateType === 'useState') {
+        (0, getters_to_functions_1.gettersToFunctions)(json);
+        (0, state_2.updateStateSetters)(json, options);
+    }
+    if (!json.name) {
+        json.name = 'MyComponent';
+    }
+    // const domRefs = getRefs(json);
+    const allRefs = Object.keys(json.refs);
+    (0, map_refs_1.mapRefs)(json, (refName) => `${refName}.current`);
+    // Always use state if we are generate Builder react code
+    const hasState = options.stateType === 'builder' || (0, state_1.checkHasState)(json);
+    const [forwardRef, hasPropRef] = (0, get_props_ref_1.getPropsRef)(json);
+    const isForwardRef = !options.preact && Boolean((0, helpers_2.isReactForwardRef)(json) || hasPropRef);
+    if (isForwardRef) {
+        const meta = (0, helpers_2.isReactForwardRef)(json);
+        options.forwardRef = meta || forwardRef;
+    }
+    const forwardRefType = options.typescript && json.propsTypeRef && forwardRef && json.propsTypeRef !== 'any'
+        ? `<${json.propsTypeRef}["${forwardRef}"]>`
+        : '';
+    const useStateCode = options.stateType === 'useState' ? (0, state_2.getUseStateCode)(json, options) : '';
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    const css = options.stylesType === 'styled-jsx'
+        ? (0, collect_css_1.collectCss)(json)
+        : options.stylesType === 'style-tag'
+            ? (0, collect_css_1.collectCss)(json, {
+                prefix: (0, hash_sum_1.default)(json),
+            })
+            : null;
+    const styledComponentsCode = (options.stylesType === 'styled-components' &&
+        componentHasStyles &&
+        (0, collect_styled_components_1.collectStyledComponents)(json)) ||
+        '';
+    if (options.format !== 'lite') {
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+    }
+    const reactLibImports = new Set();
+    if (useStateCode.includes('useState')) {
+        reactLibImports.add('useState');
+    }
+    if ((0, context_1.hasContext)(json) && options.contextType !== 'prop-drill') {
+        reactLibImports.add('useContext');
+    }
+    const shouldAddUseClientDirective = checkShouldAddUseClientDirective(json, options);
+    const shouldInlineOnInitHook = !shouldAddUseClientDirective && options.rsc && isRSC(json, options);
+    if (allRefs.length || (((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code) && !shouldInlineOnInitHook)) {
+        reactLibImports.add('useRef');
+    }
+    if (!options.preact && hasPropRef) {
+        reactLibImports.add('forwardRef');
+    }
+    if (json.hooks.onMount.length || ((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) || ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)) {
+        reactLibImports.add('useEffect');
+    }
+    const hasCustomStyles = !!((_d = json.style) === null || _d === void 0 ? void 0 : _d.length);
+    const shouldInjectCustomStyles = hasCustomStyles &&
+        (options.stylesType === 'styled-components' || options.stylesType === 'emotion');
+    const wrap = (0, helpers_2.wrapInFragment)(json) ||
+        (0, is_root_text_node_1.isRootTextNode)(json) ||
+        (componentHasStyles &&
+            (options.stylesType === 'styled-jsx' || options.stylesType === 'style-tag')) ||
+        shouldInjectCustomStyles ||
+        isRootSpecialNode(json);
+    const [hasStateArgument, refsString] = getRefsString(json, allRefs, options);
+    // NOTE: `collectReactNativeStyles` must run before style generation in the component generation body, as it has
+    // side effects that delete styles bindings from the JSON.
+    const reactNativeStyles = options.stylesType === 'react-native' && componentHasStyles
+        ? (0, react_native_1.collectReactNativeStyles)(json, options)
+        : undefined;
+    const propType = json.propsTypeRef || 'any';
+    const componentArgs = [`props${options.typescript ? `:${propType}` : ''}`, options.forwardRef]
+        .filter(Boolean)
+        .join(',');
+    const componentBody = (0, dedent_1.dedent) `
+    ${options.contextType === 'prop-drill'
+        ? `const ${exports.contextPropDrillingKey} = { ...props['${exports.contextPropDrillingKey}'] };`
+        : ''}
+    ${hasStateArgument ? '' : refsString}
+    ${(0, state_2.getReactVariantStateString)({ hasState, useStateCode, json, options })}
+    ${hasStateArgument ? refsString : ''}
+    ${getContextString(json, options)}
+    ${((_e = json.hooks.init) === null || _e === void 0 ? void 0 : _e.code) ? (0, state_2.processHookCode)({ str: (_f = json.hooks.init) === null || _f === void 0 ? void 0 : _f.code, options }) : ''}
+    ${contextStr || ''}
+
+    ${(0, hooks_1.getOnInitHookComponentBody)({ shouldInlineOnInitHook, json, options })}
+    ${(0, hooks_1.getOnEventHookComponentBody)(json)}
+    ${(0, hooks_1.getOnMountComponentBody)({ json, options })}
+    ${(0, hooks_1.getOnUpdateComponentBody)({ json, options })}
+    ${(0, hooks_1.getOnUnMountComponentBody)({ json, options })}
+
+    return (
+      ${wrap ? (0, helpers_2.openFrag)(options) : ''}
+      ${generateStyleTags('top', json, options, componentHasStyles, css, shouldInjectCustomStyles)}
+      ${json.children.map((item) => (0, blocks_1.blockToReact)(item, options, json, wrap, [])).join('\n')}
+      ${generateStyleTags('bottom', json, options, componentHasStyles, css, shouldInjectCustomStyles)}
+      ${wrap ? (0, helpers_2.closeFrag)(options) : ''}
+    );
+  `;
+    const str = (0, dedent_1.dedent) `
+  ${shouldAddUseClientDirective ? `'use client';` : ''}
+  ${(0, state_2.getDefaultImport)(options, json)}
+  ${styledComponentsCode ? `import styled from 'styled-components';\n` : ''}
+  ${reactLibImports.size
+        ? `import { ${Array.from(reactLibImports).join(', ')} } from '${options.preact ? 'preact/hooks' : 'react'}'`
+        : ''}
+  ${options.stylesType === 'twrnc' ? `import tw from 'twrnc';\n` : ''}
+  ${componentHasStyles && options.stylesType === 'emotion' && options.format !== 'lite'
+        ? `/** @jsx jsx */
+    import { jsx } from '@emotion/react'`.trim()
+        : ''}
+    ${(0, state_2.getReactVariantStateImportString)(hasState, options)}
+    ${json.types && options.typescript ? json.types.join('\n') : ''}
+    ${(0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
+        component: json,
+        target: options.type === 'native' ? 'reactNative' : 'react',
+    })}
+    ${isForwardRef ? `const ${json.name} = forwardRef${forwardRefType}(` : ''}function ${json.name}(${componentArgs}) {
+  ${(0, default_props_1.getDefaultProps)(json)}
+    ${componentBody}
+  }${isForwardRef ? ')' : ''}
+
+    ${reactNativeStyles && Object.keys(reactNativeStyles).length > 0
+        ? `const styles = StyleSheet.create(${json5_1.default.stringify(reactNativeStyles)});`
+        : ''}
+
+    ${styledComponentsCode !== null && styledComponentsCode !== void 0 ? styledComponentsCode : ''}
+    ${isSubComponent
+        ? ''
+        : options.stateType === 'mobx'
+            ? `
+      const observed${json.name} = observer(${json.name});
+      export default observed${json.name};
+    `
+            : `export default ${json.name};`}
+
+  `;
+    return (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);
+};

package/dist/src/generators/react/helpers/default-props.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getDefaultProps: (json: MitosisComponent) => string;

package/dist/src/generators/react/helpers/default-props.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultProps = void 0;
+const getDefaultProps = (json) => {
+    if (!json.defaultProps)
+        return '';
+    const defaultPropsString = Object.keys(json.defaultProps)
+        .map((prop) => {
+        var _a;
+        const value = json.defaultProps.hasOwnProperty(prop)
+            ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+            : 'undefined';
+        return `${prop}: ${value}`;
+    })
+        .join(',');
+    if (defaultPropsString) {
+        return `props = {${defaultPropsString}, ...props}`;
+    }
+    return '';
+};
+exports.getDefaultProps = getDefaultProps;

package/dist/src/generators/react/helpers/hooks.d.ts

@@ -0,0 +1,20 @@
+import { ToReactOptions } from '../../../generators/react';
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getOnInitHookComponentBody: ({ shouldInlineOnInitHook, options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+    shouldInlineOnInitHook?: boolean | undefined;
+}) => string;
+export declare const getOnEventHookComponentBody: (json: MitosisComponent) => string;
+export declare const getOnMountComponentBody: ({ options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;
+export declare const getOnUpdateComponentBody: ({ options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;
+export declare const getOnUnMountComponentBody: ({ options, json, }: {
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;

package/dist/src/generators/react/helpers/hooks.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOnUnMountComponentBody = exports.getOnUpdateComponentBody = exports.getOnMountComponentBody = exports.getOnEventHookComponentBody = exports.getOnInitHookComponentBody = void 0;
+const state_1 = require("../../../generators/react/helpers/state");
+const on_event_1 = require("../../../helpers/on-event");
+const getOnInitHookComponentBody = ({ shouldInlineOnInitHook, options, json, }) => {
+    var _a;
+    return ((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)
+        ? shouldInlineOnInitHook
+            ? (0, state_1.processHookCode)({ str: json.hooks.onInit.code, options })
+            : `
+        const hasInitialized = useRef(false);
+        if (!hasInitialized.current) {
+          ${(0, state_1.processHookCode)({
+                str: json.hooks.onInit.code,
+                options,
+            })}
+          hasInitialized.current = true;
+        }
+        `
+        : '';
+};
+exports.getOnInitHookComponentBody = getOnInitHookComponentBody;
+const getOnEventHookComponentBody = (json) => json.hooks.onEvent
+    .map((hook) => {
+    const eventName = `"${hook.eventName}"`;
+    const handlerName = (0, on_event_1.getOnEventHandlerName)(hook);
+    return `
+      useEffect(() => {
+        ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
+        return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
+      }, []);
+      `;
+})
+    .join('\n');
+exports.getOnEventHookComponentBody = getOnEventHookComponentBody;
+const getOnMountComponentBody = ({ options, json, }) => json.hooks.onMount
+    .map((hook) => `useEffect(() => {
+          ${(0, state_1.processHookCode)({
+    str: hook.code,
+    options,
+})}
+        }, [])`)
+    .join('\n');
+exports.getOnMountComponentBody = getOnMountComponentBody;
+const getOnUpdateComponentBody = ({ options, json, }) => {
+    var _a, _b;
+    return (_b = (_a = json.hooks.onUpdate) === null || _a === void 0 ? void 0 : _a.map((hook) => `useEffect(() => {
+          ${(0, state_1.processHookCode)({ str: hook.code, options })}
+        },
+        ${hook.deps ? (0, state_1.processHookCode)({ str: hook.deps, options }) : ''})`).join(';')) !== null && _b !== void 0 ? _b : '';
+};
+exports.getOnUpdateComponentBody = getOnUpdateComponentBody;
+const getOnUnMountComponentBody = ({ options, json, }) => {
+    var _a;
+    return ((_a = json.hooks.onUnMount) === null || _a === void 0 ? void 0 : _a.code)
+        ? `useEffect(() => {
+          return () => {
+            ${(0, state_1.processHookCode)({
+            str: json.hooks.onUnMount.code,
+            options,
+        })}
+          }
+        }, [])`
+        : '';
+};
+exports.getOnUnMountComponentBody = getOnUnMountComponentBody;

package/dist/src/generators/react/helpers/index.d.ts

@@ -0,0 +1,11 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+import { ToReactOptions } from '../types';
+export declare const processBinding: (str: string, options: ToReactOptions) => string;
+export declare const openFrag: (options: ToReactOptions) => string;
+export declare const closeFrag: (options: ToReactOptions) => string;
+export declare const isFragmentWithKey: (node?: MitosisNode) => boolean;
+export declare function getFragment(type: 'open' | 'close', options: ToReactOptions, node?: MitosisNode): string;
+export declare const wrapInFragment: (json: MitosisComponent | MitosisNode) => boolean;
+export declare function processTagReferences(json: MitosisComponent, options: ToReactOptions): void;
+export declare const isReactForwardRef: (json: MitosisComponent) => string | undefined;

package/dist/src/generators/react/helpers/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isReactForwardRef = exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const processBinding = (str, options) => {
+    // fix web-component tag transform issue with dashes by not transforming it
+    if (options.stateType !== 'useState') {
+        return str;
+    }
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
+        includeState: true,
+        includeProps: false,
+    });
+};
+exports.processBinding = processBinding;
+const openFrag = (options) => getFragment('open', options);
+exports.openFrag = openFrag;
+const closeFrag = (options) => getFragment('close', options);
+exports.closeFrag = closeFrag;
+const isFragmentWithKey = (node) => (node === null || node === void 0 ? void 0 : node.name) === 'Fragment' && !!(node === null || node === void 0 ? void 0 : node.bindings['key']);
+exports.isFragmentWithKey = isFragmentWithKey;
+function getFragment(type, options, node) {
+    var _a;
+    let tag = '';
+    if (node && node.bindings && (0, exports.isFragmentWithKey)(node)) {
+        tag = options.preact ? 'Fragment' : 'React.Fragment';
+        const keyCode = (_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code;
+        if (type === 'open' && keyCode) {
+            tag += ` key={${(0, exports.processBinding)(keyCode, options)}}`;
+        }
+    }
+    else if (options.preact) {
+        tag = 'Fragment';
+    }
+    return type === 'open' ? `<${tag}>` : `</${tag}>`;
+}
+exports.getFragment = getFragment;
+const wrapInFragment = (json) => json.children.length !== 1;
+exports.wrapInFragment = wrapInFragment;
+function getRefName(path) {
+    return (0, lodash_1.upperFirst)(path) + 'Ref';
+}
+function processTagReferences(json, options) {
+    const namesFound = new Set();
+    (0, legacy_1.default)(json).forEach((el) => {
+        var _a, _b;
+        if (!(0, is_mitosis_node_1.isMitosisNode)(el)) {
+            return;
+        }
+        const processedRefName = el.name.includes('-') ? el.name : (0, exports.processBinding)(el.name, options);
+        if (el.name.includes('state.')) {
+            switch ((_a = json.state[processedRefName]) === null || _a === void 0 ? void 0 : _a.type) {
+                case 'getter':
+                    const refName = getRefName(processedRefName);
+                    if (!namesFound.has(el.name)) {
+                        namesFound.add(el.name);
+                        json.hooks.init = {
+                            ...json.hooks.init,
+                            code: `
+            ${((_b = json.hooks.init) === null || _b === void 0 ? void 0 : _b.code) || ''}
+            const ${refName} = ${el.name};
+            `,
+                        };
+                    }
+                    el.name = refName;
+                    break;
+                // NOTE: technically, it should be impossible for the tag to be a method or a function in Mitosis JSX syntax,
+                // as that will fail JSX parsing.
+                case 'method':
+                case 'function':
+                case 'property':
+                    const capitalizedName = (0, lodash_1.upperFirst)(processedRefName);
+                    if (capitalizedName !== processedRefName) {
+                        el.name = capitalizedName;
+                        json.state[capitalizedName] = { ...json.state[processedRefName] };
+                        delete json.state[processedRefName];
+                    }
+                    else {
+                        el.name = processedRefName;
+                    }
+                    break;
+            }
+        }
+        else {
+            el.name = processedRefName;
+        }
+    });
+}
+exports.processTagReferences = processTagReferences;
+const isReactForwardRef = (json) => { var _a, _b, _c; return ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.forwardRef) || ((_c = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.react) === null || _c === void 0 ? void 0 : _c.forwardRef); };
+exports.isReactForwardRef = isReactForwardRef;

package/dist/src/generators/react/helpers/state.d.ts

@@ -0,0 +1,17 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { ToReactOptions } from '../types';
+export declare const processHookCode: ({ str, options }: {
+    str: string;
+    options: ToReactOptions;
+}) => string;
+export declare const getUseStateCode: (json: MitosisComponent, options: ToReactOptions) => string;
+export declare const updateStateSetters: (json: MitosisComponent, options: ToReactOptions) => void;
+export declare const updateStateSettersInCode: (value: string, options: ToReactOptions) => string;
+export declare const getReactVariantStateImportString: (hasState: boolean, options: ToReactOptions) => "" | "import { useLocalProxy } from 'valtio/utils';" | "import { useMutable } from 'react-solid-state';" | "import { useLocalObservable, observer } from 'mobx-react-lite';";
+export declare const getReactVariantStateString: ({ hasState, options, json, useStateCode, }: {
+    useStateCode: string;
+    hasState: boolean;
+    json: MitosisComponent;
+    options: ToReactOptions;
+}) => string;
+export declare const getDefaultImport: (options: ToReactOptions, json: MitosisComponent) => string;