@builder.io/mitosis 0.0.56-97 → 0.0.56

package/dist/src/__tests__/data/types/component-with-default-values-types.raw.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    name: string;
+};
+export default function ComponentWithTypes(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/types/component-with-default-values-types.raw.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var DEFAULT_VALUES = {
+    name: 'Sami',
+};
+function ComponentWithTypes(props) {
+    return <div> Hello {props.name || DEFAULT_VALUES.name}</div>;
+}
+exports.default = ComponentWithTypes;

package/dist/src/__tests__/shared.d.ts

@@ -1,3 +1,8 @@
-import { Transpiler } from '../types/transpiler';
+import { TranspilerGenerator } from '../types/transpiler';
 import { Target } from '../types/config';
-export declare const runTestsForTarget: (target: Target, generator: Transpiler) => void;
+export declare const runTestsForJsx: () => void;
+export declare const runTestsForTarget: <X>({ target, generator, options, }: {
+    target: Target;
+    generator: TranspilerGenerator<X, string>;
+    options: X;
+}) => void;

package/dist/src/__tests__/shared.js

@@ -1,6 +1,17 @@
 "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.runTestsForTarget = void 0;
+exports.runTestsForTarget = exports.runTestsForJsx = void 0;
 var jsx_1 = require("../parsers/jsx");
 var basicForShow = require('./data/basic-for-show.raw');
 var basicOnMountUpdate = require('./data/basic-onMount-update.raw');
@@ -24,6 +35,7 @@ var propsType = require('./data/types/component-props-type.raw');
 var propsInterface = require('./data/types/component-props-interface.raw');
 var preserveTyping = require('./data/types/preserve-typing.raw');
 var typeDependency = require('./data/types/type-dependency.raw');
+var defaultProps = require('./data/default-props/default-props.raw');
 var classRaw = require('./data/styles/class.raw');
 var className = require('./data/styles/className.raw');
 var classAndClassName = require('./data/styles/class-and-className.raw');
@@ -59,6 +71,7 @@ var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var text = require('./data/blocks/text.raw');
 var textarea = require('./data/blocks/textarea.raw');
 var video = require('./data/blocks/video.raw');
+var builderRenderContent = require('./data/blocks/builder-render-content.raw');
 var path = 'test-path';
 var BASIC_TESTS = {
     Basic: basic,
@@ -88,8 +101,11 @@ var BASIC_TESTS = {
     onMount: onMount,
     propsType: propsType,
     propsInterface: propsInterface,
+    defaultProps: defaultProps,
     preserveTyping: preserveTyping,
     typeDependency: typeDependency,
+    defaultValsWithTypes: require('./data/types/component-with-default-values-types.raw'),
+    'import types': builderRenderContent,
     subComponent: subComponent,
     nestedStyles: nestedStyles,
     propsDestructure: propsDestructure,
@@ -140,6 +156,17 @@ var ADVANCED_REF = {
 var ON_UPDATE_RETURN = {
     basicOnUpdateReturn: require('./data/basic-onUpdate-return.raw'),
 };
+var JSX_TESTS = [
+    BASIC_TESTS,
+    SLOTS_TESTS,
+    SHOW_TESTS,
+    FORWARD_REF_TESTS,
+    MULTI_ON_UPDATE_TESTS,
+    FORM_BLOCK_TESTS,
+    ADVANCED_REF,
+    ON_UPDATE_RETURN,
+    FOR_SHOW_TESTS,
+];
 var TESTS_FOR_TARGET = {
     react: [
         BASIC_TESTS,
@@ -281,22 +308,55 @@ var TESTS_FOR_TARGET = {
         FOR_SHOW_TESTS,
     ],
 };
-var runTestsForTarget = function (target, generator) {
+var runTestsForJsx = function () {
+    test('Remove Internal mitosis package', function () {
+        var component = (0, jsx_1.parseJsx)(basicMitosis, {
+            compileAwayPackages: ['@dummy/custom-mitosis'],
+        });
+        expect(component).toMatchSnapshot();
+    });
+    JSX_TESTS.forEach(function (tests) {
+        Object.keys(tests).forEach(function (key) {
+            test(key, function () {
+                var component = (0, jsx_1.parseJsx)(tests[key]);
+                expect(component).toMatchSnapshot();
+            });
+        });
+    });
+};
+exports.runTestsForJsx = runTestsForJsx;
+var runTestsForTarget = function (_a) {
+    var target = _a.target, generator = _a.generator, options = _a.options;
     var testsArray = TESTS_FOR_TARGET[target];
     test('Remove Internal mitosis package', function () {
         var component = (0, jsx_1.parseJsx)(basicMitosis, {
             compileAwayPackages: ['@dummy/custom-mitosis'],
         });
-        var output = generator({ component: component, path: path });
+        var output = generator(options)({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
+    var configurations = [
+        { options: __assign(__assign({}, options), { typescript: false }), testName: 'Javascript Test' },
+        { options: __assign(__assign({}, options), { typescript: true }), testName: 'Typescript Test' },
+    ];
     if (testsArray) {
-        testsArray.forEach(function (tests) {
-            Object.keys(tests).forEach(function (key) {
-                test(key, function () {
-                    var component = (0, jsx_1.parseJsx)(tests[key]);
-                    var output = generator({ component: component, path: path });
-                    expect(output).toMatchSnapshot();
+        configurations.forEach(function (_a) {
+            var options = _a.options, testName = _a.testName;
+            describe(testName, function () {
+                testsArray.forEach(function (tests) {
+                    Object.keys(tests).forEach(function (key) {
+                        test(key, function () {
+                            try {
+                                var component = (0, jsx_1.parseJsx)(tests[key]);
+                                var output = generator(options)({ component: component, path: path });
+                                expect(output).toMatchSnapshot();
+                            }
+                            catch (error) {
+                                console.log('failed to parse', error);
+                                throw error;
+                            }
+                        });
+                    });
                 });
             });
         });

package/dist/src/constants/hooks.d.ts

@@ -3,4 +3,5 @@ export declare const HOOKS: {
     readonly STATE: "useState";
     readonly CONTEXT: "useContext";
     readonly REF: "useRef";
+    readonly DEFAULT_PROPS: "useDefaultProps";
 };

package/dist/src/constants/hooks.js

@@ -6,4 +6,5 @@ exports.HOOKS = {
     STATE: 'useState',
     CONTEXT: 'useContext',
     REF: 'useRef',
+    DEFAULT_PROPS: 'useDefaultProps',
 };

package/dist/src/constants/method-literal-prefix.d.ts

@@ -1 +0,0 @@
-export declare const methodLiteralPrefix = "@builder.io/mitosis/method:";

package/dist/src/constants/method-literal-prefix.js

@@ -1,4 +1 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.methodLiteralPrefix = void 0;
-exports.methodLiteralPrefix = "@builder.io/mitosis/method:";

package/dist/src/generators/angular.d.ts

@@ -1,5 +1,5 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
 }
@@ -10,5 +10,5 @@ interface AngularBlockOptions {
     domRefs?: string[];
 }
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
-export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;
+export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;
 export {};

package/dist/src/generators/angular.js

@@ -18,6 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
 var dedent_1 = __importDefault(require("dedent"));
+var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
@@ -27,6 +28,7 @@ var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var get_props_1 = require("../helpers/get-props");
@@ -96,12 +98,13 @@ var blockToAngular = function (json, options, blockOptions) {
     }
     var str = '';
     var needsToRenderSlots = [];
-    if (json.name === 'For') {
-        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        var indexName = json.scope.indexName;
+        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
             contextVars: contextVars,
             outputVars: outputVars,
             domRefs: domRefs,
-        }), "\">");
+        })).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
     }
@@ -292,7 +295,7 @@ var componentToAngular = function (options) {
                 });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', !json.defaultProps ? '' : "const defaultProps = ".concat(json5_1.default.stringify(json.defaultProps), "\n"), (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone,
@@ -305,7 +308,11 @@ var componentToAngular = function (options) {
             .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
             .map(function (item) {
             var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';
-            return "@Input() ".concat(item, ": ").concat(propType);
+            var propDeclaration = "@Input() ".concat(item, ": ").concat(propType);
+            if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
+                propDeclaration += " = defaultProps[\"".concat(item, "\"]");
+            }
+            return propDeclaration;
         })
             .join('\n'), outputs.join('\n'), Array.from(domRefs)
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })

package/dist/src/generators/builder.d.ts

@@ -1,19 +1,12 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BuilderElement } from '@builder.io/sdk';
-import { TranspilerArgs } from '../types/transpiler';
-export interface ToBuilderOptions {
+import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { BaseTranspilerOptions, TranspilerArgs } from '../types/transpiler';
+export interface ToBuilderOptions extends BaseTranspilerOptions {
     includeIds?: boolean;
 }
 declare type InternalOptions = {
     skipMapper?: boolean;
 };
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
-export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => {
-    data: {
-        httpRequests: import("../types/json")._JSON;
-        jsCode: string;
-        tsCode: string;
-        blocks: BuilderElement[];
-    };
-};
+export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => BuilderContent;
 export {};

package/dist/src/generators/builder.js

@@ -81,15 +81,16 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
         block.component.options.columns = columns;
         block.children = [];
         return block;
-    }, For: function (node, options) {
+    }, For: function (_node, options) {
         var _a;
+        var node = _node;
         return el({
             component: {
                 name: 'Core:Fragment',
             },
             repeat: {
                 collection: (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code,
-                itemName: node.properties._forName,
+                itemName: node.scope.forName,
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)

package/dist/src/generators/context/svelte.d.ts

@@ -2,6 +2,9 @@ import { MitosisContext } from '../../types/mitosis-context';
 import { BaseTranspilerOptions } from '../../types/transpiler';
 interface ContextToSvelteOptions extends Pick<BaseTranspilerOptions, 'prettier'> {
 }
+/**
+ * TO-DO: support types
+ */
 export declare const contextToSvelte: (options?: ContextToSvelteOptions) => ({ context }: {
     context: MitosisContext;
 }) => string;

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

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToSvelte = void 0;
 var standalone_1 = require("prettier/standalone");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+/**
+ * TO-DO: support types
+ */
 var contextToSvelte = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {

package/dist/src/generators/helpers/functions.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from '../../modules/plugins';
+export declare const FUNCTION_HACK_PLUGIN: Plugin;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FUNCTION_HACK_PLUGIN = void 0;
+var FUNCTION_HACK_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            var _a, _b;
+            for (var key in json.state) {
+                var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
+                var type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
+                if (typeof value === 'string' && type === 'method') {
+                    var newValue = "function ".concat(value);
+                    json.state[key] = {
+                        code: newValue,
+                        type: 'method',
+                    };
+                }
+                else if (typeof value === 'string' && type === 'function') {
+                    json.state[key] = {
+                        code: value,
+                        type: 'method',
+                    };
+                }
+            }
+        },
+    },
+}); };
+exports.FUNCTION_HACK_PLUGIN = FUNCTION_HACK_PLUGIN;

package/dist/src/generators/html.d.ts

@@ -1,7 +1,7 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToHtmlOptions extends BaseTranspilerOptions {
     format?: 'class' | 'script';
     prefix?: string;
 }
-export declare const componentToHtml: (options?: ToHtmlOptions) => Transpiler;
-export declare const componentToCustomElement: (options?: ToHtmlOptions) => Transpiler;
+export declare const componentToHtml: TranspilerGenerator<ToHtmlOptions>;
+export declare const componentToCustomElement: TranspilerGenerator<ToHtmlOptions>;

package/dist/src/generators/html.js

@@ -47,12 +47,14 @@ var get_props_1 = require("../helpers/get-props");
 var get_props_ref_1 = require("../helpers/get-props-ref");
 var get_prop_functions_1 = require("../helpers/get-prop-functions");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var render_imports_1 = require("../helpers/render-imports");
+var for_1 = require("../helpers/nodes/for");
 var isAttribute = function (key) {
     return /-/.test(key);
 };
@@ -189,7 +191,7 @@ var addOnChangeJs = function (id, options, code) {
 };
 // TODO: spread support
 var blockToHtml = function (json, options, blockOptions) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     if (blockOptions === void 0) { blockOptions = {}; }
     var ComponentName = blockOptions.ComponentName;
     var scopeVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.scopeVars) || [];
@@ -221,14 +223,14 @@ var blockToHtml = function (json, options, blockOptions) {
         return "<template data-el=\"".concat(elId, "\"><!-- ").concat((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code, " --></template>");
     }
     var str = '';
-    if (json.name === 'For') {
-        var forArguments = ((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || [];
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        var forArguments = (0, for_1.getForArguments)(json);
         var localScopeVars_1 = __spreadArray(__spreadArray([], scopeVars, true), forArguments, true);
         var argsStr = forArguments.map(function (arg) { return "\"".concat(arg, "\""); }).join(',');
         addOnChangeJs(elId, options, 
         // TODO: be smarter about rendering, deleting old items and adding new ones by
         // querying dom potentially
-        "\n        let array = ".concat((_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code, ";\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n      "));
+        "\n        let array = ".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, ";\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n      "));
         // TODO: decide on how to handle this...
         str += "\n      <template data-el=\"".concat(elId, "\">");
         if (json.children) {
@@ -241,7 +243,7 @@ var blockToHtml = function (json, options, blockOptions) {
         str += '</template>';
     }
     else if (json.name === 'Show') {
-        var whenCondition = ((_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code).replace(/;$/, '');
+        var whenCondition = ((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code).replace(/;$/, '');
         addOnChangeJs(elId, options, "\n        ".concat(addScopeVars(scopeVars, whenCondition, function (scopeVar) {
             return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
         }), "\n        const whenCondition = ").concat(whenCondition, ";\n        if (whenCondition) {\n          ").concat(options.format === 'class' ? 'this.' : '', "showContent(el)\n        }\n      "));
@@ -281,8 +283,8 @@ var blockToHtml = function (json, options, blockOptions) {
             if (key === '_spread' || key === 'css') {
                 continue;
             }
-            var value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
-            var cusArg = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.arguments) || ['event'];
+            var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
+            var cusArg = ((_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.arguments) || ['event'];
             // TODO: proper babel transform to replace. Util for this
             var useValue = value;
             if (key.startsWith('on')) {

package/dist/src/generators/liquid.d.ts

@@ -1,4 +1,4 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToLiquidOptions extends BaseTranspilerOptions {
     reactive?: boolean;
 }
@@ -8,4 +8,4 @@ export interface ToLiquidOptions extends BaseTranspilerOptions {
  * Shopify will reject our PUT to update the template
  */
 export declare const isValidLiquidBinding: (str?: string) => boolean;
-export declare const componentToLiquid: (options?: ToLiquidOptions) => Transpiler;
+export declare const componentToLiquid: TranspilerGenerator<ToLiquidOptions>;

package/dist/src/generators/liquid.js

@@ -6,6 +6,7 @@ var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var plugins_1 = require("../modules/plugins");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
@@ -49,12 +50,11 @@ var blockToLiquid = function (json, options) {
         return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code), "}}");
     }
     var str = '';
-    if (json.name === 'For') {
-        if (!((0, exports.isValidLiquidBinding)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code) &&
-            (0, exports.isValidLiquidBinding)(json.properties._forName))) {
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        if (!((0, exports.isValidLiquidBinding)((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code) && (0, exports.isValidLiquidBinding)(json.scope.forName))) {
             return str;
         }
-        str += "{% for ".concat(json.properties._forName, " in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), " %}");
+        str += "{% for ".concat(json.scope.forName, " in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), " %}");
         if (json.children) {
             str += json.children.map(function (item) { return blockToLiquid(item, options); }).join('\n');
         }

package/dist/src/generators/lit/generate.d.ts

@@ -1,5 +1,5 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToLitOptions extends BaseTranspilerOptions {
     useShadowDom?: boolean;
 }
-export declare const componentToLit: (options?: ToLitOptions) => Transpiler;
+export declare const componentToLit: TranspilerGenerator<ToLitOptions>;

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

@@ -13,6 +13,7 @@ var standalone_1 = require("prettier/standalone");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var render_imports_1 = require("../../helpers/render-imports");
 var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
 var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -48,8 +49,8 @@ var blockToLit = function (json, options) {
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
         return "${".concat(processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code), "}");
     }
-    if (json.name === 'For') {
-        return "${".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(json.properties._forName, ", index) => (\n      html`").concat(json.children
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        return "${".concat(processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), "?.map((").concat(json.scope.forName, ", index) => (\n      html`").concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToLit(item, options); })
             .join('\n'), "`\n    ))}");
@@ -90,9 +91,16 @@ var blockToLit = function (json, options) {
             str += " ".concat(useKey, "=${").concat(cusArgs.join(','), " => ").concat(processBinding(code), "} ");
         }
         else {
-            // TODO: handle boolean attributes too by matching list of html boolean attributes
-            // https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
-            str += " .".concat(key, "=${").concat(processBinding(code), "} ");
+            var value = processBinding(code);
+            // If they key includes a '-' it's an attribute, not a property
+            if (key.includes('-')) {
+                str += " ".concat(key, "=${").concat(value, "} ");
+            }
+            else {
+                // TODO: handle boolean attributes too by matching list of html boolean attributes
+                // https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+                str += " .".concat(key, "=${").concat(value, "} ");
+            }
         }
     }
     if (jsx_1.selfClosingTags.has(json.name)) {
@@ -175,7 +183,7 @@ var componentToLit = function (options) {
                 html = html.replace(/\n{3,}/g, '\n\n');
             }
         }
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n        }\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n        }\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
             ? "\n      const spread = (properties) =>\n        directive((part) => {\n          for (const property in properties) {\n            const value = properties[attr];\n            part.element[property] = value;\n          }\n        });\n    "
             : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, options.useShadowDom
             ? ''

package/dist/src/generators/marko/generate.d.ts

@@ -1,7 +1,7 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToMarkoOptions extends BaseTranspilerOptions {
 }
-export declare const componentToMarko: (userOptions?: ToMarkoOptions) => Transpiler;
+export declare const componentToMarko: TranspilerGenerator<ToMarkoOptions>;
 /**
  * Convert marko expressions to valid html
  *

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

@@ -24,6 +24,7 @@ var standalone_1 = require("prettier/standalone");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var render_imports_1 = require("../../helpers/render-imports");
 var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
 var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -37,6 +38,7 @@ var has_props_1 = require("../../helpers/has-props");
 var get_refs_1 = require("../../helpers/get-refs");
 var lodash_1 = require("lodash");
 var hash_sum_1 = __importDefault(require("hash-sum"));
+var for_1 = require("../../helpers/nodes/for");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
 /**
@@ -46,7 +48,7 @@ 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'; });
 }
 var blockToMarko = function (json, options) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -56,22 +58,22 @@ var blockToMarko = function (json, options) {
     if (json.name === 'Fragment') {
         return json.children.map(function (child) { return blockToMarko(child, options); }).join('\n');
     }
-    if (json.name === 'For') {
-        var forArguments = (((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || []).join(',');
-        return "<for|".concat(forArguments, "| of=(").concat(processBinding(options.component, (_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(json.children
+    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
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToMarko(item, options); })
             .join('\n'), "\n    </for>");
     }
     else if (json.name === 'Show') {
-        return "<if(".concat(processBinding(options.component, (_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code), ")>\n      ").concat(json.children
+        return "<if(".concat(processBinding(options.component, (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(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>"));
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if ((_f = json.bindings._spread) === null || _f === void 0 ? void 0 : _f.code) {
+    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
         str += " ...(".concat(json.bindings._spread.code, ") ");
     }
     for (var key in json.properties) {
@@ -79,7 +81,7 @@ var blockToMarko = function (json, options) {
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _h = json.bindings[key], code = _h.code, _j = _h.arguments, cusArgs = _j === void 0 ? ['event'] : _j;
+        var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
         if (key === '_spread' || key === '_forName') {
             continue;
         }
@@ -98,7 +100,7 @@ var blockToMarko = function (json, options) {
         return str + ' />';
     }
     str += '>';
-    if ((_g = json.bindings.innerHTML) === null || _g === void 0 ? void 0 : _g.code) {
+    if ((_f = json.bindings.innerHTML) === null || _f === void 0 ? void 0 : _f.code) {
         str += "$!{".concat(processBinding(options.component, json.bindings.innerHTML.code), "}");
     }
     if (json.children) {