@builder.io/mitosis 0.0.56-1 → 0.0.56-101

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

@@ -0,0 +1,289 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markoFormatHtml = exports.postprocessHtml = exports.preprocessHtml = exports.componentToMarko = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+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 plugins_1 = require("../../modules/plugins");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var indent_1 = require("../../helpers/indent");
+var map_refs_1 = require("../../helpers/map-refs");
+var dash_case_1 = require("../../helpers/dash-case");
+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"));
+// Having issues with this, so off for now
+var USE_MARKO_PRETTIER = false;
+/**
+ * Return the names of properties (basic literal values) on state
+ */
+function getStatePropertyNames(json) {
+    return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
+}
+var blockToMarko = function (json, options) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        return "${".concat(processBinding(options.component, (_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code), "}");
+    }
+    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
+            .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
+            .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) {
+        str += " ...(".concat(json.bindings._spread.code, ") ");
+    }
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        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;
+        if (key === '_spread' || key === '_forName') {
+            continue;
+        }
+        if (key === 'ref') {
+            str += " key=\"".concat((0, lodash_1.camelCase)(code), "\" ");
+        }
+        else if (key.startsWith('on')) {
+            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            str += " ".concat((0, dash_case_1.dashCase)(useKey), "=(").concat(cusArgs.join(','), " => ").concat(processBinding(options.component, code), ") ");
+        }
+        else if (key !== 'innerHTML') {
+            str += " ".concat(key, "=(").concat(processBinding(options.component, code), ") ");
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if ((_g = json.bindings.innerHTML) === null || _g === void 0 ? void 0 : _g.code) {
+        str += "$!{".concat(processBinding(options.component, json.bindings.innerHTML.code), "}");
+    }
+    if (json.children) {
+        str += json.children.map(function (item) { return blockToMarko(item, options); }).join('\n');
+    }
+    str += "</".concat(json.name, ">");
+    return str;
+};
+function processBinding(json, code, type) {
+    if (type === void 0) { type = 'attribute'; }
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+        replaceWith: type === 'state' ? 'input.' : type === 'class' ? 'this.input.' : 'input.',
+        includeProps: true,
+        includeState: false,
+    }), {
+        replaceWith: function (key) {
+            var isProperty = getStatePropertyNames(json).includes(key);
+            if (isProperty) {
+                return (type === 'state' || type === 'class' ? 'this.state.' : 'state.') + key;
+            }
+            return (type === 'class' || type === 'state' ? 'this.' : 'component.') + key;
+        },
+        includeProps: false,
+        includeState: true,
+    });
+}
+var componentToMarko = function (userOptions) {
+    if (userOptions === void 0) { userOptions = {}; }
+    return function (_a) {
+        var _b, _c, _d;
+        var component = _a.component;
+        var json = (0, fast_clone_1.fastClone)(component);
+        var options = __assign(__assign({}, userOptions), { component: json });
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        }
+        var css = (0, collect_css_1.collectCss)(json, {
+            prefix: (0, hash_sum_1.default)(json),
+        });
+        var domRefs = (0, get_refs_1.getRefs)(json);
+        (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat((0, lodash_1.camelCase)(refName)); });
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        }
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'object',
+            data: true,
+            functions: false,
+            getters: false,
+            valueMapper: function (code) { return processBinding(json, code, 'state'); },
+        });
+        var thisHasProps = (0, has_props_1.hasProps)(json);
+        var methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: false,
+            functions: true,
+            getters: true,
+            valueMapper: function (code) { return processBinding(json, code, 'class'); },
+        });
+        var hasState = dataString.trim().length > 5;
+        if (options.prettier !== false) {
+            try {
+                css = (0, standalone_1.format)(css, {
+                    parser: 'css',
+                    plugins: [require('prettier/parser-postcss')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format css', err);
+            }
+        }
+        var jsString = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'marko' }), methodsString, !hasState
+            ? ''
+            : "onCreate(".concat(thisHasProps ? 'input' : '', ") {\n          this.state = ").concat(dataString, "\n        }"), Array.from(domRefs)
+            .map(function (refName) { return "get ".concat((0, lodash_1.camelCase)(refName), "() { \n            return this.getEl('").concat((0, lodash_1.camelCase)(refName), "')\n          }"); })
+            .join('\n'), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
+            ? ''
+            : "onMount() { ".concat(processBinding(json, json.hooks.onMount.code, 'class'), " }"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
+            ? ''
+            : "onDestroy() { ".concat(processBinding(json, json.hooks.onUnMount.code, 'class'), " }"), !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length)
+            ? ''
+            : "onRender() { ".concat(json.hooks.onUpdate
+                .map(function (hook) { return processBinding(json, hook.code, 'class'); })
+                .join('\n\n'), " }"));
+        var htmlString = json.children.map(function (item) { return blockToMarko(item, options); }).join('\n');
+        var cssString = css.length
+            ? "style { \n  ".concat((0, indent_1.indent)(css, 2).trim(), "\n}")
+            : '';
+        if (options.prettier !== false && !USE_MARKO_PRETTIER) {
+            try {
+                htmlString = markoFormatHtml(htmlString);
+            }
+            catch (err) {
+                console.warn('Could not format html', err);
+            }
+            try {
+                jsString = (0, standalone_1.format)(jsString, {
+                    parser: 'typescript',
+                    plugins: [require('prettier/parser-typescript')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format js', err);
+            }
+        }
+        htmlString = htmlString
+            // Convert on-click=(...) -> on-click(...)
+            .replace(/(on-[a-z]+)=\(/g, function (_match, group) { return group + '('; })
+            // Fix a weird edge case where </if> becomes </if \n > which is invalid in marko
+            .replace(/<\/([a-z]+)\s+>/gi, '</$1>');
+        var finalStr = "\n".concat(jsString, "\n").concat(cssString, "\n").concat(htmlString, "\n    ")
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+        if (options.plugins) {
+            finalStr = (0, plugins_1.runPreCodePlugins)(finalStr, options.plugins);
+        }
+        if (USE_MARKO_PRETTIER && options.prettier !== false) {
+            // Commented out for now as there are strange module import issues as
+            // a result, causing builds to fail
+            // format(finalStr, {
+            //   parser: 'marko',
+            //   plugins: [require('prettier-plugin-marko')],
+            // });
+        }
+        if (options.plugins) {
+            finalStr = (0, plugins_1.runPostCodePlugins)(finalStr, options.plugins);
+        }
+        return finalStr;
+    };
+};
+exports.componentToMarko = componentToMarko;
+/**
+ * Convert marko expressions to valid html
+ *
+ * <div on-click=(() => doSomething())> -> <div on-click="() => doSomething()">
+ */
+function preprocessHtml(htmlString) {
+    return (htmlString
+        // Convert <for|foo| to <for |foo|, otherwise HTML will think the tag is not just <for> and complain
+        // when we close it with </for>
+        .replace(/<for\|/g, '<for |')
+        // Convert <if(foo) to <if _="foo", otherwise HTML will think the tag is not just <if> and complain
+        // when we close it with </if>
+        .replace(/<if\(([\s\S]+?)\)\s*>/g, function (_match, group) {
+        return "<if _=\"".concat(encodeAttributeValue(group), "\">");
+    })
+        .replace(/=\(([\s\S]*?)\)(\s*[a-z\/>])/g, function (_match, group, after) {
+        return "=\"(".concat(encodeAttributeValue(group), ")\"").concat(after);
+    }));
+}
+exports.preprocessHtml = preprocessHtml;
+/**
+ * Convert HTML back to marko expressions
+ *
+ * <div on-click="() => doSomething()"> -> <div on-click=(() => doSomething())>
+ */
+function postprocessHtml(htmlString) {
+    return htmlString
+        .replace(/<for \|/g, '<for|')
+        .replace(/<if _="([\s\S]+?)"\s*>/g, function (_match, group) {
+        return "<if(".concat(decodeAttributeValue(group), ")>");
+    })
+        .replace(/="\(([\s\S]*?)\)"(\s*[a-z\/>])/g, function (_match, group, after) {
+        return "=(".concat(decodeAttributeValue(group), ")").concat(after);
+    });
+}
+exports.postprocessHtml = postprocessHtml;
+// Encode quotes and spaces for HTML attribute values
+function encodeAttributeValue(value) {
+    return value.replace(/"/g, '&quot;').replace(/\n/g, '&#10;');
+}
+// Decode quotes and spaces for HTML attribute values
+function decodeAttributeValue(value) {
+    return value.replace(/&quot;/g, '"').replace(/&#10;/g, '\n');
+}
+/**
+ * Format Marko HTML using the built-in HTML parser for prettier,
+ * given issues with Marko's plugin
+ */
+function markoFormatHtml(htmlString) {
+    return postprocessHtml((0, standalone_1.format)(preprocessHtml(htmlString), {
+        parser: 'html',
+        plugins: [require('prettier/parser-html')],
+    }));
+}
+exports.markoFormatHtml = markoFormatHtml;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export * from './generate';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./generate"), exports);

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

@@ -1,4 +1,4 @@
-import { Transpiler } from '..';
+import { Transpiler } from '../types/transpiler';
 import { MitosisNode } from '../types/mitosis-node';
 export interface ToMitosisOptions {
     prettier?: boolean;

package/dist/src/generators/mitosis.js

@@ -14,6 +14,15 @@ var __assign = (this && this.__assign) || function () {
     };
     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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +39,14 @@ var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
 var jsx_1 = require("../parsers/jsx");
 var react_1 = require("./react");
+var state_1 = require("../helpers/state");
 exports.DEFAULT_FORMAT = 'legacy';
 // Special isValidAttributeName for Mitosis so we can allow for $ in names
 var isValidAttributeName = function (str) {
     return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
 };
 var blockToMitosis = function (json, toMitosisOptions) {
+    var _a, _b, _c, _d, _e;
     if (toMitosisOptions === void 0) { toMitosisOptions = {}; }
     var options = __assign({ format: exports.DEFAULT_FORMAT }, toMitosisOptions);
     if (options.format === 'react') {
@@ -48,23 +59,21 @@ var blockToMitosis = function (json, toMitosisOptions) {
     }
     if (json.name === 'For') {
         var needsWrapper = json.children.length !== 1;
-        return "<For each={".concat(json.bindings.each, "}>\n    {(").concat(json.properties._forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return (0, exports.blockToMitosis)(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+        return "<For each={".concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, "}>\n    {(").concat(json.properties._forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children.map(function (child) { return (0, exports.blockToMitosis)(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
     }
     if (json.properties._text) {
         return json.properties._text;
     }
-    if (json.bindings._text) {
-        return "{".concat(json.bindings._text, "}");
+    if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
+        return "{".concat((_c = json.bindings._text) === null || _c === void 0 ? void 0 : _c.code, "}");
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if (json.bindings._spread) {
-        str += " {...(".concat(json.bindings._spread, ")} ");
+    if ((_d = json.bindings._spread) === null || _d === void 0 ? void 0 : _d.code) {
+        str += " {...(".concat(json.bindings._spread.code, ")} ");
     }
     for (var key in json.properties) {
-        var value = (json.properties[key] || '')
-            .replace(/"/g, '&quot;')
-            .replace(/\n/g, '\\n');
+        var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         if (!isValidAttributeName(key)) {
             console.warn('Skipping invalid attribute name:', key);
         }
@@ -73,7 +82,7 @@ var blockToMitosis = function (json, toMitosisOptions) {
         }
     }
     for (var key in json.bindings) {
-        var value = json.bindings[key];
+        var value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
         if (key === '_spread') {
             continue;
         }
@@ -99,20 +108,21 @@ var blockToMitosis = function (json, toMitosisOptions) {
     }
     str += '>';
     if (json.children) {
-        str += json.children
-            .map(function (item) { return (0, exports.blockToMitosis)(item, options); })
-            .join('\n');
+        str += json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n');
     }
     str += "</".concat(json.name, ">");
     return str;
 };
 exports.blockToMitosis = blockToMitosis;
 var getRefsString = function (json, refs) {
-    if (refs === void 0) { refs = (0, get_refs_1.getRefs)(json); }
+    var _a, _b;
+    if (refs === void 0) { refs = Array.from((0, get_refs_1.getRefs)(json)); }
     var str = '';
-    for (var _i = 0, _a = Array.from(refs); _i < _a.length; _i++) {
-        var ref = _a[_i];
-        str += "\nconst ".concat(ref, " = useRef();");
+    for (var _i = 0, refs_1 = refs; _i < refs_1.length; _i++) {
+        var ref = refs_1[_i];
+        var typeParameter = ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.typeParameter) || '';
+        var argument = ((_b = json['refs'][ref]) === null || _b === void 0 ? void 0 : _b.argument) || '';
+        str += "\nconst ".concat(ref, " = useRef").concat(typeParameter ? "<".concat(typeParameter, ">") : '', "(").concat(argument, ");");
     }
     return str;
 };
@@ -132,31 +142,26 @@ var componentToMitosis = function (toMitosisOptions) {
             })({ component: component });
         }
         var json = (0, fast_clone_1.fastClone)(component);
-        var refs = (0, get_refs_1.getRefs)(json);
-        (0, map_refs_1.mapRefs)(json, function (refName) { return "".concat(refName, ".current"); });
+        var domRefs = (0, get_refs_1.getRefs)(component);
+        // grab refs not used for bindings
+        var jsRefs = Object.keys(component.refs).filter(function (ref) { return domRefs.has(ref); });
+        var refs = __spreadArray(__spreadArray([], jsRefs, true), Array.from(domRefs), true);
+        (0, map_refs_1.mapRefs)(json, function (refName) {
+            return "".concat(refName).concat(domRefs.has(refName) ? ".current" : '');
+        });
         var addWrapper = json.children.length !== 1;
         var components = Array.from((0, get_components_1.getComponents)(json));
-        var mitosisComponents = components.filter(function (item) {
-            return mitosisCoreComponents.includes(item);
-        });
+        var mitosisComponents = components.filter(function (item) { return mitosisCoreComponents.includes(item); });
         var otherComponents = components.filter(function (item) { return !mitosisCoreComponents.includes(item); });
-        var hasState = Boolean(Object.keys(component.state).length);
-        var needsMitosisCoreImport = Boolean(hasState || refs.size || mitosisComponents.length);
+        var hasState = (0, state_1.checkHasState)(component);
+        var needsMitosisCoreImport = Boolean(hasState || refs.length || mitosisComponents.length);
         var stringifiedUseMetadata = json5_1.default.stringify(component.meta.useMetadata);
         // TODO: smart only pull in imports as needed
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
             ? ''
-            : "import { ".concat(!hasState ? '' : 'useState, ', " ").concat(!refs.size ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length
-            ? ''
-            : "import { ".concat(otherComponents.join(','), " } from '@components';"), (0, render_imports_1.renderPreComponent)(json), stringifiedUseMetadata !== '{}'
+            : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
             ? "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(stringifiedUseMetadata, ")")
-            : '', component.name, !hasState
-            ? ''
-            : "const state = useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
-            ? ''
-            : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
-            ? ''
-            : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n'), addWrapper ? '</>' : '');
+            : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n'), addWrapper ? '</>' : '');
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/qwik/add-prevent-default.d.ts

@@ -0,0 +1,7 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+/**
+ * Find event handlers that explicitly call .preventDefault() and
+ * add preventdefault:event
+ * https://qwik.builder.io/tutorial/events/preventdefault
+ */
+export declare function addPreventDefault(json: MitosisComponent): void;

package/dist/src/generators/qwik/add-prevent-default.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPreventDefault = void 0;
+var traverse_1 = __importDefault(require("traverse"));
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+/**
+ * Find event handlers that explicitly call .preventDefault() and
+ * add preventdefault:event
+ * https://qwik.builder.io/tutorial/events/preventdefault
+ */
+function addPreventDefault(json) {
+    (0, traverse_1.default)(json).forEach(function (node) {
+        var _a;
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.bindings) {
+                for (var _i = 0, _b = Object.keys(node.bindings); _i < _b.length; _i++) {
+                    var key = _b[_i];
+                    if (key.startsWith('on')) {
+                        if ((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.includes('.preventDefault()')) {
+                            var event_1 = key.slice(2).toLowerCase();
+                            node.properties['preventdefault:' + event_1] = '';
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+exports.addPreventDefault = addPreventDefault;

package/dist/src/generators/qwik/component-generator.d.ts

@@ -0,0 +1,4 @@
+import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+export interface ToQwikOptions extends BaseTranspilerOptions {
+}
+export declare const componentToQwik: (userOptions?: ToQwikOptions) => Transpiler;