@builder.io/mitosis 0.0.93 → 0.0.94

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

@@ -6,7 +6,7 @@ var contextToQwik = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var context = _a.context;
-        var str = "\n  import { createContext } from '@builder.io/qwik';\n\n  export default createContext<any>(\"".concat(context.name, "\")\n  ");
+        var str = "\n  import { createContextId } from '@builder.io/qwik';\n\n  export default createContextId<any>(\"".concat(context.name, "\")\n  ");
         if (options.format !== false) {
             try {
                 str = (0, standalone_1.format)(str, {

package/dist/src/generators/mitosis.js

@@ -41,6 +41,7 @@ var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
 var react_1 = require("./react");
 var state_1 = require("../helpers/state");
+var is_root_text_node_1 = require("../helpers/is-root-text-node");
 exports.DEFAULT_FORMAT = 'legacy';
 // Special isValidAttributeName for Mitosis so we can allow for $ in names
 var isValidAttributeName = function (str) {
@@ -148,7 +149,7 @@ var componentToMitosis = function (toMitosisOptions) {
         (0, map_refs_1.mapRefs)(json, function (refName) {
             return "".concat(refName).concat(domRefs.has(refName) ? ".current" : '');
         });
-        var addWrapper = json.children.length !== 1;
+        var addWrapper = json.children.length !== 1 || (0, is_root_text_node_1.isRootTextNode)(json);
         var components = Array.from((0, get_components_1.getComponents)(json));
         var mitosisComponents = components.filter(function (item) { return mitosisCoreComponents.includes(item); });
         var otherComponents = components.filter(function (item) { return !mitosisCoreComponents.includes(item); });

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

@@ -1,33 +1,60 @@
 "use strict";
-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 };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToQwik = void 0;
 var standalone_1 = require("prettier/standalone");
-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 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 add_prevent_default_1 = require("./helpers/add-prevent-default");
+var convert_method_to_function_1 = require("./helpers/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_inject_1 = require("./stable-inject");
+var stable_inject_1 = require("./helpers/stable-inject");
+var merge_options_1 = require("../../helpers/merge-options");
+var state_2 = require("./helpers/state");
+var transform_code_1 = require("./helpers/transform-code");
+var process_code_1 = require("../../helpers/plugins/process-code");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 Error.stackTraceLimit = 9999;
-// TODO(misko): styles are not processed.
 var DEBUG = false;
+var PLUGINS = [
+    function () { return ({
+        json: {
+            post: function (json) {
+                (0, add_prevent_default_1.addPreventDefault)(json);
+                return json;
+            },
+        },
+    }); },
+    (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType, json) {
+        switch (codeType) {
+            case 'bindings':
+            case 'state':
+            case 'hooks':
+            case 'hooks-deps':
+            case 'properties':
+                // update signal getters to have `.value`
+                return function (code, k) {
+                    // `ref` should not update the signal value access
+                    if (k === 'ref') {
+                        return code;
+                    }
+                    Object.keys(json.refs).forEach(function (ref) {
+                        code = (0, replace_identifiers_1.replaceIdentifiers)({
+                            code: code,
+                            from: ref,
+                            to: function (x) { return (x === ref ? "".concat(x, ".value") : "".concat(ref, ".value.").concat(x)); },
+                        });
+                    });
+                    return code;
+                };
+        }
+    }),
+];
+var DEFAULT_OPTIONS = {
+    plugins: PLUGINS,
+};
 var componentToQwik = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
@@ -35,14 +62,10 @@ 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);
-        if (userOptions.plugins) {
-            component = (0, plugins_1.runPreJsonPlugins)(component, userOptions.plugins);
-        }
-        (0, add_prevent_default_1.addPreventDefault)(component);
-        if (userOptions.plugins) {
-            component = (0, plugins_1.runPostJsonPlugins)(component, userOptions.plugins);
-        }
-        var isTypeScript = !!userOptions.typescript;
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, userOptions);
+        component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
+        component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
+        var isTypeScript = !!options.typescript;
         var file = new src_generator_1.File(component.name + (isTypeScript ? '.ts' : '.js'), {
             isPretty: true,
             isJSX: true,
@@ -57,9 +80,9 @@ var componentToQwik = function (userOptions) {
             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 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 imports_1 = ((_e = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _e === void 0 ? void 0 : _e.imports) || {};
+            Object.keys(imports_1).forEach(function (key) { return file.import(imports_1[key], key); });
+            var state_3 = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
             var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
@@ -68,12 +91,11 @@ var componentToQwik = function (userOptions) {
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
                     emitUseRef(file, component);
-                    hasState_1 && emitUseStore(file, state_2);
+                    hasState_1 && (0, state_2.emitUseStore)(file, state_3);
                     emitUseContextProvider(file, component);
                     emitUseClientEffect(file, component);
                     emitUseMount(file, component);
                     emitUseTask(file, component);
-                    emitUseCleanup(file, component);
                     emitTagNameHack(file, component, (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.elementTag);
                     emitTagNameHack(file, component, (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.componentElementTag);
                     emitJSX(file, component, mutable_1);
@@ -86,10 +108,8 @@ var componentToQwik = function (userOptions) {
             emitStyles(file, css_1);
             DEBUG && file.exportConst('COMPONENT', JSON.stringify(component));
             var sourceFile = file.toString();
-            if (userOptions.plugins) {
-                sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, userOptions.plugins);
-                sourceFile = (0, plugins_1.runPostCodePlugins)(sourceFile, userOptions.plugins);
-            }
+            sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, options.plugins);
+            sourceFile = (0, plugins_1.runPostCodePlugins)(sourceFile, options.plugins);
             return sourceFile;
         }
         catch (e) {
@@ -108,7 +128,7 @@ function emitExports(file, component) {
 }
 function emitTagNameHack(file, component, metadataValue) {
     if (typeof metadataValue === 'string' && metadataValue) {
-        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, getStateMethodsAndGetters(component.state), getLexicalScopeVars(component)), ';');
+        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, (0, state_2.getStateMethodsAndGetters)(component.state), (0, state_2.getLexicalScopeVars)(component)), ';');
     }
 }
 function emitUseClientEffect(file, component) {
@@ -116,13 +136,13 @@ function emitUseClientEffect(file, component) {
         // This is called useMount, but in practice it is used as
         // useClientEffect. Not sure if this is correct, but for now.
         var code = component.hooks.onMount.code;
-        file.src.emit(file.import(file.qwikModule, 'useClientEffect$').localName, '(()=>{', code, '});');
+        file.src.emit(file.import(file.qwikModule, 'useVisibleTask$').localName, '(()=>{', code, '});');
     }
 }
 function emitUseMount(file, component) {
     if (component.hooks.onInit) {
         var code = component.hooks.onInit.code;
-        file.src.emit(file.import(file.qwikModule, 'useMount$').localName, '(()=>{', code, '});');
+        file.src.emit(file.import(file.qwikModule, 'useTask$').localName, '(()=>{', code, '});');
     }
 }
 function emitUseTask(file, component) {
@@ -130,7 +150,7 @@ function emitUseTask(file, component) {
         component.hooks.onUpdate.forEach(function (onUpdate) {
             file.src.emit(file.import(file.qwikModule, 'useTask$').localName, '(({track})=>{');
             emitTrackExpressions(file.src, onUpdate.deps);
-            file.src.emit(convertTypeScriptToJS(onUpdate.code));
+            file.src.emit((0, transform_code_1.convertTypeScriptToJS)(onUpdate.code));
             file.src.emit('});');
         });
     }
@@ -144,12 +164,6 @@ function emitTrackExpressions(src, deps) {
         src.emit("track(() => ".concat(dep, ");"));
     });
 }
-function emitUseCleanup(file, component) {
-    if (component.hooks.onUnMount) {
-        var code = component.hooks.onUnMount.code;
-        file.src.emit(file.import(file.qwikModule, 'useCleanup$').localName, '(()=>{', code, '});');
-    }
-}
 function emitJSX(file, component, mutable) {
     var directives = new Map();
     var handlers = new Map();
@@ -191,7 +205,7 @@ function emitUseContext(file, component) {
 }
 function emitUseRef(file, component) {
     Object.keys(component.refs).forEach(function (refKey) {
-        file.src.emit("const ", refKey, '=', file.import(file.qwikModule, 'useRef').localName, '();');
+        file.src.emit("const ", refKey, '=', file.import(file.qwikModule, 'useSignal').localName, "".concat(file.options.isTypeScript ? '<Element>' : '', "();"));
     });
 }
 function emitUseStyles(file, component) {
@@ -205,49 +219,29 @@ function emitUseStyles(file, component) {
     return css;
 }
 function emitStyles(file, css) {
-    if (css) {
-        if (file.options.isPretty) {
-            file.src.emit('\n\n');
-            try {
-                css = (0, standalone_1.format)(css, {
-                    parser: 'css',
-                    plugins: [
-                        // To support running in browsers
-                        require('prettier/parser-postcss'),
-                    ],
-                });
-            }
-            catch (e) {
-                throw new Error(e +
-                    '\n' +
-                    '========================================================================\n' +
-                    css +
-                    '\n\n========================================================================');
-            }
-        }
-        file.exportConst('STYLES', '`\n' + css.replace(/`/g, '\\`') + '`\n');
+    if (!css) {
+        return;
     }
-}
-/**
- * @param file
- * @param stateInit
- */
-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);
-        if (file.options.isTypeScript) {
-            file.src.emit('<any>');
+    if (file.options.isPretty) {
+        file.src.emit('\n\n');
+        try {
+            css = (0, standalone_1.format)(css, {
+                parser: 'css',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-postcss'),
+                ],
+            });
+        }
+        catch (e) {
+            throw new Error(e +
+                '\n' +
+                '========================================================================\n' +
+                css +
+                '\n\n========================================================================');
         }
-        file.src.emit('(');
-        file.src.emit((0, stable_inject_1.stableInject)(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.options.isTypeScript ? ': any' : '') + ' = {};');
     }
+    file.exportConst('STYLES', '`\n' + css.replace(/`/g, '\\`') + '`\n');
 }
 function emitTypes(file, component) {
     var _a;
@@ -255,33 +249,6 @@ function emitTypes(file, component) {
         (_a = component.types) === null || _a === void 0 ? void 0 : _a.forEach(function (t) { return file.src.emit(t, '\n'); });
     }
 }
-function emitStateMethodsAndRewriteBindings(file, component, metadata) {
-    var _a;
-    var lexicalArgs = getLexicalScopeVars(component);
-    var state = emitStateMethods(file, component.state, lexicalArgs);
-    var methodMap = getStateMethodsAndGetters(component.state);
-    rewriteCodeExpr(component, methodMap, lexicalArgs, (_a = metadata.qwik) === null || _a === void 0 ? void 0 : _a.replace);
-    return state;
-}
-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 (!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);
-}
 function emitImports(file, component) {
     var _a;
     // <SELF> is used for self-referencing within the file.
@@ -293,58 +260,8 @@ function emitImports(file, component) {
         });
     });
 }
-function emitStateMethods(file, componentState, lexicalArgs) {
-    var stateValues = {};
-    var stateInit = [stateValues];
-    var methodMap = getStateMethodsAndGetters(componentState);
-    for (var key in componentState) {
-        var stateValue = componentState[key];
-        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
-            case 'method':
-            case 'getter':
-            case 'function':
-                var code = stateValue.code;
-                var prefixIdx = 0;
-                if (stateValue.type === 'getter') {
-                    prefixIdx += 'get '.length;
-                }
-                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 (stateValue.type === 'getter') {
-                    stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
-                }
-                if (!file.options.isTypeScript) {
-                    // Erase type information
-                    code = convertTypeScriptToJS(code);
-                }
-                file.exportConst(functionName, 'function ' + code, true);
-                continue;
-            case 'property':
-                stateValues[key] = stateValue.code;
-                continue;
-        }
-    }
-    return stateInit;
-}
-function convertTypeScriptToJS(code) {
-    return (0, babel_transform_1.babelTransformExpression)(code, {});
-}
 function extractGetterBody(code) {
     var start = code.indexOf('{');
     var end = code.lastIndexOf('}');
     return code.substring(start + 1, end).trim();
 }
-function getStateMethodsAndGetters(state) {
-    var methodMap = {};
-    Object.keys(state).forEach(function (key) {
-        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.js

@@ -22,11 +22,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 compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
-var handlers_1 = require("./handlers");
+var handlers_1 = require("./helpers/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");
+var stable_serialize_1 = require("./helpers/stable-serialize");
+var styles_1 = require("./helpers/styles");
 function createFileSet(options) {
     if (options === void 0) { options = {}; }
     var opts = __assign({ qwikLib: '@builder.io/qwik', qrlPrefix: './', output: 'ts', minify: false, jsx: true }, options);

package/dist/src/generators/qwik/{add-prevent-default.d.ts → helpers/add-prevent-default.d.ts}

@@ -1,4 +1,4 @@
-import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisComponent } from '../../../types/mitosis-component';
 /**
  * Find event handlers that explicitly call .preventDefault() and
  * add preventdefault:event

package/dist/src/generators/qwik/{add-prevent-default.js → helpers/add-prevent-default.js}

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (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");
+var is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
 /**
  * Find event handlers that explicitly call .preventDefault() and
  * add preventdefault:event

package/dist/src/generators/qwik/helpers/convert-method-to-function.d.ts

@@ -0,0 +1,2 @@
+import type { MethodMap } from './state';
+export declare function convertMethodToFunction(code: string, properties: MethodMap, lexicalArgs: string[]): string;

package/dist/src/generators/qwik/helpers/handlers.d.ts

@@ -0,0 +1,3 @@
+import { MitosisNode } from '../../../types/mitosis-node';
+import { File } from '../src-generator';
+export declare function renderHandlers(file: File, componentName: string, children: MitosisNode[]): Map<string, string>;

package/dist/src/generators/qwik/{handlers.js → helpers/handlers.js}

@@ -9,9 +9,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderHandlers = exports.extractJSBlock = void 0;
-var component_1 = require("./component");
-var src_generator_1 = require("./src-generator");
+exports.renderHandlers = void 0;
+var component_1 = require("../component");
+var src_generator_1 = require("../src-generator");
 var IIF_START = '(() => {';
 var IIF_END = '})()';
 function extractJSBlock(binding) {
@@ -28,7 +28,6 @@ function extractJSBlock(binding) {
     }
     return null;
 }
-exports.extractJSBlock = extractJSBlock;
 function renderHandlers(file, componentName, children) {
     var id = 0;
     var map = new Map();

package/dist/src/generators/qwik/helpers/state.d.ts

@@ -0,0 +1,27 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { File } from '../src-generator';
+/**
+ * Stores getters and initialization map.
+ */
+export declare type StateInit = [
+    StateValues,
+    /**
+     * Set of state initializers.
+     */
+    ...string[]
+];
+export declare type PropertyName = string;
+export declare type StateValue = string;
+/**
+ * Map of getters that need to be rewritten to function invocations.
+ */
+export declare type StateValues = Record<PropertyName, StateValue>;
+/**
+ * @param file
+ * @param stateInit
+ */
+export declare function emitUseStore(file: File, stateInit: StateInit): void;
+export declare function emitStateMethodsAndRewriteBindings(file: File, component: MitosisComponent, metadata: Record<string, any>): StateInit;
+export declare function getLexicalScopeVars(component: MitosisComponent): string[];
+export declare type MethodMap = Record<string, 'method' | 'getter'>;
+export declare function getStateMethodsAndGetters(state: MitosisComponent['state']): MethodMap;

package/dist/src/generators/qwik/helpers/state.js

@@ -0,0 +1,118 @@
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStateMethodsAndGetters = exports.getLexicalScopeVars = exports.emitStateMethodsAndRewriteBindings = exports.emitUseStore = void 0;
+var traverse_1 = __importDefault(require("traverse"));
+var convert_method_to_function_1 = require("./convert-method-to-function");
+var stable_inject_1 = require("./stable-inject");
+var transform_code_1 = require("./transform-code");
+/**
+ * @param file
+ * @param stateInit
+ */
+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);
+        if (file.options.isTypeScript) {
+            file.src.emit('<any>');
+        }
+        file.src.emit("(".concat((0, stable_inject_1.stableInject)(state), ");"));
+    }
+    else {
+        // TODO hack for now so that `state` variable is defined, even though it is never read.
+        file.src.emit("const state".concat(file.options.isTypeScript ? ': any' : '', " = {};"));
+    }
+}
+exports.emitUseStore = emitUseStore;
+function emitStateMethods(file, componentState, lexicalArgs) {
+    var stateValues = {};
+    var stateInit = [stateValues];
+    var methodMap = getStateMethodsAndGetters(componentState);
+    for (var key in componentState) {
+        var stateValue = componentState[key];
+        console.log(componentState);
+        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
+            case 'method':
+            case 'getter':
+            case 'function':
+                var code = stateValue.code;
+                var prefixIdx = 0;
+                if (stateValue.type === 'getter') {
+                    prefixIdx += 'get '.length;
+                }
+                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 (stateValue.type === 'getter') {
+                    stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
+                }
+                if (!file.options.isTypeScript) {
+                    // Erase type information
+                    code = (0, transform_code_1.convertTypeScriptToJS)(code);
+                }
+                file.exportConst(functionName, 'function ' + code, true);
+                console.log(functionName, 'function ' + code);
+                continue;
+            case 'property':
+                stateValues[key] = stateValue.code;
+                continue;
+        }
+    }
+    return stateInit;
+}
+function emitStateMethodsAndRewriteBindings(file, component, metadata) {
+    var _a;
+    var lexicalArgs = getLexicalScopeVars(component);
+    var state = emitStateMethods(file, component.state, lexicalArgs);
+    var methodMap = getStateMethodsAndGetters(component.state);
+    rewriteCodeExpr(component, methodMap, lexicalArgs, (_a = metadata.qwik) === null || _a === void 0 ? void 0 : _a.replace);
+    return state;
+}
+exports.emitStateMethodsAndRewriteBindings = emitStateMethodsAndRewriteBindings;
+var checkIsObjectWithCodeBlock = function (obj) {
+    return typeof obj == 'object' && (obj === null || obj === void 0 ? void 0 : obj.code) && typeof obj.code === 'string';
+};
+function getLexicalScopeVars(component) {
+    return __spreadArray(__spreadArray(['props', 'state'], Object.keys(component.refs), true), Object.keys(component.context.get), true);
+}
+exports.getLexicalScopeVars = getLexicalScopeVars;
+function rewriteCodeExpr(component, methodMap, lexicalArgs, replace) {
+    if (replace === void 0) { replace = {}; }
+    (0, traverse_1.default)(component).forEach(function (item) {
+        if (!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 getStateMethodsAndGetters(state) {
+    var methodMap = {};
+    Object.keys(state).forEach(function (key) {
+        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;
+}
+exports.getStateMethodsAndGetters = getStateMethodsAndGetters;

package/dist/src/generators/qwik/{styles.d.ts → helpers/styles.d.ts}

@@ -1,5 +1,5 @@
-import { MitosisNode } from '../..';
-import { SrcBuilder } from './src-generator';
+import { MitosisNode } from '../../..';
+import { SrcBuilder } from '../src-generator';
 export declare type CssStyles = {
     CLASS_NAME: string;
 } & Record<string, string>;

package/dist/src/generators/qwik/{styles.js → helpers/styles.js}

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderStyles = exports.collectStyles = void 0;
 var json5_1 = __importDefault(require("json5"));
-var dash_case_1 = require("../../helpers/dash-case");
+var dash_case_1 = require("../../../helpers/dash-case");
 function collectStyles(children, styleMap) {
     var _a;
     var nodes = __spreadArray([], children, true);

package/dist/src/generators/qwik/helpers/transform-code.d.ts

@@ -0,0 +1 @@
+export declare function convertTypeScriptToJS(code: string): string;

package/dist/src/generators/qwik/helpers/transform-code.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTypeScriptToJS = void 0;
+var babel_transform_1 = require("../../../helpers/babel-transform");
+function convertTypeScriptToJS(code) {
+    return (0, babel_transform_1.babelTransformExpression)(code, {});
+}
+exports.convertTypeScriptToJS = convertTypeScriptToJS;

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

@@ -1,6 +1,6 @@
 import { MitosisNode } from '../../types/mitosis-node';
 import { File } from './src-generator';
-import { CssStyles } from './styles';
+import { CssStyles } from './helpers/styles';
 /**
  * Convert a Mitosis nodes to a JSX nodes.
  *

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

@@ -45,7 +45,9 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
             return;
         if (root)
             this.emit('(');
-        var needsFragment = root && (children.length > 1 || (children.length && isInlinedDirective(children[0])));
+        var needsFragment = root &&
+            (children.length > 1 ||
+                (children.length && (isInlinedDirective(children[0]) || isTextNode(children[0]))));
         file.import(file.qwikModule, 'h');
         var fragmentSymbol = file.import(file.qwikModule, 'Fragment');
         if (needsFragment) {