@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,286 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToReactNative = exports.collectReactNativeStyles = void 0;
+const bindings_1 = require("../../helpers/bindings");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const is_children_1 = __importDefault(require("../../helpers/is-children"));
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const merge_options_1 = require("../../helpers/merge-options");
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const html_tags_1 = require("../../constants/html_tags");
+const react_1 = require("../react");
+const sanitize_react_native_block_styles_1 = require("./sanitize-react-native-block-styles");
+const stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
+const MEDIA_QUERY_KEY_REGEX = /^@media.*/;
+const sanitizeStyle = (obj) => (key, value) => {
+    const propertyValue = obj[key];
+    if (key.match(MEDIA_QUERY_KEY_REGEX)) {
+        console.warn('Unsupported: skipping media queries for react-native: ', key, propertyValue);
+        delete obj[key];
+        return;
+    }
+};
+const collectReactNativeStyles = (json, options) => {
+    const styleMap = {};
+    const componentIndexes = {};
+    const getStyleSheetName = (item) => {
+        const componentName = (0, lodash_1.camelCase)(item.name || 'view');
+        // If we have already seen this component name, we will increment the index. Otherwise, we will set the index to 1.
+        const index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
+        return `${componentName}${index}`;
+    };
+    (0, legacy_1.default)(json).forEach(function (item) {
+        var _a, _b, _c;
+        if (!(0, is_mitosis_node_1.isMitosisNode)(item)) {
+            return;
+        }
+        let cssValue = json5_1.default.parse(((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) || '{}');
+        delete item.bindings.css;
+        if ((0, lodash_1.size)(cssValue)) {
+            // 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, options);
+            }
+        }
+        try {
+            let styleValue = json5_1.default.parse(((_b = item.bindings.style) === null || _b === void 0 ? void 0 : _b.code) || '{}');
+            if ((0, lodash_1.size)(styleValue)) {
+                // 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, options);
+                }
+                item.bindings.style.code = json5_1.default.stringify(styleValue);
+            }
+        }
+        catch (e) { }
+        if (!(0, lodash_1.size)(cssValue)) {
+            return;
+        }
+        const styleSheetName = getStyleSheetName(item);
+        const styleSheetAccess = `styles.${styleSheetName}`;
+        styleMap[styleSheetName] = cssValue;
+        if (!item.bindings.style) {
+            item.bindings.style = (0, bindings_1.createSingleBinding)({
+                code: styleSheetAccess,
+            });
+            return;
+        }
+        try {
+            // run the code below only if the style binding is a JSON object
+            json5_1.default.parse(item.bindings.style.code || '{}');
+            item.bindings.style = (0, bindings_1.createSingleBinding)({
+                code: ((_c = item.bindings.style) === null || _c === void 0 ? void 0 : _c.code.replace(/}$/, `, ...${styleSheetAccess} }`)) || styleSheetAccess,
+            });
+        }
+        catch (e) {
+            // if not a JSON, then it's a property, so we should spread it.
+            item.bindings.style = (0, bindings_1.createSingleBinding)({
+                code: `{
+        ...${styleSheetAccess},
+        ...${item.bindings.style.code}
+        }`,
+            });
+        }
+    });
+    return styleMap;
+};
+exports.collectReactNativeStyles = collectReactNativeStyles;
+/**
+ * Plugin that handles necessary transformations from React to React Native:
+ * - Converts DOM tags to <View /> and <Text />
+ */
+const PROCESS_REACT_NATIVE_PLUGIN = () => ({
+    json: {
+        pre: (json) => {
+            (0, legacy_1.default)(json).forEach((node) => {
+                var _a, _b, _c, _d;
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    // TODO: handle TextInput, Image, etc
+                    if ((0, is_children_1.default)({ node })) {
+                        node.name = '';
+                    }
+                    else if (node.name.toLowerCase() === node.name && html_tags_1.VALID_HTML_TAGS.includes(node.name)) {
+                        if (node.name === 'input') {
+                            node.name = 'TextInput';
+                        }
+                        else if (node.name === 'img') {
+                            node.name = 'Image';
+                        }
+                        else if (node.name === 'a') {
+                            node.name = 'TouchableOpacity';
+                        }
+                        else if (node.name === 'button') {
+                            node.name = 'Button';
+                        }
+                        // if node is not button or a and still has onClick it needs to pressable
+                        else if (node.bindings.onClick) {
+                            node.name = 'Pressable';
+                        }
+                        else {
+                            node.name = 'View';
+                        }
+                    }
+                    else 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)) {
+                        node.name = 'Text';
+                    }
+                }
+            });
+        },
+    },
+});
+/**
+ * Removes React Native className and class properties from the JSON
+ */
+const REMOVE_REACT_NATIVE_CLASSES_PLUGIN = () => ({
+    json: {
+        pre: (json) => {
+            (0, legacy_1.default)(json).forEach(function (node) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    if (node.properties.class) {
+                        delete node.properties.class;
+                    }
+                    if (node.properties.className) {
+                        delete node.properties.className;
+                    }
+                    if (node.bindings.class) {
+                        delete node.bindings.class;
+                    }
+                    if (node.bindings.className) {
+                        delete node.bindings.className;
+                    }
+                }
+            });
+        },
+    },
+});
+/**
+ * Converts class and className properties to twrnc style syntax
+ */
+const TWRNC_STYLES_PLUGIN = () => ({
+    json: {
+        post: (json) => {
+            (0, legacy_1.default)(json).forEach(function (node) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    let staticClasses = [node.properties.class, node.properties.className]
+                        .filter(Boolean)
+                        .join(' ');
+                    let dynamicClasses = [node.bindings.class, node.bindings.className].filter(Boolean);
+                    if (staticClasses || dynamicClasses.length) {
+                        let styleCode = '';
+                        if (staticClasses) {
+                            styleCode = `tw\`${staticClasses}\``;
+                        }
+                        if (dynamicClasses.length) {
+                            let dynamicCode = dynamicClasses
+                                .map((dc) => (dc && dc.code ? dc.code : null))
+                                .filter(Boolean)
+                                .join(', ');
+                            if (dynamicCode) {
+                                if (styleCode) {
+                                    // If we have both static and dynamic classes
+                                    styleCode = `tw.style(${styleCode}, ${dynamicCode})`;
+                                }
+                                else if (dynamicClasses.length > 1) {
+                                    // If we have multiple dynamic classes
+                                    styleCode = `tw.style([${dynamicCode}])`;
+                                }
+                                else {
+                                    // If we have a single dynamic class
+                                    styleCode = `tw.style(${dynamicCode})`;
+                                }
+                            }
+                        }
+                        if (styleCode) {
+                            node.bindings.style = (0, bindings_1.createSingleBinding)({ code: styleCode });
+                        }
+                    }
+                    // Clean up original class and className properties/bindings
+                    delete node.properties.class;
+                    delete node.properties.className;
+                    delete node.bindings.class;
+                    delete node.bindings.className;
+                }
+            });
+        },
+    },
+});
+/**
+ * Converts class and className properties to native-wind style syntax
+ * Note: We only support the "with babel" setup: https://www.nativewind.dev/guides/babel
+ */
+const NATIVE_WIND_STYLES_PLUGIN = () => ({
+    json: {
+        post: (json) => {
+            (0, legacy_1.default)(json).forEach(function (node) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    let combinedClasses = [
+                        node.properties.class,
+                        node.properties.className,
+                        node.bindings.class,
+                        node.bindings.className,
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    if (node.properties.class) {
+                        delete node.properties.class;
+                    }
+                    if (node.properties.className) {
+                        delete node.properties.className;
+                    }
+                    if (node.bindings.class) {
+                        delete node.bindings.class;
+                    }
+                    if (node.bindings.className) {
+                        delete node.bindings.className;
+                    }
+                    if (combinedClasses) {
+                        node.properties.className = combinedClasses;
+                    }
+                }
+            });
+        },
+    },
+});
+const DEFAULT_OPTIONS = {
+    stateType: 'useState',
+    stylesType: 'react-native',
+    plugins: [PROCESS_REACT_NATIVE_PLUGIN],
+};
+const componentToReactNative = (_options = {}) => ({ component, path }) => {
+    const json = (0, fast_clone_1.fastClone)(component);
+    const options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options);
+    if (options.stylesType === 'twrnc') {
+        options.plugins.push(TWRNC_STYLES_PLUGIN);
+    }
+    else if (options.stylesType === 'native-wind') {
+        options.plugins.push(NATIVE_WIND_STYLES_PLUGIN);
+    }
+    else {
+        options.plugins.push(REMOVE_REACT_NATIVE_CLASSES_PLUGIN);
+    }
+    return (0, react_1.componentToReact)({ ...options, type: 'native' })({ component: json, path });
+};
+exports.componentToReactNative = componentToReactNative;
+__exportStar(require("./types"), exports);

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

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

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

@@ -0,0 +1,57 @@
+"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) => {
+    if (Number.isNaN(value)) {
+        return undefined;
+    }
+    else if (value < 0) {
+        // TODO: why are negative values not allowed?
+        return 0;
+    }
+    else {
+        return value;
+    }
+};
+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 (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;
+        }
+        if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
+            console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+            return acc;
+        }
+        if (typeof propertyValue === 'string') {
+            // `px` units need to be stripped and replaced with numbers
+            // https://regexr.com/6ualn
+            const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+            if (isPixelUnit) {
+                const newValue = parseFloat(propertyValue);
+                const normalizedValue = normalizeNumber(newValue);
+                if (normalizedValue) {
+                    return { ...acc, [key]: normalizedValue };
+                }
+                else {
+                    return acc;
+                }
+            }
+            else if (propertyValue === '0') {
+                // 0 edge case needs to be handled
+                return { ...acc, [key]: 0 };
+            }
+        }
+        return { ...acc, [key]: propertyValue };
+    }, {});
+};
+exports.sanitizeReactNativeBlockStyles = sanitizeReactNativeBlockStyles;

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

@@ -0,0 +1,9 @@
+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';
+}
+export type ReactNativeMetadata = {
+    forwardRef?: string;
+};

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

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

package/dist/src/generators/rsc/generator.d.ts

@@ -0,0 +1,3 @@
+import { ToRscOptions } from '../../generators/rsc/types';
+import { TranspilerGenerator } from '../../types/transpiler';
+export declare const componentToRsc: TranspilerGenerator<Partial<ToRscOptions>>;

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

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToRsc = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const merge_options_1 = require("../../helpers/merge-options");
+const nullable_1 = require("../../helpers/nullable");
+const rsc_1 = require("../helpers/rsc");
+const react_1 = require("../react");
+/**
+ * Transform react to be RSC compatible, such as
+ * - remove event listeners
+ * - remove lifecycle hooks
+ * - remove refs
+ * - transform context to prop drilling
+ */
+const RSC_TRANSFORM_PLUGIN = () => ({
+    json: {
+        pre: (json) => {
+            json.hooks.onMount = [];
+            delete json.hooks.onUnMount;
+            delete json.hooks.onUpdate;
+            json.refs = {};
+            json.context.get = {};
+            json.context.set = {};
+            (0, legacy_1.default)(json).forEach((node) => {
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    const isComponent = node.name.match(/[A-Z]/);
+                    // if (isComponent) {
+                    //   // Drill context down, aka
+                    //   // function (props) { return <Component _context{props._context} /> }
+                    //   if (!node.bindings[contextPropDrillingKey]) {
+                    //     node.bindings[contextPropDrillingKey] = createSingleBinding({
+                    //       code: contextPropDrillingKey,
+                    //     });
+                    //   }
+                    // }
+                    if (node.bindings.ref) {
+                        delete node.bindings.ref;
+                    }
+                    // for (const key in node.bindings) {
+                    //   if (key.match(/^on[A-Z]/)) {
+                    //     delete node.bindings[key];
+                    //   }
+                    // }
+                }
+            });
+        },
+    },
+});
+const RscOptions = {
+    plugins: [RSC_TRANSFORM_PLUGIN],
+    stateType: 'variables',
+};
+const componentToRsc = (_options = {}) => ({ component, path }) => {
+    var _a, _b, _c, _d, _e;
+    if (!(0, nullable_1.checkIsDefined)((_b = (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.rsc) === null || _b === void 0 ? void 0 : _b.componentType) &&
+        !(0, rsc_1.checkIfIsClientComponent)(component)) {
+        component.meta.useMetadata = {
+            ...component.meta.useMetadata,
+            rsc: {
+                ...(_c = component.meta.useMetadata) === null || _c === void 0 ? void 0 : _c.rsc,
+                componentType: 'server',
+            },
+        };
+    }
+    const isRSC = ((_e = (_d = component.meta.useMetadata) === null || _d === void 0 ? void 0 : _d.rsc) === null || _e === void 0 ? void 0 : _e.componentType) === 'server';
+    const options = (0, merge_options_1.mergeOptions)({
+        rsc: true,
+        ...(isRSC ? RscOptions : {}),
+    }, _options);
+    return (0, react_1.componentToReact)(options)({ component, path });
+};
+exports.componentToRsc = componentToRsc;

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

@@ -0,0 +1,2 @@
+export * from './generator';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"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 });
+__exportStar(require("./generator"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,5 @@
+import { ToReactOptions } from '../../generators/react';
+export type ToRscOptions = ToReactOptions;
+export type ReactServerComponentsMetadata = {
+    componentType?: 'client' | 'server';
+};

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

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

package/dist/src/generators/solid/blocks.d.ts

@@ -0,0 +1,4 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToSolidOptions } from './types';
+export declare const blockToSolid: (json: MitosisNode, component: MitosisComponent, options: ToSolidOptions, insideJsx: boolean) => string;

package/dist/src/generators/solid/blocks.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToSolid = void 0;
+const babel_transform_1 = require("../../helpers/babel-transform");
+const event_handlers_1 = require("../../helpers/event-handlers");
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const typescript_1 = require("../../helpers/typescript");
+const mitosis_node_1 = require("../../types/mitosis-node");
+const core_1 = require("@babel/core");
+const lodash_1 = require("lodash");
+const html_tags_1 = require("../../constants/html_tags");
+const styles_1 = require("./helpers/styles");
+const ATTTRIBUTE_MAPPERS = {
+// for: 'htmlFor',
+};
+const transformAttributeName = (name) => {
+    if ((0, typescript_1.objectHasKey)(ATTTRIBUTE_MAPPERS, name))
+        return ATTTRIBUTE_MAPPERS[name];
+    return name;
+};
+const blockToSolid = (json, component, options, insideJsx) => {
+    var _a, _b, _c, _d;
+    if (insideJsx) {
+        if (json.properties._text) {
+            return json.properties._text;
+        }
+        if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+            return `{${json.bindings._text.code}}`;
+        }
+    }
+    else {
+        if (json.properties._text) {
+            return `<>${json.properties._text}</>`;
+        }
+        if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
+            return `${json.bindings._text.code}`;
+        }
+    }
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        const needsWrapper = json.children.length !== 1;
+        // The SolidJS `<For>` component has a special index() signal function.
+        // https://www.solidjs.com/docs/latest#%3Cfor%3E
+        return `<For each={${(_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code}}>
+    {(${json.scope.forName}, _index) => {
+      const ${json.scope.indexName || 'index'} = _index();
+      return ${needsWrapper ? '<>' : ''}${json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map((child) => (0, exports.blockToSolid)(child, component, options, needsWrapper))}}}
+      ${needsWrapper ? '</>' : ''}
+    </For>`;
+    }
+    let str = '';
+    const isFragment = json.name === 'Fragment';
+    if (isFragment) {
+        str += '<';
+    }
+    else {
+        str += `<${json.name} `;
+    }
+    if (json.name === 'Show' && (0, is_mitosis_node_1.isMitosisNode)(json.meta.else)) {
+        str += `fallback={${(0, exports.blockToSolid)(json.meta.else, component, options, false)}}`;
+    }
+    const classString = (0, styles_1.collectClassString)(json, options);
+    if (classString && !isFragment) {
+        str += ` class=${classString} `;
+    }
+    for (const key in json.properties) {
+        if (isFragment)
+            continue;
+        const value = json.properties[key];
+        const newKey = transformAttributeName(key);
+        str += ` ${newKey}="${value}" `;
+    }
+    for (const key in json.bindings) {
+        if (isFragment)
+            continue;
+        const { code, arguments: cusArg = ['event'], type } = json.bindings[key];
+        if (!code)
+            continue;
+        if (type === 'spread') {
+            str += ` {...(${code})} `;
+        }
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
+            const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            const asyncKeyword = ((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.async) ? 'async ' : '';
+            str += ` ${useKey}={${asyncKeyword}(${cusArg.join(',')}) => ${code}} `;
+        }
+        else if (key === 'ref' && options.typescript) {
+            str += ` ${key}={${code}!} `;
+        }
+        else {
+            let useValue = code;
+            if (key === 'style') {
+                // Convert camelCase keys to kebab-case
+                // TODO: support more than top level objects, may need
+                // a runtime helper for expressions that are not a direct
+                // object literal, such as ternaries and other expression
+                // types
+                useValue = (0, babel_transform_1.babelTransformExpression)(code, {
+                    ObjectExpression(path) {
+                        // TODO: limit to top level objects only
+                        for (const property of path.node.properties) {
+                            if (core_1.types.isObjectProperty(property)) {
+                                if (core_1.types.isIdentifier(property.key) || core_1.types.isStringLiteral(property.key)) {
+                                    const key = core_1.types.isIdentifier(property.key)
+                                        ? property.key.name
+                                        : property.key.value;
+                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key));
+                                }
+                            }
+                        }
+                    },
+                });
+            }
+            const newKey = transformAttributeName(key);
+            str += ` ${newKey}={${useValue}} `;
+        }
+    }
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map((item) => (0, exports.blockToSolid)(item, component, options, true))
+            .join('\n');
+    }
+    if (isFragment) {
+        str += '</>';
+    }
+    else {
+        str += `</${json.name}>`;
+    }
+    return str;
+};
+exports.blockToSolid = blockToSolid;

package/dist/src/generators/solid/helpers/styles.d.ts

@@ -0,0 +1,3 @@
+import { MitosisNode } from '../../../types/mitosis-node';
+import { ToSolidOptions } from '../types';
+export declare const collectClassString: (json: MitosisNode, options: ToSolidOptions) => string | null;