@builder.io/mitosis 0.4.0 → 0.4.2

package/dist/src/generators/vue/compositionApi.js

@@ -1,100 +1,117 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCompositionApiScript = void 0;
-var dedent_1 = require("../../helpers/dedent");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var json5_1 = __importDefault(require("json5"));
-var lodash_1 = require("lodash");
-var helpers_1 = require("./helpers");
-var getCompositionPropDefinition = function (_a) {
-    var options = _a.options, component = _a.component, props = _a.props;
-    var isTs = options.typescript;
-    var str = 'const props = ';
+const dedent_1 = require("../../helpers/dedent");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const helpers_1 = require("./helpers");
+const getCompositionPropDefinition = ({ options, component, props, }) => {
+    const isTs = options.typescript;
+    let str = 'const props = ';
     if (component.defaultProps) {
-        var generic = isTs ? "<".concat(component.propsTypeRef, ">") : '';
-        var defalutPropsString = props
-            .map(function (prop) {
+        const generic = isTs ? `<${component.propsTypeRef}>` : '';
+        const defalutPropsString = props
+            .map((prop) => {
             var _a;
-            var value = component.defaultProps.hasOwnProperty(prop)
+            const value = component.defaultProps.hasOwnProperty(prop)
                 ? (_a = component.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
                 : 'undefined';
-            return "".concat(prop, ": ").concat(value);
+            return `${prop}: ${value}`;
         })
             .join(',');
-        str += "withDefaults(defineProps".concat(generic, "(), {").concat(defalutPropsString, "})");
+        str += `withDefaults(defineProps${generic}(), {${defalutPropsString}})`;
     }
     else if (isTs && component.propsTypeRef && component.propsTypeRef !== 'any') {
-        str += "defineProps<".concat(component.propsTypeRef, ">()");
+        str += `defineProps<${component.propsTypeRef}>()`;
     }
     else {
-        str += "defineProps(".concat(json5_1.default.stringify(props), ")");
+        str += `defineProps(${json5_1.default.stringify(props)})`;
     }
     return str;
 };
 function generateCompositionApiScript(component, options, template, props, onUpdateWithDeps, onUpdateWithoutDeps) {
     var _a, _b, _c, _d, _e, _f;
-    var isTs = options.typescript;
-    var refs = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+    const isTs = options.typescript;
+    let refs = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
         data: true,
         functions: false,
         getters: false,
         format: 'variables',
-        valueMapper: function (code, _, typeParameter) {
-            return isTs && typeParameter ? "ref<".concat(typeParameter, ">(").concat(code, ")") : "ref(".concat(code, ")");
-        },
+        valueMapper: (code, _, typeParameter) => isTs && typeParameter ? `ref<${typeParameter}>(${code})` : `ref(${code})`,
         keyPrefix: 'const',
     });
-    var methods = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+    let methods = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
         data: false,
         getters: false,
         functions: true,
         format: 'variables',
     });
     if (template.includes('_classStringToObject')) {
-        methods += " function _classStringToObject(str".concat(isTs ? ': string' : '', ") {\n      const obj").concat(isTs ? ': Record<string, boolean>' : '', " = {};\n      if (typeof str !== 'string') { return obj }\n      const classNames = str.trim().split(/\\s+/);\n      for (const name of classNames) {\n        obj[name] = true;\n      }\n      return obj;\n    } ");
+        methods += ` function _classStringToObject(str${isTs ? ': string' : ''}) {
+      const obj${isTs ? ': Record<string, boolean>' : ''} = {};
+      if (typeof str !== 'string') { return obj }
+      const classNames = str.trim().split(/\\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    } `;
     }
-    var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
-    var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.entries(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
-        var key = _a[0], context = _a[1];
-        return "const ".concat(key, " = inject(").concat((0, helpers_1.getContextKey)(context), ")");
-    }).join('\n'), (_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (contextSet) {
-        var contextValue = (0, helpers_1.getContextValue)(contextSet);
-        var key = (0, helpers_1.getContextKey)(contextSet);
-        return "provide(".concat(key, ", ").concat(contextValue, ")");
-    }).join('\n'), (_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map(function (key) {
+    const getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'getter'));
+    let str = (0, dedent_1.dedent) `
+    ${props.length ? getCompositionPropDefinition({ component, props, options }) : ''}
+    ${refs}
+
+    ${(_a = Object.entries(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(([key, context]) => {
+        return `const ${key} = inject(${(0, helpers_1.getContextKey)(context)})`;
+    }).join('\n')}
+
+    ${(_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map((contextSet) => {
+        const contextValue = (0, helpers_1.getContextValue)(contextSet);
+        const key = (0, helpers_1.getContextKey)(contextSet);
+        return `provide(${key}, ${contextValue})`;
+    }).join('\n')}
+
+    ${(_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map((key) => {
         if (isTs) {
-            return "const ".concat(key, " = ref<").concat(component.refs[key].typeParameter, ">()");
+            return `const ${key} = ref<${component.refs[key].typeParameter}>()`;
         }
         else {
-            return "const ".concat(key, " = ref(null)");
+            return `const ${key} = ref(null)`;
         }
-    }).join('\n'), (_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : '', component.hooks.onMount.map(function (hook) { return "onMounted(() => { ".concat(hook.code, " })"); }).join('\n'), !((_f = component.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code)
+    }).join('\n')}
+    ${(_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : ''}
+    ${component.hooks.onMount.map((hook) => `onMounted(() => { ${hook.code} })`).join('\n')}
+    ${!((_f = component.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code)
         ? ''
-        : "onUnmounted(() => { ".concat(component.hooks.onUnMount.code, "})"), (getterKeys === null || getterKeys === void 0 ? void 0 : getterKeys.map(function (key) {
+        : `onUnmounted(() => { ${component.hooks.onUnMount.code}})`}
+    ${(getterKeys === null || getterKeys === void 0 ? void 0 : getterKeys.map((key) => {
         var _a, _b;
-        var code = (_b = (_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.toString();
+        const code = (_b = (_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.toString();
         if (!code) {
             return '';
         }
         // transform `foo() { return this.bar }` to `() => { return bar.value }`
-        var getterAsFunction = code.replace(key, '').trim().replace(/^\(\)/, '() =>');
-        var computedCode = "const ".concat(key, " = computed(").concat(getterAsFunction, ")");
+        const getterAsFunction = code.replace(key, '').trim().replace(/^\(\)/, '() =>');
+        const computedCode = `const ${key} = computed(${getterAsFunction})`;
         return computedCode;
-    }).join('\n')) || '', (onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.map(function (hook) { return "onUpdated(() => {".concat(hook.code, "})"); }).join('\n')) || '', (onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.map(function (hook) {
-        return "watch(() => ".concat((0, helpers_1.processBinding)({
+    }).join('\n')) || ''}
+
+    ${(onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.map((hook) => `onUpdated(() => {${hook.code}})`).join('\n')) || ''}
+
+    ${(onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.map((hook) => {
+        return `watch(() => ${(0, helpers_1.processBinding)({
             code: hook.deps || '',
-            options: options,
+            options,
             json: component,
-        }), ", () => { ").concat(hook.code, " }, {immediate: true})");
-    }).join('\n')) || '', methods !== null && methods !== void 0 ? methods : '');
+        })}, () => { ${hook.code} }, {immediate: true})`;
+    }).join('\n')) || ''}
+    ${methods !== null && methods !== void 0 ? methods : ''}
+  `;
     return str;
 }
 exports.generateCompositionApiScript = generateCompositionApiScript;
-var templateObject_1;

package/dist/src/generators/vue/helpers.js

@@ -1,82 +1,66 @@
 "use strict";
-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));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getContextKey = exports.checkIfContextHasStrName = exports.getContextValue = exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.mapMitosisComponentToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
-var babel_transform_1 = require("../../helpers/babel-transform");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var patterns_1 = require("../../helpers/patterns");
-var replace_identifiers_1 = require("../../helpers/replace-identifiers");
-var slots_1 = require("../../helpers/slots");
-var core_1 = require("@babel/core");
-var function_1 = require("fp-ts/lib/function");
-var lodash_1 = require("lodash");
-var html_tags_1 = require("../../constants/html_tags");
-var addPropertiesToJson = function (properties) {
-    return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
-};
+const babel_transform_1 = require("../../helpers/babel-transform");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const patterns_1 = require("../../helpers/patterns");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const slots_1 = require("../../helpers/slots");
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const lodash_1 = require("lodash");
+const html_tags_1 = require("../../constants/html_tags");
+const addPropertiesToJson = (properties) => (json) => ({
+    ...json,
+    properties: {
+        ...json.properties,
+        ...properties,
+    },
+});
 exports.addPropertiesToJson = addPropertiesToJson;
-var addBindingsToJson = function (bindings) {
-    return function (json) { return (__assign(__assign({}, json), { bindings: __assign(__assign({}, json.bindings), bindings) })); };
-};
+const addBindingsToJson = (bindings) => (json) => ({
+    ...json,
+    bindings: {
+        ...json.bindings,
+        ...bindings,
+    },
+});
 exports.addBindingsToJson = addBindingsToJson;
-var ON_UPDATE_HOOK_NAME = 'onUpdateHook';
-var getOnUpdateHookName = function (index) { return ON_UPDATE_HOOK_NAME + "".concat(index); };
+const ON_UPDATE_HOOK_NAME = 'onUpdateHook';
+const getOnUpdateHookName = (index) => ON_UPDATE_HOOK_NAME + `${index}`;
 exports.getOnUpdateHookName = getOnUpdateHookName;
-var invertBooleanExpression = function (expression) { return "!Boolean(".concat(expression, ")"); };
+const invertBooleanExpression = (expression) => `!Boolean(${expression})`;
 exports.invertBooleanExpression = invertBooleanExpression;
 function encodeQuotes(string) {
     return string.replace(/"/g, '&quot;');
 }
 exports.encodeQuotes = encodeQuotes;
-var mapMitosisComponentToKebabCase = function (componentName) {
-    return componentName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-};
+const mapMitosisComponentToKebabCase = (componentName) => componentName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 exports.mapMitosisComponentToKebabCase = mapMitosisComponentToKebabCase;
 // Transform <FooBar> to <foo-bar> as Vue2 needs
-var renameMitosisComponentsToKebabCase = function (str) {
-    return str.replace(/<\/?\w+/g, function (match) {
-        var tagName = match.replaceAll('<', '').replaceAll('/', '');
-        if (html_tags_1.VALID_HTML_TAGS.includes(tagName)) {
-            return match;
-        }
-        else {
-            return (0, exports.mapMitosisComponentToKebabCase)(match);
-        }
-    });
-};
+const renameMitosisComponentsToKebabCase = (str) => str.replace(/<\/?\w+/g, (match) => {
+    const tagName = match.replaceAll('<', '').replaceAll('/', '');
+    if (html_tags_1.VALID_HTML_TAGS.includes(tagName)) {
+        return match;
+    }
+    else {
+        return (0, exports.mapMitosisComponentToKebabCase)(match);
+    }
+});
 exports.renameMitosisComponentsToKebabCase = renameMitosisComponentsToKebabCase;
 function getContextNames(json) {
     return Object.keys(json.context.get);
 }
 exports.getContextNames = getContextNames;
 function shouldAppendValueToRef(path) {
-    var parent = path.parent, node = path.node;
+    const { parent, node } = path;
     if (core_1.types.isFunctionDeclaration(parent) && parent.id === node) {
         return false;
     }
     if (core_1.types.isCallExpression(parent)) {
         return false;
     }
-    var isMemberExpression = core_1.types.isMemberExpression(parent);
+    const isMemberExpression = core_1.types.isMemberExpression(parent);
     if (isMemberExpression &&
         core_1.types.isThisExpression(parent.object) &&
         core_1.types.isProgram(path.scope.block) &&
@@ -97,20 +81,19 @@ function shouldAppendValueToRef(path) {
     }
     return true;
 }
-var getAllRefs = function (component) {
-    var refKeys = Object.keys(component.refs);
-    var stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
-    var allKeys = __spreadArray(__spreadArray([], refKeys, true), stateKeys, true);
+const getAllRefs = (component) => {
+    const refKeys = Object.keys(component.refs);
+    const stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'property'));
+    const allKeys = [...refKeys, ...stateKeys];
     return allKeys;
 };
-function processRefs(_a) {
-    var input = _a.input, component = _a.component, options = _a.options, thisPrefix = _a.thisPrefix;
-    var refs = options.api === 'options' ? getContextNames(component) : getAllRefs(component);
+function processRefs({ input, component, options, thisPrefix, }) {
+    const refs = options.api === 'options' ? getContextNames(component) : getAllRefs(component);
     return (0, babel_transform_1.babelTransformExpression)(input, {
-        Identifier: function (path) {
-            var name = path.node.name;
+        Identifier(path) {
+            const name = path.node.name;
             if (refs.includes(name) && shouldAppendValueToRef(path)) {
-                var newValue = options.api === 'options' ? "".concat(thisPrefix, ".").concat(name) : "".concat(name, ".value");
+                const newValue = options.api === 'options' ? `${thisPrefix}.${name}` : `${name}.value`;
                 path.replaceWith(core_1.types.identifier(newValue));
             }
         },
@@ -118,54 +101,47 @@ function processRefs(_a) {
 }
 function prefixMethodsWithThis(input, component, options) {
     if (options.api === 'options') {
-        var allMethodNames = Object.entries(component.state)
-            .filter(function (_a) {
-            var _key = _a[0], value = _a[1];
-            return (value === null || value === void 0 ? void 0 : value.type) === 'function';
-        })
-            .map(function (_a) {
-            var key = _a[0];
-            return key;
-        });
+        const allMethodNames = Object.entries(component.state)
+            .filter(([_key, value]) => (value === null || value === void 0 ? void 0 : value.type) === 'function')
+            .map(([key]) => key);
         if (!allMethodNames.length)
             return input;
-        return (0, replace_identifiers_1.replaceIdentifiers)({ code: input, from: allMethodNames, to: function (name) { return "this.".concat(name); } });
+        return (0, replace_identifiers_1.replaceIdentifiers)({ code: input, from: allMethodNames, to: (name) => `this.${name}` });
     }
     else {
         return input;
     }
 }
 function optionsApiStateAndPropsReplace(name, thisPrefix, codeType) {
-    var prefixToUse = codeType === 'bindings' ? '' : thisPrefix + '.';
+    const prefixToUse = codeType === 'bindings' ? '' : thisPrefix + '.';
     if (name === 'children' || name.startsWith('children.')) {
-        return "".concat(prefixToUse, "$slots.default");
+        return `${prefixToUse}$slots.default`;
     }
     return (0, slots_1.isSlotProperty)(name)
-        ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "".concat(prefixToUse, "$slots.").concat(x); })
-        : "".concat(prefixToUse).concat(name);
+        ? (0, slots_1.replaceSlotsInString)(name, (x) => `${prefixToUse}$slots.${x}`)
+        : `${prefixToUse}${name}`;
 }
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
-var processBinding = function (_a) {
-    var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b, _c = _a.thisPrefix, thisPrefix = _c === void 0 ? 'this' : _c, codeType = _a.codeType;
+const processBinding = ({ code, options, json, preserveGetter = false, thisPrefix = 'this', codeType, }) => {
     try {
-        return (0, function_1.pipe)(code, (0, replace_identifiers_1.replacePropsIdentifier)(function (name) {
+        return (0, function_1.pipe)(code, (0, replace_identifiers_1.replacePropsIdentifier)((name) => {
             switch (options.api) {
                 // keep pointing to `props.${value}`
                 case 'composition':
-                    var slotPrefix_1 = codeType === 'bindings' ? '$slots' : 'useSlots()';
+                    const slotPrefix = codeType === 'bindings' ? '$slots' : 'useSlots()';
                     if (name === 'children' || name.startsWith('children.')) {
-                        return "".concat(slotPrefix_1, ".default");
+                        return `${slotPrefix}.default`;
                     }
                     return (0, slots_1.isSlotProperty)(name)
-                        ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "".concat(slotPrefix_1, ".").concat(x); })
+                        ? (0, slots_1.replaceSlotsInString)(name, (x) => `${slotPrefix}.${x}`)
                         : codeType === 'bindings'
                             ? name
-                            : "props.".concat(name);
+                            : `props.${name}`;
                 case 'options':
                     return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
             }
-        }), (0, replace_identifiers_1.replaceStateIdentifier)(function (name) {
+        }), (0, replace_identifiers_1.replaceStateIdentifier)((name) => {
             switch (options.api) {
                 case 'composition':
                     return name;
@@ -174,29 +150,28 @@ var processBinding = function (_a) {
             }
         }), codeType === 'bindings'
             ? function_1.identity
-            : (0, function_1.flow)(function (x) { return processRefs({ input: x, component: json, options: options, thisPrefix: thisPrefix }); }, function (x) { return prefixMethodsWithThis(x, json, options); }), preserveGetter === false ? patterns_1.stripGetter : function_1.identity);
+            : (0, function_1.flow)((x) => processRefs({ input: x, component: json, options, thisPrefix }), (x) => prefixMethodsWithThis(x, json, options)), preserveGetter === false ? patterns_1.stripGetter : function_1.identity);
     }
     catch (e) {
-        console.error('could not process bindings in ', { code: code });
+        console.error('could not process bindings in ', { code });
         throw e;
     }
 };
 exports.processBinding = processBinding;
-var getContextValue = function (_a) {
-    var name = _a.name, ref = _a.ref, value = _a.value;
-    var valueStr = value ? (0, get_state_object_string_1.stringifyContextValue)(value) : ref;
+const getContextValue = ({ name, ref, value }) => {
+    const valueStr = value ? (0, get_state_object_string_1.stringifyContextValue)(value) : ref;
     return valueStr;
 };
 exports.getContextValue = getContextValue;
-var checkIfContextHasStrName = function (context) {
+const checkIfContextHasStrName = (context) => {
     // check if the name is wrapped in single or double quotes
-    var isStrName = context.name.startsWith("'") || context.name.startsWith('"');
+    const isStrName = context.name.startsWith("'") || context.name.startsWith('"');
     return isStrName;
 };
 exports.checkIfContextHasStrName = checkIfContextHasStrName;
-var getContextKey = function (context) {
-    var isStrName = (0, exports.checkIfContextHasStrName)(context);
-    var key = isStrName ? context.name : "".concat(context.name, ".key");
+const getContextKey = (context) => {
+    const isStrName = (0, exports.checkIfContextHasStrName)(context);
+    const key = isStrName ? context.name : `${context.name}.key`;
     return key;
 };
 exports.getContextKey = getContextKey;