@builder.io/mitosis 0.0.78 → 0.0.80

package/dist/src/parsers/svelte/helpers/bindings.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processBindings = void 0;
+function replaceGroupWithChecked(node, isArray) {
+    var _a, _b, _c;
+    if (isArray === void 0) { isArray = false; }
+    if ((_b = (_a = node.bindings.group) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.length) {
+        var bindingValue = (_c = node.bindings.value) === null || _c === void 0 ? void 0 : _c.code;
+        var propertyValue = node.properties.value;
+        var groupBinding = node.bindings.group.code;
+        var code = '';
+        if (isArray) {
+            code = bindingValue
+                ? "".concat(groupBinding, ".includes(").concat(bindingValue, ")")
+                : "".concat(groupBinding, ".includes('").concat(propertyValue, "')");
+        }
+        else {
+            code = bindingValue
+                ? "".concat(groupBinding, " === ").concat(bindingValue)
+                : "".concat(groupBinding, " === '").concat(propertyValue, "'");
+        }
+        node.bindings['checked'] = {
+            code: code,
+        };
+        delete node.bindings.group;
+    }
+}
+/* post-processes bindings
+  bind:group https://svelte.dev/docs#template-syntax-element-directives-bind-group
+  bind:property https://svelte.dev/docs#template-syntax-component-directives-bind-this
+  bind:this https://svelte.dev/docs#template-syntax-component-directives-bind-this
+
+  - replaces group binding with checked for checkboxes and radios (supported inputs for bind:group)
+  - adds onChange for bind:group and bind:property (event.target.value OR event.target.checked)
+*/
+function processBindings(json, node) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var name;
+    var target = 'event.target.value';
+    var binding = '';
+    var isArray = false;
+    if (Object.prototype.hasOwnProperty.call(node.bindings, 'group')) {
+        name = 'group';
+        binding = (_b = (_a = node.bindings.group) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '';
+        if (binding.startsWith('state.')) {
+            var stateObject = json.state[binding.replace(/^state\./, '')];
+            isArray = Array.isArray(stateObject === null || stateObject === void 0 ? void 0 : stateObject.code);
+        }
+        replaceGroupWithChecked(node, isArray);
+        if (node.properties.type === 'checkbox' && !node.properties.value) {
+            target = 'event.target.checked';
+        }
+    }
+    else if (Object.prototype.hasOwnProperty.call(node.bindings, 'this')) {
+        name = 'ref';
+        binding = (_d = (_c = node.bindings.this) === null || _c === void 0 ? void 0 : _c.code) !== null && _d !== void 0 ? _d : '';
+    }
+    else if (Object.prototype.hasOwnProperty.call(node.bindings, 'onChange') &&
+        node.properties.type === 'checkbox') {
+        target = 'event.target.checked';
+        binding = (_f = (_e = node.bindings.onChange) === null || _e === void 0 ? void 0 : _e.code.split('=')[0]) !== null && _f !== void 0 ? _f : '';
+    }
+    var onChangeCode = "".concat(binding, " = ").concat(target);
+    // If the binding is an array, we should push / splice rather than assigning
+    if (isArray) {
+        onChangeCode = "event.target.checked ? ".concat(binding, ".push(").concat(target, ") : ").concat(binding, ".splice(").concat(binding, ".indexOf(").concat(node.properties.value ? "'".concat(node.properties.value, "'") : (_g = node.bindings.value) === null || _g === void 0 ? void 0 : _g.code, "), 1)");
+    }
+    if (name !== 'ref' && binding) {
+        node.bindings['onChange'] = {
+            code: onChangeCode,
+            arguments: ['event'],
+        };
+    }
+}
+exports.processBindings = processBindings;

package/dist/src/parsers/svelte/helpers/children.d.ts

@@ -0,0 +1,5 @@
+import type { TemplateNode } from 'svelte/types/compiler/interfaces';
+import type { MitosisNode } from '../../../types/mitosis-node';
+import type { SveltosisComponent } from '../types';
+export declare function filterChildren(children: TemplateNode[]): TemplateNode[];
+export declare function parseChildren(json: SveltosisComponent, node: TemplateNode): MitosisNode[];

package/dist/src/parsers/svelte/helpers/children.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseChildren = exports.filterChildren = void 0;
+var html_1 = require("../html");
+function filterChildren(children) {
+    var _a;
+    return ((_a = children === null || children === void 0 ? void 0 : children.filter(function (n) { var _a; return n.type !== 'Comment' && (n.type !== 'Text' || ((_a = n.data) === null || _a === void 0 ? void 0 : _a.trim().length)); })) !== null && _a !== void 0 ? _a : []);
+}
+exports.filterChildren = filterChildren;
+function parseChildren(json, node) {
+    var children = [];
+    if (node.children) {
+        for (var _i = 0, _a = filterChildren(node.children); _i < _a.length; _i++) {
+            var child = _a[_i];
+            var mitosisNode = (0, html_1.parseHtmlNode)(json, child);
+            if (mitosisNode) {
+                children.push(mitosisNode);
+            }
+        }
+    }
+    return children;
+}
+exports.parseChildren = parseChildren;

package/dist/src/parsers/svelte/helpers/expressions.d.ts

@@ -0,0 +1,3 @@
+import { ObjectExpression } from 'estree';
+import type { SveltosisComponent } from '../types';
+export declare function parseObjectExpression(json: SveltosisComponent, node: ObjectExpression): {};

package/dist/src/parsers/svelte/helpers/expressions.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseObjectExpression = void 0;
+var astring_1 = require("astring");
+var references_1 = require("../instance/references");
+function parseObjectExpression(json, node) {
+    var _a;
+    var properties = node.properties.map(function (n) {
+        var node_ = n;
+        return {
+            key: (0, astring_1.generate)(node_.key),
+            value: (0, references_1.getParsedValue)(json, node_.value),
+        };
+    });
+    var c = {};
+    for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
+        var item = properties_1[_i];
+        Object.assign(c, (_a = {}, _a[item.key] = item.value, _a));
+    }
+    return c;
+}
+exports.parseObjectExpression = parseObjectExpression;

package/dist/src/parsers/svelte/helpers/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { SveltosisComponent } from '../types';
+export declare function addToOnInitHook(json: SveltosisComponent, code: string): void;

package/dist/src/parsers/svelte/helpers/hooks.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addToOnInitHook = void 0;
+function addToOnInitHook(json, code) {
+    var _a;
+    if ((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code.length) {
+        json.hooks.onInit.code += "\n ".concat(code);
+    }
+    else {
+        json.hooks.onInit = {
+            code: code,
+        };
+    }
+}
+exports.addToOnInitHook = addToOnInitHook;

package/dist/src/parsers/svelte/helpers/mitosis-node.d.ts

@@ -0,0 +1,2 @@
+import { MitosisNode } from '../../../types/mitosis-node';
+export declare function createMitosisNode(): MitosisNode;

package/dist/src/parsers/svelte/helpers/mitosis-node.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMitosisNode = void 0;
+function createMitosisNode() {
+    return {
+        '@type': '@builder.io/mitosis/node',
+        name: '',
+        meta: {},
+        scope: {},
+        children: [],
+        bindings: {},
+        properties: {},
+    };
+}
+exports.createMitosisNode = createMitosisNode;

package/dist/src/parsers/svelte/helpers/post-process.d.ts

@@ -0,0 +1,9 @@
+import type { SveltosisComponent } from '../types';
+export declare function preventNameCollissions(json: SveltosisComponent, input: string, arguments_: string[], prepend?: string, append?: string): {
+    code: string;
+    arguments: string[];
+} | {
+    code: string;
+    arguments?: undefined;
+};
+export declare function postProcess(json: SveltosisComponent): void;

package/dist/src/parsers/svelte/helpers/post-process.js

@@ -0,0 +1,177 @@
+"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.postProcess = exports.preventNameCollissions = void 0;
+var bindings_1 = require("./bindings");
+function preventNameCollissions(json, input, arguments_, prepend, append) {
+    if (prepend === void 0) { prepend = ''; }
+    if (append === void 0) { append = '_'; }
+    var output = input;
+    var argumentsOutput = arguments_;
+    var keys = __spreadArray(__spreadArray(__spreadArray([], Object.keys(json.props), true), Object.keys(json.state), true), Object.keys(json.refs), true);
+    var _loop_1 = function (key) {
+        var regex = function () { return new RegExp("(?<!=(?:\\s))".concat(key, "\\b"), 'g'); };
+        var isInArguments = false;
+        argumentsOutput.forEach(function (argument, index) {
+            if (regex().test(argument)) {
+                isInArguments = true;
+                argumentsOutput.splice(index, 1, argument.replace(regex(), "".concat(prepend).concat(key).concat(append)));
+            }
+        });
+        var isInOutput = regex().test(output);
+        if (isInArguments && isInOutput) {
+            output = output.replace(regex(), "".concat(prepend).concat(key).concat(append));
+        }
+    };
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        _loop_1(key);
+    }
+    return (argumentsOutput === null || argumentsOutput === void 0 ? void 0 : argumentsOutput.length)
+        ? {
+            code: output,
+            arguments: argumentsOutput,
+        }
+        : { code: output };
+}
+exports.preventNameCollissions = preventNameCollissions;
+function prependProperties(json, input) {
+    var output = input;
+    var propertyKeys = Object.keys(json.props);
+    for (var _i = 0, propertyKeys_1 = propertyKeys; _i < propertyKeys_1.length; _i++) {
+        var property = propertyKeys_1[_i];
+        var regex = new RegExp("(?<!(\\.|'|\"|`))\\b(props\\.)?".concat(property, "\\b"), 'g');
+        if (regex.test(output)) {
+            output = output.replace(regex, "props.".concat(property));
+        }
+    }
+    return output;
+}
+function prependState(json, input) {
+    var output = input;
+    var stateKeys = Object.keys(json.state);
+    for (var _i = 0, stateKeys_1 = stateKeys; _i < stateKeys_1.length; _i++) {
+        var state = stateKeys_1[_i];
+        var regex = new RegExp("(?<!(\\.|'|\"|`|function ))\\b(state\\.)?".concat(state, "\\b(?!(\\s+)?\\()"), 'g');
+        if (regex.test(output)) {
+            output = output.replace(regex, "state.".concat(state));
+        }
+    }
+    return output;
+}
+function addPropertiesAndState(json, input) {
+    var output = input;
+    output = prependProperties(json, output);
+    output = prependState(json, output);
+    return output;
+}
+function addPropertiesAndStateToNode(json, node) {
+    var _a, _b, _c;
+    for (var _i = 0, _d = Object.keys(node.bindings); _i < _d.length; _i++) {
+        var key = _d[_i];
+        if (Object.prototype.hasOwnProperty.call(node.bindings, key)) {
+            node.bindings[key] = {
+                code: addPropertiesAndState(json, (_b = (_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '').trim(),
+                type: (_c = node.bindings[key]) === null || _c === void 0 ? void 0 : _c.type,
+            };
+        }
+    }
+}
+function postProcessState(json) {
+    for (var _i = 0, _a = Object.keys(json.state); _i < _a.length; _i++) {
+        var key = _a[_i];
+        var item = json.state[key];
+        if ((item === null || item === void 0 ? void 0 : item.type) !== 'property') {
+            var output = preventNameCollissions(json, item.code, (item === null || item === void 0 ? void 0 : item.arguments) || []);
+            output.code = addPropertiesAndState(json, output.code);
+            json.state[key] = __assign(__assign({}, item), output);
+        }
+    }
+}
+function postProcessChildren(json, children) {
+    var _a;
+    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+        var node = children_1[_i];
+        addPropertiesAndStateToNode(json, node);
+        (0, bindings_1.processBindings)(json, node);
+        var children_2 = [];
+        if (((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            children_2 = node.children;
+        }
+        var metaValues = (Object.values(node.meta) || []);
+        if (metaValues.length > 0) {
+            var metaChildren = metaValues.filter(function (item) {
+                return (item === null || item === void 0 ? void 0 : item['@type']) === '@builder.io/mitosis/node';
+            });
+            children_2 = __spreadArray(__spreadArray([], children_2, true), metaChildren, true);
+        }
+        postProcessChildren(json, children_2);
+    }
+}
+function addPropertiesAndStateToHook(json, hook) {
+    return {
+        code: addPropertiesAndState(json, hook.code),
+        deps: addPropertiesAndState(json, hook.deps || ''),
+    };
+}
+function postProcessHooks(json) {
+    var hookKeys = Object.keys(json.hooks);
+    var _loop_2 = function (key) {
+        var hook = json.hooks[key];
+        if (!hook) {
+            return "continue";
+        }
+        if (key === 'onUpdate' && Array.isArray(hook)) {
+            hook.forEach(function (item, index) {
+                var _a;
+                (_a = json.hooks[key]) === null || _a === void 0 ? void 0 : _a.splice(index, 1, addPropertiesAndStateToHook(json, item));
+            });
+            return "continue";
+        }
+        json.hooks[key] = addPropertiesAndStateToHook(json, hook);
+    };
+    for (var _i = 0, hookKeys_1 = hookKeys; _i < hookKeys_1.length; _i++) {
+        var key = hookKeys_1[_i];
+        _loop_2(key);
+    }
+}
+function postProcessContext(json) {
+    var _a;
+    for (var _i = 0, _b = Object.keys(json.context.set); _i < _b.length; _i++) {
+        var key = _b[_i];
+        if ((_a = json.context.set[key]) === null || _a === void 0 ? void 0 : _a.ref) {
+            json.context.set[key].ref = addPropertiesAndState(json, json.context.set[key].ref);
+        }
+    }
+}
+function postProcess(json) {
+    // Call preventNameCollissions here, before the rest (where it applies -- function arguments for now)
+    // State (everything except type === 'property')
+    postProcessState(json);
+    // Children
+    postProcessChildren(json, json.children);
+    // Hooks
+    postProcessHooks(json);
+    // Context
+    postProcessContext(json);
+}
+exports.postProcess = postProcess;

package/dist/src/parsers/svelte/helpers/string.d.ts

@@ -0,0 +1,3 @@
+export declare function uniqueName(existingItems: string[], reference: string): string;
+export declare function insertAt(string_: string, sub: string, pos: number): string;
+export declare function stripQuotes(string_: string): string;

package/dist/src/parsers/svelte/helpers/string.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripQuotes = exports.insertAt = exports.uniqueName = void 0;
+// helper functions for strings
+var lodash_1 = require("lodash");
+function uniqueName(existingItems, reference) {
+    var index = 0;
+    var match = false;
+    while (false === match) {
+        if (!existingItems.includes(reference)) {
+            match = true;
+            break;
+        }
+        index++;
+    }
+    return (0, lodash_1.camelCase)("".concat(reference).concat(index));
+}
+exports.uniqueName = uniqueName;
+function insertAt(string_, sub, pos) {
+    return "".concat(string_.slice(0, pos)).concat(sub).concat(string_.slice(pos));
+}
+exports.insertAt = insertAt;
+function stripQuotes(string_) {
+    return string_.replace(/["']+/g, '');
+}
+exports.stripQuotes = stripQuotes;

package/dist/src/parsers/svelte/html/actions.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from 'svelte/types/compiler/interfaces';
+import type { SveltosisComponent } from '../types';
+export declare function parseAction(json: SveltosisComponent, nodeReference: string, attribute: Element['attributes'][number]): void;

package/dist/src/parsers/svelte/html/actions.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseAction = void 0;
+var string_1 = require("../helpers/string");
+var astring_1 = require("astring");
+function parseAction(json, nodeReference, attribute) {
+    var _a, _b;
+    var methodName = attribute.name;
+    var parameters = '';
+    if (['Identifier', 'ObjectExpression'].includes((_a = attribute.expression) === null || _a === void 0 ? void 0 : _a.type)) {
+        parameters = (0, astring_1.generate)(attribute.expression);
+    }
+    var actionHandler = (0, string_1.uniqueName)(Object.keys(json.state), 'actionHandler');
+    json.state[actionHandler] = {
+        code: 'null',
+        type: 'property',
+    };
+    var initHandler = "if (".concat(nodeReference, ") { ").concat(actionHandler, " = ").concat(methodName, "(").concat(nodeReference, ", ").concat(parameters, "); };\n");
+    // Handle Mount
+    var onMountCode = ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) || '';
+    json.hooks.onMount = {
+        code: "".concat(onMountCode, "\n").concat(initHandler, ";\n"),
+    };
+    // Handle Destroy / Re-Mount
+    var onReferenceUpdate = "\n    if (!".concat(nodeReference, " && ").concat(actionHandler, ") { \n      ").concat(actionHandler, "?.destroy(); \n      ").concat(actionHandler, " = null; \n    } else if (").concat(nodeReference, " && !").concat(actionHandler, ") { \n      ").concat(initHandler, " \n    };\n\n  ");
+    json.hooks.onUpdate = json.hooks.onUpdate || [];
+    json.hooks.onUpdate.push({
+        code: onReferenceUpdate,
+        deps: "[".concat(nodeReference, "]"),
+    });
+    // Handle Update
+    if (parameters) {
+        var onUpdate = "".concat(actionHandler, "?.update(").concat(parameters, ")\n");
+        json.hooks.onUpdate.push({
+            code: onUpdate,
+            deps: "[".concat(parameters, "]"),
+        });
+    }
+}
+exports.parseAction = parseAction;

package/dist/src/parsers/svelte/html/each.d.ts

@@ -0,0 +1,35 @@
+import type { TemplateNode } from 'svelte/types/compiler/interfaces';
+import type { SveltosisComponent } from '../types';
+export declare function parseEach(json: SveltosisComponent, node: TemplateNode): {
+    name: string;
+    scope: {
+        forName: any;
+    };
+    bindings: {
+        each: {
+            code: any;
+        };
+    };
+    children: import("../../..").MitosisNode[];
+    '@type': "@builder.io/mitosis/node";
+    meta: import("../../../types/json").JSONObject;
+    properties: {
+        [key: string]: string | undefined;
+    };
+} | {
+    name: string;
+    scope: {
+        forName: any;
+    };
+    bindings: {
+        each: {
+            code: any;
+        };
+    };
+    children: import("../../..").MitosisNode[];
+    '@type': "@builder.io/mitosis/node";
+    meta: import("../../../types/json").JSONObject;
+    properties: {
+        [key: string]: string | undefined;
+    };
+};

package/dist/src/parsers/svelte/html/each.js

@@ -0,0 +1,24 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseEach = void 0;
+var mitosis_node_1 = require("../helpers/mitosis-node");
+var children_1 = require("../helpers/children");
+function parseEach(json, node) {
+    return __assign(__assign({}, (0, mitosis_node_1.createMitosisNode)()), { name: 'For', scope: { forName: node.context.name }, bindings: {
+            each: {
+                code: node.expression.name,
+            },
+        }, children: (0, children_1.parseChildren)(json, node) });
+}
+exports.parseEach = parseEach;

package/dist/src/parsers/svelte/html/element.d.ts

@@ -0,0 +1,3 @@
+import type { TemplateNode } from 'svelte/types/compiler/interfaces';
+import type { SveltosisComponent } from '../types';
+export declare function parseElement(json: SveltosisComponent, node: TemplateNode): import("../../..").MitosisNode;