@builder.io/mitosis 0.3.13 → 0.3.15

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

@@ -332,16 +332,13 @@ var _componentToReact = function (json, options, isSubComponent) {
     if ((0, context_1.hasContext)(json) && options.contextType !== 'prop-drill') {
         reactLibImports.add('useContext');
     }
-    if (allRefs.length) {
+    if (allRefs.length || ((_c = json.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)) {
         reactLibImports.add('useRef');
     }
     if (!options.preact && hasPropRef) {
         reactLibImports.add('forwardRef');
     }
-    if (json.hooks.onMount.length ||
-        ((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ||
-        ((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length) ||
-        ((_e = json.hooks.onInit) === null || _e === void 0 ? void 0 : _e.code)) {
+    if (json.hooks.onMount.length || ((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) || ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)) {
         reactLibImports.add('useEffect');
     }
     var hasCustomStyles = !!((_f = json.style) === null || _f === void 0 ? void 0 : _f.length);
@@ -388,10 +385,10 @@ var _componentToReact = function (json, options, isSubComponent) {
                             })
                             : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
         : '', hasStateArgument ? refsString : '', getContextString(json, options), ((_g = json.hooks.init) === null || _g === void 0 ? void 0 : _g.code) ? (0, state_2.processHookCode)({ str: (_h = json.hooks.init) === null || _h === void 0 ? void 0 : _h.code, options: options }) : '', contextStr || '', ((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code)
-        ? "\n        useEffect(() => {\n          ".concat((0, state_2.processHookCode)({
+        ? "\n        const hasInitialized = useRef(false);\n        if (!hasInitialized.current) {\n          ".concat((0, state_2.processHookCode)({
             str: json.hooks.onInit.code,
             options: options,
-        }), "\n        }, [])\n        ")
+        }), "\n          hasInitialized.current = true;\n        }\n        ")
         : '', json.hooks.onEvent
         .map(function (hook) {
         var eventName = "\"".concat(hook.eventName, "\"");

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

@@ -167,29 +167,44 @@ var TWRNC_STYLES_PLUGIN = function () { return ({
         post: function (json) {
             (0, legacy_1.default)(json).forEach(function (node) {
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-                    var combinedClasses = [
-                        node.properties.class,
-                        node.properties.className,
-                        node.bindings.class,
-                        node.bindings.className,
-                    ]
+                    var staticClasses = [node.properties.class, node.properties.className]
                         .filter(Boolean)
                         .join(' ');
-                    if (combinedClasses) {
-                        node.properties.style = "{tw`".concat(combinedClasses, "`}");
-                    }
-                    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;
+                    var dynamicClasses = [node.bindings.class, node.bindings.className].filter(Boolean);
+                    if (staticClasses || dynamicClasses.length) {
+                        var styleCode = '';
+                        if (staticClasses) {
+                            styleCode = "tw`".concat(staticClasses, "`");
+                        }
+                        if (dynamicClasses.length) {
+                            var dynamicCode = dynamicClasses
+                                .map(function (dc) { return (dc && dc.code ? dc.code : null); })
+                                .filter(Boolean)
+                                .join(', ');
+                            if (dynamicCode) {
+                                if (styleCode) {
+                                    // If we have both static and dynamic classes
+                                    styleCode = "tw.style(".concat(styleCode, ", ").concat(dynamicCode, ")");
+                                }
+                                else if (dynamicClasses.length > 1) {
+                                    // If we have multiple dynamic classes
+                                    styleCode = "tw.style([".concat(dynamicCode, "])");
+                                }
+                                else {
+                                    // If we have a single dynamic class
+                                    styleCode = "tw.style(".concat(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;
                 }
             });
         },

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

@@ -132,7 +132,7 @@ var DEFAULT_OPTIONS = {
 };
 var componentToSolid = function (passedOptions) {
     return function (_a) {
-        var _b, _c, _d, _e, _f;
+        var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
         var options = (0, merge_options_1.initializeOptions)({
@@ -193,13 +193,13 @@ var componentToSolid = function (passedOptions) {
         var storeImports = (_e = state === null || state === void 0 ? void 0 : state.import.store) !== null && _e !== void 0 ? _e : [];
         var propType = json.propsTypeRef || 'any';
         var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\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 && options.stylesType === 'styled-components'
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\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 && options.stylesType === 'styled-components'
             ? 'import { css } from "solid-styled-components";'
             : "", json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
             explicitImportFileExtension: options.explicitImportFileExtension,
             component: json,
             target: 'solid',
-        }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }).join('\n'), json.hooks.onUpdate
+        }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), (_h = (_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code) !== null && _h !== void 0 ? _h : '', json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }).join('\n'), json.hooks.onUpdate
             ? json.hooks.onUpdate
                 .map(function (hook, index) {
                 // TO-DO: support `onUpdate` without `deps`

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.3.13",
+  "version": "0.3.15",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {