@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -4,153 +4,159 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
-var bindings_1 = require("../../helpers/bindings");
-var is_children_1 = __importDefault(require("../../helpers/is-children"));
-var is_upper_case_1 = require("../../helpers/is-upper-case");
-var for_1 = require("../../helpers/nodes/for");
-var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
-var slots_1 = require("../../helpers/slots");
-var html_tags_1 = require("../../constants/html_tags");
-var helpers_1 = require("./helpers");
+const bindings_1 = require("../../helpers/bindings");
+const is_children_1 = __importDefault(require("../../helpers/is-children"));
+const is_upper_case_1 = require("../../helpers/is-upper-case");
+const for_1 = require("../../helpers/nodes/for");
+const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+const slots_1 = require("../../helpers/slots");
+const html_tags_1 = require("../../constants/html_tags");
+const helpers_1 = require("./helpers");
 /**
  * blockToSvelte executed after stripStateAndProps,
  * when stripStateAndProps is executed,
  * SLOT_PREFIX from `slot` change to `$$slots.`
  */
-var SLOT_PREFIX = '$$slots.';
-var mappers = {
-    style: function (_a) {
-        var _b;
-        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        var props = '';
-        for (var key in json.properties) {
-            var value = json.properties[key];
-            props += " ".concat(key, "=\"").concat(value, "\" ");
+const SLOT_PREFIX = '$$slots.';
+const mappers = {
+    style: ({ json, options, parentComponent }) => {
+        var _a;
+        let props = '';
+        for (const key in json.properties) {
+            const value = json.properties[key];
+            props += ` ${key}="${value}" `;
         }
-        var bindings = '';
-        for (var key in json.bindings) {
-            var value = json.bindings[key];
+        let bindings = '';
+        for (const key in json.bindings) {
+            const value = json.bindings[key];
             if (value && key !== 'innerHTML') {
-                bindings += " ".concat(key, "=${").concat(value.code, "} ");
+                bindings += ` ${key}=\${${value.code}} `;
             }
         }
-        var innerText = ((_b = json.bindings.innerHTML) === null || _b === void 0 ? void 0 : _b.code) || '';
+        const innerText = ((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code) || '';
         // We have to obfuscate `"style"` due to a limitation in the svelte-preprocessor plugin.
         // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-        return "{@html `<${'style'} ".concat(bindings, " ").concat(props, ">${").concat(innerText, "}<${'/style'}>`}");
+        return `{@html \`<\${'style'} ${bindings} ${props}>\${${innerText}}<\${'/style'}>\`}`;
     },
-    script: function (_a) {
-        var _b;
-        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        var props = '';
-        for (var key in json.properties) {
-            var value = json.properties[key];
-            props += " ".concat(key, "=\"").concat(value, "\" ");
+    script: ({ json, options, parentComponent }) => {
+        var _a;
+        let props = '';
+        for (const key in json.properties) {
+            const value = json.properties[key];
+            props += ` ${key}="${value}" `;
         }
-        var bindings = '';
-        for (var key in json.bindings) {
-            var value = json.bindings[key];
+        let bindings = '';
+        for (const key in json.bindings) {
+            const value = json.bindings[key];
             if (value && key !== 'innerHTML') {
-                bindings += " ".concat(key, "=${").concat(value.code, "} ");
+                bindings += ` ${key}=\${${value.code}} `;
             }
         }
-        var innerText = ((_b = json.bindings.innerHTML) === null || _b === void 0 ? void 0 : _b.code) || '';
-        return "{@html `<script ".concat(bindings, " ").concat(props, ">${").concat(innerText, "}</script>`}");
+        const innerText = ((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code) || '';
+        return `{@html \`<script ${bindings} ${props}>\${${innerText}}</script>\`}`;
     },
-    Fragment: function (_a) {
-        var _b;
-        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        if ((_b = json.bindings.innerHTML) === null || _b === void 0 ? void 0 : _b.code) {
+    Fragment: ({ json, options, parentComponent }) => {
+        var _a;
+        if ((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code) {
             return BINDINGS_MAPPER.innerHTML(json, options);
         }
         else if (json.children.length > 0) {
-            return "".concat(json.children
-                .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
-                .join('\n'));
+            return `${json.children
+                .map((item) => (0, exports.blockToSvelte)({ json: item, options, parentComponent }))
+                .join('\n')}`;
         }
         else {
             return '';
         }
     },
-    For: function (_a) {
-        var _b, _c;
-        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        var firstChild = json.children[0];
-        var keyValue = firstChild.properties.key || ((_b = firstChild.bindings.key) === null || _b === void 0 ? void 0 : _b.code);
+    For: ({ json, options, parentComponent }) => {
+        var _a, _b;
+        const firstChild = json.children[0];
+        const keyValue = firstChild.properties.key || ((_a = firstChild.bindings.key) === null || _a === void 0 ? void 0 : _a.code);
         if (keyValue) {
             // we remove extraneous prop which Svelte does not use
             delete firstChild.properties.key;
             delete firstChild.bindings.key;
         }
-        var args = (0, for_1.getForArguments)(json, { excludeCollectionName: true }).join(', ');
-        return "\n{#each ".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, " as ").concat(args, " ").concat(keyValue ? "(".concat(keyValue, ")") : '', "}\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n{/each}\n");
+        const args = (0, for_1.getForArguments)(json, { excludeCollectionName: true }).join(', ');
+        return `
+{#each ${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code} as ${args} ${keyValue ? `(${keyValue})` : ''}}
+${json.children.map((item) => (0, exports.blockToSvelte)({ json: item, options, parentComponent })).join('\n')}
+{/each}
+`;
     },
-    Show: function (_a) {
-        var _b;
-        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        return "\n{#if ".concat((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, " }\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n\n  ").concat(json.meta.else
-            ? "\n  {:else}\n  ".concat((0, exports.blockToSvelte)({
+    Show: ({ json, options, parentComponent }) => {
+        var _a;
+        return `
+{#if ${(_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code} }
+${json.children.map((item) => (0, exports.blockToSvelte)({ json: item, options, parentComponent })).join('\n')}
+
+  ${json.meta.else
+            ? `
+  {:else}
+  ${(0, exports.blockToSvelte)({
                 json: json.meta.else,
-                options: options,
-                parentComponent: parentComponent,
-            }), "\n  ")
-            : '', "\n{/if}");
+                options,
+                parentComponent,
+            })}
+  `
+            : ''}
+{/if}`;
     },
-    Slot: function (_a) {
-        var _b, _c, _d;
-        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        var slotName = ((_b = json.bindings.name) === null || _b === void 0 ? void 0 : _b.code) || json.properties.name;
-        var renderChildren = function () {
+    Slot({ json, options, parentComponent }) {
+        var _a, _b, _c;
+        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(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n');
+            return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToSvelte)({ json: item, options, parentComponent })).join('\n');
         };
         if (!slotName) {
-            var key = Object.keys(json.bindings).find(Boolean);
+            const key = Object.keys(json.bindings).find(Boolean);
             if (!key) {
-                if (!((_c = json.children) === null || _c === void 0 ? void 0 : _c.length)) {
+                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        <span #".concat(key, ">\n        ").concat((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code, "\n        </span>\n      ");
+            return `
+        <span #${key}>
+        ${(_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code}
+        </span>
+      `;
         }
-        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 BINDINGS_MAPPER = {
-    innerHTML: function (json, options) { var _a; return "{@html ".concat((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code, "}"); },
+const BINDINGS_MAPPER = {
+    innerHTML: (json, options) => { var _a; return `{@html ${(_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code}}`; },
 };
-var SVELTE_SPECIAL_TAGS = {
+const SVELTE_SPECIAL_TAGS = {
     COMPONENT: 'svelte:component',
     ELEMENT: 'svelte:element',
     SELF: 'svelte:self',
 };
-var getTagName = function (_a) {
-    var json = _a.json, parentComponent = _a.parentComponent, options = _a.options;
+const getTagName = ({ json, parentComponent, options, }) => {
     if (parentComponent && json.name === parentComponent.name) {
         return SVELTE_SPECIAL_TAGS.SELF;
     }
     /**
      * These are special HTML tags that svelte requires `<svelte:element this={TAG}>`
      */
-    var SPECIAL_HTML_TAGS = ['script', 'template'];
+    const SPECIAL_HTML_TAGS = ['script', 'template'];
     if (SPECIAL_HTML_TAGS.includes(json.name)) {
         json.bindings.this = (0, bindings_1.createSingleBinding)({
-            code: "\"".concat(json.name, "\""),
+            code: `"${json.name}"`,
         });
         return SVELTE_SPECIAL_TAGS.ELEMENT;
     }
-    var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
-    var isSpecialSvelteTag = json.name.startsWith('svelte:');
+    const isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
+    const isSpecialSvelteTag = json.name.startsWith('svelte:');
     // Check if any import matches `json.name`
-    var hasMatchingImport = parentComponent.imports.some(function (_a) {
-        var imports = _a.imports;
-        return Object.keys(imports).some(function (name) { return name === json.name; });
-    });
+    const hasMatchingImport = parentComponent.imports.some(({ imports }) => Object.keys(imports).some((name) => name === json.name));
     // If none of these are true, then we have some type of dynamic tag name
     if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
         json.bindings.this = (0, bindings_1.createSingleBinding)({
-            code: (0, helpers_1.stripStateAndProps)({ json: parentComponent, options: options })(json.name),
+            code: (0, helpers_1.stripStateAndProps)({ json: parentComponent, options })(json.name),
         });
         // TO-DO: no way to perfectly decide between <svelte:component> and <svelte:element> for dynamic
         // values...need to do that through metadata overrides for now.
@@ -158,95 +164,91 @@ var getTagName = function (_a) {
     }
     return json.name;
 };
-var stringifyBinding = function (node, options) {
-    return function (_a) {
-        var key = _a[0], binding = _a[1];
-        if (key === 'innerHTML' || !binding) {
-            return '';
-        }
-        var code = binding.code, _b = binding.arguments, cusArgs = _b === void 0 ? ['event'] : _b, type = binding.type;
-        var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
-        if (type === 'spread') {
-            var spreadValue = key === 'props' ? '$$props' : code;
-            return " {...".concat(spreadValue, "} ");
-        }
-        else if (key.startsWith('on') && isValidHtmlTag) {
-            // handle html native on[event] props
-            var event_1 = key.replace('on', '').toLowerCase();
-            // TODO: handle quotes in event handler values
-            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
-            if (valueWithoutBlock === key) {
-                return " on:".concat(event_1, "={").concat(valueWithoutBlock, "} ");
-            }
-            else {
-                return " on:".concat(event_1, "=\"{").concat(cusArgs.join(','), " => {").concat(valueWithoutBlock, "}}\" ");
-            }
+const stringifyBinding = (node, options) => ([key, binding]) => {
+    if (key === 'innerHTML' || !binding) {
+        return '';
+    }
+    const { code, arguments: cusArgs = ['event'], type } = binding;
+    const isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
+    if (type === 'spread') {
+        const spreadValue = key === 'props' ? '$$props' : code;
+        return ` {...${spreadValue}} `;
+    }
+    else if (key.startsWith('on') && isValidHtmlTag) {
+        // handle html native on[event] props
+        const event = key.replace('on', '').toLowerCase();
+        // TODO: handle quotes in event handler values
+        const valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
+        if (valueWithoutBlock === key) {
+            return ` on:${event}={${valueWithoutBlock}} `;
         }
-        else if (key.startsWith('on')) {
-            // handle on[custom event] props
-            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
-            if (valueWithoutBlock === key) {
-                return " ".concat(key, "={").concat(valueWithoutBlock, "} ");
-            }
-            else {
-                return " ".concat(key, "={(").concat(cusArgs.join(','), ") => ").concat(valueWithoutBlock, "}");
-            }
+        else {
+            return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
         }
-        else if (key === 'ref') {
-            return " bind:this={".concat(code, "} ");
+    }
+    else if (key.startsWith('on')) {
+        // handle on[custom event] props
+        const valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
+        if (valueWithoutBlock === key) {
+            return ` ${key}={${valueWithoutBlock}} `;
         }
         else {
-            return " ".concat(key, "={").concat(code, "} ");
+            return ` ${key}={(${cusArgs.join(',')}) => ${valueWithoutBlock}}`;
         }
-    };
+    }
+    else if (key === 'ref') {
+        return ` bind:this={${code}} `;
+    }
+    else {
+        return ` ${key}={${code}} `;
+    }
 };
-var blockToSvelte = function (_a) {
-    var _b, _c, _d, _e;
-    var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+const blockToSvelte = ({ json, options, parentComponent }) => {
+    var _a, _b, _c, _d;
     if (mappers[json.name]) {
         return mappers[json.name]({
             json: json,
-            options: options,
-            parentComponent: parentComponent,
+            options,
+            parentComponent,
         });
     }
-    var tagName = getTagName({ json: json, parentComponent: parentComponent, options: options });
+    const tagName = getTagName({ json, parentComponent, options });
     if ((0, is_children_1.default)({ node: json, extraMatches: ['$$slots.default'] })) {
-        return "<slot></slot>";
+        return `<slot></slot>`;
     }
     if (json.properties._text) {
         return json.properties._text;
     }
-    var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
+    const textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
     if (textCode) {
         if ((0, slots_1.isSlotProperty)(textCode, SLOT_PREFIX)) {
-            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase(), "\"/>");
+            return `<slot name="${(0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase()}"/>`;
         }
-        return "{".concat(textCode, "}");
+        return `{${textCode}}`;
     }
-    var str = '';
-    str += "<".concat(tagName, " ");
-    var isComponent = Boolean(tagName[0] && (0, is_upper_case_1.isUpperCase)(tagName[0]));
-    if ((((_c = json.bindings.style) === null || _c === void 0 ? void 0 : _c.code) || json.properties.style) && !isComponent) {
-        var useValue = ((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style;
-        str += "style={stringifyStyles(".concat(useValue, ")}");
+    let str = '';
+    str += `<${tagName} `;
+    const isComponent = Boolean(tagName[0] && (0, is_upper_case_1.isUpperCase)(tagName[0]));
+    if ((((_b = json.bindings.style) === null || _b === void 0 ? void 0 : _b.code) || json.properties.style) && !isComponent) {
+        const useValue = ((_c = json.bindings.style) === null || _c === void 0 ? void 0 : _c.code) || json.properties.style;
+        str += `style={stringifyStyles(${useValue})}`;
         delete json.bindings.style;
         delete json.properties.style;
     }
-    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}" `;
     }
-    var stringifiedBindings = Object.entries(json.bindings)
+    const stringifiedBindings = Object.entries(json.bindings)
         .map(stringifyBinding(json, options))
         .join('');
     str += stringifiedBindings;
     // if we have innerHTML, it doesn't matter whether we have closing tags or not, or children or not.
     // we use the innerHTML content as children and don't render the self-closing tag.
-    if ((_e = json.bindings.innerHTML) === null || _e === void 0 ? void 0 : _e.code) {
+    if ((_d = json.bindings.innerHTML) === null || _d === void 0 ? void 0 : _d.code) {
         str += '>';
         str += BINDINGS_MAPPER.innerHTML(json, options);
-        str += "</".concat(tagName, ">");
+        str += `</${tagName}>`;
         return str;
     }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(tagName)) {
@@ -255,10 +257,10 @@ var blockToSvelte = function (_a) {
     str += '>';
     if (json.children) {
         str += json.children
-            .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
+            .map((item) => (0, exports.blockToSvelte)({ json: item, options, parentComponent }))
             .join('');
     }
-    str += "</".concat(tagName, ">");
+    str += `</${tagName}>`;
     return str;
 };
 exports.blockToSvelte = blockToSvelte;

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

@@ -1,21 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stripStateAndProps = void 0;
-var slots_1 = require("../../helpers/slots");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var stripStateAndProps = function (_a) {
-    var options = _a.options, json = _a.json;
-    return function (code) {
-        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-            includeState: options.stateType === 'variables',
-            replaceWith: function (name) {
-                return name === 'children'
-                    ? '$$slots.default'
-                    : (0, slots_1.isSlotProperty)(name)
-                        ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "$$slots.".concat(x); })
-                        : name;
-            },
-        });
-    };
-};
+const slots_1 = require("../../helpers/slots");
+const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+const stripStateAndProps = ({ options, json }) => (code) => (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+    includeState: options.stateType === 'variables',
+    replaceWith: (name) => name === 'children'
+        ? '$$slots.default'
+        : (0, slots_1.isSlotProperty)(name)
+            ? (0, slots_1.replaceSlotsInString)(name, (x) => `$$slots.${x}`)
+            : name,
+});
 exports.stripStateAndProps = stripStateAndProps;