@builder.io/mitosis 0.5.0 → 0.5.2

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

@@ -342,7 +342,7 @@ const _componentToReact = (json, options, isSubComponent = false) => {
     // 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)
+        ? (0, react_native_1.collectReactNativeStyles)(json, options)
         : undefined;
     const propType = json.propsTypeRef || 'any';
     const componentArgs = [`props${options.typescript ? `:${propType}` : ''}`, options.forwardRef]

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

@@ -5,6 +5,7 @@ export interface ToReactOptions extends BaseTranspilerOptions {
     format?: 'lite' | 'safe';
     type: 'dom' | 'native' | 'taro';
     preact?: boolean;
+    sanitizeReactNative?: boolean;
     rsc?: boolean;
     forwardRef?: string;
     experimental?: any;

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

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

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

@@ -25,7 +25,7 @@ const sanitizeStyle = (obj) => (key, value) => {
         return;
     }
 };
-const collectReactNativeStyles = (json) => {
+const collectReactNativeStyles = (json, options) => {
     const styleMap = {};
     const componentIndexes = {};
     const getStyleSheetName = (item) => {
@@ -45,7 +45,7 @@ const collectReactNativeStyles = (json) => {
             // Style properties like `"20px"` need to be numbers like `20` for react native
             for (const key in cssValue) {
                 sanitizeStyle(cssValue)(key, cssValue[key]);
-                cssValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(cssValue);
+                cssValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(cssValue, options);
             }
         }
         try {
@@ -54,7 +54,7 @@ const collectReactNativeStyles = (json) => {
                 // Style properties like `"20px"` need to be numbers like `20` for react native
                 for (const key in styleValue) {
                     sanitizeStyle(styleValue)(key, styleValue[key]);
-                    styleValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(styleValue);
+                    styleValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(styleValue, options);
                 }
                 item.bindings.style.code = json5_1.default.stringify(styleValue);
             }

package/dist/src/generators/react-native/sanitize-react-native-block-styles.d.ts

@@ -1,3 +1,4 @@
+import { ToReactOptions } from '../react/types';
 type Styles = Record<string, string | number>;
-export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
+export declare const sanitizeReactNativeBlockStyles: (styles: Styles, options: ToReactOptions) => Styles;
 export {};

package/dist/src/generators/react-native/sanitize-react-native-block-styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sanitizeReactNativeBlockStyles = void 0;
+const helpers_1 = require("./helpers");
 const propertiesThatMustBeNumber = new Set(['lineHeight']);
 const displayValues = new Set(['flex', 'none']);
 const normalizeNumber = (value) => {
@@ -15,10 +16,15 @@ const normalizeNumber = (value) => {
         return value;
     }
 };
-const sanitizeReactNativeBlockStyles = (styles) => {
+const sanitizeReactNativeBlockStyles = (styles, options) => {
+    if (options.sanitizeReactNative) {
+        return (0, helpers_1.cleanReactNativeBlockStyles)(styles);
+    }
     return Object.keys(styles).reduce((acc, key) => {
         const propertyValue = styles[key];
-        if (key === 'display' && !displayValues.has(propertyValue)) {
+        if (typeof propertyValue === 'string' &&
+            key === 'display' &&
+            !displayValues.has(propertyValue)) {
             console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
             return acc;
         }

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

@@ -1,5 +1,6 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
+    sanitizeReactNative?: boolean;
     stylesType: 'emotion' | 'react-native' | 'twrnc' | 'native-wind';
     stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
 }

package/dist/src/parsers/jsx/state.js

@@ -101,7 +101,10 @@ function mapStateIdentifiers(json) {
     const plugin = (0, process_code_1.createCodeProcessorPlugin)(() => (code) => mapStateIdentifiersInExpression(code, stateProperties));
     plugin(json);
     (0, legacy_1.default)(json).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+        // only consolidate bindings for HTML tags, not custom components
+        // custom components are always PascalCase, e.g. MyComponent
+        // but HTML tags are lowercase, e.g. div
+        if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.toLowerCase() === item.name) {
             consolidateClassBindings(item);
         }
     });

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.0",
+  "version": "0.5.2",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
@@ -96,8 +96,6 @@
     "@types/rollup__plugin-virtual": "^2.0.1",
     "concurrently": "^8.2.2",
     "fs-extra-promise": "^1.0.1",
-    "nx": "^19.0.8",
-    "nx-cloud": "^19.0.0",
     "rimraf": "^5.0.5",
     "rollup": "^2.70.1",
     "strip-ansi": "^6.0.1",