@builder.io/mitosis 0.0.45-2 → 0.0.45

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

@@ -70,6 +70,7 @@ var html_1 = require("../generators/html");
 var builder_2 = require("../parsers/builder");
 var jsx_1 = require("../parsers/jsx");
 var compile_away_builder_components_1 = require("../plugins/compile-away-builder-components");
+var __1 = require("..");
 /**
  * Load a file using nodejs resolution as a string.
  */
@@ -152,7 +153,7 @@ describe('Builder', function () {
         });
     }); });
     test('Regenerate Image', function () {
-        var code = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"hi\"\n              css={{\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "], ["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"hi\"\n              css={{\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "])));
+        var code = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"https://cdn.builder.io/api/v1/image/foobar\"\n              sizes=\"100vw\"\n              backgroundSize=\"contain\"\n              css={{\n                marignTop: \"50px\",\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "], ["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"https://cdn.builder.io/api/v1/image/foobar\"\n              sizes=\"100vw\"\n              backgroundSize=\"contain\"\n              css={{\n                marignTop: \"50px\",\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "])));
         var json = jsx_1.parseJsx(code);
         var builderJson = builder_1.componentToBuilder(json);
         var backToMitosis = builder_2.builderContentToMitosisComponent(builderJson);
@@ -160,6 +161,10 @@ describe('Builder', function () {
             format: 'legacy',
         });
         expect(mitosis.trim()).toEqual(code.trim());
+        var react = __1.componentToReact(json, {
+            plugins: [compile_away_builder_components_1.compileAwayBuilderComponents()],
+        });
+        expect(react).toMatchSnapshot();
     });
     test('Regenerate Text', function () {
         var code = dedent_1.default(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      import { useState } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <h2\n              css={{\n                marginBottom: \"20px\",\n              }}\n            >\n              Hello!\n            </h2>\n          </div>\n        );\n      }\n    "], ["\n      import { useState } from \"@builder.io/mitosis\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <h2\n              css={{\n                marginBottom: \"20px\",\n              }}\n            >\n              Hello!\n            </h2>\n          </div>\n        );\n      }\n    "])));

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

@@ -37,26 +37,34 @@ 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 __1 = require("..");
+var index_1 = require("../generators/qwik/index");
 var jsx_1 = require("../parsers/jsx");
+var compile_away_builder_components_1 = require("../plugins/compile-away-builder-components");
 var todo = require('../../../../examples/todo/src/components/todo.lite');
 var todos = require('../../../../examples/todo/src/components/todos.lite');
 var debugFiles = true;
-var debugOutput = function (output) { return __awaiter(void 0, void 0, void 0, function () {
-    var _i, _a, file;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+var debugOutput = function (fileSet) { return __awaiter(void 0, void 0, void 0, function () {
+    var testName, base, _a, _b, _i, key, file;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
+                testName = expect.getState().currentTestName;
+                base = 'dist/test/' + testName.split(' ').join('/') + '/';
                 if (!debugFiles) return [3 /*break*/, 4];
-                _i = 0, _a = output.files;
-                _b.label = 1;
+                _a = [];
+                for (_b in fileSet)
+                    _a.push(_b);
+                _i = 0;
+                _c.label = 1;
             case 1:
                 if (!(_i < _a.length)) return [3 /*break*/, 4];
-                file = _a[_i];
-                return [4 /*yield*/, fs_extra_promise_1.outputFileAsync('dist/test/qwik/' + file.path, file.contents)];
+                key = _a[_i];
+                file = fileSet[key];
+                return [4 /*yield*/, fs_extra_promise_1.outputFileAsync(base + file.path, file.contents)];
             case 2:
-                _b.sent();
-                _b.label = 3;
+                _c.sent();
+                _c.label = 3;
             case 3:
                 _i++;
                 return [3 /*break*/, 1];
@@ -64,52 +72,160 @@ var debugOutput = function (output) { return __awaiter(void 0, void 0, void 0, f
         }
     });
 }); };
-describe('Qwik', function () {
-    test('Todo', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var json, output;
+describe('qwik', function () {
+    describe('todo', function () {
+        test('Todo.tsx', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var json, fileSet;
+            return __generator(this, function (_a) {
+                json = jsx_1.parseJsx(todo);
+                fileSet = index_1.createFileSet({ output: 'ts' });
+                index_1.addComponent(fileSet, json);
+                debugOutput(fileSet);
+                expect(toObj(fileSet)).toMatchSnapshot();
+                return [2 /*return*/];
+            });
+        }); });
+        test('Todo.cjs', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var json, fileSet;
+            return __generator(this, function (_a) {
+                json = jsx_1.parseJsx(todo);
+                fileSet = index_1.createFileSet({ output: 'cjs', jsx: false });
+                index_1.addComponent(fileSet, json);
+                debugOutput(fileSet);
+                expect(toObj(fileSet)).toMatchSnapshot();
+                return [2 /*return*/];
+            });
+        }); });
+        test('Todo.js', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var json, fileSet;
+            return __generator(this, function (_a) {
+                json = jsx_1.parseJsx(todo);
+                fileSet = index_1.createFileSet({
+                    output: 'mjs',
+                    minify: true,
+                    jsx: false,
+                });
+                index_1.addComponent(fileSet, json);
+                debugOutput(fileSet);
+                expect(toObj(fileSet)).toMatchSnapshot();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('todos', function () {
+        test('Todo.tsx', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var json, fileSet;
+            return __generator(this, function (_a) {
+                json = jsx_1.parseJsx(todos);
+                fileSet = index_1.createFileSet({ output: 'ts' });
+                index_1.addComponent(fileSet, json);
+                debugOutput(fileSet);
+                expect(toObj(fileSet)).toMatchSnapshot();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('hello_world', function () {
+        test('stylesheet', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var component, fileSet;
+            return __generator(this, function (_a) {
+                component = __1.builderContentToMitosisComponent(require('./qwik.test.hello_world.json'));
+                fileSet = index_1.createFileSet({ output: 'mjs' });
+                index_1.addComponent(fileSet, component);
+                debugOutput(fileSet);
+                expect(toObj(fileSet)).toMatchSnapshot();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    test('page-with-symbol', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    json = jsx_1.parseJsx(todo);
-                    return [4 /*yield*/, qwik_1.componentToQwik(json)];
-                case 1:
-                    output = _a.sent();
-                    expect(output).toMatchSnapshot();
-                    debugOutput(output);
-                    return [2 /*return*/];
-            }
+            component = __1.builderContentToMitosisComponent(require('./qwik.test.page-with-symbol.json'));
+            fileSet = index_1.createFileSet({ output: 'mjs', jsx: false });
+            index_1.addComponent(fileSet, component);
+            debugOutput(fileSet);
+            expect(toObj(fileSet)).toMatchSnapshot();
+            return [2 /*return*/];
         });
     }); });
-    test('Todo bundle', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var json, output;
+    test('button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    json = jsx_1.parseJsx(todo);
-                    return [4 /*yield*/, qwik_1.componentToQwik(json, {
-                            bundle: true,
-                        })];
-                case 1:
-                    output = _a.sent();
-                    expect(output).toMatchSnapshot();
-                    debugOutput(output);
-                    return [2 /*return*/];
-            }
+            component = __1.builderContentToMitosisComponent(require('./qwik.test.button.json'));
+            fileSet = index_1.createFileSet({ output: 'mjs', jsx: false });
+            index_1.addComponent(fileSet, component);
+            debugOutput(fileSet);
+            expect(toObj(fileSet)).toMatchSnapshot();
+            return [2 /*return*/];
         });
     }); });
-    test('Todos', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var json, output;
+    test('svg', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
         return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    json = jsx_1.parseJsx(todos);
-                    return [4 /*yield*/, qwik_1.componentToQwik(json)];
-                case 1:
-                    output = _a.sent();
-                    expect(output).toMatchSnapshot();
-                    debugOutput(output);
-                    return [2 /*return*/];
-            }
+            component = __1.builderContentToMitosisComponent(require('./qwik.test.svg.json'), {
+                includeBuilderExtras: true,
+                preserveTextBlocks: true,
+            });
+            fileSet = index_1.createFileSet({ output: 'mjs', jsx: false });
+            index_1.addComponent(fileSet, component);
+            debugOutput(fileSet);
+            expect(toObj(fileSet)).toMatchSnapshot();
+            return [2 /*return*/];
+        });
+    }); });
+    test('Image', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
+        return __generator(this, function (_a) {
+            component = __1.builderContentToMitosisComponent(require('./qwik.test.image.json'), {
+                includeBuilderExtras: true,
+                preserveTextBlocks: true,
+            });
+            fileSet = index_1.createFileSet({ output: 'mjs', jsx: false });
+            index_1.addComponent(fileSet, component);
+            debugOutput(fileSet);
+            expect(toObj(fileSet)).toMatchSnapshot();
+            return [2 /*return*/];
+        });
+    }); });
+    test('Image.slow', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
+        return __generator(this, function (_a) {
+            component = __1.builderContentToMitosisComponent(require('./qwik.test.image.json'), {
+                includeBuilderExtras: true,
+                preserveTextBlocks: true,
+            });
+            compile_away_builder_components_1.compileAwayBuilderComponentsFromTree(component, compile_away_builder_components_1.components);
+            fileSet = index_1.createFileSet({ output: 'mjs', jsx: false });
+            index_1.addComponent(fileSet, component);
+            debugOutput(fileSet);
+            expect(toObj(fileSet)).toMatchSnapshot();
+            return [2 /*return*/];
+        });
+    }); });
+    test('Accordion', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var component, fileSet;
+        return __generator(this, function (_a) {
+            component = __1.builderContentToMitosisComponent(require('./qwik.test.accordion.json'), {
+                includeBuilderExtras: true,
+                preserveTextBlocks: true,
+            });
+            compile_away_builder_components_1.compileAwayBuilderComponentsFromTree(component, compile_away_builder_components_1.components);
+            fileSet = index_1.createFileSet({ output: 'mjs', jsx: true });
+            index_1.addComponent(fileSet, component);
+            debugOutput(fileSet);
+            expect(toObj(fileSet)).toMatchSnapshot();
+            return [2 /*return*/];
         });
     }); });
 });
+function toObj(fileSet) {
+    var obj = {};
+    for (var key in fileSet) {
+        if (Object.prototype.hasOwnProperty.call(fileSet, key)) {
+            var file = fileSet[key];
+            obj[file.path] = file.contents;
+        }
+    }
+    return obj;
+}

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

@@ -0,0 +1,20 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { File } from './src-generator';
+export declare type QwikOptions = {
+    qwikLib?: string;
+    qrlPrefix?: string;
+    output?: 'ts' | 'cjs' | 'mjs';
+    jsx?: boolean;
+    minify?: boolean;
+};
+export interface FileSet {
+    high: File;
+    med: File;
+    low: File;
+}
+export declare function createFileSet(options?: QwikOptions): FileSet;
+export declare function addComponent(fileSet: FileSet, component: MitosisComponent, opts?: {
+    isRoot?: boolean;
+    shareStyles?: boolean;
+}): void;
+export declare function addCommonStyles(fileSet: FileSet): void;

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

@@ -0,0 +1,117 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCommonStyles = exports.addComponent = exports.createFileSet = void 0;
+var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
+var handlers_1 = require("./handlers");
+var jsx_1 = require("./jsx");
+var src_generator_1 = require("./src-generator");
+var styles_1 = require("./styles");
+function createFileSet(options) {
+    if (options === void 0) { options = {}; }
+    var opts = __assign({ qwikLib: '@builder.io/qwik', qrlPrefix: './', output: 'ts', minify: false, jsx: true }, options);
+    var extension = (opts.output == 'mjs' ? 'js' : opts.output) + (opts.jsx ? 'x' : '');
+    var srcOptions = {
+        isPretty: !opts.minify,
+        isModule: opts.output != 'cjs',
+        isTypeScript: opts.output == 'ts',
+        isJSX: opts.jsx,
+    };
+    var fileSet = {
+        high: new src_generator_1.File('high.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
+        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', {
+        enumerable: false,
+        value: { styles: new Map(), symbolName: null },
+    });
+    return fileSet;
+}
+exports.createFileSet = createFileSet;
+function getCommonStyles(fileSet) {
+    return fileSet['_commonStyles'];
+}
+function addComponent(fileSet, component, opts) {
+    if (opts === void 0) { opts = {}; }
+    var _opts = __assign({ isRoot: false, shareStyles: false }, opts);
+    compile_away_builder_components_1.compileAwayBuilderComponentsFromTree(component, compile_away_builder_components_1.components);
+    var componentName = component.name;
+    var handlers = handlers_1.renderHandlers(fileSet.high, componentName, component.children);
+    // If the component has no handlers, than it is probably static
+    // and so it is unlikely to be re-rendered on the client, therefore
+    // put it in a low priority bucket.
+    var isStatic = Array.from(handlers.keys()).reduce(function (p, v) { return p && v.indexOf('state') == -1; }, true);
+    var onRenderFile = isStatic ? fileSet.low : fileSet.med;
+    var componentFile = fileSet.med;
+    if (!componentFile.exports.get('onMountCreateEmptyState')) {
+        componentFile.exportConst('onMountCreateEmptyState', function () {
+            this.emit(src_generator_1.invoke(componentFile.import(componentFile.qwikModule, 'qHook'), [src_generator_1.arrowFnValue([], ['({})'])], ['any', 'any']));
+        });
+    }
+    if (component.hooks.onMount) {
+        addComponentOnMount(componentFile, componentName, component);
+    }
+    var styles = _opts.shareStyles
+        ? getCommonStyles(fileSet).styles
+        : new Map();
+    styles_1.collectStyles(component.children, styles);
+    var qComponentOptions = {
+        // tagName: string(componentName.toLowerCase()),
+        onMount: src_generator_1.invoke(componentFile.import(componentFile.qwikModule, 'qHook'), [
+            componentFile.toQrl(component.hooks.onMount
+                ? componentName + '_onMount'
+                : 'onMountCreateEmptyState'),
+        ]),
+        onRender: src_generator_1.invoke(componentFile.import(componentFile.qwikModule, 'qHook'), [
+            onRenderFile.toQrl(componentName + '_onRender'),
+        ]),
+    };
+    if (_opts.shareStyles) {
+        if (_opts.isRoot) {
+            var symbolName = componentName + '_styles';
+            getCommonStyles(fileSet).symbolName = symbolName;
+            qComponentOptions.unscopedStyles = onRenderFile.toQrl(symbolName);
+        }
+    }
+    else {
+        if (styles.size) {
+            qComponentOptions.styles = onRenderFile.toQrl(componentName + '_styles');
+            onRenderFile.exportConst(componentName + '_styles', styles_1.renderStyles(styles));
+        }
+    }
+    componentFile.exportConst(componentName, src_generator_1.invoke(componentFile.import(componentFile.qwikModule, 'qComponent'), [qComponentOptions], ['any', 'any']));
+    onRenderFile.src.emit(src_generator_1.NL);
+    onRenderFile.exportConst(componentName + '_onRender', src_generator_1.invoke(onRenderFile.import(onRenderFile.qwikModule, 'qHook'), [
+        src_generator_1.arrowFnValue(['props', 'state'], jsx_1.renderJSXNodes(onRenderFile, handlers, component.children, styles)),
+    ]));
+}
+exports.addComponent = addComponent;
+function addCommonStyles(fileSet) {
+    var _a = getCommonStyles(fileSet), styles = _a.styles, symbolName = _a.symbolName;
+    var onRenderFile = fileSet.low;
+    if (symbolName) {
+        onRenderFile.exportConst(symbolName, styles_1.renderStyles(styles));
+    }
+}
+exports.addCommonStyles = addCommonStyles;
+function addComponentOnMount(componentFile, componentName, component) {
+    componentFile.exportConst(componentName + '_onMount', function () {
+        var _this = this;
+        this.emit(src_generator_1.invoke(componentFile.import(componentFile.qwikModule, 'qHook'), [
+            src_generator_1.arrowFnValue([], function () {
+                return _this.emit('{', src_generator_1.NL, src_generator_1.INDENT, 'const state = {};', src_generator_1.NL, component.hooks.onMount, src_generator_1.NL, 'return state;', src_generator_1.UNINDENT, src_generator_1.NL, '}');
+            }),
+        ], ['any', 'any']));
+    });
+}

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

@@ -0,0 +1,2 @@
+import { MitosisNode } from '../../types/mitosis-node';
+export declare const DIRECTIVES: Record<string, (node: MitosisNode, blockFn: () => void) => void>;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIRECTIVES = void 0;
+var src_generator_1 = require("./src-generator");
+exports.DIRECTIVES = {
+    Show: function (node, blockFn) {
+        return function () {
+            var expr = node.bindings.when;
+            if (this.isJSX) {
+                this.emit('{', src_generator_1.WS, src_generator_1.INDENT, expr, src_generator_1.WS, '?', src_generator_1.NL);
+            }
+            else {
+                this.emit(expr, src_generator_1.WS, '?', src_generator_1.INDENT, src_generator_1.NL);
+            }
+            blockFn();
+            if (this.isJSX) {
+                this.emit(':', src_generator_1.WS, 'null', src_generator_1.UNINDENT, src_generator_1.NL, '}', src_generator_1.NL);
+            }
+            else {
+                this.emit(':', src_generator_1.WS, 'null', src_generator_1.UNINDENT, src_generator_1.NL);
+            }
+        };
+    },
+};

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

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

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

@@ -0,0 +1,76 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHandlers = exports.extractJSBlock = void 0;
+var src_generator_1 = require("./src-generator");
+var IIF_START = '(() => {';
+var IIF_END = '})()';
+function extractJSBlock(binding) {
+    if (typeof binding == 'string') {
+        if (binding.startsWith('{') &&
+            binding.endsWith('}') &&
+            !binding.startsWith('{"') &&
+            !binding.endsWith('"}')) {
+            return binding.substring(1, binding.length - 2);
+        }
+        else if (binding.startsWith(IIF_START) && binding.endsWith(IIF_END)) {
+            return binding.substring(IIF_START.length, binding.length - IIF_END.length - 1);
+        }
+    }
+    return null;
+}
+exports.extractJSBlock = extractJSBlock;
+function renderHandlers(file, componentName, children) {
+    var id = 0;
+    var map = new Map();
+    var nodes = __spreadArray([], children);
+    while (nodes.length) {
+        var node = nodes.shift();
+        var bindings = node.bindings;
+        for (var key in bindings) {
+            if (Object.prototype.hasOwnProperty.call(bindings, key)) {
+                var binding = bindings[key];
+                if (binding != null) {
+                    if (key.startsWith('on')) {
+                        var block = extractJSBlock(binding) || binding;
+                        var symbol = componentName + "_" + key + "_" + id++;
+                        map.set(binding, symbol);
+                        renderHandler(file, symbol, block);
+                    }
+                }
+            }
+        }
+        nodes.push.apply(nodes, node.children);
+    }
+    return map;
+}
+exports.renderHandlers = renderHandlers;
+function renderHandler(file, symbol, code) {
+    file.exportConst(symbol, function () {
+        this.emit(src_generator_1.invoke(file.import(file.qwikModule, 'qHook'), [src_generator_1.arrowFnBlock(['props', 'state'], [wrapWithUse(file, code)])], ['any', 'any']));
+    });
+    file.src.emit(src_generator_1.NL);
+}
+function wrapWithUse(file, code) {
+    var needsEvent = !!code.match(/\bevent\b/);
+    if (needsEvent) {
+        return function () {
+            this.emit('{', src_generator_1.NL, src_generator_1.INDENT);
+            needsEvent &&
+                this.emit('const event', src_generator_1.WS, '=', src_generator_1.WS, src_generator_1.invoke(file.import(file.qwikModule, 'useEvent'), []), ';', src_generator_1.NL);
+            var blockContent = stripBlock(code);
+            this.emit(blockContent);
+            this.emit(src_generator_1.UNINDENT, src_generator_1.NL, '}');
+        };
+    }
+    else {
+        return code;
+    }
+}
+function stripBlock(block) {
+    return block.substring(1, block.length - 1).trim();
+}

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

@@ -0,0 +1,2 @@
+export { addCommonStyles, addComponent, createFileSet, FileSet, QwikOptions, } from './component';
+export { File } from './src-generator';

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.File = exports.createFileSet = exports.addComponent = exports.addCommonStyles = void 0;
+var component_1 = require("./component");
+Object.defineProperty(exports, "addCommonStyles", { enumerable: true, get: function () { return component_1.addCommonStyles; } });
+Object.defineProperty(exports, "addComponent", { enumerable: true, get: function () { return component_1.addComponent; } });
+Object.defineProperty(exports, "createFileSet", { enumerable: true, get: function () { return component_1.createFileSet; } });
+var src_generator_1 = require("./src-generator");
+Object.defineProperty(exports, "File", { enumerable: true, get: function () { return src_generator_1.File; } });

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

@@ -0,0 +1,4 @@
+import { MitosisNode } from '../../types/mitosis-node';
+import { File } from './src-generator';
+import { CssStyles } from './styles';
+export declare function renderJSXNodes(file: File, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, root?: boolean): any;