@builder.io/mitosis 0.4.0 → 0.4.2

package/dist/src/generators/template.js

@@ -1,27 +1,22 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToTemplate = void 0;
-var standalone_1 = require("prettier/standalone");
-var html_tags_1 = require("../constants/html_tags");
-var dedent_1 = require("../helpers/dedent");
-var fast_clone_1 = require("../helpers/fast-clone");
-var get_state_object_string_1 = require("../helpers/get-state-object-string");
-var collect_css_1 = require("../helpers/styles/collect-css");
-var plugins_1 = require("../modules/plugins");
-var mitosis_node_1 = require("../types/mitosis-node");
-var mappers = {
-    Fragment: function (json, options) {
-        return "<div>".concat(json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n'), "</div>");
+const standalone_1 = require("prettier/standalone");
+const html_tags_1 = require("../constants/html_tags");
+const dedent_1 = require("../helpers/dedent");
+const fast_clone_1 = require("../helpers/fast-clone");
+const get_state_object_string_1 = require("../helpers/get-state-object-string");
+const collect_css_1 = require("../helpers/styles/collect-css");
+const plugins_1 = require("../modules/plugins");
+const mitosis_node_1 = require("../types/mitosis-node");
+const mappers = {
+    Fragment: (json, options) => {
+        return `<div>${json.children.map((item) => blockToTemplate(item, options)).join('\n')}</div>`;
     },
 };
 // TODO: spread support
-var blockToTemplate = function (json, options) {
+const blockToTemplate = (json, options = {}) => {
     var _a, _b, _c, _d, _e;
-    if (options === void 0) { options = {}; }
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
     }
@@ -29,25 +24,25 @@ var blockToTemplate = function (json, options) {
         return json.properties._text;
     }
     if (json.bindings._text) {
-        return "${".concat((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code, "}");
+        return `\${${(_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code}}`;
     }
-    var str = '';
+    let str = '';
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        str += "${".concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, "?.map(").concat(json.scope.forName, " => `");
+        str += `\${${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}?.map(${json.scope.forName} => \``;
         if (json.children) {
-            str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
+            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
         }
         str += '`).join("")}';
     }
     else if (json.name === 'Show') {
-        str += "${!(".concat((_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code, ") ? '' : `");
+        str += `\${!(${(_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code}) ? '' : \``;
         if (json.children) {
-            str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
+            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
         }
         str += '`}';
     }
     else {
-        str += "<".concat(json.name, " ");
+        str += `<${json.name} `;
         // TODO: JS iteration or with helper
         // if (json.bindings._spread === '_spread') {
         //   str += `
@@ -56,22 +51,22 @@ var blockToTemplate = function (json, options) {
         //       {% endfor %}
         //     `;
         // }
-        for (var key in json.properties) {
-            var value = json.properties[key];
-            str += " ".concat(key, "=\"").concat(value, "\" ");
+        for (const key in json.properties) {
+            const value = json.properties[key];
+            str += ` ${key}="${value}" `;
         }
-        for (var key in json.bindings) {
+        for (const key in json.bindings) {
             if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread' || key === 'ref' || key === 'css') {
                 continue;
             }
-            var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
+            const value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
             // TODO: proper babel transform to replace. Util for this
-            var useValue = value;
+            const useValue = value;
             if (key.startsWith('on')) {
                 // Do nothing
             }
             else {
-                str += " ".concat(key, "=\"${").concat(useValue, "}\" ");
+                str += ` ${key}="\${${useValue}}" `;
             }
         }
         if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
@@ -79,55 +74,57 @@ var blockToTemplate = function (json, options) {
         }
         str += '>';
         if (json.children) {
-            str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
+            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
         }
-        str += "</".concat(json.name, ">");
+        str += `</${json.name}>`;
     }
     return str;
 };
 // TODO: add JS support similar to componentToHtml()
-var componentToTemplate = function (options) {
-    if (options === void 0) { options = {}; }
-    return function (_a) {
-        var component = _a.component;
-        var json = (0, fast_clone_1.fastClone)(component);
-        if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        var css = (0, collect_css_1.collectCss)(json);
-        if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        var str = json.children.map(function (item) { return blockToTemplate(item); }).join('\n');
-        if (css.trim().length) {
-            str += "<style>".concat(css, "</style>");
-        }
-        str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    export default function template(props) {\n      let state = ", "\n\n      return `", "`\n    }\n  \n  "], ["\n    export default function template(props) {\n      let state = ", "\n\n      return \\`", "\\`\n    }\n  \n  "])), (0, get_state_object_string_1.getStateObjectStringFromComponent)(json), str.replace(/\s+/g, ' '));
-        if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
-        }
-        if (options.prettier !== false) {
-            try {
-                str = (0, standalone_1.format)(str, {
-                    parser: 'typescript',
-                    htmlWhitespaceSensitivity: 'ignore',
-                    plugins: [
-                        // To support running in browsers
-                        require('prettier/parser-typescript'),
-                        require('prettier/parser-postcss'),
-                        require('prettier/parser-babel'),
-                    ],
-                });
-            }
-            catch (err) {
-                console.warn('Could not prettify', { string: str }, err);
-            }
+const componentToTemplate = (options = {}) => ({ component }) => {
+    let json = (0, fast_clone_1.fastClone)(component);
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    const css = (0, collect_css_1.collectCss)(json);
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    let str = json.children.map((item) => blockToTemplate(item)).join('\n');
+    if (css.trim().length) {
+        str += `<style>${css}</style>`;
+    }
+    str = (0, dedent_1.dedent) `
+    export default function template(props) {
+      let state = ${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}
+
+      return \`${str.replace(/\s+/g, ' ')}\`
+    }
+  
+  `;
+    if (options.plugins) {
+        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    if (options.prettier !== false) {
+        try {
+            str = (0, standalone_1.format)(str, {
+                parser: 'typescript',
+                htmlWhitespaceSensitivity: 'ignore',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-typescript'),
+                    require('prettier/parser-postcss'),
+                    require('prettier/parser-babel'),
+                ],
+            });
         }
-        if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
+        catch (err) {
+            console.warn('Could not prettify', { string: str }, err);
         }
-        return str;
-    };
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
 };
 exports.componentToTemplate = componentToTemplate;
-var templateObject_1;

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

@@ -4,17 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToVue = void 0;
-var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var is_children_1 = __importDefault(require("../../helpers/is-children"));
-var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var nullable_1 = require("../../helpers/nullable");
-var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
-var replace_identifiers_1 = require("../../helpers/replace-identifiers");
-var slots_1 = require("../../helpers/slots");
-var function_1 = require("fp-ts/lib/function");
-var html_tags_1 = require("../../constants/html_tags");
-var helpers_1 = require("./helpers");
-var SPECIAL_PROPERTIES = {
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const is_children_1 = __importDefault(require("../../helpers/is-children"));
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const nullable_1 = require("../../helpers/nullable");
+const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const slots_1 = require("../../helpers/slots");
+const function_1 = require("fp-ts/lib/function");
+const html_tags_1 = require("../../constants/html_tags");
+const helpers_1 = require("./helpers");
+const SPECIAL_PROPERTIES = {
     V_IF: 'v-if',
     V_FOR: 'v-for',
     V_ELSE: 'v-else',
@@ -28,173 +28,182 @@ var SPECIAL_PROPERTIES = {
  * when processBinding is executed,
  * SLOT_PREFIX from `slot` change to `$slots.`
  */
-var SLOT_PREFIX = '$slots.';
+const SLOT_PREFIX = '$slots.';
 // TODO: Maybe in the future allow defining `string | function` as values
-var BINDING_MAPPERS = {
+const BINDING_MAPPERS = {
     innerHTML: 'v-html',
 };
-var NODE_MAPPERS = {
-    Fragment: function (json, options, scope) {
-        var children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
-        var childrenStr = children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
+const NODE_MAPPERS = {
+    Fragment(json, options, scope) {
+        const children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+        const childrenStr = children.map((item) => (0, exports.blockToVue)(item, options)).join('\n');
         return childrenStr;
     },
-    For: function (_json, options) {
+    For(_json, options) {
         var _a;
-        var json = _json;
-        var keyValue = json.bindings.key || { code: 'index', type: 'single' };
-        var forValue = "(".concat(json.scope.forName, ", index) in ").concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code);
+        const json = _json;
+        const keyValue = json.bindings.key || { code: 'index', type: 'single' };
+        const forValue = `(${json.scope.forName}, index) in ${(_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code}`;
         // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
-        return "<template :key=\"".concat((0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index'), "\" v-for=\"").concat((0, helpers_1.encodeQuotes)(forValue), "\">\n        ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n      </template>");
+        return `<template :key="${(0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index')}" v-for="${(0, helpers_1.encodeQuotes)(forValue)}">
+        ${json.children.map((item) => (0, exports.blockToVue)(item, options)).join('\n')}
+      </template>`;
     },
-    Show: function (json, options, scope) {
+    Show(json, options, scope) {
         var _a;
-        var ifValue = ((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code) || '';
-        var defaultShowTemplate = "\n    <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat((0, helpers_1.encodeQuotes)(ifValue), "\">\n      ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n    </template>\n    ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
-            ? "\n        <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n          ").concat((0, exports.blockToVue)(json.meta.else, options), "\n        </template>")
-            : '', "\n    ");
+        const ifValue = ((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code) || '';
+        const defaultShowTemplate = `
+    <template ${SPECIAL_PROPERTIES.V_IF}="${(0, helpers_1.encodeQuotes)(ifValue)}">
+      ${json.children.map((item) => (0, exports.blockToVue)(item, options)).join('\n')}
+    </template>
+    ${(0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
+            ? `
+        <template ${SPECIAL_PROPERTIES.V_ELSE}>
+          ${(0, exports.blockToVue)(json.meta.else, options)}
+        </template>`
+            : ''}
+    `;
         return defaultShowTemplate;
     },
-    Slot: function (json, options) {
+    Slot(json, options) {
         var _a, _b, _c;
-        var slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
-        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'); };
+        const slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
+        const renderChildren = () => { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToVue)(item, options)).join('\n'); };
         if (!slotName) {
-            var key = Object.keys(json.bindings).find(Boolean);
+            const key = Object.keys(json.bindings).find(Boolean);
             if (!key) {
                 if (!((_b = json.children) === null || _b === void 0 ? void 0 : _b.length)) {
                     return '<slot/>';
                 }
-                return "<slot>".concat(renderChildren(), "</slot>");
+                return `<slot>${renderChildren()}</slot>`;
             }
-            return "\n        <template #".concat(key, ">\n          ").concat((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code, "\n        </template>\n      ");
+            return `
+        <template #${key}>
+          ${(_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code}
+        </template>
+      `;
         }
         if (slotName === 'default') {
-            return "<slot>".concat(renderChildren(), "</slot>");
+            return `<slot>${renderChildren()}</slot>`;
         }
-        return "<slot name=\"".concat((0, slots_1.toKebabSlot)(slotName, SLOT_PREFIX), "\">").concat(renderChildren(), "</slot>");
+        return `<slot name="${(0, slots_1.toKebabSlot)(slotName, SLOT_PREFIX)}">${renderChildren()}</slot>`;
     },
 };
-var SPECIAL_HTML_TAGS = ['style', 'script'];
-var stringifyBinding = function (node, options) {
-    return function (_a) {
-        var key = _a[0], value = _a[1];
-        var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name);
-        if (value.type === 'spread') {
-            return ''; // we handle this after
+const SPECIAL_HTML_TAGS = ['style', 'script'];
+const stringifyBinding = (node, options) => ([key, value]) => {
+    const isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name);
+    if (value.type === 'spread') {
+        return ''; // we handle this after
+    }
+    else if (key === 'class' && options.convertClassStringToObject) {
+        return `:class="_classStringToObject(${value === null || value === void 0 ? void 0 : value.code})"`;
+        // TODO: support dynamic classes as objects somehow like Vue requires
+        // https://vuejs.org/v2/guide/class-and-style.html
+    }
+    else {
+        // TODO: proper babel transform to replace. Util for this
+        const useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
+        if (key.startsWith('on') && isValidHtmlTag) {
+            // handle html native on[event] props
+            const { arguments: cusArgs = ['event'] } = value;
+            let event = key.replace('on', '').toLowerCase();
+            const isAssignmentExpression = useValue.includes('=');
+            const eventHandlerValue = (0, function_1.pipe)((0, replace_identifiers_1.replaceIdentifiers)({
+                code: useValue,
+                from: cusArgs[0],
+                to: '$event',
+            }), isAssignmentExpression ? function_1.identity : remove_surrounding_block_1.removeSurroundingBlock, remove_surrounding_block_1.removeSurroundingBlock, helpers_1.encodeQuotes);
+            const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
+            return `${eventHandlerKey}="${eventHandlerValue}"`;
+        }
+        else if (key.startsWith('on')) {
+            // handle on[custom event] props
+            const { arguments: cusArgs = ['event'] } = node.bindings[key];
+            return `:${key}="(${cusArgs.join(',')}) => ${(0, helpers_1.encodeQuotes)(useValue)}"`;
         }
-        else if (key === 'class' && options.convertClassStringToObject) {
-            return ":class=\"_classStringToObject(".concat(value === null || value === void 0 ? void 0 : value.code, ")\"");
-            // TODO: support dynamic classes as objects somehow like Vue requires
-            // https://vuejs.org/v2/guide/class-and-style.html
+        else if (key === 'ref') {
+            return `ref="${(0, helpers_1.encodeQuotes)(useValue)}"`;
+        }
+        else if (BINDING_MAPPERS[key]) {
+            return `${BINDING_MAPPERS[key]}="${(0, helpers_1.encodeQuotes)(useValue.replace(/"/g, "\\'"))}"`;
         }
         else {
-            // TODO: proper babel transform to replace. Util for this
-            var useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
-            if (key.startsWith('on') && isValidHtmlTag) {
-                // handle html native on[event] props
-                var _b = value.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
-                var event_1 = key.replace('on', '').toLowerCase();
-                var isAssignmentExpression = useValue.includes('=');
-                var eventHandlerValue = (0, function_1.pipe)((0, replace_identifiers_1.replaceIdentifiers)({
-                    code: useValue,
-                    from: cusArgs[0],
-                    to: '$event',
-                }), isAssignmentExpression ? function_1.identity : remove_surrounding_block_1.removeSurroundingBlock, remove_surrounding_block_1.removeSurroundingBlock, helpers_1.encodeQuotes);
-                var eventHandlerKey = "".concat(SPECIAL_PROPERTIES.V_ON_AT).concat(event_1);
-                return "".concat(eventHandlerKey, "=\"").concat(eventHandlerValue, "\"");
-            }
-            else if (key.startsWith('on')) {
-                // handle on[custom event] props
-                var _c = node.bindings[key].arguments, cusArgs = _c === void 0 ? ['event'] : _c;
-                return ":".concat(key, "=\"(").concat(cusArgs.join(','), ") => ").concat((0, helpers_1.encodeQuotes)(useValue), "\"");
-            }
-            else if (key === 'ref') {
-                return "ref=\"".concat((0, helpers_1.encodeQuotes)(useValue), "\"");
-            }
-            else if (BINDING_MAPPERS[key]) {
-                return "".concat(BINDING_MAPPERS[key], "=\"").concat((0, helpers_1.encodeQuotes)(useValue.replace(/"/g, "\\'")), "\"");
-            }
-            else {
-                return ":".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(useValue), "\"");
-            }
+            return `:${key}="${(0, helpers_1.encodeQuotes)(useValue)}"`;
         }
-    };
+    }
 };
-var stringifySpreads = function (_a) {
-    var node = _a.node, spreadType = _a.spreadType;
-    var spreads = Object.values(node.bindings)
+const stringifySpreads = ({ node, spreadType }) => {
+    const spreads = Object.values(node.bindings)
         .filter(nullable_1.checkIsDefined)
-        .filter(function (binding) { return binding.type === 'spread' && binding.spreadType === spreadType; })
-        .map(function (value) { return (value.code === 'props' ? '$props' : value.code); });
+        .filter((binding) => binding.type === 'spread' && binding.spreadType === spreadType)
+        .map((value) => (value.code === 'props' ? '$props' : value.code));
     if (spreads.length === 0) {
         return '';
     }
-    var stringifiedValue = spreads.length > 1 ? "{".concat(spreads.map(function (spread) { return "...".concat(spread); }).join(', '), "}") : spreads[0];
-    var key = spreadType === 'normal' ? SPECIAL_PROPERTIES.V_BIND : SPECIAL_PROPERTIES.V_ON;
-    return " ".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(stringifiedValue), "\" ");
+    const stringifiedValue = spreads.length > 1 ? `{${spreads.map((spread) => `...${spread}`).join(', ')}}` : spreads[0];
+    const key = spreadType === 'normal' ? SPECIAL_PROPERTIES.V_BIND : SPECIAL_PROPERTIES.V_ON;
+    return ` ${key}="${(0, helpers_1.encodeQuotes)(stringifiedValue)}" `;
 };
-var getBlockBindings = function (node, options) {
-    var stringifiedProperties = Object.entries(node.properties)
-        .map(function (_a) {
-        var key = _a[0], value = _a[1];
+const getBlockBindings = (node, options) => {
+    const stringifiedProperties = Object.entries(node.properties)
+        .map(([key, value]) => {
         if (key === 'className') {
             return '';
         }
         else if (key === SPECIAL_PROPERTIES.V_ELSE) {
-            return "".concat(key);
+            return `${key}`;
         }
         else if (typeof value === 'string') {
-            return "".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(value), "\"");
+            return `${key}="${(0, helpers_1.encodeQuotes)(value)}"`;
         }
     })
         .join(' ');
-    var stringifiedBindings = Object.entries(node.bindings)
+    const stringifiedBindings = Object.entries(node.bindings)
         .map(stringifyBinding(node, options))
         .join(' ');
     return [
         stringifiedProperties,
         stringifiedBindings,
-        stringifySpreads({ node: node, spreadType: 'normal' }),
-        stringifySpreads({ node: node, spreadType: 'event-handlers' }),
+        stringifySpreads({ node, spreadType: 'normal' }),
+        stringifySpreads({ node, spreadType: 'event-handlers' }),
     ].join(' ');
 };
-var blockToVue = function (node, options, scope) {
+const blockToVue = (node, options, scope) => {
     var _a;
-    var nodeMapper = NODE_MAPPERS[node.name];
+    const nodeMapper = NODE_MAPPERS[node.name];
     if (nodeMapper) {
         return nodeMapper(node, options, scope);
     }
-    if ((0, is_children_1.default)({ node: node })) {
-        return "<slot/>";
+    if ((0, is_children_1.default)({ node })) {
+        return `<slot/>`;
     }
     if (SPECIAL_HTML_TAGS.includes(node.name)) {
         // Vue doesn't allow style/script tags in templates, but does support them through dynamic components.
-        node.bindings.is = { code: "'".concat(node.name, "'"), type: 'single' };
+        node.bindings.is = { code: `'${node.name}'`, type: 'single' };
         node.name = 'component';
     }
     if (node.properties._text) {
-        return "".concat(node.properties._text);
+        return `${node.properties._text}`;
     }
-    var textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    const textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
     if (textCode) {
         if ((0, slots_1.isSlotProperty)(textCode, SLOT_PREFIX)) {
-            var slotName = (0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase();
+            const slotName = (0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase();
             if (slotName === 'default')
-                return "<slot/>";
-            return "<slot name=\"".concat(slotName, "\"/>");
+                return `<slot/>`;
+            return `<slot name="${slotName}"/>`;
         }
-        return "{{".concat(textCode, "}}");
+        return `{{${textCode}}}`;
     }
-    var str = "<".concat(node.name, " ");
+    let str = `<${node.name} `;
     str += getBlockBindings(node, options);
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(node.name)) {
         return str + ' />';
     }
     str += '>';
     if (node.children) {
-        str += node.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('');
+        str += node.children.map((item) => (0, exports.blockToVue)(item, options)).join('');
     }
-    return str + "</".concat(node.name, ">");
+    return str + `</${node.name}>`;
 };
 exports.blockToVue = blockToVue;