@builder.io/mitosis 0.0.48 → 0.0.49

package/dist/src/generators/qoot.js

@@ -0,0 +1,442 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToQoot = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+var lodash_1 = require("lodash");
+var standalone_1 = require("prettier/standalone");
+var is_jsx_lite_node_1 = require("../helpers/is-jsx-lite-node");
+var traverse_1 = __importDefault(require("traverse"));
+var capitalize_1 = require("../helpers/capitalize");
+var fast_clone_1 = require("../helpers/fast-clone");
+var render_imports_1 = require("../helpers/render-imports");
+var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
+var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
+var plugins_1 = require("../modules/plugins");
+var jsx_1 = require("../parsers/jsx");
+var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
+var get_state_object_string_1 = require("../helpers/get-state-object-string");
+var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
+var babel_transform_1 = require("../helpers/babel-transform");
+var core_1 = require("@babel/core");
+var collect_styles_1 = require("../helpers/collect-styles");
+var is_valid_attribute_name_1 = require("../helpers/is-valid-attribute-name");
+var rollup_1 = require("rollup");
+var plugin_virtual_1 = __importDefault(require("@rollup/plugin-virtual"));
+var qootImport = function (options) {
+    return options.qootLib || '@builder.io/qwik';
+};
+function addMarkDirtyAfterSetInCode(code, options, useString) {
+    if (useString === void 0) { useString = 'markDirty(this)'; }
+    return babel_transform_1.babelTransformExpression(code, {
+        UpdateExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isMemberExpression(node.argument)) {
+                if (core_1.types.isIdentifier(node.argument.object)) {
+                    // TODO: utillity to properly trace this reference to the beginning
+                    if (node.argument.object.name === 'state') {
+                        // TODO: ultimately do updates by property, e.g. updateName()
+                        // that updates any attributes dependent on name, etcç
+                        var parent_1 = path;
+                        // `_temp = ` assignments are created sometimes when we insertAfter
+                        // for simple expressions. this causes us to re-process the same expression
+                        // in an infinite loop
+                        while ((parent_1 = parent_1.parentPath)) {
+                            if (core_1.types.isAssignmentExpression(parent_1.node) &&
+                                core_1.types.isIdentifier(parent_1.node.left) &&
+                                parent_1.node.left.name.startsWith('_temp')) {
+                                return;
+                            }
+                        }
+                        path.insertAfter(core_1.types.identifier(useString));
+                    }
+                }
+            }
+        },
+        AssignmentExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isMemberExpression(node.left)) {
+                if (core_1.types.isIdentifier(node.left.object)) {
+                    // TODO: utillity to properly trace this reference to the beginning
+                    if (node.left.object.name === 'state') {
+                        // TODO: ultimately do updates by property, e.g. updateName()
+                        // that updates any attributes dependent on name, etcç
+                        var parent_2 = path;
+                        // `_temp = ` assignments are created sometimes when we insertAfter
+                        // for simple expressions. this causes us to re-process the same expression
+                        // in an infinite loop
+                        while ((parent_2 = parent_2.parentPath)) {
+                            if (core_1.types.isAssignmentExpression(parent_2.node) &&
+                                core_1.types.isIdentifier(parent_2.node.left) &&
+                                parent_2.node.left.name.startsWith('_temp')) {
+                                return;
+                            }
+                        }
+                        path.insertAfter(core_1.types.identifier(useString));
+                    }
+                }
+            }
+        },
+    });
+}
+var processBinding = function (binding, options) {
+    return strip_state_and_props_refs_1.stripStateAndPropsRefs(addMarkDirtyAfterSetInCode(binding, options), {
+        replaceWith: 'this.',
+    })
+        // Remove trailing semicolon
+        .trim()
+        .replace(/;$/, '');
+};
+var NODE_MAPPERS = {
+    Fragment: function (json, options) {
+        return "<>" + json.children
+            .map(function (item) { return blockToQoot(item, options); })
+            .join('\n') + "</>";
+    },
+    For: function (json, options) {
+        return "{" + processBinding(json.bindings.each, options) + ".map(" + json.bindings._forName + " => (\n      <>" + json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToQoot(item, options); })
+            .join('\n') + "</>\n    ))}";
+    },
+    Show: function (json, options) {
+        return "{" + processBinding(json.bindings.when, options) + " ? (\n      <>" + json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return blockToQoot(item, options); })
+            .join('\n') + "</>\n    ) : undefined}";
+    },
+};
+var getId = function (json, options) {
+    var name = json.properties.$name
+        ? lodash_1.camelCase(json.properties.$name)
+        : /^h\d$/.test(json.name || '') // don't dashcase h1 into h-1
+            ? json.name
+            : lodash_1.camelCase(json.name || 'div');
+    var newNameNum = (options.namesMap[name] || 0) + 1;
+    options.namesMap[name] = newNameNum;
+    return capitalize_1.capitalize("" + name + (newNameNum === 1 ? '' : "" + newNameNum));
+};
+var elId = function (node, options) {
+    if (node.meta.id) {
+        return node.meta.id;
+    }
+    var id = getId(node, options);
+    node.meta.id = id;
+    return id;
+};
+var blockToQoot = function (json, options) {
+    if (NODE_MAPPERS[json.name]) {
+        return NODE_MAPPERS[json.name](json, options);
+    }
+    if (json.bindings._text) {
+        return "{" + processBinding(json.bindings._text, options) + "}";
+    }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    var str = '';
+    str += "<" + json.name + " ";
+    if (json.bindings._spread) {
+        str += " {...(" + json.bindings._spread + ")} ";
+    }
+    for (var key in json.properties) {
+        if (key.startsWith('_') || key.startsWith('$')) {
+            continue;
+        }
+        var value = json.properties[key];
+        str += " " + key + "=\"" + value + "\" ";
+    }
+    var eventBindings = {};
+    for (var key in json.bindings) {
+        var value = json.bindings[key];
+        if (key.startsWith('_') || key.startsWith('$')) {
+            continue;
+        }
+        if (key.startsWith('on')) {
+            var useKey = key.replace('on', 'on:').toLowerCase();
+            var componentName = getComponentName(options.componentJson, options);
+            if (options.bundle) {
+                eventBindings[useKey] = "QRL`" + options.qrlPrefix + "/" + componentName + "/bundle" + (options.qrlSuffix || '') + ".on" + elId(json, options) + key.slice(2) + "`";
+            }
+            else {
+                eventBindings[useKey] = "QRL`" + options.qrlPrefix + "/" + componentName + "/on" + elId(json, options) + key.slice(2) + (options.qrlSuffix || '') + "`";
+            }
+        }
+        else {
+            if (!is_valid_attribute_name_1.isValidAttributeName(key)) {
+                console.warn('Skipping invalid attribute name:', key);
+            }
+            else {
+                str += " " + key + "={" + processBinding(value, options) + "} ";
+            }
+        }
+    }
+    if (lodash_1.size(eventBindings)) {
+        for (var event_1 in eventBindings) {
+            str += event_1 + "={" + eventBindings[event_1] + "}";
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children.map(function (item) { return blockToQoot(item, options); }).join('\n');
+    }
+    str += "</" + json.name + ">";
+    return str;
+};
+var getComponentName = function (json, options) {
+    return capitalize_1.capitalize(lodash_1.camelCase(json.name || 'my-component'));
+};
+// TODO
+var getProvidersString = function (componentJson, options) {
+    return 'null';
+};
+var formatCode = function (str, options, type) {
+    if (type === void 0) { type = 'typescript'; }
+    if (options.prettier !== false) {
+        try {
+            str = standalone_1.format(str, {
+                parser: type === 'typescript' ? 'babel-ts' : type,
+                plugins: [
+                    require('prettier/parser-typescript'),
+                    require('prettier/parser-babel'),
+                    require('prettier/parser-postcss'),
+                ],
+            });
+        }
+        catch (err) {
+            console.warn('Error formatting code', err);
+        }
+    }
+    return str;
+};
+var getEventHandlerFiles = function (componentJson, options) {
+    var files = [];
+    traverse_1.default(componentJson).forEach(function (item) {
+        if (is_jsx_lite_node_1.isJsxLiteNode(item)) {
+            for (var binding in item.bindings) {
+                if (binding.startsWith('on')) {
+                    var eventHandlerName = elId(item, options) + binding.slice(2);
+                    var componentName = getComponentName(componentJson, options);
+                    var str = formatCode("import {\n              injectEventHandler,\n              provideEvent,\n              markDirty\n            } from '" + qootImport(options) + "';\n            import { " + componentName + "Component } from './component.js'\n            \n            export " + (options.bundle ? "const on" + eventHandlerName + " =" : 'default') + " injectEventHandler(\n              " + componentName + "Component,\n              provideEvent(),\n              async function (this: " + componentName + "Component, event: Event) {\n                " + remove_surrounding_block_1.removeSurroundingBlock(processBinding(item.bindings[binding], options)) + "\n              }\n            )\n          ", options);
+                    str = formatCode(str, options);
+                    files.push({
+                        path: componentName + "/on" + eventHandlerName + ".ts",
+                        contents: str,
+                    });
+                }
+            }
+        }
+    });
+    return files;
+};
+var componentToQoot = function (componentJson, toQootOptions) {
+    if (toQootOptions === void 0) { toQootOptions = {}; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        var json, options, css, hasCss, addWrapper, componentName, str, dataString, output, moduleMap, bundle, bundleOutput;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    json = fast_clone_1.fastClone(componentJson);
+                    options = __assign(__assign({ qrlPrefix: 'ui:' }, toQootOptions), { namesMap: {}, componentJson: json });
+                    if (options.plugins) {
+                        json = plugins_1.runPreJsonPlugins(json, options.plugins);
+                    }
+                    css = collect_styles_1.collectCss(json, {
+                        classProperty: 'class',
+                        prefix: options.cssNamespace,
+                    });
+                    if (options.minifyStyles) {
+                        css = css.trim().replace(/\s+/g, ' ');
+                    }
+                    else {
+                        css = formatCode(css, options, 'css');
+                    }
+                    hasCss = Boolean(css.trim().length);
+                    addWrapper = json.children.length > 1 || hasCss;
+                    if (options.plugins) {
+                        json = plugins_1.runPostJsonPlugins(json, options.plugins);
+                    }
+                    componentName = capitalize_1.capitalize(lodash_1.camelCase(componentJson.name || 'my-component'));
+                    strip_meta_properties_1.stripMetaProperties(json);
+                    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { injectMethod, QRL, jsxFactory } from '", "';\n    import { ", "Component } from './component.js'\n    ", "\n\n    export ", " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ", "\n        ", "\n        ", ")\n    })\n  "], ["\n    import { injectMethod, QRL, jsxFactory } from '", "';\n    import { ", "Component } from './component.js'\n    ",
+                        "\n\n    export ",
+                        " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ",
+                        "\n        ", "\n        ", ")\n    })\n  "])), qootImport(options), componentName, render_imports_1.renderPreComponent(__assign(__assign({}, json), { imports: json.imports.map(function (item) {
+                            if (item.path.endsWith('.lite')) {
+                                var clone = fast_clone_1.fastClone(item);
+                                var name_1 = clone.path
+                                    .split(/[\.\/]/)
+                                    // Get the -1 index of array
+                                    .slice(-2, -1)
+                                    .pop();
+                                var pascalName = capitalize_1.capitalize(lodash_1.camelCase(name_1));
+                                clone.path = "../" + pascalName + "/public.js";
+                                for (var key in clone.imports) {
+                                    var value = clone.imports[key];
+                                    if (value === 'default') {
+                                        clone.imports[key] = pascalName;
+                                    }
+                                }
+                                return clone;
+                            }
+                            return item;
+                        }) })), options.bundle ? "const template = " : 'default', componentName, componentName, addWrapper ? '<>' : '', !hasCss
+                        ? ''
+                        : "<style>{`" + css
+                            .trim()
+                            .replace(/^|\n/g, '\n' + ' '.repeat(12)) + "`}</style>", json.children.map(function (item) { return blockToQoot(item, options); }).join('\n'), addWrapper ? '</>' : '');
+                    if (options.plugins) {
+                        str = plugins_1.runPreCodePlugins(str, options.plugins);
+                    }
+                    str = formatCode(str, options);
+                    if (options.plugins) {
+                        str = plugins_1.runPostCodePlugins(str, options.plugins);
+                    }
+                    dataString = get_state_object_string_1.getStateObjectString(json, {
+                        format: 'class',
+                        valueMapper: function (code) { return processBinding(code, options); },
+                    });
+                    output = {
+                        files: __spreadArray([
+                            {
+                                path: componentName + "/template.tsx",
+                                contents: str,
+                            },
+                            {
+                                path: componentName + "/public.ts",
+                                contents: formatCode("\n          import { jsxDeclareComponent, QRL } from '" + qootImport(options) + "';\n          \n          export const " + componentName + " = jsxDeclareComponent(QRL`" + options.qrlPrefix + "/" + componentName + "/" + (options.bundle ? 'bundle' : 'template') + (options.qrlSuffix || '') + (options.bundle ? '.template' : '') + "`, '" + lodash_1.kebabCase(componentName) + "');\n        ", options),
+                            },
+                            {
+                                path: componentName + "/component.ts",
+                                contents: formatCode((function () {
+                                    var str = "\n              " + (options.format === 'builder' ? '' : 'export ') + "class " + (options.format === 'builder' ? '_' : '') + componentName + "Component extends Component<any, any> {\n                " + (options.format === 'builder'
+                                        ? ''
+                                        : "static $templateQRL = '" + options.qrlPrefix + "/" + componentName + "/" + (options.bundle ? 'bundle' : 'template') + (options.qrlSuffix || '') + (options.bundle ? '.template' : '') + "'") + "\n\n                " + dataString + "\n\n                " + (!json.hooks.onMount
+                                        ? ''
+                                        : "\n                      constructor(...args) {\n                        super(...args);\n\n                        " + processBinding(json.hooks.onMount, options) + "\n                        }\n                      ") + "\n\n                $newState() {\n                  return {} // TODO\n                }\n              }\n              " + (options.format !== 'builder'
+                                        ? ''
+                                        : "\n              export const " + componentName + "Component = new Proxy(_" + componentName + "Component, {\n                get(target, prop) {\n                  if (prop === '$templateQRL') {\n                    return '" + options.qrlPrefix + "/" + componentName + "/" + (options.bundle ? 'bundle' : 'template') + (options.qrlSuffix || '') + (options.bundle ? '.template' : '') + "'\n                  }\n                  return Reflect.get(...arguments)\n                }\n              })\n              ") + "\n            ";
+                                    str = "\n              import { Component, QRL " + (str.includes('markDirty(') ? ', markDirty' : '') + " } from '" + qootImport(options) + "';\n              " + str + "\n            ";
+                                    return str;
+                                })(), options),
+                            }
+                        ], getEventHandlerFiles(json, options)),
+                    };
+                    if (!options.bundle) return [3 /*break*/, 3];
+                    moduleMap = __assign({ entry: output.files
+                            .filter(function (file) { return !file.path.endsWith('/public.ts'); })
+                            .map(function (file) { return "export * from './" + file.path.replace(/\.tsx?$/, '.js') + "';"; })
+                            .join('\n') }, output.files.reduce(function (memo, arg) {
+                        var transformed = core_1.transform(arg.contents, {
+                            sourceFileName: arg.path,
+                            plugins: [
+                                [
+                                    require('@babel/plugin-transform-typescript'),
+                                    {
+                                        jsx: 'react',
+                                        isTSX: true,
+                                        allExtensions: true,
+                                        jsxFactory: 'jsxFactory',
+                                        jsxPragma: 'jsxFactory',
+                                    },
+                                ],
+                                [
+                                    require('@babel/plugin-transform-react-jsx'),
+                                    {
+                                        pragma: 'jsxFactory',
+                                        pragmaFrag: 'null',
+                                        throwIfNamespace: false,
+                                    },
+                                ],
+                                require('@babel/plugin-proposal-class-properties'),
+                            ],
+                        });
+                        memo['./' + arg.path.replace(/\.tsx?$/, '.js')] = transformed.code;
+                        return memo;
+                    }, {}));
+                    return [4 /*yield*/, rollup_1.rollup({
+                            input: 'entry',
+                            external: [options.qootLib || '@builder.io/qwik'],
+                            plugins: [plugin_virtual_1.default(moduleMap)],
+                        })];
+                case 1:
+                    bundle = _a.sent();
+                    return [4 /*yield*/, bundle.generate({
+                            file: 'bundle.js',
+                            format: 'esm',
+                        })];
+                case 2:
+                    bundleOutput = (_a.sent()).output;
+                    output.files.push({
+                        path: componentName + "/bundle.js",
+                        contents: bundleOutput[0].code,
+                    });
+                    _a.label = 3;
+                case 3: return [2 /*return*/, output];
+            }
+        });
+    });
+};
+exports.componentToQoot = componentToQoot;
+var templateObject_1;

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -13,6 +17,7 @@ var __assign = (this && this.__assign) || function () {
 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 minify_1 = require("../minify");
 var handlers_1 = require("./handlers");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
@@ -36,6 +41,7 @@ function createFileSet(options) {
         enumerable: false,
         value: { styles: new Map(), symbolName: null },
     });
+    fileSet.med.exportConst('__merge', (0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), __merge));
     return fileSet;
 }
 exports.createFileSet = createFileSet;
@@ -43,9 +49,10 @@ function getCommonStyles(fileSet) {
     return fileSet['_commonStyles'];
 }
 function addComponent(fileSet, component, opts) {
+    var _a, _b;
     if (opts === void 0) { opts = {}; }
     var _opts = __assign({ isRoot: false, shareStyles: false }, opts);
-    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, compile_away_builder_components_1.components);
+    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { Image: undefined, CoreButton: undefined }));
     var componentName = component.name;
     var handlers = (0, handlers_1.renderHandlers)(fileSet.high, componentName, component.children);
     // If the component has no handlers, than it is probably static
@@ -59,7 +66,7 @@ function addComponent(fileSet, component, opts) {
             this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [(0, src_generator_1.arrowFnValue)([], ['({})'])], ['any', 'any']));
         });
     }
-    if (component.hooks.onMount) {
+    if ((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) {
         addComponentOnMount(componentFile, componentName, component);
     }
     var styles = _opts.shareStyles
@@ -69,7 +76,7 @@ function addComponent(fileSet, component, opts) {
     var qComponentOptions = {
         // tagName: string(componentName.toLowerCase()),
         onMount: (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [
-            componentFile.toQrl(component.hooks.onMount
+            componentFile.toQrl(((_b = component.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
                 ? componentName + '_onMount'
                 : 'onMountCreateEmptyState'),
         ]),
@@ -92,11 +99,29 @@ function addComponent(fileSet, component, opts) {
     }
     componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qComponent'), [qComponentOptions], ['any', 'any']));
     onRenderFile.src.emit(src_generator_1.NL);
+    var directives = new Map();
     onRenderFile.exportConst(componentName + '_onRender', (0, src_generator_1.invoke)(onRenderFile.import(onRenderFile.qwikModule, 'qHook'), [
-        (0, src_generator_1.arrowFnValue)(['props', 'state'], (0, jsx_1.renderJSXNodes)(onRenderFile, handlers, component.children, styles)),
+        (0, src_generator_1.arrowFnBlock)(['__props__', '__state__'], [
+            renderStateConst(onRenderFile),
+            function () {
+                return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, component.children, styles, {}), ';');
+            },
+        ]),
     ]));
+    directives.forEach(function (code, name) {
+        fileSet.med.import(fileSet.med.qwikModule, 'h');
+        fileSet.med.exportConst(name, code);
+    });
 }
 exports.addComponent = addComponent;
+function renderStateConst(file, isMount) {
+    if (isMount === void 0) { isMount = false; }
+    return function () {
+        return this.emit('const state', src_generator_1.WS, '=', src_generator_1.WS, file.module == 'med'
+            ? file.exports.get('__merge')
+            : file.import('./med', '__merge').name, '(__state__,', src_generator_1.WS, '__props__', isMount ? ',true);' : ');', src_generator_1.NL);
+    };
+}
 function addCommonStyles(fileSet) {
     var _a = getCommonStyles(fileSet), styles = _a.styles, symbolName = _a.symbolName;
     var onRenderFile = fileSet.low;
@@ -109,9 +134,26 @@ function addComponentOnMount(componentFile, componentName, component) {
     componentFile.exportConst(componentName + '_onMount', function () {
         var _this = this;
         this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [
-            (0, src_generator_1.arrowFnValue)([], function () {
-                return _this.emit('{', src_generator_1.NL, src_generator_1.INDENT, 'const state', src_generator_1.WS, '=', src_generator_1.WS, componentFile.import(componentFile.qwikModule, 'qObject').name, '({});', src_generator_1.NL, (0, src_generator_1.iif)(component.hooks.onMount), src_generator_1.NL, 'return state;', src_generator_1.UNINDENT, src_generator_1.NL, '}');
+            (0, src_generator_1.arrowFnValue)(['__props__'], function () {
+                var _a;
+                return _this.emit('{', src_generator_1.NL, src_generator_1.INDENT, 'const __state__', src_generator_1.WS, '=', src_generator_1.WS, componentFile.import(componentFile.qwikModule, 'qObject').name, '({});', src_generator_1.NL, renderStateConst(componentFile, true), (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code), src_generator_1.NL, 'return state;', src_generator_1.UNINDENT, src_generator_1.NL, '}');
             }),
         ], ['any', 'any']));
     });
 }
+function __merge(state, props, create) {
+    if (create === void 0) { create = false; }
+    for (var key in props) {
+        if (key.indexOf(':') == -1 &&
+            !key.startsWith('__') &&
+            Object.prototype.hasOwnProperty.call(props, key)) {
+            state[key] = props[key];
+        }
+    }
+    if (create && typeof __STATE__ == 'object' && props.serverStateId) {
+        debugger;
+        Object.assign(state, __STATE__[props.serverStateId]);
+    }
+    return state;
+}
+var templateObject_1;

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

@@ -1,2 +1,22 @@
 import { MitosisNode } from '../../types/mitosis-node';
-export declare const DIRECTIVES: Record<string, (node: MitosisNode, blockFn: () => void) => void>;
+export declare const DIRECTIVES: Record<string, string | ((node: MitosisNode, blockFn: () => void) => void)>;
+export declare function Image(props: {
+    href?: string;
+    image?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    sizes?: string;
+    altText?: string;
+    fitContent?: boolean;
+    aspectRatio?: number;
+    lazy?: boolean;
+    class?: string;
+    children?: any[];
+}): any;
+export declare function CoreButton(props: {
+    text?: string;
+    link?: string;
+    class?: string;
+    openInNewTab?: string;
+    tagName$: string;
+}): any;