@builder.io/mitosis 0.0.56-15 → 0.0.56-16

package/dist/src/__tests__/data/styles/class-and-className.raw.jsx

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function MyBasicComponent() {
-    return (<div 
-    // @ts-ignore
-    className="test" class="test2" css={{
+    return (<div className="test" class="test2" css={{
             padding: '10px',
         }}>
       Hello! I can run in React, Vue, Solid, or Liquid!

package/dist/src/__tests__/data/styles/className.raw.jsx

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function MyBasicComponent() {
-    return (<div 
-    // @ts-ignore
-    className="test" css={{
+    return (<div className="test" css={{
             padding: '10px',
         }}>
       Hello! I can run in React, Vue, Solid, or Liquid!

package/dist/src/__tests__/data/styles/classState.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent() {
+    var _a = (0, mitosis_1.useState)('testClassName'), classState = _a[0], setClassState = _a[1];
+    return (<div class={classState} css={{
+            padding: '10px',
+        }}>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/qwik/convertMethodToFunction.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/__tests__/qwik/convertMethodToFunction.test.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var convertMethodToFunction_1 = require("../../generators/qwik/convertMethodToFunction");
+describe('convertMethodToFunction', function () {
+    var methodMap = {
+        methodA: 'method',
+        getterB: 'getter',
+        getCssFromFont: 'method',
+    };
+    var lexicalArgs = ['props', 'state'];
+    describe('rewrite', function () {
+        test('method', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('this.methodA(123)', methodMap, lexicalArgs)).toEqual('methodA(props,state,123)');
+        });
+        test('getter', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('this.getterB', methodMap, lexicalArgs)).toEqual('getterB(props,state)');
+        });
+        test('handle comments', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('//\nreturn this.getterB;', methodMap, lexicalArgs)).toEqual('//\nreturn getterB(props,state);');
+        });
+        test('braces', function () {
+            var code = 'getFontCss({}: {}) { this.getCssFromFont(font) }';
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)(code, methodMap, lexicalArgs)).toEqual('getFontCss({}: {}) { getCssFromFont(props,state,font) }');
+        });
+    });
+    describe('string', function () {
+        test('should not rewrite string', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('"this.getterB"', methodMap, lexicalArgs)).toEqual('"this.getterB"');
+        });
+        test('should rewrite template string', function () {
+            expect((0, convertMethodToFunction_1.convertMethodToFunction)('`${this.getterB}this.getterB`', methodMap, lexicalArgs)).toEqual('`${getterB(props,state)}this.getterB`');
+        });
+    });
+});

package/dist/src/__tests__/qwik/src-generator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/__tests__/qwik/src-generator.test.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var src_generator_1 = require("../../generators/qwik/src-generator");
+describe('src-generator', function () {
+    describe('isStatement', function () {
+        test('is an expression', function () {
+            expect((0, src_generator_1.isStatement)('a.b')).toBe(false);
+            expect((0, src_generator_1.isStatement)('1?2:"bar"')).toBe(false);
+            expect((0, src_generator_1.isStatement)('"var x; return foo + \'\\"\';"')).toBe(false);
+            expect((0, src_generator_1.isStatement)('"foo" + `bar\nbaz`')).toBe(false);
+            expect((0, src_generator_1.isStatement)('(...)()')).toBe(false);
+        });
+        test('regression', function () {
+            expect((0, src_generator_1.isStatement)('props.attributes?.class || props.attributes?.className')).toBe(false);
+        });
+        test('is a statement', function () {
+            expect((0, src_generator_1.isStatement)('var x; return x;')).toBe(true);
+            expect((0, src_generator_1.isStatement)('var x')).toBe(true);
+        });
+    });
+    describe('import', function () {
+        var options;
+        var src;
+        describe('module', function () {
+            beforeEach(function () {
+                options = {
+                    isJSX: true,
+                    isPretty: false,
+                    isTypeScript: false,
+                    isModule: true,
+                    isBuilder: false,
+                };
+                src = new src_generator_1.SrcBuilder(new src_generator_1.File('test', options, '', ''), options);
+            });
+            test('import to string', function () {
+                src.import('module', [new src_generator_1.Symbol('importName', 'asLocalName')]);
+                expect(src.toString()).toEqual('import{importName as asLocalName}from"module";');
+            });
+            test('import from default', function () {
+                src.import('module', [new src_generator_1.Symbol('default', 'asLocalName')]);
+                expect(src.toString()).toEqual('import asLocalName from"module";');
+            });
+        });
+        describe('require', function () {
+            beforeEach(function () {
+                options = {
+                    isJSX: true,
+                    isPretty: false,
+                    isTypeScript: false,
+                    isModule: false,
+                    isBuilder: false,
+                };
+                src = new src_generator_1.SrcBuilder(new src_generator_1.File('test', options, '', ''), options);
+            });
+            test('import to string', function () {
+                src.import('module', [new src_generator_1.Symbol('importName', 'asLocalName')]);
+                expect(src.toString()).toEqual('const asLocalName=require("module").importName;');
+            });
+            test('import from default', function () {
+                src.import('module', [new src_generator_1.Symbol('default', 'asLocalName')]);
+                expect(src.toString()).toEqual('const asLocalName=require("module");');
+            });
+        });
+    });
+});

package/dist/src/__tests__/qwik.test.js

@@ -38,12 +38,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var fs_extra_promise_1 = require("fs-extra-promise");
 var qwik_1 = require("../generators/qwik");
+var component_generator_1 = require("../generators/qwik/component-generator");
 var index_1 = require("../generators/qwik/index");
-var src_generator_1 = require("../generators/qwik/src-generator");
 var builder_1 = require("../parsers/builder");
 var jsx_1 = require("../parsers/jsx");
 var compile_away_builder_components_1 = require("../plugins/compile-away-builder-components");
 var symbol_processor_1 = require("../symbols/symbol-processor");
+var shared_1 = require("./shared");
 var todo = require('../../../../examples/todo/src/components/todo.lite');
 var todos = require('../../../../examples/todo/src/components/todos.lite');
 var debugFiles = true;
@@ -76,6 +77,7 @@ var debugOutput = function (fileSet) { return __awaiter(void 0, void 0, void 0,
     });
 }); };
 describe('qwik', function () {
+    (0, shared_1.runTestsForTarget)('qwik', (0, component_generator_1.componentToQwik)());
     describe('todo', function () {
         test('Todo.tsx', function () { return __awaiter(void 0, void 0, void 0, function () {
             var json, fileSet;
@@ -437,6 +439,7 @@ describe('qwik', function () {
                 isTypeScript: false,
                 isJSX: true,
                 isModule: true,
+                isBuilder: true,
             }, '', ''));
         });
         test('should format code', function () {
@@ -449,21 +452,6 @@ describe('qwik', function () {
             expect(file.toString()).toEqual('<Image></Image>;\n');
         });
     });
-    describe('helper functions', function () {
-        describe('isStatement', function () {
-            test('is an expression', function () {
-                expect((0, src_generator_1.isStatement)('a.b')).toBe(false);
-                expect((0, src_generator_1.isStatement)('1?2:"bar"')).toBe(false);
-                expect((0, src_generator_1.isStatement)('"var x; return foo + \'\\"\';"')).toBe(false);
-                expect((0, src_generator_1.isStatement)('"foo" + `bar\nbaz`')).toBe(false);
-                expect((0, src_generator_1.isStatement)('(...)()')).toBe(false);
-            });
-            test('is a statement', function () {
-                expect((0, src_generator_1.isStatement)('var x; return x;')).toBe(true);
-                expect((0, src_generator_1.isStatement)('var x')).toBe(true);
-            });
-        });
-    });
 });
 function toObj(fileSet) {
     var obj = {};

package/dist/src/__tests__/shared.js

@@ -51,6 +51,9 @@ var propsInterface = require('./data/types/component-props-interface.raw');
 var preserveTyping = require('./data/types/preserve-typing.raw');
 var propsDestructure = require('./data/basic-props-destructure.raw');
 var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-local-statement.raw');
+var classRaw = require('./data/styles/class.raw');
+var className = require('./data/styles/className.raw');
+var classAndClassName = require('./data/styles/class-and-className.raw');
 var path = 'test-path';
 var BASIC_TESTS = {
     ContentSlotJSX: contentSlotJsx,
@@ -94,6 +97,9 @@ var BASIC_TESTS = {
     'Image State': imageState,
     'Basic OnMount Update': basicOnMountUpdate,
     preserveExportOrLocalStatement: preserveExportOrLocalStatement,
+    'class + css': classRaw,
+    'className + css': className,
+    'class + ClassName + css': classAndClassName,
 };
 var MULTI_ON_UPDATE_TESTS = {
     multipleOnUpdate: multipleOnUpdate,
@@ -185,6 +191,14 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
     ],
+    qwik: [
+        BASIC_TESTS,
+        ROOT_SHOW_TESTS,
+        FORWARD_REF_TESTS,
+        MULTI_ON_UPDATE_TESTS,
+        FORM_BLOCK_TESTS,
+        FOR_SHOW_TESTS,
+    ],
 };
 var runTestsForTarget = function (target, generator) {
     var testsArray = TESTS_FOR_TARGET[target];

package/dist/src/__tests__/styles.test.js

@@ -6,7 +6,15 @@ var className = require('./data/styles/className.raw');
 var classAndClassName = require('./data/styles/class-and-className.raw');
 describe('Styles', function () {
     test('class and className are equivalent', function () {
-        expect((0, jsx_1.parseJsx)(classRaw)).toMatchSnapshot(className);
+        expect((0, jsx_1.parseJsx)(classRaw)).toEqual((0, jsx_1.parseJsx)(className));
+    });
+    test('class and CSS are merged', function () {
+        var component = (0, jsx_1.parseJsx)(classRaw);
+        expect(component).toMatchSnapshot();
+    });
+    test('className and CSS are merged', function () {
+        var component = (0, jsx_1.parseJsx)(className);
+        expect(component).toMatchSnapshot();
     });
     test('class and className are merged', function () {
         var component = (0, jsx_1.parseJsx)(classAndClassName);

package/dist/src/generators/angular.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
 var dedent_1 = __importDefault(require("dedent"));
 var standalone_1 = require("prettier/standalone");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_refs_1 = require("../helpers/get-refs");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
@@ -246,7 +246,7 @@ var componentToAngular = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(json);
+        var css = (0, collect_css_1.collectCss)(json);
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }

package/dist/src/generators/context/{react copy.d.ts → qwik.d.ts}

@@ -1,8 +1,8 @@
 import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToReactOptions = {
+declare type ContextToQwikOptions = {
     format?: boolean;
 };
-export declare const contextToReact: (options?: ContextToReactOptions) => ({ context }: {
+export declare const contextToQwik: (options?: ContextToQwikOptions) => ({ context }: {
     context: MitosisContext;
 }) => string;
 export {};

package/dist/src/generators/context/{react copy.js → qwik.js}

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.contextToReact = void 0;
+exports.contextToQwik = void 0;
 var standalone_1 = require("prettier/standalone");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var contextToReact = function (options) {
+var contextToQwik = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var context = _a.context;
-        var str = "\n  import { createContext } from 'react';\n\n  export default createContext(".concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ")\n  ");
+        var str = "\n  import { createContext } from '@builder.io/qwik';\n\n  export default createContext(\"".concat(context.name, "\")\n  ");
         if (options.format !== false) {
             try {
                 str = (0, standalone_1.format)(str, {
@@ -25,4 +24,4 @@ var contextToReact = function (options) {
         return str;
     };
 };
-exports.contextToReact = contextToReact;
+exports.contextToQwik = contextToQwik;

package/dist/src/generators/html.js

@@ -34,7 +34,7 @@ var get_refs_1 = require("../helpers/get-refs");
 var map_refs_1 = require("../helpers/map-refs");
 var traverse_1 = __importDefault(require("traverse"));
 var babel_transform_1 = require("../helpers/babel-transform");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var dash_case_1 = require("../helpers/dash-case");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
@@ -411,7 +411,7 @@ var componentToHtml = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(json, {
+        var css = (0, collect_css_1.collectCss)(json, {
             prefix: options.prefix,
         });
         var str = json.children.map(function (item) { return blockToHtml(item, useOptions); }).join('\n');
@@ -532,12 +532,12 @@ var componentToCustomElement = function (options) {
         var css = '';
         if ((_c = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _c === void 0 ? void 0 : _c.css) {
             css = (_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.css(json, useOptions, {
-                collectCss: collect_styles_1.collectCss,
+                collectCss: collect_css_1.collectCss,
                 prefix: options.prefix,
             });
         }
         else {
-            css = (0, collect_styles_1.collectCss)(json, {
+            css = (0, collect_css_1.collectCss)(json, {
                 prefix: options.prefix,
             });
         }

package/dist/src/generators/liquid.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLiquid = exports.isValidLiquidBinding = void 0;
 var standalone_1 = require("prettier/standalone");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../parsers/jsx");
@@ -114,7 +114,7 @@ var componentToLiquid = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(json);
+        var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);

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

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

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

@@ -0,0 +1,271 @@
+"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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToQwik = void 0;
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var convertMethodToFunction_1 = require("./convertMethodToFunction");
+var jsx_1 = require("./jsx");
+var src_generator_1 = require("./src-generator");
+var babel_transform_1 = require("../../helpers/babel-transform");
+Error.stackTraceLimit = 9999;
+var componentToQwik = function (userOptions) {
+    if (userOptions === void 0) { userOptions = {}; }
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var file = new src_generator_1.File(component.name + '.js', {
+            isPretty: true,
+            isJSX: true,
+            isTypeScript: false,
+            isModule: true,
+            isBuilder: false,
+        }, '@builder.io/qwik', '');
+        try {
+            // file.exportConst('COMPONENT', JSON.stringify(component, null, 2));
+            emitImports(file, component);
+            emitTypes(file, component);
+            var state_1 = emitStateMethodsAndRewriteBindings(file, component);
+            var hasState_1 = Boolean(Object.keys(component.state).length);
+            var css_1 = null;
+            file.src.const(component.name, (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [
+                (0, src_generator_1.arrowFnBlock)(['props'], [
+                    function () {
+                        css_1 = emitUseStyles(file, component);
+                        hasState_1 && emitUseStore(file, state_1);
+                        emitUseRef(file, component);
+                        emitUseContextProvider(file, component);
+                        emitUseContext(file, component);
+                        emitUseMount(file, component);
+                        emitUseWatch(file, component);
+                        emitUseCleanup(file, component);
+                        emitJSX(file, component);
+                    },
+                ], [component.propsTypeRef || 'any']),
+            ]));
+            file.exportDefault(component.name);
+            emitStyles(file, css_1);
+            return '// GENERATED BY MITOSIS\n\n' + file.toString();
+        }
+        catch (e) {
+            console.error(e);
+            return e.stack || String(e);
+        }
+    };
+};
+exports.componentToQwik = componentToQwik;
+function emitUseMount(file, component) {
+    if (component.hooks.onMount) {
+        // 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, '});');
+    }
+}
+function emitUseWatch(file, component) {
+    if (component.hooks.onUpdate) {
+        component.hooks.onUpdate.forEach(function (onUpdate) {
+            file.src.emit(file.import(file.qwikModule, 'useWatch$').localName, '((track)=>{');
+            emitTrackExpressions(file.src, onUpdate.deps);
+            file.src.emit(convertTypeScriptToJS(onUpdate.code), '});');
+        });
+    }
+}
+function emitTrackExpressions(src, deps) {
+    if (deps && deps.startsWith('[') && deps.endsWith(']')) {
+        var dependencies = deps.substring(1, deps.length - 1).split(',');
+        dependencies.forEach(function (dep) {
+            var lastDotIdx = dep.lastIndexOf('.');
+            var objExp = dep.substring(0, lastDotIdx).replace(/\?$/, '');
+            var objProp = dep.substring(lastDotIdx + 1);
+            src.emit(objExp, '&&track(', objExp, ',"', objProp, '");');
+        });
+    }
+}
+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) {
+    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));
+}
+function emitUseContextProvider(file, component) {
+    Object.keys(component.context.set).forEach(function (ctxKey) {
+        var context = component.context.set[ctxKey];
+        file.src.emit(file.import(file.qwikModule, 'useContextProvider').localName, '(', context.name, ',', file.import(file.qwikModule, 'useStore').localName, '({');
+        context.value &&
+            Object.keys(context.value).forEach(function (prop) {
+                var propValue = context.value[prop];
+                file.src.emit(prop, ':');
+                if (isGetter(propValue)) {
+                    var methodMap = stateToMethodOrGetter(component.state);
+                    var code = (0, convertMethodToFunction_1.convertMethodToFunction)(extractGetterBody(propValue), methodMap, getLexicalScopeVars(component));
+                    file.src.emit('(()=>{', 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('})', ');');
+    });
+}
+function emitUseContext(file, component) {
+    Object.keys(component.context.get).forEach(function (ctxKey) {
+        var context = component.context.get[ctxKey];
+        file.src.emit('const ', ctxKey, '=', file.import(file.qwikModule, 'useContext').localName, '(', context.name, ');');
+    });
+}
+function emitUseRef(file, component) {
+    Object.keys(component.refs).forEach(function (refKey) {
+        file.src.emit("const ", refKey, '=', file.import(file.qwikModule, 'useRef').localName, '();');
+    });
+}
+function emitUseStyles(file, component) {
+    var css = (0, collect_css_1.collectCss)(component);
+    if (css) {
+        file.src.emit(file.import(file.qwikModule, 'useScopedStyles$').localName, '(STYLES);');
+    }
+    return css;
+}
+function emitStyles(file, css) {
+    if (css) {
+        file.exportConst('STYLES', '`' + css.replace(/`/g, '\\`') + '`');
+    }
+}
+function emitUseStore(file, stateInit) {
+    var state = stateInit[0];
+    file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName, '(');
+    if (stateInit.length == 1) {
+        file.src.emit(JSON.stringify(state));
+    }
+    else {
+        file.src.emit('()=>{const state=', JSON.stringify(state), ';');
+        file.src.emitList(stateInit.slice(1), ';');
+        file.src.emit(';return state;');
+        file.src.emit('}');
+    }
+    file.src.emit(');');
+}
+function emitTypes(file, component) {
+    var _a, _b;
+    if (file.options.isTypeScript) {
+        (_a = component.types) === null || _a === void 0 ? void 0 : _a.forEach(function (t) { return file.src.emit(t, '\n'); });
+        (_b = component.interfaces) === null || _b === void 0 ? void 0 : _b.forEach(function (i) { return file.src.emit(i); });
+    }
+}
+function emitStateMethodsAndRewriteBindings(file, component) {
+    var _a;
+    var lexicalArgs = getLexicalScopeVars(component);
+    var state = emitStateMethods(file, component.state, lexicalArgs);
+    var methodMap = stateToMethodOrGetter(component.state);
+    (_a = component.children) === null || _a === void 0 ? void 0 : _a.forEach(function (node) { return rewriteBindings(node, methodMap, lexicalArgs); });
+    return state;
+}
+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.
+    file.import('<SELF>', component.name);
+    (_a = component.imports) === null || _a === void 0 ? void 0 : _a.forEach(function (i) {
+        Object.keys(i.imports).forEach(function (key) {
+            var keyValue = i.imports[key];
+            file.import(i.path.replace('.lite', '').replace('.tsx', ''), keyValue, key);
+        });
+    });
+}
+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 state = {};
+    var stateInit = [state];
+    var methodMap = stateToMethodOrGetter(componentState);
+    Object.keys(componentState).forEach(function (key) {
+        var code = componentState[key];
+        if (isCode(code)) {
+            var prefixIdx = code.indexOf(':') + 1;
+            if (isGetter(code)) {
+                prefixIdx += 'get '.length;
+            }
+            else if (isFunction(code)) {
+                prefixIdx += 'function '.length;
+            }
+            code = code.substring(prefixIdx);
+            code = (0, convertMethodToFunction_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
+            var functionName = code.split(/\(/)[0];
+            stateInit.push("state.".concat(key, "=").concat(functionName, "(state, props)"));
+            if (!file.options.isTypeScript) {
+                // Erase type information
+                code = convertTypeScriptToJS(code);
+            }
+            file.src.emit('function ', code);
+        }
+        else {
+            state[key] = code;
+        }
+    });
+    return stateInit;
+}
+function convertTypeScriptToJS(code) {
+    // HACK, proper implementation should use Babel
+    // return code.replace(/(\w+):\s+[\w\[\]"']+/gm, (_, ident) => ident);
+    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('}');
+    return code.substring(start + 1, end).trim();
+}
+function stateToMethodOrGetter(state) {
+    var methodMap = {};
+    Object.keys(state).forEach(function (key) {
+        var code = state[key];
+        if (typeof code == 'string' && code.startsWith(METHOD)) {
+            methodMap[key] = code.startsWith(GETTER) ? 'getter' : 'method';
+        }
+    });
+    return methodMap;
+}
+function rewriteBindings(node, methodMap, lexicalArgs) {
+    var _a;
+    Object.keys(node.bindings).forEach(function (key) {
+        var binding = node.bindings[key];
+        if (binding === null || binding === void 0 ? void 0 : binding.code) {
+            binding.code = (0, convertMethodToFunction_1.convertMethodToFunction)(binding.code, methodMap, lexicalArgs);
+        }
+        if (key.startsWith('on') && (binding === null || binding === void 0 ? void 0 : binding.code)) {
+            var args = (binding === null || binding === void 0 ? void 0 : binding.arguments) || [];
+            binding.code = "(".concat(args.join(','), ") => ").concat(binding.code);
+            delete node.bindings[key];
+            node.bindings[key + '$'] = binding;
+        }
+    });
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { return rewriteBindings(child, methodMap, lexicalArgs); });
+}

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

@@ -35,6 +35,7 @@ function createFileSet(options) {
         isModule: opts.output != 'cjs',
         isTypeScript: opts.output == 'ts',
         isJSX: opts.jsx,
+        isBuilder: true,
     };
     var fileSet = {
         high: new src_generator_1.File('high.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
@@ -98,7 +99,7 @@ function generateStyles(fromFile, dstFile, symbol, scoped) {
 }
 function renderUseLexicalScope(file) {
     return function () {
-        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').name, '()[0]');
+        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
     };
 }
 exports.renderUseLexicalScope = renderUseLexicalScope;

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

@@ -0,0 +1 @@
+export declare function convertMethodToFunction(code: string, methods: Record<string, 'method' | 'getter'>, lexicalArgs: string[]): string;