@builder.io/mitosis 0.0.47 → 0.0.50-0

package/dist/src/generators/qwik.js

@@ -0,0 +1,458 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToQwik = void 0;
+var core_1 = require("@babel/core");
+var plugin_virtual_1 = __importDefault(require("@rollup/plugin-virtual"));
+var dedent_1 = __importDefault(require("dedent"));
+var lodash_1 = require("lodash");
+var standalone_1 = require("prettier/standalone");
+var rollup_1 = require("rollup");
+var traverse_1 = __importDefault(require("traverse"));
+var babel_transform_1 = require("../helpers/babel-transform");
+var capitalize_1 = require("../helpers/capitalize");
+var collect_styles_1 = require("../helpers/collect-styles");
+var fast_clone_1 = require("../helpers/fast-clone");
+var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
+var get_state_object_string_1 = require("../helpers/get-state-object-string");
+var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var is_valid_attribute_name_1 = require("../helpers/is-valid-attribute-name");
+var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
+var render_imports_1 = require("../helpers/render-imports");
+var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
+var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
+var plugins_1 = require("../modules/plugins");
+var jsx_1 = require("../parsers/jsx");
+var html_escape_1 = require("../helpers/html-escape");
+var qwikImport = function (options) {
+    return options.qwikLib || '@builder.io/qwik';
+};
+function addMarkDirtyAfterSetInCode(code, options, useString) {
+    if (useString === void 0) { useString = 'markDirty(this)'; }
+    return babel_transform_1.babelTransformExpression(code, {
+        UpdateExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isMemberExpression(node.argument)) {
+                if (core_1.types.isIdentifier(node.argument.object)) {
+                    // TODO: utility to properly trace this reference to the beginning
+                    if (node.argument.object.name === 'state') {
+                        // TODO: ultimately do updates by property, e.g. updateName()
+                        // that updates any attributes dependent on name, etc
+                        var parent_1 = path;
+                        // `_temp = ` assignments are created sometimes when we insertAfter
+                        // for simple expressions. this causes us to re-process the same expression
+                        // in an infinite loop
+                        while ((parent_1 = parent_1.parentPath)) {
+                            if (core_1.types.isAssignmentExpression(parent_1.node) &&
+                                core_1.types.isIdentifier(parent_1.node.left) &&
+                                parent_1.node.left.name.startsWith('_temp')) {
+                                return;
+                            }
+                        }
+                        path.insertAfter(core_1.types.identifier(useString));
+                    }
+                }
+            }
+        },
+        AssignmentExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isMemberExpression(node.left)) {
+                if (core_1.types.isIdentifier(node.left.object)) {
+                    // TODO: utility to properly trace this reference to the beginning
+                    if (node.left.object.name === 'state') {
+                        // TODO: ultimately do updates by property, e.g. updateName()
+                        // that updates any attributes dependent on name, etc
+                        var parent_2 = path;
+                        // `_temp = ` assignments are created sometimes when we insertAfter
+                        // for simple expressions. this causes us to re-process the same expression
+                        // in an infinite loop
+                        while ((parent_2 = parent_2.parentPath)) {
+                            if (core_1.types.isAssignmentExpression(parent_2.node) &&
+                                core_1.types.isIdentifier(parent_2.node.left) &&
+                                parent_2.node.left.name.startsWith('_temp')) {
+                                return;
+                            }
+                        }
+                        path.insertAfter(core_1.types.identifier(useString));
+                    }
+                }
+            }
+        },
+    });
+}
+var processBinding = function (binding, options) {
+    return strip_state_and_props_refs_1.stripStateAndPropsRefs(addMarkDirtyAfterSetInCode(binding, options), {
+        replaceWith: 'this.',
+    })
+        // Remove trailing semicolon
+        .trim()
+        .replace(/;$/, '');
+};
+var NODE_MAPPERS = {
+    Fragment: function (json, options) {
+        return "<>" + json.children
+            .map(function (item) { return blockToQwik(item, options); })
+            .join('\n') + "</>";
+    },
+    For: function (json, options) {
+        return "{" + processBinding(json.bindings.each, options) + "?.map(" + json.properties._forName + " => (\n      <>" + json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToQwik(item, options); })
+            .join('\n') + "</>\n    ))}";
+    },
+    Show: function (json, options) {
+        return "{" + processBinding(json.bindings.when, options) + " ? (\n      <>" + json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToQwik(item, options); })
+            .join('\n') + "</>\n    ) : undefined}";
+    },
+};
+var getId = function (json, options) {
+    var name = json.properties.$name
+        ? camelCase(json.properties.$name)
+        : /^h\d$/.test(json.name || '') // don't dashcase h1 into h-1
+            ? json.name
+            : camelCase(json.name || 'div');
+    var newNameNum = (options.namesMap[name] || 0) + 1;
+    options.namesMap[name] = newNameNum;
+    return capitalize_1.capitalize("" + name + (newNameNum === 1 ? '' : "" + newNameNum));
+};
+var elId = function (node, options) {
+    if (node.meta.id) {
+        return node.meta.id;
+    }
+    var id = getId(node, options);
+    node.meta.id = id;
+    return id;
+};
+var blockToQwik = function (json, options) {
+    if (NODE_MAPPERS[json.name]) {
+        return NODE_MAPPERS[json.name](json, options);
+    }
+    if (json.bindings._text) {
+        return "{" + processBinding(json.bindings._text, options) + "}";
+    }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    var str = '';
+    str += "<" + json.name + " ";
+    if (json.bindings._spread) {
+        str += " {...(" + json.bindings._spread + ")} ";
+    }
+    for (var key in json.properties) {
+        if (!key || key.startsWith('_') || key.startsWith('$')) {
+            continue;
+        }
+        var value = html_escape_1.htmlAttributeEscape(json.properties[key] || '');
+        if (is_valid_attribute_name_1.isValidAttributeName(key)) {
+            str += " " + key + "=\"" + value + "\" ";
+        }
+    }
+    var eventBindings = {};
+    for (var key in json.bindings) {
+        var value = json.bindings[key];
+        if (key.startsWith('_') || key.startsWith('$')) {
+            continue;
+        }
+        if (key.startsWith('on')) {
+            var useKey = key.replace('on', 'on:').toLowerCase();
+            var componentName = getComponentName(options.componentJson, options);
+            if (options.bundle) {
+                eventBindings[useKey] = "QRL`" + options.qrlPrefix + "/" + componentName + "/bundle" + (options.qrlSuffix || '') + ".on" + elId(json, options) + key.slice(2) + "`";
+            }
+            else {
+                eventBindings[useKey] = "QRL`" + options.qrlPrefix + "/" + componentName + "_on" + elId(json, options) + key.slice(2) + (options.qrlSuffix || '') + "`";
+            }
+        }
+        else {
+            if (!is_valid_attribute_name_1.isValidAttributeName(key)) {
+                console.warn('Skipping invalid attribute name:', key);
+            }
+            else {
+                str += " " + key + "={" + processBinding(value, options) + "} ";
+            }
+        }
+    }
+    if (lodash_1.size(eventBindings)) {
+        for (var event_1 in eventBindings) {
+            str += event_1 + "={" + eventBindings[event_1] + "}";
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children.map(function (item) { return blockToQwik(item, options); }).join('\n');
+    }
+    str += "</" + json.name + ">";
+    return str;
+};
+var getComponentName = function (json, options) {
+    return capitalize_1.capitalize(camelCase(json.name || 'my-component'));
+};
+// TODO
+var getProvidersString = function (componentJson, options) {
+    return 'null';
+};
+var formatCode = function (str, options, type) {
+    if (type === void 0) { type = 'typescript'; }
+    if (options.prettier !== false) {
+        try {
+            str = standalone_1.format(str, {
+                parser: type === 'typescript' ? 'babel-ts' : type,
+                plugins: [
+                    require('prettier/parser-typescript'),
+                    require('prettier/parser-babel'),
+                    require('prettier/parser-postcss'),
+                ],
+            });
+        }
+        catch (err) {
+            console.warn('Error formatting code', err);
+        }
+    }
+    return str;
+};
+var getEventHandlerFiles = function (componentJson, options) {
+    var files = [];
+    traverse_1.default(componentJson).forEach(function (item) {
+        if (is_mitosis_node_1.isMitosisNode(item)) {
+            for (var binding in item.bindings) {
+                if (binding.startsWith('on')) {
+                    var eventHandlerName = elId(item, options) + binding.slice(2);
+                    var componentName = getComponentName(componentJson, options);
+                    var str = formatCode("import {\n              injectEventHandler,\n              provideEvent,\n              markDirty\n            } from '" + qwikImport(options) + "';\n            import { " + componentName + "Component } from './" + componentName + "_component.js'\n            \n            export " + (options.bundle ? "const on" + eventHandlerName + " =" : 'default') + " injectEventHandler(\n              " + componentName + "Component,\n              provideEvent(),\n              async function (this: " + componentName + "Component, event: Event) {\n                " + remove_surrounding_block_1.removeSurroundingBlock(processBinding(item.bindings[binding], options)) + "\n              }\n            )\n          ", options);
+                    str = formatCode(str, options);
+                    files.push({
+                        path: componentName + "_on" + eventHandlerName + ".ts",
+                        contents: str,
+                    });
+                }
+            }
+        }
+    });
+    return files;
+};
+var componentToQwik = function (componentJson, toQwikOptions) {
+    if (toQwikOptions === void 0) { toQwikOptions = {}; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        var json, options, css, hasCss, addWrapper, componentName, str, dataString, output, moduleMap, bundle, bundleOutput;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    json = fast_clone_1.fastClone(componentJson);
+                    options = __assign(__assign({ qrlPrefix: 'ui:' }, toQwikOptions), { namesMap: {}, componentJson: json });
+                    if (options.plugins) {
+                        json = plugins_1.runPreJsonPlugins(json, options.plugins);
+                    }
+                    css = collect_styles_1.collectCss(json, {
+                        classProperty: 'class',
+                        prefix: options.cssNamespace,
+                    });
+                    if (options.minifyStyles) {
+                        css = css.trim().replace(/\s+/g, ' ');
+                    }
+                    else {
+                        css = formatCode(css, options, 'css');
+                    }
+                    hasCss = Boolean(css.trim().length);
+                    addWrapper = json.children.length > 1 || hasCss;
+                    if (options.plugins) {
+                        json = plugins_1.runPostJsonPlugins(json, options.plugins);
+                    }
+                    componentName = capitalize_1.capitalize(camelCase(componentJson.name || 'my-component'));
+                    strip_meta_properties_1.stripMetaProperties(json);
+                    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { injectMethod, QRL, h } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ", "\n\n    export ", " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ", "\n        ", "\n        ", ")\n    })\n  "], ["\n    import { injectMethod, QRL, h } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ",
+                        "\n\n    export ",
+                        " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ",
+                        "\n        ", "\n        ", ")\n    })\n  "])), qwikImport(options), componentName, componentName, render_imports_1.renderPreComponent(__assign(__assign({}, json), { imports: json.imports.map(function (item) {
+                            if (item.path.endsWith('.lite')) {
+                                var clone = fast_clone_1.fastClone(item);
+                                var name_1 = clone.path
+                                    .split(/[\.\/]/)
+                                    // Get the -1 index of array
+                                    .slice(-2, -1)
+                                    .pop();
+                                var pascalName = capitalize_1.capitalize(camelCase(name_1));
+                                clone.path = "../" + pascalName + "/public.js";
+                                for (var key in clone.imports) {
+                                    var value = clone.imports[key];
+                                    if (value === 'default') {
+                                        clone.imports[key] = pascalName;
+                                    }
+                                }
+                                return clone;
+                            }
+                            return item;
+                        }) })), options.bundle ? "const template = " : 'default', componentName, componentName, addWrapper ? '<>' : '', !hasCss
+                        ? ''
+                        : "<style>{`" + css
+                            .trim()
+                            .replace(/^|\n/g, '\n' + ' '.repeat(12)) + "`}</style>", json.children.map(function (item) { return blockToQwik(item, options); }).join('\n'), addWrapper ? '</>' : '');
+                    if (options.plugins) {
+                        str = plugins_1.runPreCodePlugins(str, options.plugins);
+                    }
+                    str = formatCode(str, options);
+                    if (options.plugins) {
+                        str = plugins_1.runPostCodePlugins(str, options.plugins);
+                    }
+                    dataString = get_state_object_string_1.getStateObjectStringFromComponent(json, {
+                        format: 'class',
+                        valueMapper: function (code) { return processBinding(code, options); },
+                    });
+                    output = {
+                        files: __spreadArray([
+                            {
+                                path: componentName + "_template.tsx",
+                                contents: str,
+                            },
+                            {
+                                path: componentName + ".ts",
+                                contents: formatCode("\n          import { jsxDeclareComponent, QRL } from '" + qwikImport(options) + "';\n          \n          export const " + componentName + " = jsxDeclareComponent(QRL`" + options.qrlPrefix + "/" + componentName + (options.bundle ? '/bundle' : '_template') + (options.qrlSuffix || '') + (options.bundle ? '.template' : '') + "`, '" + lodash_1.kebabCase(componentName) + "');\n        ", options),
+                            },
+                            {
+                                path: componentName + "_component.ts",
+                                contents: formatCode((function () {
+                                    var str = "\n              " + (options.format === 'builder' ? '' : 'export ') + "class " + (options.format === 'builder' ? '_' : '') + componentName + "Component extends Component<any, any> {\n                " + (options.format === 'builder'
+                                        ? ''
+                                        : "static $templateQRL = '" + options.qrlPrefix + "/" + componentName + (options.bundle ? '/bundle' : '_template') + (options.qrlSuffix || '') + (options.bundle ? '.template' : '') + "'") + "\n\n                " + dataString + "\n\n                " + (!json.hooks.onMount
+                                        ? ''
+                                        : "\n                      constructor(...args) {\n                        super(...args);\n\n                        " + processBinding(json.hooks.onMount, options) + "\n                        }\n                      ") + "\n\n                $newState() {\n                  return {} // TODO\n                }\n              }\n              " + (options.format !== 'builder'
+                                        ? ''
+                                        : "\n              export const " + componentName + "Component = new Proxy(_" + componentName + "Component, {\n                get(target, prop) {\n                  if (prop === '$templateQRL') {\n                    return '" + options.qrlPrefix + "/" + componentName + (options.bundle ? '/bundle' : '_template') + (options.qrlSuffix || '') + (options.bundle ? '.template' : '') + "'\n                  }\n                  return Reflect.get(...arguments)\n                }\n              })\n              ") + "\n            ";
+                                    str = "\n              import { Component, QRL " + (str.includes('markDirty(') ? ', markDirty' : '') + " } from '" + qwikImport(options) + "';\n              " + str + "\n            ";
+                                    return str;
+                                })(), options),
+                            }
+                        ], getEventHandlerFiles(json, options)),
+                    };
+                    if (!options.bundle) return [3 /*break*/, 3];
+                    moduleMap = __assign({ entry: output.files
+                            .filter(function (file) { return !file.path.endsWith('.ts'); })
+                            .map(function (file) { return "export * from './" + file.path.replace(/\.tsx?$/, '.js') + "';"; })
+                            .join('\n') }, output.files.reduce(function (memo, arg) {
+                        var transformed = core_1.transform(arg.contents, {
+                            sourceFileName: arg.path,
+                            plugins: [
+                                [
+                                    require('@babel/plugin-transform-typescript'),
+                                    {
+                                        jsx: 'react',
+                                        isTSX: true,
+                                        allExtensions: true,
+                                        jsxFactory: 'h',
+                                        jsxPragma: 'h',
+                                    },
+                                ],
+                                [
+                                    require('@babel/plugin-transform-react-jsx'),
+                                    {
+                                        pragma: 'h',
+                                        pragmaFrag: 'null',
+                                        throwIfNamespace: false,
+                                    },
+                                ],
+                                require('@babel/plugin-proposal-class-properties'),
+                            ],
+                        });
+                        memo['./' + arg.path.replace(/\.tsx?$/, '.js')] = transformed.code;
+                        return memo;
+                    }, {}));
+                    return [4 /*yield*/, rollup_1.rollup({
+                            input: 'entry',
+                            external: [options.qwikLib || '@builder.io/qwik'],
+                            plugins: [plugin_virtual_1.default(moduleMap)],
+                        })];
+                case 1:
+                    bundle = _a.sent();
+                    return [4 /*yield*/, bundle.generate({
+                            file: 'bundle.js',
+                            format: 'esm',
+                        })];
+                case 2:
+                    bundleOutput = (_a.sent()).output;
+                    output.files.push({
+                        path: componentName + "/bundle.js",
+                        contents: bundleOutput[0].code,
+                    });
+                    _a.label = 3;
+                case 3: return [2 /*return*/, output];
+            }
+        });
+    });
+};
+exports.componentToQwik = componentToQwik;
+/**
+ * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
+ *
+ * loadash: `camelCase('A-BC')` => "ABc"
+ * this fn: `camelCase('A-BC')` => "ABC"
+ *
+ */
+function camelCase(text) {
+    if (text === void 0) { text = ''; }
+    var parts = text.split('-');
+    var first = parts.shift();
+    return first + parts.map(capitalize_1.capitalize).join('');
+}
+var templateObject_1;

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

@@ -22,63 +22,79 @@ var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
 var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
+var MEDIA_QUERY_KEY_REGEX = /^@media.*/;
 var collectReactNativeStyles = function (json) {
     var styleMap = {};
     var componentIndexes = {};
     (0, traverse_1.default)(json).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            if (typeof item.bindings.css === 'string') {
-                var value = json5_1.default.parse(item.bindings.css);
-                delete item.bindings.css;
-                if (!(0, lodash_1.size)(value)) {
-                    return;
-                }
-                // Style properties like `"20px"` need to be numbers like `20` for react native
-                for (var key in value) {
-                    var propertyValue = value[key];
-                    if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
-                        var newValue = parseFloat(propertyValue);
-                        if (!isNaN(newValue)) {
-                            value[key] = newValue;
-                        }
-                    }
-                    if (stylePropertiesThatMustBeNumber.has(key) &&
-                        typeof value[key] !== 'number') {
-                        console.warn("Style key ".concat(key, " must be a number, but had value `").concat(value[key], "`"));
-                        delete value[key];
-                    }
+        if (!(0, is_mitosis_node_1.isMitosisNode)(item) || typeof item.bindings.css !== 'string') {
+            return;
+        }
+        var value = json5_1.default.parse(item.bindings.css);
+        delete item.bindings.css;
+        if (!(0, lodash_1.size)(value)) {
+            return;
+        }
+        // Style properties like `"20px"` need to be numbers like `20` for react native
+        for (var key in value) {
+            var propertyValue = value[key];
+            if (key.match(MEDIA_QUERY_KEY_REGEX)) {
+                console.warn('Unsupported: skipping media queries for react-native: ', key, propertyValue);
+                delete value[key];
+                continue;
+            }
+            if (stylePropertiesThatMustBeNumber.has(key) &&
+                typeof propertyValue !== 'number') {
+                console.warn("Style key ".concat(key, " must be a number, but had value `").concat(propertyValue, "`"));
+                delete value[key];
+                continue;
+            }
+            // convert strings to number if applicable
+            if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
+                var newValue = parseFloat(propertyValue);
+                if (!isNaN(newValue)) {
+                    value[key] = newValue;
                 }
-                var componentName = (0, lodash_1.camelCase)(item.name || 'view');
-                var index = (componentIndexes[componentName] =
-                    (componentIndexes[componentName] || 0) + 1);
-                var className = "".concat(componentName).concat(index);
-                item.bindings.style = "styles.".concat(className);
-                styleMap[className] = value;
             }
         }
+        var componentName = (0, lodash_1.camelCase)(item.name || 'view');
+        var index = (componentIndexes[componentName] =
+            (componentIndexes[componentName] || 0) + 1);
+        var className = "".concat(componentName).concat(index);
+        item.bindings.style = "styles.".concat(className);
+        styleMap[className] = value;
     });
     return styleMap;
 };
 exports.collectReactNativeStyles = collectReactNativeStyles;
+// Plugin to convert DOM tags to <View /> and <Text />
+function processReactNative() {
+    return function () { return ({
+        json: {
+            pre: function (json) {
+                (0, traverse_1.default)(json).forEach(function (node) {
+                    var _a, _b, _c;
+                    if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                        // TODO: handle TextInput, Image, etc
+                        if (node.name.toLowerCase() === node.name) {
+                            node.name = 'View';
+                        }
+                        if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
+                            ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
+                            node.name = 'Text';
+                        }
+                    }
+                });
+            },
+        },
+    }); };
+}
 var componentToReactNative = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        (0, traverse_1.default)(json).forEach(function (node) {
-            var _a, _b, _c;
-            if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-                // TODO: handle TextInput, Image, etc
-                if (node.name.toLowerCase() === node.name) {
-                    node.name = 'View';
-                }
-                if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
-                    ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
-                    node.name = 'Text';
-                }
-            }
-        });
-        return (0, react_1.componentToReact)(__assign(__assign({}, options), { stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
+        return (0, react_1.componentToReact)(__assign(__assign({}, options), { plugins: (options.plugins || []).concat([processReactNative()]), stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
     };
 };
 exports.componentToReactNative = componentToReactNative;

package/dist/src/generators/react.js

@@ -294,14 +294,19 @@ function hasContext(component) {
         Object.keys(component.context.set).length);
 }
 var getInitCode = function (json, options) {
-    return processBinding(json.hooks.init || '', options);
+    var _a;
+    return processBinding(((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) || '', options);
+};
+var DEFAULT_OPTIONS = {
+    stateType: 'useState',
+    stylesType: 'styled-jsx',
 };
 var componentToReact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
     return function (_a) {
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign({ stateType: 'useState', stylesType: 'styled-jsx' }, reactOptions);
+        var options = __assign(__assign({}, DEFAULT_OPTIONS), reactOptions);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -339,6 +344,7 @@ var componentToReact = function (reactOptions) {
 };
 exports.componentToReact = componentToReact;
 var _componentToReact = function (json, options, isSubComponent) {
+    var _a, _b, _c, _d, _e, _f;
     if (isSubComponent === void 0) { isSubComponent = false; }
     (0, process_http_requests_1.processHttpRequests)(json);
     (0, handle_missing_state_1.handleMissingState)(json);
@@ -379,14 +385,16 @@ var _componentToReact = function (json, options, isSubComponent) {
     if (refs.size) {
         reactLibImports.add('useRef');
     }
-    if (json.hooks.onMount || json.hooks.onUnMount) {
+    if (((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) ||
+        ((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code) ||
+        ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.code)) {
         reactLibImports.add('useEffect');
     }
     var wrap = wrapInFragment(json) || (componentHasStyles && stylesType === 'styled-jsx');
     var nativeStyles = stylesType === 'react-native' &&
         componentHasStyles &&
         (0, react_native_1.collectReactNativeStyles)(json);
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\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    ", "function ", "(props) {\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'
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\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    ", "function ", "(props) {\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'
         ? ''
         : "\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'")
@@ -409,10 +417,12 @@ var _componentToReact = function (json, options, isSubComponent) {
                     : stateType === 'builder'
                         ? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                         : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-        : '', getContextString(json, options), getRefsString(json), getInitCode(json, options), json.hooks.onMount
-        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount, options), options), "\n          }, [])")
-        : '', json.hooks.onUnMount
-        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount, options), options), "\n          }, [])")
+        : '', getContextString(json, options), getRefsString(json), getInitCode(json, options), ((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount.code, options), options), "\n          }, [])")
+        : '', ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.code)
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUpdate.code, options), options), "\n          }, ").concat(json.hooks.onUpdate.deps, ")")
+        : '', ((_f = json.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code)
+        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount.code, options), options), "\n          }, [])")
         : '', wrap ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
         : '', wrap ? '</>' : '', !nativeStyles