@builder.io/mitosis 0.0.96 → 0.0.97

package/dist/src/generators/angular.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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 dedent_1 = require("../helpers/dedent");
 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");
@@ -269,6 +269,7 @@ var componentToAngular = function (userOptions) {
                     case 'hooks-deps':
                     case 'state':
                     case 'properties':
+                    case 'dynamic-jsx-elements':
                         return function (x) { return x; };
                 }
             }),
@@ -387,7 +388,7 @@ var componentToAngular = function (userOptions) {
                 .join(',');
             return "const defaultProps = {".concat(defalutPropsString, "};\n");
         };
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone && !options.preserveImports,

package/dist/src/generators/builder.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToBuilder = exports.blockToBuilder = void 0;
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var fast_clone_1 = require("../helpers/fast-clone");
-var dedent_1 = __importDefault(require("dedent"));
+var dedent_1 = require("../helpers/dedent");
 var standalone_1 = require("prettier/standalone");
 var json5_1 = __importDefault(require("json5"));
 var is_upper_case_1 = require("../helpers/is-upper-case");
@@ -241,8 +241,8 @@ var componentToBuilder = function (options) {
         var result = (0, fast_clone_1.fastClone)({
             data: {
                 httpRequests: (_c = (_b = component === null || component === void 0 ? void 0 : component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.httpRequests,
-                jsCode: tryFormat((0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : component.hooks.onMount.code)),
-                tsCode: tryFormat((0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_e = component.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
+                jsCode: tryFormat((0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : component.hooks.onMount.code)),
+                tsCode: tryFormat((0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_e = component.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
                     ? ''
                     : "onMount(() => {\n                ".concat(component.hooks.onMount.code, "\n              })"))),
                 blocks: component.children

package/dist/src/generators/lit/generate.js

@@ -3,13 +3,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLit = void 0;
-var dedent_1 = __importDefault(require("dedent"));
 var standalone_1 = require("prettier/standalone");
+var dedent_1 = require("../../helpers/dedent");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var render_imports_1 = require("../../helpers/render-imports");
 var jsx_1 = require("../../parsers/jsx");
@@ -180,7 +177,7 @@ var componentToLit = function (options) {
                 html = html.replace(/\n{3,}/g, '\n\n');
             }
         }
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
             ? "\n      const spread = (properties) =>\n        directive((part) => {\n          for (const property in properties) {\n            const value = properties[attr];\n            part.element[property] = value;\n          }\n        });\n    "
             : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, options.useShadowDom
             ? ''

package/dist/src/generators/marko/generate.js

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markoFormatHtml = exports.postprocessHtml = exports.preprocessHtml = exports.componentToMarko = void 0;
-var dedent_1 = __importDefault(require("dedent"));
 var standalone_1 = require("prettier/standalone");
+var dedent_1 = require("../../helpers/dedent");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var render_imports_1 = require("../../helpers/render-imports");
 var jsx_1 = require("../../parsers/jsx");
@@ -176,7 +176,7 @@ var componentToMarko = function (userOptions) {
                 console.warn('Could not format css', err);
             }
         }
-        var jsString = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'marko' }), methodsString, !hasState
+        var jsString = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "], ["\n    ", "\n\n    class {\n        ", "\n\n        ", "\n\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'marko' }), methodsString, !hasState
             ? ''
             : "onCreate(".concat(thisHasProps ? 'input' : '', ") {\n          this.state = ").concat(dataString, "\n        }"), Array.from(domRefs)
             .map(function (refName) { return "get ".concat((0, lodash_1.camelCase)(refName), "() { \n            return this.getEl('").concat((0, lodash_1.camelCase)(refName), "')\n          }"); })

package/dist/src/generators/mitosis.js

@@ -28,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToMitosis = exports.blockToMitosis = exports.DEFAULT_FORMAT = void 0;
-var dedent_1 = __importDefault(require("dedent"));
 var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
+var dedent_1 = require("../helpers/dedent");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_components_1 = require("../helpers/get-components");
 var get_refs_1 = require("../helpers/get-refs");
@@ -157,7 +157,7 @@ var componentToMitosis = function (toMitosisOptions) {
         var needsMitosisCoreImport = Boolean(hasState || refs.length || mitosisComponents.length);
         var stringifiedUseMetadata = json5_1.default.stringify(component.meta.useMetadata);
         // TODO: smart only pull in imports as needed
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
             ? ''
             : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
             ? "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(stringifiedUseMetadata, ")")

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

@@ -6,7 +6,6 @@ var fast_clone_1 = require("../../helpers/fast-clone");
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var state_1 = require("../../helpers/state");
 var add_prevent_default_1 = require("./helpers/add-prevent-default");
-var convert_method_to_function_1 = require("./helpers/convert-method-to-function");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var plugins_1 = require("../../modules/plugins");
@@ -34,6 +33,7 @@ var PLUGINS = [
             case 'hooks':
             case 'hooks-deps':
             case 'properties':
+            case 'dynamic-jsx-elements':
                 // update signal getters to have `.value`
                 return function (code, k) {
                     // `ref` should not update the signal value access
@@ -47,7 +47,19 @@ var PLUGINS = [
                             to: function (x) { return (x === ref ? "".concat(x, ".value") : "".concat(ref, ".value.").concat(x)); },
                         });
                     });
-                    return code;
+                    // update signal getters to have `.value`
+                    return (0, replace_identifiers_1.replaceStateIdentifier)(function (name) {
+                        var state = json.state[name];
+                        switch (state === null || state === void 0 ? void 0 : state.type) {
+                            case 'getter':
+                                return "".concat(name, ".value");
+                            case 'function':
+                            case 'method':
+                            case 'property':
+                            case undefined:
+                                return "state.".concat(name);
+                        }
+                    })(code);
                 };
         }
     }),
@@ -77,27 +89,27 @@ var componentToQwik = function (userOptions) {
             emitImports(file, component);
             emitTypes(file, component);
             emitExports(file, component);
-            var metadata = component.meta.useMetadata || {};
-            var isLightComponent = ((_c = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
-            var mutable_1 = ((_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.mutable) || [];
-            var imports_1 = ((_e = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _e === void 0 ? void 0 : _e.imports) || {};
+            var metadata_1 = component.meta.useMetadata || {};
+            var isLightComponent = ((_c = (_b = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
+            var mutable_1 = ((_d = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _d === void 0 ? void 0 : _d.mutable) || [];
+            var imports_1 = ((_e = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _e === void 0 ? void 0 : _e.imports) || {};
             Object.keys(imports_1).forEach(function (key) { return file.import(imports_1[key], key); });
-            var state_3 = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata);
+            var state_3 = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata_1);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
             var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
-                    var _a, _b;
+                    var _a;
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
                     emitUseRef(file, component);
-                    hasState_1 && (0, state_2.emitUseStore)(file, state_3);
+                    hasState_1 &&
+                        (0, state_2.emitUseStore)({ file: file, stateInit: state_3, isDeep: (_a = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _a === void 0 ? void 0 : _a.hasDeepStore });
+                    emitUseComputed(file, component);
                     emitUseContextProvider(file, component);
                     emitUseClientEffect(file, component);
                     emitUseMount(file, component);
                     emitUseTask(file, component);
-                    emitTagNameHack(file, component, (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.elementTag);
-                    emitTagNameHack(file, component, (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.componentElementTag);
                     emitJSX(file, component, mutable_1);
                 },
             ], [(component.propsTypeRef || 'any') + (isLightComponent ? '&{key?:any}' : '')]);
@@ -126,11 +138,6 @@ function emitExports(file, component) {
         file.src.emit(code);
     });
 }
-function emitTagNameHack(file, component, metadataValue) {
-    if (typeof metadataValue === 'string' && metadataValue) {
-        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, (0, state_2.getStateMethodsAndGetters)(component.state), (0, state_2.getLexicalScopeVars)(component)), ';');
-    }
-}
 function emitUseClientEffect(file, component) {
     if (component.hooks.onMount) {
         // This is called useMount, but in practice it is used as
@@ -172,7 +179,7 @@ function emitJSX(file, component, mutable) {
     if (file.options.isPretty) {
         file.src.emit('\n\n');
     }
-    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
+    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, null, parentSymbolBindings));
 }
 function emitUseContextProvider(file, component) {
     Object.entries(component.context.set).forEach(function (_a) {
@@ -265,3 +272,13 @@ function extractGetterBody(code) {
     var end = code.lastIndexOf('}');
     return code.substring(start + 1, end).trim();
 }
+function emitUseComputed(file, component) {
+    for (var _i = 0, _a = Object.entries(component.state); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], stateValue = _b[1];
+        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
+            case 'getter':
+                file.src.const("\n          ".concat(key, " = ").concat(file.import(file.qwikModule, 'useComputed$').localName, "(() => {\n            ").concat(extractGetterBody(stateValue.code), "\n          })\n        "));
+                continue;
+        }
+    }
+}

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

@@ -27,6 +27,7 @@ var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var stable_serialize_1 = require("./helpers/stable-serialize");
 var styles_1 = require("./helpers/styles");
+var directives_1 = require("./directives");
 function createFileSet(options) {
     if (options === void 0) { options = {}; }
     var opts = __assign({ qwikLib: '@builder.io/qwik', qrlPrefix: './', output: 'ts', minify: false, jsx: true }, options);
@@ -98,13 +99,16 @@ function addComponent(fileSet, component, opts) {
     var directives = new Map();
     var rootChildren = component.children;
     addComponentOnMount(onRenderFile, function () {
-        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, rootChildren, styles, {}), ';');
+        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, rootChildren, styles, null, {}), ';');
     }, componentName, component, useStyles);
     componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, onRenderFile, componentName + 'OnMount')], ['any', 'any']));
     directives.forEach(function (code, name) {
         fileSet.med.import(fileSet.med.qwikModule, 'h');
         fileSet.med.exportConst(name, code, true);
     });
+    fileSet.low.exportConst('__proxyMerge__', directives_1.DIRECTIVES['__proxyMerge__'], true);
+    fileSet.med.exportConst('__proxyMerge__', directives_1.DIRECTIVES['__proxyMerge__'], true);
+    fileSet.high.exportConst('__proxyMerge__', directives_1.DIRECTIVES['__proxyMerge__'], true);
 }
 exports.addComponent = addComponent;
 function generateStyles(fromFile, dstFile, symbol, scoped) {
@@ -130,7 +134,12 @@ function addBuilderBlockClass(children) {
 }
 function renderUseLexicalScope(file) {
     return function () {
-        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
+        if (this.file.options.isBuilder) {
+            return this.emit('const [s,l]=', file.import(file.qwikModule, 'useLexicalScope').localName, '();', 'const state=__proxyMerge__(s,l);');
+        }
+        else {
+            return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
+        }
     };
 }
 exports.renderUseLexicalScope = renderUseLexicalScope;
@@ -152,15 +161,17 @@ function addComponentOnMount(componentFile, onRenderEmit, componentName, compone
     }
     componentFile.exportConst(componentName + 'OnMount', function () {
         var _this = this;
-        this.emit((0, src_generator_1.arrowFnValue)(['props'], function () {
+        this.emit((0, src_generator_1.arrowFnValue)(['p'], function () {
             var _a;
             return _this.emit.apply(_this, __spreadArray(__spreadArray(['{',
-                'const state=',
+                'const s=',
                 componentFile.import(componentFile.qwikModule, 'useStore').localName,
                 '(()=>{',
-                'const state = Object.assign({},props,typeof __STATE__==="object"?__STATE__[props.serverStateId]:undefined);'], inputInitializer, false), [inlineCode((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
+                'const state=Object.assign({},structuredClone(typeof __STATE__==="object"&&__STATE__[p.serverStateId]),p);'], inputInitializer, false), [inlineCode((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
                 'return state;',
-                '});',
+                '},{deep:true});',
+                'const l={};',
+                'const state=__proxyMerge__(s,l);',
                 useStyles,
                 onRenderEmit,
                 ';}'], false));

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

@@ -21,12 +21,4 @@ interface ImageProps {
     noWebp?: boolean;
 }
 export declare function Image(props: ImageProps): any;
-export declare function __passThroughProps__(dstProps: Record<string, any>, srcProps: Record<string, any>): Record<string, any>;
-export declare function CoreButton(props: {
-    text?: string;
-    link?: string;
-    class?: string;
-    openInNewTab?: string;
-    tagName$: string;
-}): any;
 export {};

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

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoreButton = exports.__passThroughProps__ = exports.Image = exports.DIRECTIVES = void 0;
+exports.Image = exports.DIRECTIVES = void 0;
 var for_1 = require("../../helpers/nodes/for");
 var minify_1 = require("../minify");
 var src_generator_1 = require("./src-generator");
@@ -40,12 +40,17 @@ exports.DIRECTIVES = {
                 _this.emit('(', expr, '||[]).map(');
                 _this.isBuilder && _this.emit('(('), _this.emit('function(', forArgs, '){');
                 if (_this.isBuilder) {
-                    _this.emit('var state=Object.assign({},this,{', (0, src_generator_1.iteratorProperty)(expr), ':', forName, '==null?{}:', forName, '});');
+                    _this.emit('const l={...this,', (0, src_generator_1.iteratorProperty)(expr), ':', forName, '==null?{}:', forName, ',', function () {
+                        return forArgs.forEach(function (arg) {
+                            _this.emit(arg, ':', arg, ',');
+                        });
+                    }, '};');
+                    _this.emit('const state = __proxyMerge__(s,l);');
                 }
                 _this.emit('return(');
                 blockFn();
                 _this.emit(');}');
-                _this.isBuilder && _this.emit(').bind(state))');
+                _this.isBuilder && _this.emit(').bind(l))');
                 _this.emit(')');
             });
         };
@@ -53,6 +58,7 @@ exports.DIRECTIVES = {
     Image: (0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), Image),
     CoreButton: (0, minify_1.minify)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", ""], ["", ""])), CoreButton),
     __passThroughProps__: (0, minify_1.minify)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ""], ["", ""])), __passThroughProps__),
+    __proxyMerge__: (0, minify_1.minify)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", ""], ["", ""])), __proxyMerge__),
 };
 function Image(props) {
     var _a;
@@ -81,7 +87,7 @@ function Image(props) {
                 .map(function (size) {
                 return updateQueryParam(webpImage_1, 'width', size) + ' ' + size + 'w';
             })
-                .concat([image])
+                .concat(tryAppendWidth(image))
                 .join(', ');
             imgProps.srcset = srcset;
             jsx = jsx = [
@@ -113,6 +119,14 @@ function Image(props) {
         }
         return uri + separator + key + '=' + encodeURIComponent(value);
     }
+    function tryAppendWidth(url) {
+        var match = url.match(/[?&]width=(\d+)/);
+        var width = match && match[1];
+        if (width) {
+            return [url + ' ' + width + 'w'];
+        }
+        return [];
+    }
 }
 exports.Image = Image;
 function __passThroughProps__(dstProps, srcProps) {
@@ -124,7 +138,6 @@ function __passThroughProps__(dstProps, srcProps) {
     }
     return dstProps;
 }
-exports.__passThroughProps__ = __passThroughProps__;
 function CoreButton(props) {
     var hasLink = !!props.link;
     var hProps = {
@@ -135,5 +148,20 @@ function CoreButton(props) {
     };
     return h(hasLink ? 'a' : props.tagName$ || 'span', __passThroughProps__(hProps, props));
 }
-exports.CoreButton = CoreButton;
-var templateObject_1, templateObject_2, templateObject_3;
+function __proxyMerge__(state, local) {
+    return new Proxy(state, {
+        get: function (obj, prop) {
+            if (local && prop in local) {
+                return local[prop];
+            }
+            else {
+                return state[prop];
+            }
+        },
+        set: function (obj, prop, value) {
+            obj[prop] = value;
+            return true;
+        },
+    });
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -20,7 +20,11 @@ export declare type StateValues = Record<PropertyName, StateValue>;
  * @param file
  * @param stateInit
  */
-export declare function emitUseStore(file: File, stateInit: StateInit): void;
+export declare function emitUseStore({ file, stateInit, isDeep, }: {
+    file: File;
+    stateInit: StateInit;
+    isDeep: boolean;
+}): void;
 export declare function emitStateMethodsAndRewriteBindings(file: File, component: MitosisComponent, metadata: Record<string, any>): StateInit;
 export declare function getLexicalScopeVars(component: MitosisComponent): string[];
 export declare type MethodMap = Record<string, 'method' | 'getter'>;

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

@@ -21,7 +21,8 @@ var babel_transform_1 = require("../../../helpers/babel-transform");
  * @param file
  * @param stateInit
  */
-function emitUseStore(file, stateInit) {
+function emitUseStore(_a) {
+    var file = _a.file, stateInit = _a.stateInit, isDeep = _a.isDeep;
     var state = stateInit[0];
     var hasState = state && Object.keys(state).length > 0;
     if (hasState) {
@@ -29,7 +30,8 @@ function emitUseStore(file, stateInit) {
         if (file.options.isTypeScript) {
             file.src.emit('<any>');
         }
-        file.src.emit("(".concat((0, stable_inject_1.stableInject)(state), ");"));
+        var fnArgs = [(0, stable_inject_1.stableInject)(state), isDeep ? '{deep: true}' : undefined].filter(Boolean);
+        file.src.emit("(".concat(fnArgs, ");"));
     }
     else {
         // TODO hack for now so that `state` variable is defined, even though it is never read.
@@ -45,22 +47,15 @@ function emitStateMethods(file, componentState, lexicalArgs) {
         var stateValue = componentState[key];
         switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
             case 'method':
-            case 'getter':
             case 'function':
                 var code = stateValue.code;
                 var prefixIdx = 0;
-                if (stateValue.type === 'getter') {
-                    prefixIdx += 'get '.length;
-                }
-                else if (stateValue.type === 'function') {
+                if (stateValue.type === 'function') {
                     prefixIdx += 'function '.length;
                 }
                 code = code.substring(prefixIdx);
                 code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
                 var functionName = code.split(/\(/)[0];
-                if (stateValue.type === 'getter') {
-                    stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
-                }
                 if (!file.options.isTypeScript) {
                     // Erase type information
                     code = (0, babel_transform_1.convertTypeScriptToJS)(code);

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

@@ -9,8 +9,9 @@ import { CssStyles } from './helpers/styles';
  * @param handlers A set of handlers which we came across so that they can be rendered
  * @param children A list of children to convert to JSX
  * @param styles Store for styles which we came across so that they can be rendered.
+ * @param key Key to be used for the node if needed
  * @param parentSymbolBindings A set of bindings from parent to be written into the child.
  * @param root True if this is the root JSX, and may need a Fragment wrapper.
  * @returns
  */
-export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, parentSymbolBindings: Record<string, string>, root?: boolean): any;
+export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, key: string | null | undefined, parentSymbolBindings: Record<string, string>, root?: boolean): any;

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

@@ -32,11 +32,12 @@ var src_generator_1 = require("./src-generator");
  * @param handlers A set of handlers which we came across so that they can be rendered
  * @param children A list of children to convert to JSX
  * @param styles Store for styles which we came across so that they can be rendered.
+ * @param key Key to be used for the node if needed
  * @param parentSymbolBindings A set of bindings from parent to be written into the child.
  * @param root True if this is the root JSX, and may need a Fragment wrapper.
  * @returns
  */
-function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, root) {
+function renderJSXNodes(file, directives, handlers, children, styles, key, parentSymbolBindings, root) {
     if (root === void 0) { root = true; }
     return function () {
         var _this = this;
@@ -86,15 +87,12 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                     });
                     _this.emit(directive(child, blockFn_1));
                     !_this.isJSX && _this.emit(',');
+                    includedHelperDirectives(directive.toString(), directives);
                 }
                 else {
                     if (typeof directive == 'string') {
                         directives.set(childName, directive);
-                        Array.from(directive.matchAll(/(__[^_]+__)/g)).forEach(function (match) {
-                            var name = match[0];
-                            var code = directives_1.DIRECTIVES[name];
-                            typeof code == 'string' && directives.set(name, code);
-                        });
+                        includedHelperDirectives(directive, directives);
                         if (file.module !== 'med' && file.imports.hasImport(childName)) {
                             file.import('./med.js', childName);
                         }
@@ -122,10 +120,15 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                             props.class = addClass(styleProps.CLASS_NAME, props.class);
                         }
                     }
+                    key = props['builder-id'] || key;
+                    if (props.innerHTML) {
+                        // Special case. innerHTML requires `key` in Qwik
+                        props = __assign({ key: key || 'default' }, props);
+                    }
                     var symbolBindings = {};
                     var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
                     _this.jsxBegin(childName, props, __assign(__assign(__assign({}, bindings), parentSymbolBindings), specialBindings));
-                    renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, false).call(_this);
+                    renderJSXNodes(file, directives, handlers, child.children, styles, key, symbolBindings, false).call(_this);
                     _this.jsxEnd(childName);
                 }
             }
@@ -140,13 +143,20 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                 children = children.filter(function (c) { return !isEmptyTextNode(c); });
                 var childNeedsFragment = children.length > 1 || (children.length && isTextNode(children[0]));
                 childNeedsFragment && srcBuilder.jsxBeginFragment(fragmentSymbol);
-                renderJSXNodes(file, directives, handlers, children, styles, {}, false).call(srcBuilder);
+                renderJSXNodes(file, directives, handlers, children, styles, null, {}, false).call(srcBuilder);
                 childNeedsFragment && srcBuilder.jsxEndFragment();
             };
         }
     };
 }
 exports.renderJSXNodes = renderJSXNodes;
+function includedHelperDirectives(directive, directives) {
+    Array.from(directive.matchAll(/(__[\w]+__)/g)).forEach(function (match) {
+        var name = match[0];
+        var code = directives_1.DIRECTIVES[name];
+        typeof code == 'string' && directives.set(name, code);
+    });
+}
 function isSymbol(name) {
     return name.charAt(0) == name.charAt(0).toUpperCase();
 }
@@ -190,16 +200,16 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
             var bindingValue = bindings[key];
             var bindingExpr = bindingValue.code;
-            var handlerBlock = void 0;
+            var handlerBlock = handlers.get(bindingExpr);
             if (key == 'css') {
                 continue;
             }
-            else if ((handlerBlock = handlers.get(bindingExpr))) {
+            else if (handlerBlock) {
                 key = "".concat(key, "$");
                 bindingExpr = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
                     (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),
                     (0, src_generator_1.quote)(handlerBlock),
-                    '[state]',
+                    file.options.isBuilder ? '[s,l]' : '[state]',
                 ]);
             }
             else if (symbolBindings && key.startsWith('symbol.data.')) {

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

@@ -61,7 +61,7 @@ export declare class Symbol {
 }
 export declare class Imports {
     imports: Map<string, Map<string, Symbol>>;
-    get(moduleName: string, symbolName: string, as?: string): Symbol;
+    get(moduleName: string, symbolName: string, asVar?: string): Symbol;
     hasImport(localName: string): boolean;
 }
 export declare function quote(text: string): string;

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

@@ -456,7 +456,7 @@ var Imports = /** @class */ (function () {
     function Imports() {
         this.imports = new Map();
     }
-    Imports.prototype.get = function (moduleName, symbolName, as) {
+    Imports.prototype.get = function (moduleName, symbolName, asVar) {
         var importSymbols = this.imports.get(moduleName);
         if (!importSymbols) {
             importSymbols = new Map();
@@ -464,7 +464,7 @@ var Imports = /** @class */ (function () {
         }
         var symbol = importSymbols.get(symbolName);
         if (!symbol) {
-            symbol = new Symbol(symbolName, as || symbolName);
+            symbol = new Symbol(symbolName, asVar || symbolName);
             importSymbols.set(symbolName, symbol);
         }
         return symbol;

package/dist/src/generators/react/blocks.js

@@ -20,8 +20,10 @@ var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var slots_1 = require("../../helpers/slots");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
+var is_root_text_node_1 = require("../../helpers/is-root-text-node");
 var for_1 = require("../../helpers/nodes/for");
 var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
 var helpers_1 = require("./helpers");
 var state_1 = require("./state");
 var NODE_MAPPERS = {
@@ -97,11 +99,17 @@ var NODE_MAPPERS = {
     },
     Show: function (json, options, component) {
         var _a;
-        var wrap = (0, helpers_1.wrapInFragment)(json);
+        var wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        var wrapElse = json.meta.else &&
+            ((0, helpers_1.wrapInFragment)(json.meta.else) || (0, mitosis_node_1.checkIsForNode)(json.meta.else));
         return "{".concat((0, helpers_1.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
-            .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options, component), "}");
+            .join('\n')).concat(wrap ? (0, helpers_1.closeFrag)(options) : '', "\n    ) : ").concat(!json.meta.else
+            ? 'null'
+            : (wrapElse ? (0, helpers_1.openFrag)(options) : '') +
+                (0, exports.blockToReact)(json.meta.else, options, component) +
+                (wrapElse ? (0, helpers_1.closeFrag)(options) : ''), "}");
     },
 };
 var ATTTRIBUTE_MAPPERS = {