@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,75 +1,65 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateOptionsApiScript = void 0;
-var get_components_used_1 = require("../../helpers/get-components-used");
-var get_custom_imports_1 = require("../../helpers/get-custom-imports");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var nullable_1 = require("../../helpers/nullable");
-var render_imports_1 = require("../../helpers/render-imports");
-var json5_1 = __importDefault(require("json5"));
-var lodash_1 = require("lodash");
-var on_mount_1 = require("../helpers/on-mount");
-var helpers_1 = require("./helpers");
-var getContextProvideString = function (json, options) {
-    return "{\n    ".concat(Object.values(json.context.set)
-        .map(function (setVal) {
-        var key = (0, helpers_1.getContextKey)(setVal);
-        return "[".concat(key, "]: ").concat((0, helpers_1.getContextValue)(setVal));
+const get_components_used_1 = require("../../helpers/get-components-used");
+const get_custom_imports_1 = require("../../helpers/get-custom-imports");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const nullable_1 = require("../../helpers/nullable");
+const render_imports_1 = require("../../helpers/render-imports");
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const on_mount_1 = require("../helpers/on-mount");
+const helpers_1 = require("./helpers");
+const getContextProvideString = (json, options) => {
+    return `{
+    ${Object.values(json.context.set)
+        .map((setVal) => {
+        const key = (0, helpers_1.getContextKey)(setVal);
+        return `[${key}]: ${(0, helpers_1.getContextValue)(setVal)}`;
     })
-        .join(','), "\n  }");
+        .join(',')}
+  }`;
 };
 function getContextInjectString(component, options) {
-    var str = '{';
-    var contextGetters = component.context.get;
-    for (var key in contextGetters) {
-        var context = contextGetters[key];
-        str += "\n      ".concat(key, ": ").concat((0, helpers_1.encodeQuotes)((0, helpers_1.getContextKey)(context)), ",\n    ");
+    let str = '{';
+    const contextGetters = component.context.get;
+    for (const key in contextGetters) {
+        const context = contextGetters[key];
+        str += `
+      ${key}: ${(0, helpers_1.encodeQuotes)((0, helpers_1.getContextKey)(context))},
+    `;
     }
     str += '}';
     return str;
 }
-var generateComponentImport = function (options) {
-    return function (componentName) {
-        if (options.asyncComponentImports) {
-            return "'".concat(componentName, "': defineAsyncComponent(").concat(componentName, ")");
-        }
-        else {
-            return "'".concat(componentName, "': ").concat(componentName);
-        }
-    };
+const generateComponentImport = (options) => (componentName) => {
+    if (options.asyncComponentImports) {
+        return `'${componentName}': defineAsyncComponent(${componentName})`;
+    }
+    else {
+        return `'${componentName}': ${componentName}`;
+    }
 };
-var generateComponents = function (componentsUsed, options) {
+const generateComponents = (componentsUsed, options) => {
     if (componentsUsed.length === 0) {
         return '';
     }
     else {
-        return "components: { ".concat(componentsUsed.map(generateComponentImport(options)).join(','), " },");
+        return `components: { ${componentsUsed.map(generateComponentImport(options)).join(',')} },`;
     }
 };
-var appendToDataString = function (_a) {
-    var dataString = _a.dataString, newContent = _a.newContent;
-    return dataString.replace(/}$/, "".concat(newContent, "}"));
-};
+const appendToDataString = ({ dataString, newContent, }) => dataString.replace(/}$/, `${newContent}}`);
 function generateOptionsApiScript(component, options, path, template, props, onUpdateWithDeps, onUpdateWithoutDeps) {
     var _a, _b, _c;
-    var localExports = component.exports;
-    var localVarAsData = [];
-    var localVarAsFunc = [];
-    var isTs = options.typescript;
+    const { exports: localExports } = component;
+    const localVarAsData = [];
+    const localVarAsFunc = [];
+    const isTs = options.typescript;
     if (localExports) {
-        Object.keys(localExports).forEach(function (key) {
+        Object.keys(localExports).forEach((key) => {
             if (localExports[key].usedInLocal) {
                 if (localExports[key].isFunction) {
                     localVarAsFunc.push(key);
@@ -80,102 +70,141 @@ function generateOptionsApiScript(component, options, path, template, props, onU
             }
         });
     }
-    var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+    let dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
         data: true,
         functions: false,
         getters: false,
     });
     // Append refs to data as { foo, bar, etc }
     dataString = appendToDataString({
-        dataString: dataString,
+        dataString,
         newContent: (0, get_custom_imports_1.getCustomImports)(component).join(','),
     });
     if (localVarAsData.length) {
-        dataString = appendToDataString({ dataString: dataString, newContent: localVarAsData.join(',') });
+        dataString = appendToDataString({ dataString, newContent: localVarAsData.join(',') });
     }
-    var getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+    const getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
         data: false,
         getters: true,
         functions: false,
     });
-    var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+    let functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
         data: false,
         getters: false,
         functions: true,
     });
-    var includeClassMapHelper = template.includes('_classStringToObject');
+    const includeClassMapHelper = template.includes('_classStringToObject');
     if (includeClassMapHelper) {
-        functionsString = functionsString.replace(/}\s*$/, "_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      }  }"));
+        functionsString = functionsString.replace(/}\s*$/, `_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;
+      }  }`);
     }
     if (localVarAsFunc.length) {
-        functionsString = functionsString.replace(/}\s*$/, "".concat(localVarAsFunc.join(','), "}"));
+        functionsString = functionsString.replace(/}\s*$/, `${localVarAsFunc.join(',')}}`);
     }
     // Component references to include in `component: { YourComponent, ... }
-    var componentsUsedInTemplate = Array.from((0, get_components_used_1.getComponentsUsed)(component))
-        .filter(function (name) { return name.length && !name.includes('.') && name[0].toUpperCase() === name[0]; })
+    const componentsUsedInTemplate = Array.from((0, get_components_used_1.getComponentsUsed)(component))
+        .filter((name) => name.length && !name.includes('.') && name[0].toUpperCase() === name[0])
         // Strip out components that compile away
-        .filter(function (name) { return !['For', 'Show', 'Fragment', 'Slot', component.name].includes(name); });
+        .filter((name) => !['For', 'Show', 'Fragment', 'Slot', component.name].includes(name));
     // get default imports from component files
-    var importedComponents = component.imports
+    const importedComponents = component.imports
         .filter(render_imports_1.checkIsComponentImport)
-        .map(function (imp) { var _a; return (_a = Object.entries(imp.imports).find(function (_a) {
-        var _ = _a[0], value = _a[1];
-        return value === 'default';
-    })) === null || _a === void 0 ? void 0 : _a[0]; })
+        .map((imp) => { var _a; return (_a = Object.entries(imp.imports).find(([_, value]) => value === 'default')) === null || _a === void 0 ? void 0 : _a[0]; })
         .filter(nullable_1.checkIsDefined);
-    var componentsUsed = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], componentsUsedInTemplate, true), importedComponents, true));
-    var getPropDefinition = function (_a) {
-        var component = _a.component, props = _a.props;
-        var propsDefinition = Array.from(props).filter(function (prop) { return prop !== 'children' && prop !== 'class'; });
-        var str = 'props: ';
+    const componentsUsed = (0, lodash_1.uniq)([...componentsUsedInTemplate, ...importedComponents]);
+    const getPropDefinition = ({ component, props, }) => {
+        const propsDefinition = Array.from(props).filter((prop) => prop !== 'children' && prop !== 'class');
+        let str = 'props: ';
         if (component.defaultProps) {
-            var defalutPropsString = propsDefinition
-                .map(function (prop) {
+            const defalutPropsString = propsDefinition
+                .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, ": { default: ").concat(value, " }");
+                return `${prop}: { default: ${value} }`;
             })
                 .join(',');
-            str += "{".concat(defalutPropsString, "}");
+            str += `{${defalutPropsString}}`;
         }
         else {
-            str += "".concat(json5_1.default.stringify(propsDefinition));
+            str += `${json5_1.default.stringify(propsDefinition)}`;
         }
-        return "".concat(str, ",");
+        return `${str},`;
     };
-    return "\n        export default ".concat(options.defineComponent ? 'defineComponent(' : '', " {\n        ").concat(!component.name
+    return `
+        export default ${options.defineComponent ? 'defineComponent(' : ''} {
+        ${!component.name
         ? ''
-        : "name: '".concat(path && ((_a = options.namePrefix) === null || _a === void 0 ? void 0 : _a.call(options, path)) ? ((_b = options.namePrefix) === null || _b === void 0 ? void 0 : _b.call(options, path)) + '-' : '').concat((0, lodash_1.kebabCase)(component.name), "',"), "\n        ").concat(generateComponents(componentsUsed, options), "\n        ").concat(props.length ? getPropDefinition({ component: component, props: props }) : '', "\n        ").concat(dataString.length < 4
+        : `name: '${path && ((_a = options.namePrefix) === null || _a === void 0 ? void 0 : _a.call(options, path)) ? ((_b = options.namePrefix) === null || _b === void 0 ? void 0 : _b.call(options, path)) + '-' : ''}${(0, lodash_1.kebabCase)(component.name)}',`}
+        ${generateComponents(componentsUsed, options)}
+        ${props.length ? getPropDefinition({ component, props }) : ''}
+        ${dataString.length < 4
         ? ''
-        : "\n        data() {\n          return ".concat(dataString, "\n        },\n        "), "\n\n        ").concat((0, lodash_1.size)(component.context.set)
-        ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
-        : '', "\n        ").concat((0, lodash_1.size)(component.context.get)
-        ? "inject: ".concat(getContextInjectString(component, options), ",")
-        : '', "\n        ").concat(((_c = component.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)
-        ? "created() {\n                ".concat(component.hooks.onInit.code, "\n              },")
-        : '', "\n        ").concat(component.hooks.onMount.length
-        ? "mounted() {\n                ".concat((0, on_mount_1.stringifySingleScopeOnMount)(component), "\n              },")
-        : '', "\n        ").concat(onUpdateWithoutDeps.length
-        ? "updated() {\n            ".concat(onUpdateWithoutDeps.map(function (hook) { return hook.code; }).join('\n'), "\n          },")
-        : '', "\n        ").concat(onUpdateWithDeps.length
-        ? "watch: {\n            ".concat(onUpdateWithDeps
-            .map(function (hook, index) {
-            return "".concat((0, helpers_1.getOnUpdateHookName)(index), ": { handler() { ").concat(hook.code, " }, immediate: true }");
-        })
-            .join(','), "\n          },")
-        : '', "\n        ").concat(component.hooks.onUnMount
-        ? "unmounted() {\n                ".concat(component.hooks.onUnMount.code, "\n              },")
-        : '', "\n\n        ").concat(getterString.length < 4
+        : `
+        data() {
+          return ${dataString}
+        },
+        `}
+
+        ${(0, lodash_1.size)(component.context.set)
+        ? `provide() {
+                const _this = this;
+                return ${getContextProvideString(component, options)}
+              },`
+        : ''}
+        ${(0, lodash_1.size)(component.context.get)
+        ? `inject: ${getContextInjectString(component, options)},`
+        : ''}
+        ${((_c = component.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)
+        ? `created() {
+                ${component.hooks.onInit.code}
+              },`
+        : ''}
+        ${component.hooks.onMount.length
+        ? `mounted() {
+                ${(0, on_mount_1.stringifySingleScopeOnMount)(component)}
+              },`
+        : ''}
+        ${onUpdateWithoutDeps.length
+        ? `updated() {
+            ${onUpdateWithoutDeps.map((hook) => hook.code).join('\n')}
+          },`
+        : ''}
+        ${onUpdateWithDeps.length
+        ? `watch: {
+            ${onUpdateWithDeps
+            .map((hook, index) => `${(0, helpers_1.getOnUpdateHookName)(index)}: { handler() { ${hook.code} }, immediate: true }`)
+            .join(',')}
+          },`
+        : ''}
+        ${component.hooks.onUnMount
+        ? `unmounted() {
+                ${component.hooks.onUnMount.code}
+              },`
+        : ''}
+
+        ${getterString.length < 4
         ? ''
-        : "\n          computed: ".concat(getterString, ",\n        "), "\n        ").concat(functionsString.length < 4
+        : `
+          computed: ${getterString},
+        `}
+        ${functionsString.length < 4
         ? ''
-        : "\n          methods: ".concat(functionsString, ",\n        "), "\n        ").concat(Object.entries(component.meta.vueConfig || {})
-        .map(function (_a) {
-        var k = _a[0], v = _a[1];
-        return "".concat(k, ": ").concat(v);
-    })
-        .join(','), "\n        }\n        ").concat(options.defineComponent ? ')' : '');
+        : `
+          methods: ${functionsString},
+        `}
+        ${Object.entries(component.meta.vueConfig || {})
+        .map(([k, v]) => `${k}: ${v}`)
+        .join(',')}
+        }
+        ${options.defineComponent ? ')' : ''}`;
 }
 exports.generateOptionsApiScript = generateOptionsApiScript;