@builder.io/mitosis 0.0.50-6 → 0.0.50

package/dist/src/constants/html_tags.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VALID_HTML_TAGS = void 0;
+exports.VALID_HTML_TAGS = [
+    'html',
+    'base',
+    'head',
+    'link',
+    'meta',
+    'style',
+    'title',
+    'body',
+    'address',
+    'article',
+    'aside',
+    'footer',
+    'header',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'main',
+    'nav',
+    'section',
+    'blockquote',
+    'dd',
+    'div',
+    'dl',
+    'dt',
+    'figcaption',
+    'figure',
+    'hr',
+    'li',
+    'menu',
+    'ol',
+    'p',
+    'pre',
+    'ul',
+    'a',
+    'abbr',
+    'b',
+    'bdi',
+    'bdo',
+    'br',
+    'cite',
+    'code',
+    'data',
+    'dfn',
+    'em',
+    'i',
+    'kbd',
+    'mark',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'wbr',
+    'area',
+    'audio',
+    'img',
+    'map',
+    'track',
+    'video',
+    'embed',
+    'iframe',
+    'object',
+    'param',
+    'picture',
+    'portal',
+    'source',
+    'svg',
+    'math',
+    'canvas',
+    'noscript',
+    'script',
+    'del',
+    'ins',
+    'caption',
+    'col',
+    'colgroup',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'button',
+    'datalist',
+    'fieldset',
+    'form',
+    'input',
+    'label',
+    'legend',
+    'meter',
+    'optgroup',
+    'option',
+    'output',
+    'progress',
+    'select',
+    'textarea',
+    'details',
+    'dialog',
+    'summary',
+    'slot',
+    'template',
+];

package/dist/src/generators/angular.js

@@ -38,7 +38,7 @@ var blockToAngular = function (json, options) {
         return mappers[json.name](json, options);
     }
     if ((0, is_children_1.default)(json)) {
-        return "<ng-slot></ng-slot>";
+        return "<ng-content></ng-content>";
     }
     if (json.properties._text) {
         return json.properties._text;
@@ -120,6 +120,7 @@ exports.blockToAngular = blockToAngular;
 var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
+        var _b;
         var component = _a.component;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
@@ -157,10 +158,12 @@ var componentToAngular = function (options) {
             ? ''
             : "ngOnInit() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onMount.code, {
                 replaceWith: 'this.',
-            }), "\n            }"), !component.hooks.onUpdate
+            }), "\n            }"), !((_b = component.hooks.onUpdate) === null || _b === void 0 ? void 0 : _b.length)
             ? ''
-            : "ngAfterContentChecked() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUpdate.code, {
-                replaceWith: 'this.',
+            : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.map(function (hook) {
+                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
+                    replaceWith: 'this.',
+                });
             }), "\n            }"), !component.hooks.onUnMount
             ? ''
             : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount.code, {

package/dist/src/generators/context/react copy.d.ts

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

package/dist/src/generators/context/react copy.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextToReact = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var contextToReact = function (options) {
+    if (options === void 0) { options = {}; }
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n  import { createContext } from 'react';\n\n  export default createContext(".concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ")\n  ");
+        if (options.format !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.contextToReact = contextToReact;

package/dist/src/generators/context/solid.d.ts

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

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextToSolid = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var contextToSolid = function (options) {
+    if (options === void 0) { options = {}; }
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n    import { createContext } from 'solid-js';\n\n    export default createContext(".concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ")\n    ");
+        if (options.format !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.contextToSolid = contextToSolid;

package/dist/src/generators/context/svelte.d.ts

@@ -0,0 +1,8 @@
+import { MitosisContext } from '../../types/mitosis-context';
+import { BaseTranspilerOptions } from '../../types/config';
+interface ContextToSvelteOptions extends Pick<BaseTranspilerOptions, 'prettier'> {
+}
+export declare const contextToSvelte: (options?: ContextToSvelteOptions) => ({ context }: {
+    context: MitosisContext;
+}) => string;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextToSvelte = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var contextToSvelte = function (options) {
+    if (options === void 0) { options = {}; }
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ", \n    key \n  }\n  ");
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.contextToSvelte = contextToSvelte;

package/dist/src/generators/helpers/context.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+export declare const hasContext: (component: MitosisComponent) => boolean;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasContext = void 0;
+var hasContext = function (component) {
+    return Boolean(Object.keys(component.context.get).length ||
+        Object.keys(component.context.set).length);
+};
+exports.hasContext = hasContext;

package/dist/src/generators/html.js

@@ -35,6 +35,7 @@ var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
+var render_imports_1 = require("../helpers/render-imports");
 var ATTRIBUTE_KEY_EXCEPTIONS_MAP = {
     class: 'className',
 };
@@ -147,6 +148,7 @@ var blockToHtml = function (json, options) {
         return json.properties._text;
     }
     if (json.bindings._text) {
+        // TO-DO: textContent might be better performance-wise
         addOnChangeJs(elId, options, "el.innerText = ".concat(json.bindings._text, ";"));
         return "<span data-name=\"".concat(elId, "\"><!-- ").concat(json.bindings._text.replace(/getContext\(el, "([^"]+)"\)/g, '$1'), " --></span>");
     }
@@ -156,7 +158,7 @@ var blockToHtml = function (json, options) {
         addOnChangeJs(elId, options, 
         // TODO: be smarter about rendering, deleting old items and adding new ones by
         // querying dom potentially
-        "\n        let array = ".concat(json.bindings.each, ";\n        let template = ").concat(options.format === 'class' ? 'this' : 'document', ".querySelector('[data-template-for=\"").concat(elId, "\"]');\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, template, \"").concat(itemName, "\");\n      "));
+        "\n        let array = ".concat(json.bindings.each, ";\n        let template = ").concat(options.format === 'class' ? 'this._root' : 'document', ".querySelector('[data-template-for=\"").concat(elId, "\"]');\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, template, \"").concat(itemName, "\");\n      "));
         // TODO: decide on how to handle this...
         str += "\n      <span data-name=\"".concat(elId, "\"></span>\n      <template data-template-for=\"").concat(elId, "\">");
         if (json.children) {
@@ -319,11 +321,13 @@ var componentToHtml = function (options) {
                     if (!value) {
                         return '';
                     }
-                    return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              })\n            ");
+                    return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el, index) => {\n                ").concat(value, "\n              })\n            ");
                 })
-                    .join('\n\n'), "\n\n            ").concat(!((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.code)
+                    .join('\n\n'), "\n\n            ").concat(!((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)
                     ? ''
-                    : "\n                  ".concat(updateReferencesInCode(json.hooks.onUpdate.code, useOptions), " \n                  "), "\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
+                    : "\n                  ".concat(json.hooks.onUpdate.map(function (hook) {
+                        return updateReferencesInCode(hook.code, useOptions);
+                    }), " \n                  "), "\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
                 ? ''
                 : // TODO: make prettier by grabbing only the function body
                     "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), " \n              "), "\n\n        ").concat(!hasLoop
@@ -361,7 +365,7 @@ exports.componentToHtml = componentToHtml;
 var componentToCustomElement = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c, _d;
+        var _b, _c, _d, _e;
         var component = _a.component;
         var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
         var json = (0, fast_clone_1.fastClone)(component);
@@ -405,7 +409,7 @@ var componentToCustomElement = function (options) {
         var kebabName = component.name
             .replace(/([a-z])([A-Z])/g, '$1-$2')
             .toLowerCase();
-        var str = "\n      /**\n       * Usage:\n       * \n       *  <".concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(component.name, " extends HTMLElement {\n        constructor() {\n          super();\n\n          const self = this;\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        var str = "\n      ".concat((0, render_imports_1.renderPreComponent)(json), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(component.name, " extends HTMLElement {\n        constructor() {\n          super();\n\n          const self = this;\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             valueMapper: function (value) {
                 return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
                     includeProps: false,
@@ -423,24 +427,26 @@ var componentToCustomElement = function (options) {
             ? "this.props = {};"
             : '', "\n\n          ").concat(!hasLoop
             ? ''
-            : "\n            // Helper to pass context down for loops\n            this.contextMap = new WeakMap();\n          ", "\n\n          ").concat(useOptions.js, "\n        }\n\n        ").concat(!((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code)
+            : "\n            // Helper to pass context down for loops\n            this.contextMap = new WeakMap();\n          ", "\n\n          ").concat(useOptions.js, "\n\n          if (").concat((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.isAttachedToShadowDom, ") {\n            this.attachShadow({ mode: 'open' })\n          }\n        }\n\n\n        ").concat(!((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code)
             ? ''
-            : "\n          disconnectedCallback() {\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions), "\n          }\n          "), "\n\n        connectedCallback() {\n          this.innerHTML = `\n      ").concat(html, "`;\n          this.update();\n\n          ").concat(!((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
+            : "\n          disconnectedCallback() {\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions), "\n          }\n          "), "\n\n        get _root() {\n          return this.shadowRoot || this;\n        }\n\n        connectedCallback() {\n          this._root.innerHTML = `\n      ").concat(html, "`;\n          this.onMount();\n          this.update();\n        }\n\n        onMount() {\n          ").concat(!((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
             ? ''
             : // TODO: make prettier by grabbing only the function body
-                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), "\n                "), "\n        }\n\n        update() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
+                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+            ? ''
+            : "\n      ".concat(json.hooks.onUpdate.map(function (hook) {
+                return updateReferencesInCode(hook.code, useOptions);
+            }), " \n      "), " \n        }\n\n        update() {\n          this.onUpdate();\n          this.updateBindings();\n        }\n\n        updateBindings() {\n                    ").concat(Object.keys(useOptions.onChangeJsById)
             .map(function (key) {
             var value = useOptions.onChangeJsById[key];
             if (!value) {
                 return '';
             }
-            return "\n              this.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(updateReferencesInCode(value, useOptions), "\n              })\n            ");
+            return "\n              this._root.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el, index) => {\n                ").concat(updateReferencesInCode(value, useOptions), "\n              })\n            ");
         })
-            .join('\n\n'), "\n\n            ").concat(!((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.code)
-            ? ''
-            : "\n                  ".concat(updateReferencesInCode(json.hooks.onUpdate.code, useOptions), " \n                  "), " \n        }\n\n        ").concat(!hasLoop
+            .join('\n\n'), "\n        }\n\n        ").concat(!hasLoop
             ? ''
-            : "\n\n          // Helper to render loops\n          renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach((child) => {\n                this.contextMap.set(child, {\n                  ...this.contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          getContext(el, name) {\n            let parent = el;\n            do {\n              let context = this.contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ", "\n      }\n\n      customElements.define('").concat(kebabName, "', ").concat(component.name, ");\n    ");
+            : "\n\n          // Helper to render loops\n          renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach((child) => {\n                this.contextMap.set(child, {\n                  ...this.contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          getContext(el, name) {\n            let parent = el;\n            do {\n              let context = this.contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode || parent.host)\n          }\n        ", "\n      }\n\n      customElements.define('").concat(kebabName, "', ").concat(component.name, ");\n    ");
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

package/dist/src/generators/mitosis.js

@@ -142,14 +142,15 @@ var componentToMitosis = function (toMitosisOptions) {
         var otherComponents = components.filter(function (item) { return !mitosisCoreComponents.includes(item); });
         var hasState = Boolean(Object.keys(component.state).length);
         var needsMitosisCoreImport = Boolean(hasState || refs.size || 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    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    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
             ? ''
             : "import { ".concat(!hasState ? '' : 'useState, ', " ").concat(!refs.size ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length
             ? ''
-            : "import { ".concat(otherComponents.join(','), " } from '@components';"), (0, render_imports_1.renderPreComponent)(json), !component.meta.metadataHook
-            ? ''
-            : "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(json5_1.default.stringify(component.meta.metadataHook), ")"), component.name, !hasState
+            : "import { ".concat(otherComponents.join(','), " } from '@components';"), (0, render_imports_1.renderPreComponent)(json), stringifiedUseMetadata !== '{}'
+            ? "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(stringifiedUseMetadata, ")")
+            : '', component.name, !hasState
             ? ''
             : "const state = useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
             ? ''

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

@@ -10,6 +10,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
@@ -74,8 +83,7 @@ function addComponent(fileSet, component, opts) {
         }
     }
     addComponentOnMount(componentFile, onRenderFile, componentName, component, useStyles);
-    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentFromQrl'), [generateQrl(componentFile, componentName + '_onMount')], ['any', 'any']));
-    onRenderFile.src.emit(src_generator_1.NL);
+    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, componentName + '_onMount')], ['any', 'any']));
     var directives = new Map();
     onRenderFile.exportConst(componentName + '_onRender', (0, src_generator_1.arrowFnBlock)([], [
         renderUseLexicalScope(onRenderFile),
@@ -91,12 +99,12 @@ function addComponent(fileSet, component, opts) {
 exports.addComponent = addComponent;
 function generateStyles(componentFile, styleFile, symbol, scoped) {
     return function () {
-        this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, scoped ? 'withScopedStylesFromQrl' : 'useStylesFromQrl'), [generateQrl(styleFile, symbol)]));
+        this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(styleFile, symbol)]), ';');
     };
 }
 function renderUseLexicalScope(file) {
     return function () {
-        return this.emit('const state', src_generator_1.WS, '=', src_generator_1.WS, file.import(file.qwikModule, 'useLexicalScope').name, '()[0]');
+        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').name, '()[0]');
     };
 }
 exports.renderUseLexicalScope = renderUseLexicalScope;
@@ -109,11 +117,24 @@ function addCommonStyles(fileSet) {
 }
 exports.addCommonStyles = addCommonStyles;
 function addComponentOnMount(componentFile, onRenderFile, componentName, component, useStyles) {
+    var inputInitializer = [];
+    if (component.inputs) {
+        component.inputs.forEach(function (input) {
+            input.defaultValue !== undefined &&
+                inputInitializer.push('if(state.', input.name, '===undefined)state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
+        });
+    }
     componentFile.exportConst(componentName + '_onMount', function () {
         var _this = this;
         this.emit((0, src_generator_1.arrowFnValue)(['state'], function () {
             var _a;
-            return _this.emit('{', (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code), ';', useStyles, src_generator_1.NL, 'return ', generateQrl(onRenderFile, componentName + '_onRender', ['state']), ';', src_generator_1.UNINDENT, src_generator_1.NL, '}');
+            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{'], inputInitializer, false), ['typeof __STATE__==="object"&&Object.assign(state,__STATE__[state.serverStateId]);',
+                (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
+                ';',
+                useStyles,
+                'return ',
+                generateQrl(onRenderFile, componentName + '_onRender', ['state']),
+                ';}'], false));
         }));
     });
 }

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

@@ -1,18 +1,26 @@
 import { MitosisNode } from '../../types/mitosis-node';
 export declare const DIRECTIVES: Record<string, string | ((node: MitosisNode, blockFn: () => void) => void)>;
-export declare function Image(props: {
-    href?: string;
+interface ImageProps {
+    altText?: string;
     image?: string;
+    href?: string;
+    height?: number;
+    width?: number;
+    builderBlock?: any;
+    attributes?: any;
+    sizes?: string;
+    srcsetSizes?: string;
+    srcset?: string;
     backgroundSize?: string;
     backgroundPosition?: string;
-    sizes?: string;
-    altText?: string;
     fitContent?: boolean;
     aspectRatio?: number;
     lazy?: boolean;
     class?: string;
     children?: any[];
-}): any;
+}
+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;
@@ -20,3 +28,4 @@ export declare function CoreButton(props: {
     openInNewTab?: string;
     tagName$: string;
 }): any;
+export {};

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

@@ -4,42 +4,43 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoreButton = exports.Image = exports.DIRECTIVES = void 0;
+exports.CoreButton = exports.__passThroughProps__ = exports.Image = exports.DIRECTIVES = void 0;
 var minify_1 = require("../minify");
 var src_generator_1 = require("./src-generator");
 exports.DIRECTIVES = {
     Show: function (node, blockFn) {
         return function () {
             var expr = node.bindings.when;
-            this.isJSX && this.emit('{', src_generator_1.WS);
-            this.emit(expr, src_generator_1.WS, '?', src_generator_1.INDENT, src_generator_1.NL);
+            this.isJSX && this.emit('{');
+            this.emit(expr, '?');
             blockFn();
-            this.emit(':', src_generator_1.WS, 'null', src_generator_1.UNINDENT, src_generator_1.NL);
-            this.isJSX && this.emit('}', src_generator_1.NL);
+            this.emit(':null');
+            this.isJSX && this.emit('}');
         };
     },
     For: function (node, blockFn) {
         return function () {
             var expr = node.bindings.each;
-            this.isJSX && this.emit('{', src_generator_1.WS);
-            this.emit('(', expr, src_generator_1.WS, '||', src_generator_1.WS, '[])');
-            this.emit('.map(', '(function(__value__)', src_generator_1.WS, '{', src_generator_1.INDENT, src_generator_1.NL);
-            this.emit('var state', src_generator_1.WS, '=', src_generator_1.WS, 'Object.assign({},', src_generator_1.WS, 'this,', src_generator_1.WS, '{', (0, src_generator_1.iteratorProperty)(expr), ':', src_generator_1.WS, '__value__', src_generator_1.WS, '==', src_generator_1.WS, 'null', src_generator_1.WS, '?', src_generator_1.WS, '{}', src_generator_1.WS, ':', src_generator_1.WS, '__value__', '});', src_generator_1.NL);
-            this.emit('return', src_generator_1.WS, '(');
+            this.isJSX && this.emit('{');
+            this.emit('(', expr, '||[]).map(', '(function(__value__){');
+            this.emit('var state=Object.assign({},this,{', (0, src_generator_1.iteratorProperty)(expr), ':__value__==null?{}:__value__});');
+            this.emit('return(');
             blockFn();
-            this.emit(')', ';', src_generator_1.UNINDENT, src_generator_1.NL);
-            this.emit('}', ').bind(state))', src_generator_1.NL);
-            this.isJSX && this.emit('}', src_generator_1.NL);
+            this.emit(');}).bind(state))');
+            this.isJSX && this.emit('}');
         };
     },
     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__),
 };
 function Image(props) {
+    var _a;
     var jsx = props.children || [];
     var image = props.image;
     if (image) {
-        var isBuilderIoImage = !!(image || '').match(/builder\.io/);
+        var isBuilderIoImage = !!(image || '').match(/\.builder\.io/);
+        var isPixel = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.id.startsWith('builder-pixel-');
         var imgProps = {
             src: props.image,
             style: "object-fit:".concat(props.backgroundSize || 'cover', ";object-position:").concat(props.backgroundPosition || 'center', ";") +
@@ -48,15 +49,17 @@ function Image(props) {
                     : ''),
             sizes: props.sizes,
             alt: props.altText,
-            loading: props.lazy ? 'lazy' : undefined,
+            role: !props.altText ? 'presentation' : undefined,
+            loading: isPixel ? 'eager' : 'lazy',
             srcset: undefined,
         };
         if (isBuilderIoImage) {
+            image = updateQueryParam(image, 'format', 'webp');
             var srcset = ['100', '200', '400', '800', '1200', '1600', '2000']
+                .concat(props.srcsetSizes ? String(props.srcsetSizes).split(' ') : [])
                 .map(function (size) {
                 return updateQueryParam(image, 'width', size) + ' ' + size + 'w';
             })
-                .concat([image])
                 .join(', ');
             imgProps.srcset = srcset;
             jsx = jsx = [
@@ -79,7 +82,7 @@ function Image(props) {
         }
     }
     var children = props.children ? [jsx].concat(props.children) : [jsx];
-    return h(props.href ? 'a' : 'div', { href: props.href, class: props.class }, children);
+    return h(props.href ? 'a' : 'div', __passThroughProps__({ href: props.href, class: props.class }, props), children);
     function updateQueryParam(uri, key, value) {
         if (uri === void 0) { uri = ''; }
         var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
@@ -91,6 +94,16 @@ function Image(props) {
     }
 }
 exports.Image = Image;
+function __passThroughProps__(dstProps, srcProps) {
+    for (var key in srcProps) {
+        if (Object.prototype.hasOwnProperty.call(srcProps, key) &&
+            ((key.startsWith('on') && key.endsWith('Qrl')) || key == 'style')) {
+            dstProps[key] = srcProps[key];
+        }
+    }
+    return dstProps;
+}
+exports.__passThroughProps__ = __passThroughProps__;
 function CoreButton(props) {
     var hasLink = !!props.link;
     var hProps = {
@@ -99,13 +112,7 @@ function CoreButton(props) {
         target: props.openInNewTab ? '_blank' : '_self',
         class: props.class,
     };
-    for (var key in props) {
-        if (Object.prototype.hasOwnProperty.call(props, key) &&
-            key.startsWith('on:')) {
-            hProps[key] = props[key];
-        }
-    }
-    return h(hasLink ? 'a' : props.tagName$ || 'span', hProps);
+    return h(hasLink ? 'a' : props.tagName$ || 'span', __passThroughProps__(hProps, props));
 }
 exports.CoreButton = CoreButton;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;