@builder.io/mitosis 0.4.0 → 0.4.2

package/dist/src/helpers/plugins/process-signals.js

@@ -4,28 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSignalAccessPlugin = exports.getSignalTypePlugin = exports.replaceSignalSetters = void 0;
-var core_1 = require("@babel/core");
-var generator_1 = __importDefault(require("@babel/generator"));
-var babel_transform_1 = require("../babel-transform");
-var capitalize_1 = require("../capitalize");
-var nullable_1 = require("../nullable");
-var replace_identifiers_1 = require("../replace-identifiers");
-var signals_1 = require("../signals");
-var process_code_1 = require("./process-code");
-var replaceSignalSetters = function (_a) {
-    var code = _a.code, nodeMaps = _a.nodeMaps;
-    var _loop_1 = function (from, setTo) {
+const core_1 = require("@babel/core");
+const generator_1 = __importDefault(require("@babel/generator"));
+const babel_transform_1 = require("../babel-transform");
+const capitalize_1 = require("../capitalize");
+const nullable_1 = require("../nullable");
+const replace_identifiers_1 = require("../replace-identifiers");
+const signals_1 = require("../signals");
+const process_code_1 = require("./process-code");
+const replaceSignalSetters = ({ code, nodeMaps, }) => {
+    for (const { from, setTo } of nodeMaps) {
         code = (0, babel_transform_1.babelTransformExpression)(code, {
-            AssignmentExpression: function (path) {
+            AssignmentExpression(path) {
                 if (path.node.operator !== '=')
                     return;
-                var lhs = path.node.left;
-                var rhs = path.node.right;
+                const lhs = path.node.left;
+                const rhs = path.node.right;
                 if (!core_1.types.isMemberExpression(lhs))
                     return;
                 if (!(core_1.types.isObjectExpression(rhs) || core_1.types.isIdentifier(rhs)))
                     return;
-                var signalAccess = lhs.object;
+                const signalAccess = lhs.object;
                 if (!core_1.types.isMemberExpression(signalAccess))
                     return;
                 if ((0, generator_1.default)(signalAccess).code !== (0, generator_1.default)(from).code)
@@ -37,21 +36,17 @@ var replaceSignalSetters = function (_a) {
                  * to:
                  *  a.b.setC((PREVIOUS_VALUE) => ({ ...PREVIOUS_VALUE, d: e }))
                  */
-                var setter = core_1.types.cloneNode(setTo);
+                const setter = core_1.types.cloneNode(setTo);
                 // TO-DO: replace all `value` references inside of the set logic with `PREVIOUS_VALUE`.
-                var prevValueIdentifier = core_1.types.identifier('PREVIOUS_VALUE');
-                var setFn = core_1.types.arrowFunctionExpression([prevValueIdentifier], core_1.types.objectExpression([
+                const prevValueIdentifier = core_1.types.identifier('PREVIOUS_VALUE');
+                const setFn = core_1.types.arrowFunctionExpression([prevValueIdentifier], core_1.types.objectExpression([
                     core_1.types.spreadElement(prevValueIdentifier),
                     core_1.types.objectProperty(lhs.property, rhs),
                 ]));
-                var setterExpression = core_1.types.callExpression(setter, [setFn]);
+                const setterExpression = core_1.types.callExpression(setter, [setFn]);
                 path.replaceWith(setterExpression);
             },
         });
-    };
-    for (var _i = 0, nodeMaps_1 = nodeMaps; _i < nodeMaps_1.length; _i++) {
-        var _b = nodeMaps_1[_i], from = _b.from, setTo = _b.setTo;
-        _loop_1(from, setTo);
     }
     return code;
 };
@@ -59,132 +54,126 @@ exports.replaceSignalSetters = replaceSignalSetters;
 /**
  * Processes `Signal` type imports, transforming them to the target's equivalent and adding the import to the component.
  */
-var getSignalTypePlugin = function (_a) {
-    var target = _a.target;
-    return function () { return ({
-        json: {
-            pre: function (json) {
-                var _a;
-                (0, process_code_1.createCodeProcessorPlugin)(function (codeType, json) {
-                    switch (codeType) {
-                        // Skip these for now because they break for svelte: `<svelte:element>` becomes `<svelte: element>`.
-                        // Besides, fairly impossible to endup with a Signal generic there like `<MyComponent<Signal<number>> />`.
-                        case 'dynamic-jsx-elements':
-                            return function (x) { return x; };
-                        default:
-                            return function (code) {
-                                var _a;
-                                if ((_a = json.signals) === null || _a === void 0 ? void 0 : _a.signalTypeImportName) {
-                                    return (0, signals_1.mapSignalType)({
-                                        code: code,
-                                        signalImportName: json.signals.signalTypeImportName,
-                                        target: target,
-                                    });
-                                }
-                                return code;
-                            };
-                    }
-                })(json);
-                if ((_a = json.signals) === null || _a === void 0 ? void 0 : _a.signalTypeImportName) {
-                    json.imports = json.imports || [];
-                    var signalMappedImport = (0, signals_1.getSignalMitosisImportForTarget)(target);
-                    if (signalMappedImport) {
-                        json.imports.push(signalMappedImport);
-                    }
+const getSignalTypePlugin = ({ target }) => () => ({
+    json: {
+        pre: (json) => {
+            var _a;
+            (0, process_code_1.createCodeProcessorPlugin)((codeType, json) => {
+                switch (codeType) {
+                    // Skip these for now because they break for svelte: `<svelte:element>` becomes `<svelte: element>`.
+                    // Besides, fairly impossible to endup with a Signal generic there like `<MyComponent<Signal<number>> />`.
+                    case 'dynamic-jsx-elements':
+                        return (x) => x;
+                    default:
+                        return (code) => {
+                            var _a;
+                            if ((_a = json.signals) === null || _a === void 0 ? void 0 : _a.signalTypeImportName) {
+                                return (0, signals_1.mapSignalType)({
+                                    code,
+                                    signalImportName: json.signals.signalTypeImportName,
+                                    target,
+                                });
+                            }
+                            return code;
+                        };
                 }
-            },
+            })(json);
+            if ((_a = json.signals) === null || _a === void 0 ? void 0 : _a.signalTypeImportName) {
+                json.imports = json.imports || [];
+                const signalMappedImport = (0, signals_1.getSignalMitosisImportForTarget)(target);
+                if (signalMappedImport) {
+                    json.imports.push(signalMappedImport);
+                }
+            }
         },
-    }); };
-};
+    },
+});
 exports.getSignalTypePlugin = getSignalTypePlugin;
-var getSignalMapperForTarget = function (target) {
+const getSignalMapperForTarget = (target) => {
     switch (target) {
         case 'svelte':
             return {
-                getter: function (name) { return core_1.types.identifier('$' + name); },
+                getter: (name) => core_1.types.identifier('$' + name),
             };
         case 'preact':
         case 'reactNative':
         case 'react':
         case 'solid':
             return {
-                getter: function (name) { return core_1.types.identifier(name); },
-                setter: function (name) { return core_1.types.identifier('set' + (0, capitalize_1.capitalize)(name)); },
+                getter: (name) => core_1.types.identifier(name),
+                setter: (name) => core_1.types.identifier('set' + (0, capitalize_1.capitalize)(name)),
             };
         default:
             // default case: strip the `.value` accessor
             return {
-                getter: function (name) { return core_1.types.identifier(name); },
+                getter: (name) => core_1.types.identifier(name),
             };
     }
 };
 /**
  * Processes `mySignal.value` accessors for props, context, and state.
  */
-var getSignalAccessPlugin = function (_a) {
-    var target = _a.target;
-    return function () { return ({
-        json: {
-            pre: function (x) {
-                return (0, process_code_1.createCodeProcessorPlugin)(function (_codeType, json) { return function (code) {
-                    var _a;
-                    var mapSignal = getSignalMapperForTarget(target);
-                    var nodeMaps = [];
-                    for (var propName in json.props) {
-                        if (json.props[propName].propertyType === 'reactive') {
-                            var getter = core_1.types.memberExpression(core_1.types.identifier('props'), mapSignal.getter(propName));
-                            var setter = mapSignal.setter
-                                ? core_1.types.memberExpression(core_1.types.identifier('props'), mapSignal.setter(propName))
-                                : undefined;
-                            nodeMaps.push({
-                                from: core_1.types.memberExpression(core_1.types.memberExpression(core_1.types.identifier('props'), core_1.types.identifier(propName)), core_1.types.identifier('value')),
-                                to: getter,
-                                setTo: setter,
-                            });
-                            nodeMaps.push({
-                                from: core_1.types.optionalMemberExpression(core_1.types.memberExpression(core_1.types.identifier('props'), core_1.types.identifier(propName)), core_1.types.identifier('value'), false, true),
-                                to: getter,
-                                setTo: setter,
-                            });
-                        }
-                    }
-                    for (var propName in json.context.get) {
-                        if (json.context.get[propName].type === 'reactive') {
-                            nodeMaps.push({
-                                from: core_1.types.memberExpression(core_1.types.identifier(propName), core_1.types.identifier('value')),
-                                to: mapSignal.getter(propName),
-                                setTo: mapSignal.setter ? mapSignal.setter(propName) : undefined,
-                            });
-                        }
-                    }
-                    for (var propName in json.state) {
-                        if (((_a = json.state[propName]) === null || _a === void 0 ? void 0 : _a.propertyType) === 'reactive') {
-                            var to = core_1.types.memberExpression(core_1.types.identifier('state'), mapSignal.getter(propName));
-                            var setTO = mapSignal.setter ? mapSignal.setter(propName) : undefined;
-                            nodeMaps.push({
-                                from: core_1.types.memberExpression(core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(propName)), core_1.types.identifier('value')),
-                                to: to,
-                                setTo: setTO,
-                            });
-                            nodeMaps.push({
-                                from: core_1.types.optionalMemberExpression(core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(propName)), core_1.types.identifier('value'), false, true),
-                                to: to,
-                                setTo: setTO,
-                            });
-                        }
+const getSignalAccessPlugin = ({ target }) => () => ({
+    json: {
+        pre: (x) => {
+            return (0, process_code_1.createCodeProcessorPlugin)((_codeType, json) => (code) => {
+                var _a;
+                const mapSignal = getSignalMapperForTarget(target);
+                const nodeMaps = [];
+                for (const propName in json.props) {
+                    if (json.props[propName].propertyType === 'reactive') {
+                        const getter = core_1.types.memberExpression(core_1.types.identifier('props'), mapSignal.getter(propName));
+                        const setter = mapSignal.setter
+                            ? core_1.types.memberExpression(core_1.types.identifier('props'), mapSignal.setter(propName))
+                            : undefined;
+                        nodeMaps.push({
+                            from: core_1.types.memberExpression(core_1.types.memberExpression(core_1.types.identifier('props'), core_1.types.identifier(propName)), core_1.types.identifier('value')),
+                            to: getter,
+                            setTo: setter,
+                        });
+                        nodeMaps.push({
+                            from: core_1.types.optionalMemberExpression(core_1.types.memberExpression(core_1.types.identifier('props'), core_1.types.identifier(propName)), core_1.types.identifier('value'), false, true),
+                            to: getter,
+                            setTo: setter,
+                        });
                     }
-                    var filteredNodeMaps = nodeMaps.filter(function (x) { return (0, nullable_1.checkIsDefined)(x.setTo); });
-                    // we run state-setter replacement first, because otherwise the other one will catch it.
-                    if (filteredNodeMaps.length) {
-                        code = (0, exports.replaceSignalSetters)({ code: code, nodeMaps: filteredNodeMaps });
+                }
+                for (const propName in json.context.get) {
+                    if (json.context.get[propName].type === 'reactive') {
+                        nodeMaps.push({
+                            from: core_1.types.memberExpression(core_1.types.identifier(propName), core_1.types.identifier('value')),
+                            to: mapSignal.getter(propName),
+                            setTo: mapSignal.setter ? mapSignal.setter(propName) : undefined,
+                        });
                     }
-                    if (nodeMaps.length) {
-                        code = (0, replace_identifiers_1.replaceNodes)({ code: code, nodeMaps: nodeMaps });
+                }
+                for (const propName in json.state) {
+                    if (((_a = json.state[propName]) === null || _a === void 0 ? void 0 : _a.propertyType) === 'reactive') {
+                        const to = core_1.types.memberExpression(core_1.types.identifier('state'), mapSignal.getter(propName));
+                        const setTO = mapSignal.setter ? mapSignal.setter(propName) : undefined;
+                        nodeMaps.push({
+                            from: core_1.types.memberExpression(core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(propName)), core_1.types.identifier('value')),
+                            to: to,
+                            setTo: setTO,
+                        });
+                        nodeMaps.push({
+                            from: core_1.types.optionalMemberExpression(core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(propName)), core_1.types.identifier('value'), false, true),
+                            to: to,
+                            setTo: setTO,
+                        });
                     }
-                    return code;
-                }; })(x);
-            },
+                }
+                const filteredNodeMaps = nodeMaps.filter((x) => (0, nullable_1.checkIsDefined)(x.setTo));
+                // we run state-setter replacement first, because otherwise the other one will catch it.
+                if (filteredNodeMaps.length) {
+                    code = (0, exports.replaceSignalSetters)({ code, nodeMaps: filteredNodeMaps });
+                }
+                if (nodeMaps.length) {
+                    code = (0, replace_identifiers_1.replaceNodes)({ code, nodeMaps });
+                }
+                return code;
+            })(x);
         },
-    }); };
-};
+    },
+});
 exports.getSignalAccessPlugin = getSignalAccessPlugin;

package/dist/src/helpers/plugins/process-target-blocks.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processTargetBlocks = void 0;
-var use_target_1 = require("../../parsers/jsx/hooks/use-target");
-var process_code_1 = require("./process-code");
-var getBlockForTarget = function (_a) {
-    var target = _a.target, targetBlock = _a.targetBlock;
+const use_target_1 = require("../../parsers/jsx/hooks/use-target");
+const process_code_1 = require("./process-code");
+const getBlockForTarget = ({ target, targetBlock, }) => {
     switch (target) {
         default:
             return targetBlock[target] || targetBlock['default'];
@@ -13,40 +12,39 @@ var getBlockForTarget = function (_a) {
 /**
  * Processes `useTarget()` blocks for a given target.
  */
-var processTargetBlocks = function (target) {
-    var plugin = (0, process_code_1.createCodeProcessorPlugin)(function (codeType, json, node) { return function (code, key) {
+const processTargetBlocks = (target) => {
+    const plugin = (0, process_code_1.createCodeProcessorPlugin)((codeType, json, node) => (code, key) => {
         var _a;
         if (codeType === 'properties') {
-            var matches_2 = code.includes(use_target_1.USE_TARGET_MAGIC_STRING);
-            var property = node === null || node === void 0 ? void 0 : node.properties[key];
-            if (!matches_2 || !property)
+            const matches = code.includes(use_target_1.USE_TARGET_MAGIC_STRING);
+            const property = node === null || node === void 0 ? void 0 : node.properties[key];
+            if (!matches || !property)
                 return code;
             node.bindings[key] = {
                 code: '"' + property + '"',
                 type: 'single',
             };
-            return function () {
+            return () => {
                 delete node.properties[key];
             };
         }
-        var matches = code.match(use_target_1.USE_TARGET_MAGIC_REGEX);
+        const matches = code.match(use_target_1.USE_TARGET_MAGIC_REGEX);
         if (!matches)
             return code;
-        for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {
-            var m = matches_1[_i];
+        for (const m of matches) {
             // get the captured ID of the target block
-            var targetId = (0, use_target_1.getIdFromMatch)(m);
+            const targetId = (0, use_target_1.getIdFromMatch)(m);
             if (!targetId)
                 continue;
             // find the target block in the component, or the default target block
-            var targetBlock = (_a = json.targetBlocks) === null || _a === void 0 ? void 0 : _a[targetId];
+            const targetBlock = (_a = json.targetBlocks) === null || _a === void 0 ? void 0 : _a[targetId];
             if (!targetBlock) {
-                throw new Error("Could not find `useTarget()` value in \"".concat(json.name, "\"."));
+                throw new Error(`Could not find \`useTarget()\` value in "${json.name}".`);
             }
-            var block = getBlockForTarget({ target: target, targetBlock: targetBlock });
+            const block = getBlockForTarget({ target, targetBlock });
             if (!block) {
                 if (targetBlock.settings.requiresDefault) {
-                    throw new Error("Could not find `useTarget()` value in \"".concat(json.name, "\" for target \"").concat(target, "\", and no default value was set."));
+                    throw new Error(`Could not find \`useTarget()\` value in "${json.name}" for target "${target}", and no default value was set.`);
                 }
                 else {
                     // if we don't need a default, then that means we allow for nothing to be injected, e.g. when we are in a function body.
@@ -57,7 +55,7 @@ var processTargetBlocks = function (target) {
             code = code.replaceAll(m, block.code);
         }
         return code;
-    }; }, { processProperties: true });
-    return function () { return ({ json: { pre: plugin } }); };
+    }, { processProperties: true });
+    return () => ({ json: { pre: plugin } });
 };
 exports.processTargetBlocks = processTargetBlocks;

package/dist/src/helpers/process-http-requests.js

@@ -3,17 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.processHttpRequests = void 0;
 function processHttpRequests(json) {
     var _a, _b;
-    var httpRequests = (_b = (_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests;
+    const httpRequests = (_b = (_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests;
     if (httpRequests) {
-        for (var key in httpRequests) {
+        for (const key in httpRequests) {
             if (!json.state[key]) {
                 json.state[key] = { code: 'null', type: 'property', propertyType: 'normal' };
             }
-            var value = httpRequests[key];
+            const value = httpRequests[key];
             // TODO: unravel our proxy. aka parse out methods, header, etc
             // and remove our proxy from being used anymore
             json.hooks.onMount.push({
-                code: "\n        fetch(\"".concat(value, "\").then(res => res.json()).then(result => {\n          state.").concat(key, " = result;\n        })\n        "),
+                code: `
+        fetch("${value}").then(res => res.json()).then(result => {
+          state.${key} = result;
+        })
+        `,
             });
         }
     }

package/dist/src/helpers/remove-surrounding-block.js

@@ -7,7 +7,7 @@ exports.removeSurroundingBlock = void 0;
  * `{ const foo = "bar" }` -> `const foo = "bar"`
  */
 function removeSurroundingBlock(code) {
-    var str = code;
+    let str = code;
     // Object literal like { foo: ... } should not be unwrapped
     if (str.match(/^\s*{\s*[a-z0-9]+:/i)) {
         return str;
@@ -16,7 +16,7 @@ function removeSurroundingBlock(code) {
     if (str.replace(/\s+/g, '') === '{}') {
         return str;
     }
-    var bracesRegex = /^\s*\{([\s\S]+)\}\s*$/;
+    const bracesRegex = /^\s*\{([\s\S]+)\}\s*$/;
     if (bracesRegex.test(str)) {
         return str.replace(bracesRegex, '$1');
     }