@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,198 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultImport = exports.getReactVariantStateString = exports.getReactVariantStateImportString = exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
+const capitalize_1 = require("../../../helpers/capitalize");
+const get_function_string_1 = require("../../../helpers/get-function-string");
+const get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../../helpers/get-typed-function");
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const patterns_1 = require("../../../helpers/patterns");
+const transform_state_setters_1 = require("../../../helpers/transform-state-setters");
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const helpers_1 = require("../helpers");
+/**
+ * Removes all `this.` references.
+ */
+const stripThisRefs = (str, options) => {
+    if (options.stateType !== 'useState') {
+        return str;
+    }
+    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
+};
+const processHookCode = ({ str, options }) => (0, helpers_1.processBinding)((0, exports.updateStateSettersInCode)(str, options), options);
+exports.processHookCode = processHookCode;
+const valueMapper = (options) => (val) => {
+    const x = (0, exports.processHookCode)({ str: val, options });
+    return stripThisRefs(x, options);
+};
+const getSetStateFnName = (stateName) => `set${(0, capitalize_1.capitalize)(stateName)}`;
+const processStateValue = (options) => {
+    const mapValue = valueMapper(options);
+    return ([key, stateVal]) => {
+        if (!stateVal) {
+            return '';
+        }
+        let value = stateVal.code || '';
+        const type = stateVal.type;
+        const typeParameter = stateVal.typeParameter;
+        const stateType = options.typescript && stateVal.typeParameter ? `<${stateVal.typeParameter}>` : '';
+        let result = '';
+        if (type === 'getter') {
+            result = (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+        }
+        else if (type === 'function') {
+            result = mapValue(value);
+        }
+        else if (type === 'method') {
+            result = (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+        }
+        else {
+            return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${mapValue(value)}))`;
+        }
+        return (0, get_typed_function_1.getTypedFunction)(result, options.typescript, typeParameter);
+    };
+};
+const getUseStateCode = (json, options) => {
+    const lineItemDelimiter = '\n\n\n';
+    const stringifiedState = Object.entries(json.state).map(processStateValue(options));
+    return stringifiedState.join(lineItemDelimiter);
+};
+exports.getUseStateCode = getUseStateCode;
+const updateStateSetters = (json, options) => {
+    if (options.stateType !== 'useState') {
+        return;
+    }
+    (0, legacy_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            for (const key in item.bindings) {
+                let values = item.bindings[key];
+                const newValue = (0, exports.updateStateSettersInCode)(values === null || values === void 0 ? void 0 : values.code, options);
+                if (newValue !== (values === null || values === void 0 ? void 0 : values.code)) {
+                    item.bindings[key] = {
+                        ...values,
+                        code: newValue,
+                    };
+                }
+            }
+        }
+    });
+};
+exports.updateStateSetters = updateStateSetters;
+const updateStateSettersInCode = (value, options) => {
+    if (options.stateType !== 'useState') {
+        return value;
+    }
+    return (0, transform_state_setters_1.transformStateSetters)({
+        value,
+        transformer: ({ path, propertyName }) => core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [path.node.right]),
+    });
+};
+exports.updateStateSettersInCode = updateStateSettersInCode;
+const getReactVariantStateImportString = (hasState, options) => {
+    return !hasState
+        ? ''
+        : options.stateType === 'valtio'
+            ? `import { useLocalProxy } from 'valtio/utils';`
+            : options.stateType === 'solid'
+                ? `import { useMutable } from 'react-solid-state';`
+                : options.stateType === 'mobx'
+                    ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
+                    : '';
+};
+exports.getReactVariantStateImportString = getReactVariantStateImportString;
+const getReactVariantStateString = ({ hasState, options, json, useStateCode, }) => hasState
+    ? options.stateType === 'mobx'
+        ? `const state = useLocalObservable(() => (${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}));`
+        : options.stateType === 'useState'
+            ? useStateCode
+            : options.stateType === 'solid'
+                ? `const state = useMutable(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
+                : options.stateType === 'builder'
+                    ? `const state = useBuilderState(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
+                    : options.stateType === 'variables'
+                        ? (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+                            format: 'variables',
+                            keyPrefix: 'const',
+                            valueMapper: (code, type, _, key) => {
+                                if (key) {
+                                    const constPrefix = !code.startsWith('function') ? `${key} = ` : '';
+                                    if (type === 'getter')
+                                        return `${constPrefix}${(0, get_function_string_1.getFunctionString)(code.replace('get ', ''))}`;
+                                    if (type === 'function')
+                                        return code.startsWith('async') ? code : `${constPrefix}${(0, get_function_string_1.getFunctionString)(code)}`;
+                                }
+                                return code;
+                            },
+                        })
+                        : `const state = useLocalProxy(${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)});`
+    : '';
+exports.getReactVariantStateString = getReactVariantStateString;
+const getDefaultImport = (options, json) => {
+    const { preact, type } = options;
+    if (preact) {
+        return `
+    /** @jsx h */
+    import { h, Fragment } from 'preact';
+    `;
+    }
+    if (type === 'native') {
+        const namesUsed = new Set(), knownImports = new Set();
+        json.imports.forEach((imported) => {
+            if (imported.imports) {
+                Object.keys(imported.imports).forEach((name) => {
+                    knownImports.add(name);
+                });
+            }
+        });
+        (0, legacy_1.default)(json).forEach((node) => {
+            var _a, _b, _c, _d;
+            if (!(0, is_mitosis_node_1.isMitosisNode)(node)) {
+                return;
+            }
+            // ReactNative has a special case for converting _text to Text
+            if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) || ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
+                namesUsed.add('Text');
+            }
+            if (node.properties.style || node.bindings.style) {
+                namesUsed.add('StyleSheet');
+            }
+            if (node.name === 'TouchableOpacity' &&
+                ('href' in node.bindings || 'href' in node.properties)) {
+                namesUsed.add('Linking');
+            }
+            namesUsed.add(node.name);
+        });
+        const components = [
+            'FlatList',
+            'ScrollView',
+            'View',
+            'StyleSheet',
+            'Image',
+            'Text',
+            'Pressable',
+            'TextInput',
+            'TouchableOpacity',
+            'Button',
+            'Linking',
+        ].filter((name) => {
+            // Ony import if the name is used and not imported from somewhere else
+            return namesUsed.has(name) && !knownImports.has(name);
+        });
+        return `
+    import * as React from 'react';
+    import { ${components.join(', ')} } from 'react-native';
+    `;
+    }
+    if (type === 'taro') {
+        return `
+    import * as React from 'react';
+    `;
+    }
+    return "import * as React from 'react';";
+};
+exports.getDefaultImport = getDefaultImport;

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

@@ -0,0 +1,3 @@
+export { blockToReact } from './blocks';
+export * from './generator';
+export * from './types';

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

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToReact = void 0;
+var blocks_1 = require("./blocks");
+Object.defineProperty(exports, "blockToReact", { enumerable: true, get: function () { return blocks_1.blockToReact; } });
+__exportStar(require("./generator"), exports);
+__exportStar(require("./types"), exports);

package/dist/src/generators/react/types.d.ts

@@ -0,0 +1,22 @@
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export interface ToReactOptions extends BaseTranspilerOptions {
+    stylesType: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag' | 'twrnc' | 'native-wind';
+    styleTagsPlacement?: 'top' | 'bottom';
+    stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
+    format?: 'lite' | 'safe';
+    type: 'dom' | 'native' | 'taro';
+    preact?: boolean;
+    sanitizeReactNative?: boolean;
+    rsc?: boolean;
+    forwardRef?: string;
+    experimental?: any;
+    /**
+     * For RSC, normal React context is currently not supported, so provide a prop drilling
+     * option
+     */
+    contextType?: 'context' | 'prop-drill';
+    addUseClientDirectiveIfNeeded?: boolean;
+}
+export type ReactMetadata = {
+    forwardRef?: string;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/generators/react-native/extract-css-var-default-value.d.ts

@@ -0,0 +1 @@
+export declare function extractCssVarDefaultValue(value: string): string;

package/dist/src/generators/react-native/extract-css-var-default-value.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractCssVarDefaultValue = void 0;
+function extractCssVarDefaultValue(value) {
+    // Regular expression to find var() expressions
+    const varRegex = /var\(--[^,]+?,\s*([^)]+)\)/;
+    // Function to replace var() with its fallback
+    let newValue = value;
+    let match;
+    while ((match = newValue.match(varRegex))) {
+        newValue = newValue.replace(match[0], match[1].trim());
+    }
+    return newValue;
+}
+exports.extractCssVarDefaultValue = extractCssVarDefaultValue;

package/dist/src/generators/react-native/helpers.d.ts

@@ -0,0 +1,3 @@
+type Styles = Record<string, string | number>;
+export declare function cleanReactNativeBlockStyles(styles: Styles): Styles;
+export {};

package/dist/src/generators/react-native/helpers.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanReactNativeBlockStyles = void 0;
+const extract_css_var_default_value_1 = require("./extract-css-var-default-value");
+const lengthPattern = /^-?\d*\.?\d+(px|%)?$/;
+const pixelPattern = /^-?\d*\.?\d+(px)?$/;
+const numberPattern = /^-?\d*\.?\d+$/;
+const colorPattern = /^(#[0-9A-Fa-f]{3,8}|(rgb|hsl)a?\(.*\)|[a-zA-Z]+)$/;
+// List of unsupported properties in React Native
+const unsupportedProps = [
+    'textShadow',
+    'boxShadow',
+    'transition',
+    'cursor',
+    'filter',
+    'overflowX',
+    'overflowY',
+    'animation',
+    'backgroundImage',
+    'backgroundPosition',
+    'backgroundSize',
+    'backgroundRepeat',
+    'whiteSpace',
+];
+// Ensure CSS property value is valid for React Native
+function validateReactNativeCssProperty(key, value) {
+    const cssProperties = {
+        width: (value) => lengthPattern.test(value),
+        height: (value) => lengthPattern.test(value),
+        backgroundColor: (value) => pixelPattern.test(value) || /^#[0-9A-Fa-f]{6}/.test(value),
+        minWidth: (value) => lengthPattern.test(value) || value === 'auto',
+        maxWidth: (value) => lengthPattern.test(value) || value === 'auto',
+        minHeight: (value) => lengthPattern.test(value) || value === 'auto',
+        maxHeight: (value) => lengthPattern.test(value) || value === 'auto',
+        aspectRatio: (value) => numberPattern.test(value) || /^\d+\/\d+$/.test(value),
+        // Flexbox Properties
+        flex: (value) => numberPattern.test(value),
+        flexBasis: (value) => lengthPattern.test(value) || value === 'auto',
+        flexDirection: (value) => ['row', 'row-reverse', 'column', 'column-reverse'].includes(value),
+        flexGrow: (value) => numberPattern.test(value),
+        flexShrink: (value) => numberPattern.test(value),
+        flexWrap: (value) => ['wrap', 'nowrap', 'wrap-reverse'].includes(value),
+        // Alignment Properties
+        alignContent: (value) => ['flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around'].includes(value),
+        alignItems: (value) => ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'].includes(value),
+        alignSelf: (value) => ['auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'].includes(value),
+        justifyContent: (value) => [
+            'flex-start',
+            'flex-end',
+            'center',
+            'space-between',
+            'space-around',
+            'space-evenly',
+        ].includes(value),
+        // Text Properties
+        color: (value) => colorPattern.test(value),
+        fontFamily: () => true, // Any string is valid
+        fontSize: (value) => pixelPattern.test(value),
+        fontStyle: (value) => ['normal', 'italic'].includes(value),
+        fontWeight: (value) => ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'].includes(value),
+        display: (value) => ['none', 'flex'].includes(value),
+    };
+    // If the property is not explicitly defined, consider it valid
+    if (!cssProperties[key])
+        return true;
+    // Convert number to string for validation
+    const stringValue = typeof value === 'number' ? value.toString() : value;
+    return cssProperties[key](stringValue);
+}
+// Clean up shorthand and unsupported styles for React Native
+function cleanReactNativeBlockStyles(styles) {
+    return Object.entries(styles).reduce((acc, [key, value]) => {
+        var _a;
+        // Remove unsupported properties
+        if (unsupportedProps.includes(key))
+            return acc;
+        // Handle CSS variables
+        if (typeof value === 'string' && value.includes('var(')) {
+            value = (_a = (0, extract_css_var_default_value_1.extractCssVarDefaultValue)(value)) !== null && _a !== void 0 ? _a : value;
+        }
+        // Parse pixel units
+        if (typeof value === 'string') {
+            const pixelMatch = value.match(/^(-?\d+(\.\d+)?)px$/);
+            if (pixelMatch)
+                value = parseFloat(pixelMatch[1]);
+        }
+        // Handle shorthand properties
+        if (key === 'margin' || key === 'padding') {
+            return { ...acc, ...expandShorthand(key, value) };
+        }
+        // Convert 'background' to 'backgroundColor'
+        if (key === 'background' && typeof value === 'string') {
+            acc.backgroundColor = value;
+            return { ...acc, backgroundColor: value };
+        }
+        // Handle borderRadius
+        if (key === 'borderRadius' && typeof value === 'string') {
+            return { ...acc, ...expandBorderRadius(value) };
+        }
+        // Handle invalid display values
+        if (key === 'display' && value !== 'flex' && value !== 'none') {
+            return acc;
+        }
+        // Validate and add the property
+        if (validateReactNativeCssProperty(key, value)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+exports.cleanReactNativeBlockStyles = cleanReactNativeBlockStyles;
+function expandShorthand(property, value) {
+    if (typeof value !== 'string')
+        return { [property]: value };
+    const values = value.split(' ').map((v) => parseFloat(v) || 0);
+    const [top, right = top, bottom = top, left = right] = values;
+    return {
+        [`${property}Top`]: top,
+        [`${property}Right`]: right,
+        [`${property}Bottom`]: bottom,
+        [`${property}Left`]: left,
+    };
+}
+function expandBorderRadius(value) {
+    const values = value.split(' ').map((v) => parseInt(v, 10));
+    const [topLeft, topRight = topLeft, bottomRight = topLeft, bottomLeft = topRight] = values;
+    return {
+        borderTopLeftRadius: topLeft,
+        borderTopRightRadius: topRight,
+        borderBottomRightRadius: bottomRight,
+        borderBottomLeftRadius: bottomLeft,
+    };
+}

package/dist/src/generators/react-native/index.d.ts

@@ -0,0 +1,8 @@
+import { ToReactNativeOptions } from '../../generators/react-native/types';
+import { ClassStyleMap } from '../../helpers/styles/helpers';
+import { MitosisComponent } from '../../types/mitosis-component';
+import { TranspilerGenerator } from '../../types/transpiler';
+import { ToReactOptions } from '../react';
+export declare const collectReactNativeStyles: (json: MitosisComponent, options: ToReactOptions) => ClassStyleMap;
+export declare const componentToReactNative: TranspilerGenerator<Partial<ToReactNativeOptions>>;
+export * from './types';