@builder.io/mitosis 0.4.0 → 0.4.2

package/dist/src/generators/marko/generate.js

@@ -1,98 +1,87 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markoFormatHtml = exports.postprocessHtml = exports.preprocessHtml = exports.componentToMarko = void 0;
-var dash_case_1 = require("../../helpers/dash-case");
-var dedent_1 = require("../../helpers/dedent");
-var fast_clone_1 = require("../../helpers/fast-clone");
-var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var get_refs_1 = require("../../helpers/get-refs");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var has_props_1 = require("../../helpers/has-props");
-var indent_1 = require("../../helpers/indent");
-var map_refs_1 = require("../../helpers/map-refs");
-var merge_options_1 = require("../../helpers/merge-options");
-var for_1 = require("../../helpers/nodes/for");
-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 collect_css_1 = require("../../helpers/styles/collect-css");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var hash_sum_1 = __importDefault(require("hash-sum"));
-var lodash_1 = require("lodash");
-var standalone_1 = require("prettier/standalone");
-var html_tags_1 = require("../../constants/html_tags");
-var plugins_1 = require("../../modules/plugins");
-var on_mount_1 = require("../helpers/on-mount");
+const dash_case_1 = require("../../helpers/dash-case");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const get_refs_1 = require("../../helpers/get-refs");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const has_props_1 = require("../../helpers/has-props");
+const indent_1 = require("../../helpers/indent");
+const map_refs_1 = require("../../helpers/map-refs");
+const merge_options_1 = require("../../helpers/merge-options");
+const for_1 = require("../../helpers/nodes/for");
+const render_imports_1 = require("../../helpers/render-imports");
+const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const mitosis_node_1 = require("../../types/mitosis-node");
+const hash_sum_1 = __importDefault(require("hash-sum"));
+const lodash_1 = require("lodash");
+const standalone_1 = require("prettier/standalone");
+const html_tags_1 = require("../../constants/html_tags");
+const plugins_1 = require("../../modules/plugins");
+const on_mount_1 = require("../helpers/on-mount");
 // Having issues with this, so off for now
-var USE_MARKO_PRETTIER = false;
+const USE_MARKO_PRETTIER = false;
 /**
  * Return the names of properties (basic literal values) on state
  */
 function getStatePropertyNames(json) {
-    return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
+    return Object.keys(json.state).filter((key) => { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
 }
-var blockToMarko = function (json, options) {
+const blockToMarko = (json, options) => {
     var _a, _b, _c, _d, _e;
     if (json.properties._text) {
         return json.properties._text;
     }
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        return "${".concat(processBinding(options.component, (_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code), "}");
+        return `\${${processBinding(options.component, (_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code)}}`;
     }
     if (json.name === 'Fragment') {
-        return json.children.map(function (child) { return blockToMarko(child, options); }).join('\n');
+        return json.children.map((child) => blockToMarko(child, options)).join('\n');
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        var forArguments = (0, for_1.getForArguments)(json).join(',');
-        return "<for|".concat(forArguments, "| of=(").concat(processBinding(options.component, (_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), ")>\n      ").concat(json.children
+        const forArguments = (0, for_1.getForArguments)(json).join(',');
+        return `<for|${forArguments}| of=(${processBinding(options.component, (_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code)})>
+      ${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return blockToMarko(item, options); })
-            .join('\n'), "\n    </for>");
+            .map((item) => blockToMarko(item, options))
+            .join('\n')}
+    </for>`;
     }
     else if (json.name === 'Show') {
-        return "<if(".concat(processBinding(options.component, (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(json.children
+        return `<if(${processBinding(options.component, (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code)})>
+      ${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return blockToMarko(item, options); })
-            .join('\n'), "</if>\n    ").concat(!json.meta.else ? '' : "<else>".concat(blockToMarko(json.meta.else, options), "</else>"));
+            .map((item) => blockToMarko(item, options))
+            .join('\n')}</if>
+    ${!json.meta.else ? '' : `<else>${blockToMarko(json.meta.else, options)}</else>`}`;
     }
-    var str = '';
-    str += "<".concat(json.name, " ");
-    for (var key in json.properties) {
-        var value = json.properties[key];
-        str += " ".concat(key, "=\"").concat(value, "\" ");
+    let str = '';
+    str += `<${json.name} `;
+    for (const key in json.properties) {
+        const value = json.properties[key];
+        str += ` ${key}="${value}" `;
     }
-    for (var key in json.bindings) {
-        var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g, type = _f.type;
+    for (const key in json.bindings) {
+        const { code, arguments: cusArgs = ['event'], type } = json.bindings[key];
         if (type === 'spread') {
-            str += " ...(".concat(code, ") ");
+            str += ` ...(${code}) `;
         }
         else if (key === 'ref') {
-            str += " key=\"".concat((0, lodash_1.camelCase)(code), "\" ");
+            str += ` key="${(0, lodash_1.camelCase)(code)}" `;
         }
         else if (key.startsWith('on')) {
-            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-            str += " ".concat((0, dash_case_1.dashCase)(useKey), "=(").concat(cusArgs.join(','), " => ").concat(processBinding(options.component, code), ") ");
+            const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            str += ` ${(0, dash_case_1.dashCase)(useKey)}=(${cusArgs.join(',')} => ${processBinding(options.component, code)}) `;
         }
         else if (key !== 'innerHTML') {
-            str += " ".concat(key, "=(").concat(processBinding(options.component, code), ") ");
+            str += ` ${key}=(${processBinding(options.component, code)}) `;
         }
     }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
@@ -100,24 +89,23 @@ var blockToMarko = function (json, options) {
     }
     str += '>';
     if ((_e = json.bindings.innerHTML) === null || _e === void 0 ? void 0 : _e.code) {
-        str += "$!{".concat(processBinding(options.component, json.bindings.innerHTML.code), "}");
+        str += `$!{${processBinding(options.component, json.bindings.innerHTML.code)}}`;
     }
     if (json.children) {
-        str += json.children.map(function (item) { return blockToMarko(item, options); }).join('\n');
+        str += json.children.map((item) => blockToMarko(item, options)).join('\n');
     }
-    str += "</".concat(json.name, ">");
+    str += `</${json.name}>`;
     return str;
 };
-function processBinding(json, code, type) {
-    if (type === void 0) { type = 'attribute'; }
+function processBinding(json, code, type = 'attribute') {
     try {
         return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
             replaceWith: type === 'state' ? 'input.' : type === 'class' ? 'this.input.' : 'input.',
             includeProps: true,
             includeState: false,
         }), {
-            replaceWith: function (key) {
-                var isProperty = getStatePropertyNames(json).includes(key);
+            replaceWith: (key) => {
+                const isProperty = getStatePropertyNames(json).includes(key);
                 if (isProperty) {
                     return (type === 'state' || type === 'class' ? 'this.state.' : 'state.') + key;
                 }
@@ -132,118 +120,141 @@ function processBinding(json, code, type) {
         return code;
     }
 }
-var componentToMarko = function (userOptions) {
-    if (userOptions === void 0) { userOptions = {}; }
-    return function (_a) {
-        var _b, _c;
-        var component = _a.component;
-        var json = (0, fast_clone_1.fastClone)(component);
-        var options = (0, merge_options_1.initializeOptions)({
-            target: 'marko',
-            component: component,
-            defaults: __assign(__assign({}, userOptions), { component: json }),
-        });
-        if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        var css = (0, collect_css_1.collectCss)(json, {
-            prefix: (0, hash_sum_1.default)(json),
-        });
-        var domRefs = (0, get_refs_1.getRefs)(json);
-        (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat((0, lodash_1.camelCase)(refName)); });
-        if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
+const componentToMarko = (userOptions = {}) => ({ component }) => {
+    var _a, _b;
+    let json = (0, fast_clone_1.fastClone)(component);
+    const options = (0, merge_options_1.initializeOptions)({
+        target: 'marko',
+        component,
+        defaults: {
+            ...userOptions,
+            component: json,
+        },
+    });
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    let css = (0, collect_css_1.collectCss)(json, {
+        prefix: (0, hash_sum_1.default)(json),
+    });
+    const domRefs = (0, get_refs_1.getRefs)(json);
+    (0, map_refs_1.mapRefs)(json, (refName) => `this.${(0, lodash_1.camelCase)(refName)}`);
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    (0, strip_meta_properties_1.stripMetaProperties)(json);
+    const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        format: 'object',
+        data: true,
+        functions: false,
+        getters: false,
+        valueMapper: (code) => processBinding(json, code, 'state'),
+    });
+    const thisHasProps = (0, has_props_1.hasProps)(json);
+    const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        format: 'class',
+        data: false,
+        functions: true,
+        getters: true,
+        valueMapper: (code) => processBinding(json, code, 'class'),
+    });
+    const hasState = dataString.trim().length > 5;
+    if (options.prettier !== false) {
+        try {
+            css = (0, standalone_1.format)(css, {
+                parser: 'css',
+                plugins: [require('prettier/parser-postcss')],
+            });
         }
-        (0, strip_meta_properties_1.stripMetaProperties)(json);
-        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-            format: 'object',
-            data: true,
-            functions: false,
-            getters: false,
-            valueMapper: function (code) { return processBinding(json, code, 'state'); },
-        });
-        var thisHasProps = (0, has_props_1.hasProps)(json);
-        var methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-            format: 'class',
-            data: false,
-            functions: true,
-            getters: true,
-            valueMapper: function (code) { return processBinding(json, code, 'class'); },
-        });
-        var hasState = dataString.trim().length > 5;
-        if (options.prettier !== false) {
-            try {
-                css = (0, standalone_1.format)(css, {
-                    parser: 'css',
-                    plugins: [require('prettier/parser-postcss')],
-                });
-            }
-            catch (err) {
-                console.warn('Could not format css', err);
-            }
+        catch (err) {
+            console.warn('Could not format css', err);
         }
-        var jsString = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({
-            explicitImportFileExtension: options.explicitImportFileExtension,
-            component: json,
-            target: 'marko',
-        }), methodsString, !hasState
-            ? ''
-            : "onCreate(".concat(thisHasProps ? 'input' : '', ") {\n          this.state = ").concat(dataString, "\n        }"), Array.from(domRefs)
-            .map(function (refName) { return "get ".concat((0, lodash_1.camelCase)(refName), "() { \n            return this.getEl('").concat((0, lodash_1.camelCase)(refName), "')\n          }"); })
-            .join('\n'), !json.hooks.onMount.length
-            ? ''
-            : "onMount() { ".concat(processBinding(json, (0, on_mount_1.stringifySingleScopeOnMount)(json), 'class'), " }"), !((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code)
-            ? ''
-            : "onDestroy() { ".concat(processBinding(json, json.hooks.onUnMount.code, 'class'), " }"), !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)
-            ? ''
-            : "onRender() { ".concat(json.hooks.onUpdate
-                .map(function (hook) { return processBinding(json, hook.code, 'class'); })
-                .join('\n\n'), " }"));
-        var htmlString = json.children.map(function (item) { return blockToMarko(item, options); }).join('\n');
-        var cssString = css.length
-            ? "style { \n  ".concat((0, indent_1.indent)(css, 2).trim(), "\n}")
-            : '';
-        if (options.prettier !== false && !USE_MARKO_PRETTIER) {
-            try {
-                htmlString = markoFormatHtml(htmlString);
-            }
-            catch (err) {
-                console.warn('Could not format html', err);
-            }
-            try {
-                jsString = (0, standalone_1.format)(jsString, {
-                    parser: 'typescript',
-                    plugins: [require('prettier/parser-typescript')],
-                });
-            }
-            catch (err) {
-                console.warn('Could not format js', err);
-            }
+    }
+    let jsString = (0, dedent_1.dedent) `
+    ${(0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
+        component: json,
+        target: 'marko',
+    })}
+
+    class {
+        ${methodsString}
+
+        ${!hasState
+        ? ''
+        : `onCreate(${thisHasProps ? 'input' : ''}) {
+          this.state = ${dataString}
+        }`}
+
+        ${Array.from(domRefs)
+        .map((refName) => `get ${(0, lodash_1.camelCase)(refName)}() { 
+            return this.getEl('${(0, lodash_1.camelCase)(refName)}')
+          }`)
+        .join('\n')}
+      
+        ${!json.hooks.onMount.length
+        ? ''
+        : `onMount() { ${processBinding(json, (0, on_mount_1.stringifySingleScopeOnMount)(json), 'class')} }`}
+        ${!((_a = json.hooks.onUnMount) === null || _a === void 0 ? void 0 : _a.code)
+        ? ''
+        : `onDestroy() { ${processBinding(json, json.hooks.onUnMount.code, 'class')} }`}
+        ${!((_b = json.hooks.onUpdate) === null || _b === void 0 ? void 0 : _b.length)
+        ? ''
+        : `onRender() { ${json.hooks.onUpdate
+            .map((hook) => processBinding(json, hook.code, 'class'))
+            .join('\n\n')} }`}
+    }
+  `;
+    let htmlString = json.children.map((item) => blockToMarko(item, options)).join('\n');
+    const cssString = css.length
+        ? `style { 
+  ${(0, indent_1.indent)(css, 2).trim()}
+}`
+        : '';
+    if (options.prettier !== false && !USE_MARKO_PRETTIER) {
+        try {
+            htmlString = markoFormatHtml(htmlString);
         }
-        htmlString = htmlString
-            // Convert on-click=(...) -> on-click(...)
-            .replace(/(on-[a-z]+)=\(/g, function (_match, group) { return group + '('; })
-            // Fix a weird edge case where </if> becomes </if \n > which is invalid in marko
-            .replace(/<\/([a-z]+)\s+>/gi, '</$1>');
-        var finalStr = "\n".concat(jsString, "\n").concat(cssString, "\n").concat(htmlString, "\n    ")
-            .replace(/\n{3,}/g, '\n\n')
-            .trim();
-        if (options.plugins) {
-            finalStr = (0, plugins_1.runPreCodePlugins)({ json: json, code: finalStr, plugins: options.plugins });
+        catch (err) {
+            console.warn('Could not format html', err);
         }
-        if (USE_MARKO_PRETTIER && options.prettier !== false) {
-            // Commented out for now as there are strange module import issues as
-            // a result, causing builds to fail
-            // format(finalStr, {
-            //   parser: 'marko',
-            //   plugins: [require('prettier-plugin-marko')],
-            // });
+        try {
+            jsString = (0, standalone_1.format)(jsString, {
+                parser: 'typescript',
+                plugins: [require('prettier/parser-typescript')],
+            });
         }
-        if (options.plugins) {
-            finalStr = (0, plugins_1.runPostCodePlugins)({ json: json, code: finalStr, plugins: options.plugins });
+        catch (err) {
+            console.warn('Could not format js', err);
         }
-        return finalStr;
-    };
+    }
+    htmlString = htmlString
+        // Convert on-click=(...) -> on-click(...)
+        .replace(/(on-[a-z]+)=\(/g, (_match, group) => group + '(')
+        // Fix a weird edge case where </if> becomes </if \n > which is invalid in marko
+        .replace(/<\/([a-z]+)\s+>/gi, '</$1>');
+    let finalStr = `
+${jsString}
+${cssString}
+${htmlString}
+    `
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    if (options.plugins) {
+        finalStr = (0, plugins_1.runPreCodePlugins)({ json, code: finalStr, plugins: options.plugins });
+    }
+    if (USE_MARKO_PRETTIER && options.prettier !== false) {
+        // Commented out for now as there are strange module import issues as
+        // a result, causing builds to fail
+        // format(finalStr, {
+        //   parser: 'marko',
+        //   plugins: [require('prettier-plugin-marko')],
+        // });
+    }
+    if (options.plugins) {
+        finalStr = (0, plugins_1.runPostCodePlugins)({ json, code: finalStr, plugins: options.plugins });
+    }
+    return finalStr;
 };
 exports.componentToMarko = componentToMarko;
 /**
@@ -258,11 +269,11 @@ function preprocessHtml(htmlString) {
         .replace(/<for\|/g, '<for |')
         // Convert <if(foo) to <if _="foo", otherwise HTML will think the tag is not just <if> and complain
         // when we close it with </if>
-        .replace(/<if\(([\s\S]+?)\)\s*>/g, function (_match, group) {
-        return "<if _=\"".concat(encodeAttributeValue(group), "\">");
+        .replace(/<if\(([\s\S]+?)\)\s*>/g, (_match, group) => {
+        return `<if _="${encodeAttributeValue(group)}">`;
     })
-        .replace(/=\(([\s\S]*?)\)(\s*[a-z\/>])/g, function (_match, group, after) {
-        return "=\"(".concat(encodeAttributeValue(group), ")\"").concat(after);
+        .replace(/=\(([\s\S]*?)\)(\s*[a-z\/>])/g, (_match, group, after) => {
+        return `="(${encodeAttributeValue(group)})"${after}`;
     }));
 }
 exports.preprocessHtml = preprocessHtml;
@@ -274,11 +285,11 @@ exports.preprocessHtml = preprocessHtml;
 function postprocessHtml(htmlString) {
     return htmlString
         .replace(/<for \|/g, '<for|')
-        .replace(/<if _="([\s\S]+?)"\s*>/g, function (_match, group) {
-        return "<if(".concat(decodeAttributeValue(group), ")>");
+        .replace(/<if _="([\s\S]+?)"\s*>/g, (_match, group) => {
+        return `<if(${decodeAttributeValue(group)})>`;
     })
-        .replace(/="\(([\s\S]*?)\)"(\s*[a-z\/>])/g, function (_match, group, after) {
-        return "=(".concat(decodeAttributeValue(group), ")").concat(after);
+        .replace(/="\(([\s\S]*?)\)"(\s*[a-z\/>])/g, (_match, group, after) => {
+        return `=(${decodeAttributeValue(group)})${after}`;
     });
 }
 exports.postprocessHtml = postprocessHtml;
@@ -301,4 +312,3 @@ function markoFormatHtml(htmlString) {
     }));
 }
 exports.markoFormatHtml = markoFormatHtml;
-var templateObject_1;

package/dist/src/generators/minify.js

@@ -1,14 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.minify = void 0;
-function minify(messageParts) {
-    var expressions = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        expressions[_i - 1] = arguments[_i];
-    }
-    var text = '';
-    for (var i = 0; i < messageParts.length; i++) {
-        var part = messageParts[i];
+function minify(messageParts, ...expressions) {
+    let text = '';
+    for (let i = 0; i < messageParts.length; i++) {
+        const part = messageParts[i];
         text += part;
         if (i < expressions.length) {
             text += expressions[i];
@@ -19,6 +15,6 @@ function minify(messageParts) {
         .replace(/^\s+/, '')
         .replace(/\s+$/, '')
         .replace(/\s+/g, ' ')
-        .replace(/\s?([,;\:\-\{\}\(\)\<\>])\s?/g, function (_, match) { return match; });
+        .replace(/\s?([,;\:\-\{\}\(\)\<\>])\s?/g, (_, match) => match);
 }
 exports.minify = minify;