@builder.io/mitosis 0.0.56-103 → 0.0.56-104

package/dist/src/__tests__/data/blocks/content-slot-jsx.raw.jsx

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
 function ContentSlotJsxCode(props) {
     return (<div>
-      {props.slotTesting}
+      <mitosis_1.Show when={props.slotTesting}>
+        <div>{props.slotTesting}</div>
+      </mitosis_1.Show>
       <div>
         <hr />
       </div>

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

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

package/dist/src/__tests__/shared.js

@@ -1,6 +1,6 @@
 "use strict";
 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');
@@ -143,6 +143,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,
@@ -284,6 +295,17 @@ var TESTS_FOR_TARGET = {
         FOR_SHOW_TESTS,
     ],
 };
+var runTestsForJsx = function () {
+    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 (target, generator) {
     var testsArray = TESTS_FOR_TARGET[target];
     test('Remove Internal mitosis package', function () {
@@ -297,9 +319,15 @@ var runTestsForTarget = function (target, generator) {
         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();
+                    try {
+                        var component = (0, jsx_1.parseJsx)(tests[key]);
+                        var output = generator({ component: component, path: path });
+                        expect(output).toMatchSnapshot();
+                    }
+                    catch (error) {
+                        console.log('failed to parse', error);
+                        throw error;
+                    }
                 });
             });
         });

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/qwik/component-generator.js

@@ -8,24 +8,29 @@ 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"));
 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);
@@ -48,7 +53,8 @@ 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);
@@ -64,7 +70,7 @@ var componentToQwik = function (userOptions) {
                     emitUseWatch(file, component);
                     emitUseCleanup(file, component);
                     emitTagNameHack(file, component);
-                    emitJSX(file, component);
+                    emitJSX(file, component, mutable_1);
                 },
             ], [component.propsTypeRef || 'any']);
             file.src.const(component.name, isLightComponent
@@ -126,12 +132,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,8 +154,8 @@ 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');
@@ -208,26 +221,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 +251,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 +279,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 +287,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 +295,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,7 +21,6 @@ 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");
@@ -43,7 +42,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 +50,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 +73,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, JSON.stringify(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 +108,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) {
@@ -141,7 +143,7 @@ function addComponentOnMount(componentFile, onRenderEmit, componentName, compone
                 inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', JSON.stringify(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

@@ -35,24 +35,20 @@ exports.DIRECTIVES = {
             this.jsxExpression(function () {
                 var forName = node.properties._forName || '_';
                 var indexName = node.properties._indexName;
-                _this.emit('(', expr, '||[]).map(', '((', forName, indexName ? ',' : '', indexName ? indexName : '', ') => {');
+                _this.emit('(', expr, '||[]).map(');
+                _this.isBuilder && _this.emit('(('),
+                    _this.emit('function(', forName, indexName ? ',' : '', indexName ? indexName : '', '){');
                 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 +58,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,7 @@
 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 File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {
         this.imports = new Imports();
@@ -320,7 +321,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]) {
@@ -524,6 +525,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 +553,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/react/state.js

@@ -7,13 +7,12 @@ exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseSt
 var core_1 = require("@babel/core");
 var json5_1 = __importDefault(require("json5"));
 var traverse_1 = __importDefault(require("traverse"));
-var function_literal_prefix_1 = require("../../constants/function-literal-prefix");
-var method_literal_prefix_1 = require("../../constants/method-literal-prefix");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var capitalize_1 = require("../../helpers/capitalize");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var function_1 = require("fp-ts/lib/function");
 var helpers_1 = require("./helpers");
+var patterns_1 = require("../../helpers/patterns");
 /**
  * Removes all `this.` references.
  */
@@ -37,25 +36,26 @@ var processStateValue = function (options) {
     var mapValue = valueMapper(options);
     return function (_a) {
         var key = _a[0], stateVal = _a[1];
+        var getDefaultCase = function () {
+            return (0, function_1.pipe)(value, json5_1.default.stringify, mapValue, function (x) { return "const [".concat(key, ", ").concat(getSetStateFnName(key), "] = useState(() => (").concat(x, "))"); });
+        };
         var value = stateVal === null || stateVal === void 0 ? void 0 : stateVal.code;
+        var type = stateVal === null || stateVal === void 0 ? void 0 : stateVal.type;
         if (typeof value === 'string') {
-            if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
-                // functions
-                var useValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
-                var mappedVal = mapValue(useValue);
-                return mappedVal;
-            }
-            else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
-                // methods
-                var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
-                var useValue = methodValue.replace(/^(get )?/, 'function ');
-                return mapValue(useValue);
+            switch (type) {
+                case 'getter':
+                    return (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+                case 'function':
+                    return mapValue(value);
+                case 'method':
+                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+                default:
+                    return getDefaultCase();
             }
         }
-        // Other (data)
-        var transformedValue = (0, function_1.pipe)(value, json5_1.default.stringify, mapValue);
-        var defaultCase = "const [".concat(key, ", ").concat(getSetStateFnName(key), "] = useState(() => (").concat(transformedValue, "))");
-        return defaultCase;
+        else {
+            return getDefaultCase();
+        }
     };
 };
 var getUseStateCode = function (json, options) {
@@ -97,9 +97,7 @@ var updateStateSettersInCode = function (value, options) {
                     if (node.left.object.name === 'state') {
                         // TODO: ultimately support other property access like strings
                         var propertyName = node.left.property.name;
-                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier("".concat(getSetStateFnName(propertyName))), [
-                            node.right,
-                        ]));
+                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [node.right]));
                     }
                 }
             }