@builder.io/mitosis 0.0.56-29 → 0.0.56-31

package/dist/src/__tests__/data/advanced-ref.raw.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/advanced-ref.raw.jsx

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefComponent(props) {
+    var inputRef = (0, mitosis_1.useRef)(null);
+    var inputNoArgRef = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    function onBlur() {
+        // Maintain focus
+        inputRef.focus();
+    }
+    function lowerCaseName() {
+        return state.name.toLowerCase();
+    }
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('Received an update');
+    }, [inputRef, inputNoArgRef]);
+    return (<div>
+      {props.showInput && (<>
+          <input ref={inputRef} css={{
+                color: 'red',
+            }} value={state.name} onBlur={function (event) { return onBlur(); }} onChange={function (event) { return (state.name = event.target.value); }}/>
+
+          <label ref={inputNoArgRef} for="cars">
+            Choose a car:
+          </label>
+
+          <select name="cars" id="cars">
+            <option value="supra">GR Supra</option>
+            <option value="86">GR 86</option>
+          </select>
+        </>)}
+      Hello
+      {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+    </div>);
+}
+exports.default = MyBasicRefComponent;

package/dist/src/__tests__/shared.js

@@ -128,6 +128,12 @@ var SHOW_TESTS = {
     nestedShow: require('./data/show/nested-show.raw'),
     showWithFor: require('./data/show/show-with-for.raw'),
 };
+var ADVANCED_REF = {
+    AdvancedRef: require('./data/advanced-ref.raw'),
+};
+var ON_UPDATE_RETURN = {
+    basicOnUpdateReturn: require('./data/basic-onUpdate-return.raw'),
+};
 var TESTS_FOR_TARGET = {
     react: [
         BASIC_TESTS,
@@ -136,6 +142,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FOR_SHOW_TESTS,
     ],
     angular: [
@@ -146,6 +154,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     webcomponent: [
         BASIC_TESTS,
@@ -154,6 +164,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FORM_BLOCK_TESTS
     ],
     vue: [
@@ -164,6 +176,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     svelte: [
         BASIC_TESTS,
@@ -172,6 +186,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     html: [
         BASIC_TESTS,
@@ -180,6 +196,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FORM_BLOCK_TESTS
     ],
     stencil: [
@@ -189,6 +207,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         // MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FOR_SHOW_TESTS
     ],
     solid: [
@@ -199,6 +219,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     reactNative: [
         BASIC_TESTS,
@@ -207,6 +229,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FOR_SHOW_TESTS,
     ],
     liquid: [
@@ -216,6 +240,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     qwik: [
         BASIC_TESTS,

package/dist/src/generators/angular.d.ts

@@ -6,6 +6,7 @@ interface AngularBlockOptions {
     contextVars?: string[];
     outputVars?: string[];
     childComponents?: string[];
+    domRefs?: string[];
 }
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
 export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;

package/dist/src/generators/angular.js

@@ -68,6 +68,7 @@ var blockToAngular = function (json, options, blockOptions) {
     var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
     var outputVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.outputVars) || [];
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
+    var domRefs = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.domRefs) || [];
     if (mappers[json.name]) {
         return mappers[json.name](json, options, blockOptions);
     }
@@ -86,6 +87,7 @@ var blockToAngular = function (json, options, blockOptions) {
             // the context is the class
             contextVars: [],
             outputVars: outputVars,
+            domRefs: domRefs,
         }), "}}");
     }
     var str = '';
@@ -94,6 +96,7 @@ var blockToAngular = function (json, options, blockOptions) {
         str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
             contextVars: contextVars,
             outputVars: outputVars,
+            domRefs: domRefs,
         }), "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
@@ -102,6 +105,7 @@ var blockToAngular = function (json, options, blockOptions) {
         str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code, {
             contextVars: contextVars,
             outputVars: outputVars,
+            domRefs: domRefs,
         }), "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
@@ -136,6 +140,7 @@ var blockToAngular = function (json, options, blockOptions) {
             var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
                 contextVars: contextVars,
                 outputVars: outputVars,
+                domRefs: domRefs,
             });
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
@@ -252,14 +257,14 @@ var componentToAngular = function (options) {
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }
+        var blockOptions = {
+            contextVars: contextVars,
+            outputVars: outputVars,
+            domRefs: [],
+            childComponents: childComponents,
+        };
         var template = json.children
-            .map(function (item) {
-            return (0, exports.blockToAngular)(item, options, {
-                contextVars: contextVars,
-                outputVars: outputVars,
-                childComponents: childComponents,
-            });
-        })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n');
         if (options.prettier !== false) {
             template = tryFormat(template, 'html');
@@ -272,6 +277,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 });
             },
         });
@@ -294,6 +300,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 }))
                 : '', ";");
         })
@@ -313,6 +320,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 }), "\n                "), "\n            }"), !((_o = component.hooks.onUpdate) === null || _o === void 0 ? void 0 : _o.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
@@ -320,6 +328,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 });
                 return code + '\n';
             }, ''), "\n            }"), !component.hooks.onUnMount
@@ -328,6 +337,7 @@ var componentToAngular = function (options) {
                 replaceWith: 'this.',
                 contextVars: contextVars,
                 outputVars: outputVars,
+                domRefs: Array.from(domRefs),
             }), "\n            }"));
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);

package/dist/src/generators/qwik/component.js

@@ -71,15 +71,15 @@ function addComponent(fileSet, component, opts) {
     var styles = _opts.shareStyles ? getCommonStyles(fileSet).styles : new Map();
     (0, styles_1.collectStyles)(component.children, styles);
     var useStyles = function () { return null; };
-    if (_opts.shareStyles) {
-        if (_opts.isRoot) {
-            var symbolName = componentName + '_styles';
-            getCommonStyles(fileSet).symbolName = symbolName;
-            useStyles = generateStyles(onRenderFile, fileSet.low, symbolName, false);
+    if (styles.size) {
+        if (_opts.shareStyles) {
+            if (_opts.isRoot) {
+                var symbolName = componentName + '_styles';
+                getCommonStyles(fileSet).symbolName = symbolName;
+                useStyles = generateStyles(onRenderFile, fileSet.low, symbolName, false);
+            }
         }
-    }
-    else {
-        if (styles.size) {
+        else {
             var symbolName = componentName + '_styles';
             onRenderFile.exportConst(symbolName, (0, styles_1.renderStyles)(styles));
             useStyles = generateStyles(onRenderFile, onRenderFile, symbolName, true);

package/dist/src/generators/qwik/jsx.js

@@ -77,7 +77,7 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                 if (typeof directive == 'function') {
                     _this.emit(directive(child, function () {
                         var children = child.children.filter(function (c) { return !isEmptyTextNode(c); });
-                        var needsFragment = children.length > 1 || isTextNode(children[0]);
+                        var needsFragment = children.length > 1 || (children.length === 1 && isTextNode(children[0]));
                         needsFragment && _this.jsxBeginFragment(fragmentSymbol);
                         renderJSXNodes(file, directives, handlers, children, styles, {}, false).call(_this);
                         needsFragment && _this.jsxEndFragment();

package/dist/src/generators/react.js

@@ -483,7 +483,7 @@ var _componentToReact = function (json, options, isSubComponent) {
         propsArgs = "props: ".concat(json.propsTypeRef);
     }
     var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n  "])), options.type !== 'native'
-        ? ''
+        ? "import * as React from 'react';"
         : "\n  import * as React from 'react';\n  import { View, StyleSheet, Image, Text } from 'react-native';\n  ", styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size ? "import { ".concat(Array.from(reactLibImports).join(', '), " } from 'react'") : '', componentHasStyles && stylesType === 'emotion' && options.format !== 'lite'
         ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
         : '', hasState && stateType === 'valtio' ? "import { useLocalProxy } from 'valtio/utils';" : '', hasState && stateType === 'solid' ? "import { useMutable } from 'react-solid-state';" : '', stateType === 'mobx' && hasState

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

@@ -0,0 +1,3 @@
+import { Transpiler } from '../../types/transpiler';
+import { ToSolidOptions } from './types';
+export declare const componentToSolid: (passedOptions?: Partial<ToSolidOptions>) => Transpiler;

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

@@ -0,0 +1,330 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToSolid = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+var standalone_1 = require("prettier/standalone");
+var helpers_1 = require("../../helpers/styles/helpers");
+var get_refs_1 = require("../../helpers/get-refs");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var render_imports_1 = require("../../helpers/render-imports");
+var jsx_1 = require("../../parsers/jsx");
+var plugins_1 = require("../../modules/plugins");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var get_components_used_1 = require("../../helpers/get-components-used");
+var traverse_1 = __importDefault(require("traverse"));
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
+var context_1 = require("../helpers/context");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var core_1 = require("@babel/core");
+var lodash_1 = require("lodash");
+var state_1 = require("./state");
+var nullable_1 = require("../../helpers/nullable");
+var DEFAULT_OPTIONS = {
+    state: 'signals',
+};
+// Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
+function processDynamicComponents(json, options) {
+    var found = false;
+    (0, traverse_1.default)(json).forEach(function (node) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.name.includes('.')) {
+                node.bindings.component = { code: node.name };
+                node.name = 'Dynamic';
+                found = true;
+            }
+        }
+    });
+    return found;
+}
+function getContextString(component, options) {
+    var str = '';
+    for (var key in component.context.get) {
+        str += "\n      const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n    ");
+    }
+    return str;
+}
+// This should really be a preprocessor mapping the `class` attribute binding based on what other values have
+// to make this more pluggable
+var collectClassString = function (json) {
+    var _a, _b, _c;
+    var staticClasses = [];
+    if (json.properties.class) {
+        staticClasses.push(json.properties.class);
+        delete json.properties.class;
+    }
+    if (json.properties.className) {
+        staticClasses.push(json.properties.className);
+        delete json.properties.className;
+    }
+    var dynamicClasses = [];
+    if (typeof ((_a = json.bindings.class) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
+        dynamicClasses.push(json.bindings.class.code);
+        delete json.bindings.class;
+    }
+    if (typeof ((_b = json.bindings.className) === null || _b === void 0 ? void 0 : _b.code) === 'string') {
+        dynamicClasses.push(json.bindings.className.code);
+        delete json.bindings.className;
+    }
+    if (typeof ((_c = json.bindings.css) === null || _c === void 0 ? void 0 : _c.code) === 'string' && json.bindings.css.code.trim().length > 4) {
+        dynamicClasses.push("css(".concat(json.bindings.css.code, ")"));
+    }
+    delete json.bindings.css;
+    var staticClassesString = staticClasses.join(' ');
+    var dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    var hasStaticClasses = Boolean(staticClasses.length);
+    var hasDynamicClasses = Boolean(dynamicClasses.length);
+    if (hasStaticClasses && !hasDynamicClasses) {
+        return "\"".concat(staticClassesString, "\"");
+    }
+    if (hasDynamicClasses && !hasStaticClasses) {
+        return "{".concat(dynamicClassesString, "}");
+    }
+    if (hasDynamicClasses && hasStaticClasses) {
+        return "{\"".concat(staticClassesString, " \" + ").concat(dynamicClassesString, "}");
+    }
+    return null;
+};
+var preProcessBlockCode = function (json, options) {
+    var processCode = (0, state_1.updateStateCode)(options);
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        if (value) {
+            json.properties[key] = processCode(value);
+        }
+    }
+    for (var key in json.bindings) {
+        var value = json.bindings[key];
+        if (value === null || value === void 0 ? void 0 : value.code) {
+            json.bindings[key] = {
+                arguments: value.arguments,
+                code: processCode(value.code),
+            };
+        }
+    }
+};
+var blockToSolid = function (json, options) {
+    var _a, _b, _c;
+    preProcessBlockCode(json, options);
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        return "{".concat(json.bindings._text.code, "}");
+    }
+    if (json.name === 'For') {
+        var 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={".concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, "}>\n    {(").concat(json.properties._forName, ", _index) => {\n      const index = _index();\n      return ").concat(needsWrapper ? '<>' : '').concat(json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (child) { return blockToSolid(child, options); }), "}}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+    }
+    var str = '';
+    if (json.name === 'Fragment') {
+        str += '<';
+    }
+    else {
+        str += "<".concat(json.name, " ");
+    }
+    if (json.name === 'Show' && json.meta.else) {
+        str += "fallback={".concat(blockToSolid(json.meta.else, options), "}");
+    }
+    var classString = collectClassString(json);
+    if (classString) {
+        str += " class=".concat(classString, " ");
+    }
+    if ((_c = json.bindings._spread) === null || _c === void 0 ? void 0 : _c.code) {
+        str += " {...(".concat(json.bindings._spread.code, ")} ");
+    }
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        str += " ".concat(key, "=\"").concat(value, "\" ");
+    }
+    for (var key in json.bindings) {
+        var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e;
+        if (key === '_spread' || key === '_forName') {
+            continue;
+        }
+        if (!code)
+            continue;
+        if (key.startsWith('on')) {
+            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            str += " ".concat(useKey, "={(").concat(cusArg.join(','), ") => ").concat(code, "} ");
+        }
+        else {
+            var 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: function (path) {
+                        // TODO: limit to top level objects only
+                        for (var _i = 0, _a = path.node.properties; _i < _a.length; _i++) {
+                            var property = _a[_i];
+                            if (core_1.types.isObjectProperty(property)) {
+                                if (core_1.types.isIdentifier(property.key) || core_1.types.isStringLiteral(property.key)) {
+                                    var key_1 = core_1.types.isIdentifier(property.key)
+                                        ? property.key.name
+                                        : property.key.value;
+                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key_1));
+                                }
+                            }
+                        }
+                    },
+                });
+            }
+            str += " ".concat(key, "={").concat(useValue, "} ");
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToSolid(item, options); })
+            .join('\n');
+    }
+    if (json.name === 'Fragment') {
+        str += '</>';
+    }
+    else {
+        str += "</".concat(json.name, ">");
+    }
+    return str;
+};
+var getRefsString = function (json) {
+    return Array.from((0, get_refs_1.getRefs)(json))
+        .map(function (ref) { return "let ".concat(ref, ";"); })
+        .join('\n');
+};
+function addProviderComponents(json, options) {
+    for (var key in json.context.set) {
+        var _a = json.context.set[key], name_1 = _a.name, value = _a.value;
+        json.children = [
+            (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_1, ".Provider"), children: json.children }, (value && {
+                bindings: {
+                    value: { code: (0, get_state_object_string_1.getMemberObjectString)(value) },
+                },
+            }))),
+        ];
+    }
+}
+var preProcessComponentCode = function (json, options) {
+    var _a;
+    var processCode = (0, state_1.updateStateCode)(options);
+    if ((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) {
+        json.hooks.onMount.code = processCode(json.hooks.onMount.code);
+    }
+    if (json.hooks.onUpdate) {
+        for (var _i = 0, _b = json.hooks.onUpdate; _i < _b.length; _i++) {
+            var hook = _b[_i];
+            hook.code = processCode(hook.code);
+            if (hook.deps) {
+                hook.deps = processCode(hook.deps);
+            }
+        }
+    }
+};
+var componentToSolid = function (passedOptions) {
+    if (passedOptions === void 0) { passedOptions = DEFAULT_OPTIONS; }
+    return function (_a) {
+        var _b, _c, _d, _e, _f, _g;
+        var component = _a.component;
+        var options = __assign(__assign({}, DEFAULT_OPTIONS), passedOptions);
+        var json = (0, fast_clone_1.fastClone)(component);
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        }
+        addProviderComponents(json, options);
+        var componentHasStyles = (0, helpers_1.hasCss)(json);
+        var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1;
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        }
+        preProcessComponentCode(json, options);
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var foundDynamicComponents = processDynamicComponents(json, options);
+        var state = (0, state_1.getState)(json, options);
+        var componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
+        var componentHasContext = (0, context_1.hasContext)(json);
+        var hasShowComponent = componentsUsed.has('Show');
+        var hasForComponent = componentsUsed.has('For');
+        var solidJSImports = __spreadArray(__spreadArray([
+            componentHasContext ? 'useContext' : undefined,
+            hasShowComponent ? 'Show' : undefined,
+            hasForComponent ? 'For' : undefined,
+            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined
+        ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect'] : []), true), ((_d = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _d !== void 0 ? _d : []), true).filter(nullable_1.checkIsDefined);
+        var storeImports = (_e = state === null || state === void 0 ? void 0 : state.import.store) !== null && _e !== void 0 ? _e : [];
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles ? '' : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json), getContextString(json, options), !((_g = json.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
+            ? json.hooks.onUpdate
+                .map(function (hook, index) {
+                if (hook.deps) {
+                    var hookName = "onUpdateFn_".concat(index);
+                    return "\n                    function ".concat(hookName, "() { ").concat(hook.code, " };\n                    createEffect(on(() => ").concat(hook.deps, ", ").concat(hookName, "));\n                  ");
+                }
+                else {
+                    // TO-DO: support `onUpdate` without `deps`
+                    return '';
+                }
+            })
+                .join('\n')
+            : '', addWrapper ? '<>' : '', json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToSolid(item, options); })
+            .join('\n'), addWrapper ? '</>' : '', json.name);
+        // HACK: for some reason we are generating `state.state.foo` instead of `state.foo`
+        // need a full fix, but this unblocks a lot in the short term
+        str = str.replace(/state\.state\./g, 'state.');
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            str = (0, standalone_1.format)(str, {
+                parser: 'typescript',
+                plugins: [require('prettier/parser-typescript')],
+            });
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
+};
+exports.componentToSolid = componentToSolid;
+var templateObject_1;

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

@@ -0,0 +1,22 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { ToSolidOptions } from './types';
+declare type State = {
+    str: string;
+    import: {
+        store?: [string];
+        solidjs?: [string];
+    };
+    values?: StateValue[];
+};
+export declare const updateStateCode: (options: ToSolidOptions) => (value: string) => string;
+declare enum StateValueType {
+    'function' = "function",
+    'method' = "method",
+    'data' = "data"
+}
+interface StateValue {
+    str: string;
+    type: StateValueType;
+}
+export declare const getState: (json: MitosisComponent, options: ToSolidOptions) => State | undefined;
+export {};