@builder.io/mitosis 0.0.56-46 → 0.0.56-49

package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx

@@ -31,7 +31,8 @@ function SmileReviews(props) {
         <input css={{ display: 'block' }} placeholder="Title"/>
 
         <textarea css={{ display: 'block' }} placeholder="How was your experience?"/>
-        <button css={{ display: 'block' }} onClick={function () {
+        <button css={{ display: 'block' }} onClick={function (event) {
+            event.preventDefault();
             state.showReviewPrompt = false;
         }}>
           Submit

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

@@ -27,7 +27,6 @@ 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 collect_class_string_1 = require("../stencil/collect-class-string");
 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");
@@ -115,10 +114,6 @@ var blockToMarko = function (json, options) {
     }
     var str = '';
     str += "<".concat(toTagName(json.name), " ");
-    var classString = (0, collect_class_string_1.collectClassString)(json);
-    if (classString) {
-        str += " class=".concat(classString, " ");
-    }
     if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
         str += " ...(".concat(json.bindings._spread.code, ") ");
     }
@@ -246,8 +241,11 @@ var componentToMarko = function (userOptions) {
                 console.warn('Could not format js', err);
             }
         }
-        // Convert on-click=(...) -> on-click(...)
-        htmlString = htmlString.replace(/(on-[a-z]+)=\(/g, function (_match, group) { return group + '('; });
+        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+>/g, '</$1>');
         var finalStr = "\n".concat(jsString, "\n").concat(cssString, "\n").concat(htmlString, "\n    ")
             .replace(/\n{3,}/g, '\n\n')
             .trim();
@@ -297,7 +295,7 @@ exports.preprocessHtml = preprocessHtml;
 function postprocessHtml(htmlString) {
     return htmlString
         .replace(/<for \|/g, '<for|')
-        .replace(/<if _="([\s\S]+)"\s*>/g, function (_match, group) {
+        .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) {

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.js

@@ -16,6 +16,7 @@ var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var fast_clone_1 = require("../../helpers/fast-clone");
+var add_prevent_default_1 = require("./add-prevent-default");
 Error.stackTraceLimit = 9999;
 // TODO(misko): styles are not processed.
 var DEBUG = false;
@@ -25,6 +26,7 @@ var componentToQwik = function (userOptions) {
         var _component = _a.component, path = _a.path;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var component = (0, fast_clone_1.fastClone)(_component);
+        (0, add_prevent_default_1.addPreventDefault)(component);
         var file = new src_generator_1.File(component.name + '.js', {
             isPretty: true,
             isJSX: true,

package/dist/src/generators/stencil/collect-class-string.d.ts

@@ -1,2 +1,2 @@
 import { MitosisNode } from '../../types/mitosis-node';
-export declare function collectClassString(json: MitosisNode): string | null;
+export declare function collectClassString(json: MitosisNode, bindingOpenChar?: string, bindingCloseChar?: string): string | null;

package/dist/src/generators/stencil/collect-class-string.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectClassString = void 0;
 // This should really be a preprocessor mapping the `class` attribute binding based on what other values have
 // to make this more pluggable
-function collectClassString(json) {
+function collectClassString(json, bindingOpenChar, bindingCloseChar) {
     var _a, _b;
+    if (bindingOpenChar === void 0) { bindingOpenChar = '{'; }
+    if (bindingCloseChar === void 0) { bindingCloseChar = '}'; }
     var staticClasses = [];
     var hasStaticClasses = Boolean(staticClasses.length);
     if (json.properties.class) {
@@ -31,10 +33,10 @@ function collectClassString(json) {
         return "\"".concat(staticClassesString, "\"");
     }
     if (hasDynamicClasses && !hasStaticClasses) {
-        return "{".concat(dynamicClassesString, "}");
+        return "".concat(bindingOpenChar).concat(dynamicClassesString).concat(bindingCloseChar);
     }
     if (hasDynamicClasses && hasStaticClasses) {
-        return "{\"".concat(staticClassesString, " \" + ").concat(dynamicClassesString, "}");
+        return "".concat(bindingOpenChar, "\"").concat(staticClassesString, " \" + ").concat(dynamicClassesString).concat(bindingCloseChar);
     }
     return null;
 }

package/dist/src/helpers/get-custom-imports.js

@@ -25,7 +25,7 @@ function getCustomImports(json) {
         // This is imperfect. Basically, if the string of this import name
         // doesn't occur at all, it's definitely not used. If it does, it might.
         // So this simple check helps us ~90% of the time not over-add imports
-        // to templates. Arguably "good enough" for now, as there is generally no 
+        // to templates. Arguably "good enough" for now, as there is generally no
         // consequence to over adding here, and it would be a lot more performance expensive
         // during compilation to do a complete AST parse and look for real references
         .filter(function (item) { return blocksString.includes(item); });