@builder.io/mitosis 0.0.56-99 → 0.0.58

package/dist/src/generators/qwik/component-generator.js

@@ -8,24 +8,30 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToQwik = void 0;
 var babel_transform_1 = require("../../helpers/babel-transform");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var collect_css_1 = require("../../helpers/styles/collect-css");
+var mitosis_component_1 = require("../../types/mitosis-component");
 var state_1 = require("../../helpers/state");
 var add_prevent_default_1 = require("./add-prevent-default");
 var convert_method_to_function_1 = require("./convert-method-to-function");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var plugins_1 = require("../../modules/plugins");
+var traverse_1 = __importDefault(require("traverse"));
+var stable_serialize_1 = require("./stable-serialize");
 Error.stackTraceLimit = 9999;
 // TODO(misko): styles are not processed.
 var DEBUG = false;
 var componentToQwik = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
-        var _b, _c, _d;
+        var _b, _c, _d, _e;
         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);
@@ -36,10 +42,11 @@ var componentToQwik = function (userOptions) {
         if (userOptions.plugins) {
             component = (0, plugins_1.runPostJsonPlugins)(component, userOptions.plugins);
         }
-        var file = new src_generator_1.File(component.name + '.js', {
+        var isTypeScript = !!userOptions.typescript;
+        var file = new src_generator_1.File(component.name + (isTypeScript ? '.ts' : '.js'), {
             isPretty: true,
             isJSX: true,
-            isTypeScript: false,
+            isTypeScript: isTypeScript,
             isModule: true,
             isBuilder: false,
         }, '@builder.io/qwik', '');
@@ -48,12 +55,13 @@ var componentToQwik = function (userOptions) {
             emitTypes(file, component);
             var metadata = component.meta.useMetadata || {};
             var isLightComponent = ((_c = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
-            var imports_1 = (_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.imports;
+            var mutable_1 = ((_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.mutable) || [];
+            var imports_1 = (_e = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _e === void 0 ? void 0 : _e.imports;
             imports_1 && Object.keys(imports_1).forEach(function (key) { return file.import(imports_1[key], key); });
             var state_2 = emitStateMethodsAndRewriteBindings(file, component, metadata);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
-            var componentBody = (0, src_generator_1.arrowFnBlock)(['props'], [
+            var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
@@ -64,16 +72,21 @@ var componentToQwik = function (userOptions) {
                     emitUseWatch(file, component);
                     emitUseCleanup(file, component);
                     emitTagNameHack(file, component);
-                    emitJSX(file, component);
+                    emitJSX(file, component, mutable_1);
                 },
-            ], [component.propsTypeRef || 'any']);
+            ], [component.propsTypeRef + (isLightComponent ? '&{key?:any}' : '') || 'any']);
             file.src.const(component.name, isLightComponent
-                ? componentBody
-                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentBody]), true, true);
+                ? componentFn
+                : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentFn]), true, true);
             file.exportDefault(component.name);
             emitStyles(file, css_1);
-            DEBUG && file.exportConst('COMPONENT', JSON.stringify(component, null, 2));
-            return '// GENERATED BY MITOSIS\n\n' + file.toString();
+            DEBUG && file.exportConst('COMPONENT', (0, stable_serialize_1.stableJSONserialize)(component));
+            var sourceFile = '// GENERATED BY MITOSIS\n\n' + file.toString();
+            if (userOptions.plugins) {
+                sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, userOptions.plugins);
+                sourceFile = (0, plugins_1.runPostCodePlugins)(sourceFile, userOptions.plugins);
+            }
+            return sourceFile;
         }
         catch (e) {
             console.error(e);
@@ -126,12 +139,19 @@ function emitUseCleanup(file, component) {
         file.src.emit(file.import(file.qwikModule, 'useCleanup$').localName, '(()=>{', code, '});');
     }
 }
-function emitJSX(file, component) {
+function emitJSX(file, component, mutable) {
     var directives = new Map();
     var handlers = new Map();
     var styles = new Map();
     var parentSymbolBindings = {};
-    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
+    var mutablePredicate = mutable.length > 0
+        ? function (code) {
+            return !!mutable.find(function (txt) {
+                return code.indexOf(txt) !== -1;
+            });
+        }
+        : undefined;
+    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings, mutablePredicate));
 }
 function emitUseContextProvider(file, component) {
     Object.keys(component.context.set).forEach(function (ctxKey) {
@@ -141,14 +161,14 @@ function emitUseContextProvider(file, component) {
             Object.keys(context.value).forEach(function (prop) {
                 var propValue = context.value[prop];
                 file.src.emit(prop, ':');
-                if (isGetter(propValue)) {
-                    file.src.emit('(()=>{', extractGetterBody(propValue), '})(),');
+                if ((propValue === null || propValue === void 0 ? void 0 : propValue.type) === 'getter') {
+                    file.src.emit('(()=>{', extractGetterBody(propValue.code), '})(),');
                 }
                 else if (typeof propValue == 'function') {
                     throw new Error('Qwik: Functions are not supported in context');
                 }
                 else {
-                    file.src.emit(JSON.stringify(propValue));
+                    file.src.emit((0, stable_serialize_1.stableJSONserialize)(propValue));
                 }
             });
         file.src.emit('})', ');');
@@ -185,13 +205,17 @@ function emitUseStore(file, stateInit) {
     var state = stateInit[0];
     var hasState = state && Object.keys(state).length > 0;
     if (hasState) {
-        file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName, '(');
-        file.src.emit(JSON.stringify(state));
+        file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName);
+        if (file.options.isTypeScript) {
+            file.src.emit('<any>');
+        }
+        file.src.emit('(');
+        file.src.emit((0, stable_serialize_1.stableJSONserialize)(state));
         file.src.emit(');');
     }
     else {
         // TODO hack for now so that `state` variable is defined, even though it is never read.
-        file.src.emit('const state={};');
+        file.src.emit('const state={tagName:""' + (file.options.isTypeScript ? 'as any' : '') + '};');
     }
 }
 function emitTypes(file, component) {
@@ -208,26 +232,21 @@ function emitStateMethodsAndRewriteBindings(file, component, metadata) {
     rewriteCodeExpr(component, methodMap, lexicalArgs, (_a = metadata.qwik) === null || _a === void 0 ? void 0 : _a.replace);
     return state;
 }
-function rewriteCodeExpr(obj, methodMap, lexicalArgs, replace) {
-    if (obj && typeof obj == 'object') {
-        if (Array.isArray(obj)) {
-            obj.forEach(function (item) { return rewriteCodeExpr(item, methodMap, lexicalArgs, replace); });
-        }
-        else {
-            Object.keys(obj).forEach(function (key) {
-                var value = obj[key];
-                if (typeof value == 'string') {
-                    if (value.startsWith(CODE_PREFIX) || key == 'code') {
-                        var code_1 = (0, convert_method_to_function_1.convertMethodToFunction)(value, methodMap, lexicalArgs);
-                        replace &&
-                            Object.keys(replace).forEach(function (key) { return (code_1 = code_1.replace(key, replace[key])); });
-                        obj[key] = code_1;
-                    }
-                }
-                rewriteCodeExpr(value, methodMap, lexicalArgs, replace);
-            });
+var checkIsObjectWithCodeBlock = function (obj) {
+    return typeof obj == 'object' && (obj === null || obj === void 0 ? void 0 : obj.code) && typeof obj.code === 'string';
+};
+function rewriteCodeExpr(component, methodMap, lexicalArgs, replace) {
+    if (replace === void 0) { replace = {}; }
+    (0, traverse_1.default)(component).forEach(function (item) {
+        if (!((0, mitosis_component_1.checkIsCodeValue)(item) || checkIsObjectWithCodeBlock(item))) {
+            return;
         }
-    }
+        var code = (0, convert_method_to_function_1.convertMethodToFunction)(item.code, methodMap, lexicalArgs);
+        Object.keys(replace).forEach(function (key) {
+            code = code.replace(key, replace[key]);
+        });
+        item.code = code;
+    });
 }
 function getLexicalScopeVars(component) {
     return __spreadArray(__spreadArray(['props', 'state'], Object.keys(component.refs), true), Object.keys(component.context.get), true);
@@ -243,30 +262,25 @@ function emitImports(file, component) {
         });
     });
 }
-var CODE_PREFIX = '@builder.io/mitosis/';
-var FUNCTION = CODE_PREFIX + 'function:';
-var METHOD = CODE_PREFIX + 'method:';
-var GETTER = CODE_PREFIX + 'method:get ';
 function emitStateMethods(file, componentState, lexicalArgs) {
     var stateValues = {};
     var stateInit = [stateValues];
     var methodMap = stateToMethodOrGetter(componentState);
     Object.keys(componentState).forEach(function (key) {
-        var _a;
-        var code = (_a = componentState[key]) === null || _a === void 0 ? void 0 : _a.code;
-        if (isCode(code)) {
-            var codeIisGetter = isGetter(code);
-            var prefixIdx = code.indexOf(':') + 1;
-            if (codeIisGetter) {
+        var stateValue = componentState[key];
+        if ((0, mitosis_component_1.checkIsCodeValue)(stateValue)) {
+            var code = stateValue.code;
+            var prefixIdx = 0;
+            if (stateValue.type === 'getter') {
                 prefixIdx += 'get '.length;
             }
-            else if (isFunction(code)) {
+            else if (stateValue.type === 'function') {
                 prefixIdx += 'function '.length;
             }
             code = code.substring(prefixIdx);
             code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
             var functionName = code.split(/\(/)[0];
-            if (codeIisGetter) {
+            if (stateValue.type === 'getter') {
                 stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
             }
             if (!file.options.isTypeScript) {
@@ -276,7 +290,7 @@ function emitStateMethods(file, componentState, lexicalArgs) {
             file.exportConst(functionName, 'function ' + code, true);
         }
         else {
-            stateValues[key] = code;
+            stateValues[key] = stateValue === null || stateValue === void 0 ? void 0 : stateValue.code;
         }
     });
     return stateInit;
@@ -284,15 +298,6 @@ function emitStateMethods(file, componentState, lexicalArgs) {
 function convertTypeScriptToJS(code) {
     return (0, babel_transform_1.babelTransformExpression)(code, {});
 }
-function isGetter(code) {
-    return typeof code === 'string' && code.startsWith(GETTER);
-}
-function isCode(code) {
-    return typeof code === 'string' && code.startsWith(CODE_PREFIX);
-}
-function isFunction(code) {
-    return typeof code === 'string' && code.startsWith(FUNCTION);
-}
 function extractGetterBody(code) {
     var start = code.indexOf('{');
     var end = code.lastIndexOf('}');
@@ -301,10 +306,9 @@ function extractGetterBody(code) {
 function stateToMethodOrGetter(state) {
     var methodMap = {};
     Object.keys(state).forEach(function (key) {
-        var _a;
-        var code = (_a = state[key]) === null || _a === void 0 ? void 0 : _a.code;
-        if (typeof code == 'string' && code.startsWith(METHOD)) {
-            methodMap[key] = code.startsWith(GETTER) ? 'getter' : 'method';
+        var stateVal = state[key];
+        if ((stateVal === null || stateVal === void 0 ? void 0 : stateVal.type) === 'getter' || (stateVal === null || stateVal === void 0 ? void 0 : stateVal.type) === 'method') {
+            methodMap[key] = stateVal.type;
         }
     });
     return methodMap;

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

@@ -16,7 +16,6 @@ export declare function createFileSet(options?: QwikOptions): FileSet;
 export declare function addComponent(fileSet: FileSet, component: MitosisComponent, opts?: {
     isRoot?: boolean;
     shareStyles?: boolean;
-    hostProps?: Record<string, string>;
 }): void;
 export declare function renderUseLexicalScope(file: File): (this: SrcBuilder) => SrcBuilder;
 export declare function addCommonStyles(fileSet: FileSet): void;

package/dist/src/generators/qwik/component.js

@@ -21,11 +21,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
-var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
 var handlers_1 = require("./handlers");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
+var stable_serialize_1 = require("./stable-serialize");
 var styles_1 = require("./styles");
 function createFileSet(options) {
     if (options === void 0) { options = {}; }
@@ -43,7 +43,7 @@ function createFileSet(options) {
         med: new src_generator_1.File('med.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
         low: new src_generator_1.File('low.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
     };
-    Object.defineProperty(fileSet, '_commonStyles', {
+    Object.defineProperty(fileSet, 'CommonStyles', {
         enumerable: false,
         value: { styles: new Map(), symbolName: null },
     });
@@ -51,11 +51,11 @@ function createFileSet(options) {
 }
 exports.createFileSet = createFileSet;
 function getCommonStyles(fileSet) {
-    return fileSet['_commonStyles'];
+    return fileSet['CommonStyles'];
 }
 function addComponent(fileSet, component, opts) {
     if (opts === void 0) { opts = {}; }
-    var _opts = __assign({ isRoot: false, shareStyles: false, hostProps: null }, opts);
+    var _opts = __assign({ isRoot: false, shareStyles: false }, opts);
     (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { 
         // A set of components that should not be compiled away because they are implemented as runtime components.
         Image: undefined, CoreButton: undefined }));
@@ -74,32 +74,33 @@ function addComponent(fileSet, component, opts) {
     if (styles.size) {
         if (_opts.shareStyles) {
             if (_opts.isRoot) {
-                var symbolName = componentName + '_styles';
+                var symbolName = componentName + 'Styles';
                 getCommonStyles(fileSet).symbolName = symbolName;
                 useStyles = generateStyles(onRenderFile, fileSet.low, symbolName, false);
             }
         }
         else {
-            var symbolName = componentName + '_styles';
+            var symbolName = componentName + 'Styles';
             onRenderFile.exportConst(symbolName, (0, styles_1.renderStyles)(styles));
             useStyles = generateStyles(onRenderFile, onRenderFile, symbolName, true);
         }
     }
+    if (component.meta.cssCode) {
+        var symbolName = componentName + 'UsrStyles';
+        onRenderFile.exportConst(symbolName, (0, stable_serialize_1.stableJSONserialize)(component.meta.cssCode));
+        useStyles = (function (fns) {
+            return function () {
+                var _this = this;
+                fns.forEach(function (fn) { return fn.apply(_this); });
+            };
+        })([useStyles, generateStyles(onRenderFile, onRenderFile, symbolName, false)]);
+    }
     var directives = new Map();
     var rootChildren = component.children;
-    if (_opts.hostProps) {
-        rootChildren = [
-            (0, create_mitosis_node_1.createMitosisNode)({
-                name: 'Host',
-                properties: _opts.hostProps,
-                children: component.children,
-            }),
-        ];
-    }
     addComponentOnMount(onRenderFile, function () {
         return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, rootChildren, styles, {}), ';');
     }, componentName, component, useStyles);
-    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, onRenderFile, componentName + '_onMount')], ['any', 'any']));
+    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, onRenderFile, componentName + 'OnMount')], ['any', 'any']));
     directives.forEach(function (code, name) {
         fileSet.med.import(fileSet.med.qwikModule, 'h');
         fileSet.med.exportConst(name, code, true);
@@ -108,7 +109,9 @@ function addComponent(fileSet, component, opts) {
 exports.addComponent = addComponent;
 function generateStyles(fromFile, dstFile, symbol, scoped) {
     return function () {
-        this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(fromFile, dstFile, symbol)]), ';');
+        this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'useStylesScopedQrl' : 'useStylesQrl'), [
+            generateQrl(fromFile, dstFile, symbol),
+        ]), ';');
     };
 }
 function addBuilderBlockClass(children) {
@@ -138,10 +141,10 @@ function addComponentOnMount(componentFile, onRenderEmit, componentName, compone
     if (component.inputs) {
         component.inputs.forEach(function (input) {
             input.defaultValue !== undefined &&
-                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
+                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', (0, stable_serialize_1.stableJSONserialize)(input.defaultValue), ';');
         });
     }
-    componentFile.exportConst(componentName + '_onMount', function () {
+    componentFile.exportConst(componentName + 'OnMount', function () {
         var _this = this;
         this.emit((0, src_generator_1.arrowFnValue)(['props'], function () {
             var _a;

package/dist/src/generators/qwik/directives.d.ts

@@ -18,6 +18,7 @@ interface ImageProps {
     lazy?: boolean;
     class?: string;
     children?: any[];
+    noWebp?: boolean;
 }
 export declare function Image(props: ImageProps): any;
 export declare function __passThroughProps__(dstProps: Record<string, any>, srcProps: Record<string, any>): Record<string, any>;

package/dist/src/generators/qwik/directives.js

@@ -5,6 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreButton = exports.__passThroughProps__ = exports.Image = exports.DIRECTIVES = void 0;
+var for_1 = require("../../helpers/nodes/for");
 var minify_1 = require("../minify");
 var src_generator_1 = require("./src-generator");
 exports.DIRECTIVES = {
@@ -27,32 +28,28 @@ exports.DIRECTIVES = {
             });
         };
     },
-    For: function (node, blockFn) {
+    For: function (_node, blockFn) {
         return function () {
             var _this = this;
             var _a;
+            var node = _node;
             var expr = (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code;
             this.jsxExpression(function () {
-                var forName = node.properties._forName || '_';
-                var indexName = node.properties._indexName;
-                _this.emit('(', expr, '||[]).map(', '((', forName, indexName ? ',' : '', indexName ? indexName : '', ') => {');
+                var forArgs = (0, for_1.getForArguments)(node);
+                var forName = forArgs[0];
+                _this.emit('(', expr, '||[]).map(');
+                _this.isBuilder && _this.emit('(('), _this.emit('function(', forArgs, '){');
                 if (_this.isBuilder) {
                     _this.emit('var state=Object.assign({},this,{', (0, src_generator_1.iteratorProperty)(expr), ':', forName, '==null?{}:', forName, '});');
                 }
                 _this.emit('return(');
                 blockFn();
-                _this.emit(');}))');
+                _this.emit(');}');
+                _this.isBuilder && _this.emit(').bind(state))');
+                _this.emit(')');
             });
         };
     },
-    Host: function (node, blockFn) {
-        return function () {
-            var host = this.file.import(this.file.qwikModule, 'Host').localName;
-            this.jsxBegin(host, node.properties, node.bindings);
-            blockFn();
-            this.jsxEnd(host);
-        };
-    },
     Image: (0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), Image),
     CoreButton: (0, minify_1.minify)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", ""], ["", ""])), CoreButton),
     __passThroughProps__: (0, minify_1.minify)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ""], ["", ""])), __passThroughProps__),
@@ -62,7 +59,7 @@ function Image(props) {
     var jsx = props.children || [];
     var image = props.image;
     if (image) {
-        var isBuilderIoImage = !!(image || '').match(/\.builder\.io/);
+        var isBuilderIoImage = !!(image || '').match(/\.builder\.io/) && !props.noWebp;
         var isPixel = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.id.startsWith('builder-pixel-');
         var imgProps = {
             src: props.image,

package/dist/src/generators/qwik/jsx.d.ts

@@ -13,4 +13,4 @@ import { CssStyles } from './styles';
  * @param root True if this is the root JSX, and may need a Fragment wrapper.
  * @returns
  */
-export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, parentSymbolBindings: Record<string, string>, root?: boolean): any;
+export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, parentSymbolBindings: Record<string, string>, mutablePredicate?: (code: string) => boolean, root?: boolean): any;

package/dist/src/generators/qwik/jsx.js

@@ -36,7 +36,7 @@ var src_generator_1 = require("./src-generator");
  * @param root True if this is the root JSX, and may need a Fragment wrapper.
  * @returns
  */
-function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, root) {
+function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, mutablePredicate, root) {
     if (root === void 0) { root = true; }
     return function () {
         var _this = this;
@@ -121,9 +121,9 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                         }
                     }
                     var symbolBindings = {};
-                    var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
+                    var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings, mutablePredicate);
                     _this.jsxBegin(childName, props, __assign(__assign(__assign({}, bindings), parentSymbolBindings), specialBindings));
-                    renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, false).call(_this);
+                    renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, mutablePredicate, false).call(_this);
                     _this.jsxEnd(childName);
                 }
             }
@@ -138,7 +138,7 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                 children = children.filter(function (c) { return !isEmptyTextNode(c); });
                 var childNeedsFragment = children.length > 1 || (children.length && isTextNode(children[0]));
                 childNeedsFragment && srcBuilder.jsxBeginFragment(fragmentSymbol);
-                renderJSXNodes(file, directives, handlers, children, styles, {}, false).call(srcBuilder);
+                renderJSXNodes(file, directives, handlers, children, styles, {}, mutablePredicate, false).call(srcBuilder);
                 childNeedsFragment && srcBuilder.jsxEndFragment();
             };
         }
@@ -182,7 +182,7 @@ function isSlotProjection(child) {
  * @param symbolBindings Options record which will receive the symbol bindings
  * @returns
  */
-function rewriteHandlers(file, handlers, bindings, symbolBindings) {
+function rewriteHandlers(file, handlers, bindings, symbolBindings, mutablePredicate) {
     var _a;
     var outBindings = {};
     for (var key in bindings) {
@@ -207,6 +207,10 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
                 else if (key.startsWith('component.options.')) {
                     key = (0, src_generator_1.lastProperty)(key);
                 }
+                if (mutablePredicate && bindingExpr && mutablePredicate(bindingExpr)) {
+                    file.import(file.qwikModule, 'mutable');
+                    bindingExpr = "mutable(".concat(bindingExpr, ")");
+                }
                 outBindings[key] = { code: bindingExpr };
             }
         }

package/dist/src/generators/qwik/src-generator.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
 var standalone_1 = require("prettier/standalone");
+var builder_1 = require("../../parsers/builder");
+var stable_serialize_1 = require("./stable-serialize");
 var File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {
         this.imports = new Imports();
@@ -320,7 +322,7 @@ var SrcBuilder = /** @class */ (function () {
                     key = key + '$';
                     binding_1 = "(event)=>".concat(binding_1);
                 }
-                if (!binding_1 && rawKey in props) {
+                else if (!binding_1 && rawKey in props) {
                     binding_1 = quote(props[rawKey]);
                 }
                 else if (binding_1 != null && binding_1 === props[key]) {
@@ -356,6 +358,8 @@ var SrcBuilder = /** @class */ (function () {
             if (value) {
                 if (key === 'innerHTML')
                     key = 'dangerouslySetInnerHTML';
+                if (key === 'dataSet')
+                    return; // ignore
                 if (self.isJSX) {
                     self.emit(' ', key, '=');
                     if (typeof value == 'string' && value.startsWith('"') && value.endsWith('"')) {
@@ -476,7 +480,7 @@ function possiblyQuotePropertyName(key) {
     return /^\w[\w\d]*$/.test(key) ? key : quote(key);
 }
 function quote(text) {
-    var string = JSON.stringify(text);
+    var string = (0, stable_serialize_1.stableJSONserialize)(text);
     // So \u2028 is a line separator character and prettier treats it as such
     // https://www.fileformat.info/info/unicode/char/2028/index.htm
     // That means it can't be inside of a string, so we replace it with `\\u2028`.
@@ -524,6 +528,9 @@ function iif(code) {
     if (code.endsWith(_virtual_index) && !code.endsWith(return_virtual_index)) {
         code = code.substr(0, code.length - _virtual_index.length) + return_virtual_index;
     }
+    if (code.indexOf('export') !== -1) {
+        code = (0, builder_1.convertExportDefaultToReturn)(code);
+    }
     return function () {
         code && this.emit('(()=>{', code, '})()');
     };
@@ -549,7 +556,8 @@ function literalTagName(symbol) {
  */
 function isStatement(code) {
     code = code.trim();
-    if (code.startsWith('(') || code.startsWith('{') || code.endsWith('}')) {
+    if ((code.startsWith('(') && code.endsWith(')')) ||
+        (code.startsWith('{') && code.endsWith('}'))) {
         // Code starting with `(` is most likely and IFF and hence is an expression.
         return false;
     }

package/dist/src/generators/qwik/stable-serialize.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Same as JSON.stringify, but sorts keys ensuring that the output is stable across runs.
+ * @param obj
+ * @returns JSON serialized string
+ */
+export declare function stableJSONserialize(obj: any): string;

package/dist/src/generators/qwik/stable-serialize.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableJSONserialize = void 0;
+/**
+ * Same as JSON.stringify, but sorts keys ensuring that the output is stable across runs.
+ * @param obj
+ * @returns JSON serialized string
+ */
+function stableJSONserialize(obj) {
+    var output = [];
+    _serialize(output, obj);
+    return output.join('');
+}
+exports.stableJSONserialize = stableJSONserialize;
+function _serialize(output, obj) {
+    if (obj == null) {
+        output.push('null');
+    }
+    else if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            output.push('[');
+            var sep = '';
+            for (var i = 0; i < obj.length; i++) {
+                output.push(sep);
+                _serialize(output, obj[i]);
+                sep = ',';
+            }
+            output.push(']');
+        }
+        else {
+            var keys = Object.keys(obj).sort();
+            output.push('{');
+            var sep = '';
+            for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+                var key = keys_1[_i];
+                var value = obj[key];
+                if (value !== undefined) {
+                    output.push(sep);
+                    output.push(JSON.stringify(key));
+                    output.push(':');
+                    _serialize(output, value);
+                    sep = ',';
+                }
+            }
+            output.push('}');
+        }
+    }
+    else {
+        output.push(JSON.stringify(obj));
+    }
+}

package/dist/src/generators/react/generator.d.ts

@@ -0,0 +1,6 @@
+import { TranspilerGenerator } from '../../types/transpiler';
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToReactOptions } from './types';
+export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
+export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
+export declare const componentToReact: TranspilerGenerator<ToReactOptions>;