@builder.io/mitosis 0.0.56-25 → 0.0.56-28

package/dist/src/__tests__/hash-code.test.d.ts

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

package/dist/src/__tests__/hash-code.test.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var __1 = require("..");
+describe('hashCode', function () {
+    test('should compute object', function () {
+        expect((0, __1.hashCodeAsString)({ foo: 'bar' })).toEqual('1jo4fm');
+    });
+});

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

@@ -16,6 +16,7 @@ export declare function createFileSet(options?: QwikOptions): FileSet;
 export declare function addComponent(fileSet: FileSet, component: MitosisComponent, opts?: {
     isRoot?: boolean;
     shareStyles?: boolean;
+    hostProps?: Record<string, string>;
 }): void;
 export declare function renderUseLexicalScope(file: File): (this: SrcBuilder) => SrcBuilder;
 export declare function addCommonStyles(fileSet: FileSet): void;

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

@@ -21,6 +21,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
+var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
 var handlers_1 = require("./handlers");
 var jsx_1 = require("./jsx");
@@ -54,8 +55,9 @@ function getCommonStyles(fileSet) {
 }
 function addComponent(fileSet, component, opts) {
     if (opts === void 0) { opts = {}; }
-    var _opts = __assign({ isRoot: false, shareStyles: false }, opts);
+    var _opts = __assign({ isRoot: false, shareStyles: false, hostProps: null }, opts);
     (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { Image: undefined, CoreButton: undefined }));
+    addBuilderBlockClass(component.children);
     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
@@ -82,8 +84,18 @@ function addComponent(fileSet, component, opts) {
         }
     }
     var directives = new Map();
+    var rootChildren = component.children;
+    if (_opts.hostProps) {
+        rootChildren = [
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Host',
+                properties: _opts.hostProps,
+                children: component.children,
+            }),
+        ];
+    }
     addComponentOnMount(onRenderFile, function () {
-        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, component.children, styles, {}), ';');
+        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, rootChildren, styles, {}), ';');
     }, 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) {
@@ -97,6 +109,14 @@ function generateStyles(fromFile, dstFile, symbol, scoped) {
         this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(fromFile, dstFile, symbol)]), ';');
     };
 }
+function addBuilderBlockClass(children) {
+    children.forEach(function (child) {
+        var props = child.properties;
+        if (props['builder-id']) {
+            props.class = (props.class ? props.class + ' ' : '') + 'builder-block';
+        }
+    });
+}
 function renderUseLexicalScope(file) {
     return function () {
         return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
@@ -122,12 +142,10 @@ function addComponentOnMount(componentFile, onRenderEmit, componentName, compone
     componentFile.exportConst(componentName + '_onMount', function () {
         var _this = this;
         this.emit((0, src_generator_1.arrowFnValue)(['state'], function () {
-            var _a;
-            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{',
+            var _a, _b;
+            return _this.emit.apply(_this, __spreadArray(__spreadArray(__spreadArray(__spreadArray(['{',
                 'if(!state.__INIT__){',
-                'state.__INIT__=true;'], 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),
-                '}',
+                'state.__INIT__=true;'], inputInitializer, false), ['typeof __STATE__==="object"&&Object.assign(state,__STATE__[state.serverStateId]);'], false), (((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) ? [(0, src_generator_1.iif)((_b = component.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)] : []), false), ['}',
                 useStyles,
                 onRenderEmit,
                 ';}'], false));

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

@@ -38,6 +38,14 @@ exports.DIRECTIVES = {
             });
         };
     },
+    Host: function (node, blockFn) {
+        return function () {
+            var host = this.file.import(this.file.qwikModule, 'Host').localName;
+            this.jsxBegin(host, node.properties, {});
+            blockFn();
+            this.jsxEnd(host);
+        };
+    },
     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__),

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

@@ -1,4 +1,16 @@
 import { MitosisNode } from '../../types/mitosis-node';
 import { File } from './src-generator';
 import { CssStyles } from './styles';
+/**
+ * Convert a Mitosis nodes to a JSX nodes.
+ *
+ * @param file File into which the output will be written to.
+ * @param directives Store for directives which we came across so that they can be imported.
+ * @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 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;

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

@@ -24,6 +24,18 @@ exports.renderJSXNodes = void 0;
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var directives_1 = require("./directives");
 var src_generator_1 = require("./src-generator");
+/**
+ * Convert a Mitosis nodes to a JSX nodes.
+ *
+ * @param file File into which the output will be written to.
+ * @param directives Store for directives which we came across so that they can be imported.
+ * @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 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) {
     if (root === void 0) { root = true; }
     return function () {

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

@@ -85,10 +85,11 @@ var File = /** @class */ (function () {
                 });
             }
             catch (e) {
-                debugger;
-                source += "\n===============================\n";
-                source += String(e);
-                console.error(source);
+                throw new Error(e +
+                    '\n' +
+                    '========================================================================\n' +
+                    source +
+                    '\n\n========================================================================');
             }
         }
         return source;
@@ -207,6 +208,7 @@ var SrcBuilder = /** @class */ (function () {
             value.startsWith(':') ||
             value.startsWith(']') ||
             value.startsWith('}') ||
+            value.startsWith(',') ||
             value.startsWith('?')) {
             // clear last ',' or ';';
             var index = this.buf.length - 1;
@@ -449,7 +451,6 @@ function ignoreKey(key) {
         key.startsWith('_') ||
         key == 'code' ||
         key == '' ||
-        key == 'builder-id' ||
         key.indexOf('.') !== -1);
 }
 var Block = /** @class */ (function () {

package/dist/src/generators/react.js

@@ -55,12 +55,12 @@ var collect_styled_components_1 = require("../helpers/styles/collect-styled-comp
 var helpers_1 = require("../helpers/styles/helpers");
 var slots_1 = require("../helpers/slots");
 /**
- * If the root Mitosis component only has 1 child, and it is a `Show` node, then we need to wrap it in a fragment.
+ * If the root Mitosis component only has 1 child, and it is a `Show`/`For` node, then we need to wrap it in a fragment.
  * Otherwise, we end up with invalid React render code.
  *
  */
-var isRootShowNode = function (json) {
-    return json.children.length === 1 && ['Show'].includes(json.children[0].name);
+var isRootSpecialNode = function (json) {
+    return json.children.length === 1 && ['Show', 'For'].includes(json.children[0].name);
 };
 var wrapInFragment = function (json) { return json.children.length !== 1; };
 var NODE_MAPPERS = {
@@ -475,7 +475,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     }
     var wrap = wrapInFragment(json) ||
         (componentHasStyles && stylesType === 'styled-jsx') ||
-        isRootShowNode(json);
+        isRootSpecialNode(json);
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
     var propsArgs = 'props';

package/dist/src/generators/solid.js

@@ -14,6 +14,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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -195,14 +204,10 @@ var blockToSolid = function (json, options) {
     }
     return str;
 };
-var getRefsString = function (json, refs) {
-    if (refs === void 0) { refs = (0, get_refs_1.getRefs)(json); }
-    var str = '';
-    for (var _i = 0, _a = Array.from(refs); _i < _a.length; _i++) {
-        var ref = _a[_i];
-        str += "\nconst ".concat(ref, " = useRef();");
-    }
-    return str;
+var getRefsString = function (json) {
+    return Array.from((0, get_refs_1.getRefs)(json))
+        .map(function (ref) { return "let ".concat(ref, ";"); })
+        .join('\n');
 };
 function addProviderComponents(json, options) {
     for (var key in json.context.set) {
@@ -219,7 +224,7 @@ function addProviderComponents(json, options) {
 var componentToSolid = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c;
+        var _b, _c, _d;
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
@@ -237,20 +242,30 @@ var componentToSolid = function (options) {
         var hasState = Object.keys(component.state).length > 0;
         var componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
         var componentHasContext = (0, context_1.hasContext)(json);
-        var refs = getRefsString(json);
         var hasShowComponent = componentsUsed.has('Show');
         var hasForComponent = componentsUsed.has('For');
-        var hasRefs = refs.length > 0;
-        var solidJSImports = [
+        var solidJSImports = __spreadArray([
             componentHasContext ? 'useContext' : undefined,
             hasShowComponent ? 'Show' : undefined,
             hasForComponent ? 'For' : undefined,
-            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined,
-            hasRefs ? 'useRef' : undefined,
-        ].filter(Boolean);
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0
+            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined
+        ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect'] : []), true).filter(Boolean);
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0
             ? "import { \n          ".concat(solidJSImports.map(function (item) { return item; }).join(', '), "\n         } from 'solid-js';")
-            : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles ? '' : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), refs, getContextString(json, options), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), addWrapper ? '<>' : '', json.children
+            : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles ? '' : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, !hasState ? '' : "const state = createMutable(".concat(stateString, ");"), getRefsString(json), getContextString(json, options), !((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
+            ? json.hooks.onUpdate
+                .map(function (hook, index) {
+                if (hook.deps) {
+                    var hookName = "onUpdateFn_".concat(index);
+                    return "\n                    function ".concat(hookName, "() { ").concat(hook.code, " };\n                    createEffect(on(() => ").concat(hook.deps, ", ").concat(hookName, "));\n                  ");
+                }
+                else {
+                    // TO-DO: support `onUpdate` without `deps`
+                    return '';
+                }
+            })
+                .join('\n')
+            : '', addWrapper ? '<>' : '', json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToSolid(item, options); })
             .join('\n'), addWrapper ? '</>' : '', json.name);

package/dist/src/helpers/styles/collect-css.js

@@ -13,8 +13,8 @@ var trimClassStr = function (classStr) { return classStr.trim().replace(/\s{2,}/
 var updateClassForNode = function (item, className) {
     if (item.bindings.class) {
         // combine className with existing binding. We use single quotes because in Vue, bindings are wrapped in double quotes
-        // e.g. <div :class="_classStringToObject(this.className + 'div-21azgz5avex')" />
-        item.bindings.class.code = trimClassStr("".concat(item.bindings.class.code, " + '").concat(className, "'"));
+        // e.g. <div :class="_classStringToObject(this.className + ' div-21azgz5avex')" />
+        item.bindings.class.code = trimClassStr("".concat(item.bindings.class.code, " + ' ").concat(className, "'"));
     }
     else {
         item.properties.class = trimClassStr("".concat(item.properties.class || '', " ").concat(className));

package/dist/src/helpers/styles/helpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import * as CSS from 'csstype';
 import { MitosisNode } from '../../types/mitosis-node';
 import { MitosisComponent } from '../../types/mitosis-component';

package/dist/src/parsers/builder.js

@@ -50,6 +50,7 @@ var create_mitosis_component_1 = require("../helpers/create-mitosis-component");
 var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var jsx_1 = require("./jsx");
 var parsers_1 = require("../helpers/parsers");
+var __1 = require("..");
 // Omit some superflous styles that can come from Builder's web importer
 var styleOmitList = [
     'backgroundRepeatX',
@@ -638,7 +639,7 @@ function extractSymbols(json) {
         subComponents: subComponents,
     };
 }
-var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + Math.random().toString(36).split('.')[1] }, options)); };
+var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + (0, __1.hashCodeAsString)(options) }, options)); };
 exports.createBuilderElement = createBuilderElement;
 var isBuilderElement = function (el) {
     return (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';

package/dist/src/symbols/symbol-processor.d.ts

@@ -16,3 +16,5 @@ export declare function convertBuilderContentToSymbolHierarchy(content: BuilderC
 }): SymbolHierarchy;
 export declare function convertBuilderElementToMitosisComponent(element: BuilderElement): MitosisComponent | null;
 export declare function getJsxSymbolComponentName(id: string): string;
+export declare function hashCodeAsString(obj: any): string;
+export declare function hashCode(obj: any, hash?: number): number;

package/dist/src/symbols/symbol-processor.js

@@ -15,7 +15,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getJsxSymbolComponentName = exports.convertBuilderElementToMitosisComponent = exports.convertBuilderContentToSymbolHierarchy = exports.ensureAllSymbolsHaveIds = void 0;
+exports.hashCode = exports.hashCodeAsString = exports.getJsxSymbolComponentName = exports.convertBuilderElementToMitosisComponent = exports.convertBuilderContentToSymbolHierarchy = exports.ensureAllSymbolsHaveIds = void 0;
 var traverse_1 = require("traverse");
 var builder_1 = require("../parsers/builder");
 var minify_1 = require("../generators/minify");
@@ -90,7 +90,7 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
                     var props = symbol.data;
                     var state = (_c = (_b = symbol.content) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.state;
                     if (state) {
-                        var id = toHash(state);
+                        var id = hashCodeAsString(state);
                         props['serverStateId'] = id;
                         collectComponentState[id] = state;
                     }
@@ -157,19 +157,53 @@ function addIfMissing(array, value) {
 function isString(value) {
     return typeof value == 'string';
 }
-function toHash(obj) {
-    return hashCode(JSON.stringify(obj));
+function hashCodeAsString(obj) {
+    return Number(Math.abs(hashCode(obj))).toString(36);
 }
-function hashCode(text) {
-    var hash = 0, i, chr;
-    if (text.length === 0)
-        return String(hash);
-    for (i = 0; i < text.length; i++) {
-        chr = text.charCodeAt(i);
-        hash = (hash << 5) - hash + chr;
-        hash |= 0; // Convert to 32bit integer
+exports.hashCodeAsString = hashCodeAsString;
+function hashCode(obj, hash) {
+    if (hash === void 0) { hash = 0; }
+    var value = 0;
+    switch (typeof obj) {
+        case 'number':
+            value = obj;
+            break;
+        case 'undefined':
+            value = Number.MIN_SAFE_INTEGER;
+            break;
+        case 'string':
+            for (var i = 0; i < obj.length; i++) {
+                hash = hashCodeApply(hash, obj.charCodeAt(i));
+            }
+            value = obj.length;
+        case 'boolean':
+            value = obj ? 1 : 0;
+            break;
+        case 'object':
+            if (obj === null) {
+                value = Number.MAX_SAFE_INTEGER;
+            }
+            else if (Array.isArray(obj)) {
+                for (var i = 0; i < obj.length; i++) {
+                    hash = hashCode(obj[i], hash);
+                }
+            }
+            else {
+                for (var key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        hash = hashCode(obj[key], hash);
+                    }
+                }
+            }
+            break;
     }
-    return Number(Math.abs(hash)).toString(36);
+    return hashCodeApply(hash, value);
+}
+exports.hashCode = hashCode;
+function hashCodeApply(hash, value) {
+    hash = (hash << 5) - hash + value;
+    hash |= 0; // Convert to 32bit integer
+    return hash;
 }
 function pad(value) {
     var padding = '000000';

package/dist/test/qwik/Accordion/low.jsx

@@ -5,13 +5,13 @@ export const MyComponent_onMount = (state) => {
     state.__INIT__ = true;
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <div
+      builder-id="builder-bb2f62792e464d73b7cb89258027f356"
       gridRowWidth="25%"
-      class="csw5022"
+      class="csw5022 builder-block"
       items={[
         {
           title: [
@@ -171,14 +171,20 @@ export const MyComponent_onMount = (state) => {
       <div>
         <div builder="accordion">
           <div builder="accordion-title">
-            <div class="csanagh">
+            <div
+              builder-id="builder-5fed2723c1cc4fb39e9d22b9c54ef179"
+              class="csanagh"
+            >
               <div class="crwdrpw">
                 <div innerHTML="<p>Item 1</p>" class="builder-text"></div>
               </div>
             </div>
           </div>
           <div builder="accordion-detail">
-            <div class="c4qyc1p">
+            <div
+              builder-id="builder-18279a99b32240f19aa21d3f4b015cc9"
+              class="c4qyc1p"
+            >
               <div class="ctcw2m4">
                 <div
                   innerHTML="<p>Item 1 content</p>"
@@ -190,14 +196,20 @@ export const MyComponent_onMount = (state) => {
         </div>
         <div builder="accordion">
           <div builder="accordion-title">
-            <div class="csanagh">
+            <div
+              builder-id="builder-2a93def22a354cf7aa193c20d1ad6def"
+              class="csanagh"
+            >
               <div class="crwdrpw">
                 <div innerHTML="<p>Item 2</p>" class="builder-text"></div>
               </div>
             </div>
           </div>
           <div builder="accordion-detail">
-            <div class="c4qyc1p">
+            <div
+              builder-id="builder-fd6ef41da6d040328fbd8b0801611fe5"
+              class="c4qyc1p"
+            >
               <div class="ctcw2m4">
                 <div
                   innerHTML="<p>Item 2 content</p>"

package/dist/test/qwik/For/low.jsx

@@ -5,12 +5,18 @@ export const MyComponent_onMount = (state) => {
     state.__INIT__ = true;
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
-    <div class="cvdfnp5" maxWidth={1200}>
-      <section class="cz5wnof">
+    <div
+      builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
+      class="cvdfnp5 builder-block"
+      maxWidth={1200}
+    >
+      <section
+        builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
+        class="cz5wnof"
+      >
         {(state.simpleList.results || []).map((item) => {
           var state = Object.assign({}, this, {
             resultsItem: item == null ? {} : item,

package/dist/test/qwik/Image/med.js

@@ -12,13 +12,13 @@ export const MyComponent_onMount = (state) => {
     if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
   return h(
     Fragment,
     null,
     h(Image, {
+      "builder-id": "builder-fa4480d2f48a44a7a2e98cf07c54927b",
       image:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
       backgroundSize: "cover",
@@ -26,7 +26,7 @@ export const MyComponent_onMount = (state) => {
       srcset:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
       sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
-      class: "cvk52jt",
+      class: "cvk52jt builder-block",
       onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
       lazy: false,
       fitContent: true,

package/dist/test/qwik/Image.slow/med.js

@@ -12,13 +12,13 @@ export const MyComponent_onMount = (state) => {
     if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
   return h(
     Fragment,
     null,
     h(Image, {
+      "builder-id": "builder-fa4480d2f48a44a7a2e98cf07c54927b",
       image:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
       backgroundSize: "cover",
@@ -26,7 +26,7 @@ export const MyComponent_onMount = (state) => {
       srcset:
         "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
       sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
-      class: "cvk52jt",
+      class: "cvk52jt builder-block",
       onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
       lazy: false,
       fitContent: true,

package/dist/test/qwik/bindings/low.cjs

@@ -10,7 +10,6 @@ exports.MyComponent_onMount = (state) => {
     if (!state.hasOwnProperty("hiliteTitle")) state.hiliteTitle = true;
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return h(

package/dist/test/qwik/button/low.js

@@ -6,7 +6,6 @@ export const MyComponent_onMount = (state) => {
     state.__INIT__ = true;
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return h(CoreButton, {

package/dist/test/qwik/component/bindings/low.jsx

@@ -7,13 +7,15 @@ export const ComponentD187055AF171488FAD843ACF045D6BF7_onMount = (state) => {
     if (!state.hasOwnProperty("title")) state.title = "default-title";
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(
     qrl("./low.js", "ComponentD187055AF171488FAD843ACF045D6BF7_styles", [])
   );
   return (
-    <div class="cj49hqu">
+    <div
+      builder-id="builder-139a8479536b4c4f9c2738e724ed0952"
+      class="cj49hqu builder-block"
+    >
       <div class="cjrqfb1">
         <div
           class="builder-text"
@@ -69,16 +71,24 @@ export const MyComponent_onMount = (state) => {
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <>
-      <div class="c713ty2">
+      <div
+        builder-id="builder-50b2438beaa4498b985eb9d8a7659afa"
+        class="c713ty2 builder-block"
+      >
         <ComponentD187055AF171488FAD843ACF045D6BF7
+          builder-id="builder-h3uut6"
           title="First title from parent"
-          serverStateId="woo8b6"
+          serverStateId="w8x6w6"
         ></ComponentD187055AF171488FAD843ACF045D6BF7>
       </div>
-      <div class="c713ty2">
+      <div
+        builder-id="builder-33f427415bef4725b0c9fcd4fed325f2"
+        class="c713ty2 builder-block"
+      >
         <ComponentD187055AF171488FAD843ACF045D6BF7
+          builder-id="builder-bfxc0y"
           title="Second title from parent"
-          serverStateId="woo8b6"
+          serverStateId="w8x6w6"
         ></ComponentD187055AF171488FAD843ACF045D6BF7>
       </div>
     </>

package/dist/test/qwik/component/component/inputs/med.cjsx

@@ -10,7 +10,6 @@ exports.MyComponent_onMount = (state) => {
     if (!state.hasOwnProperty("data")) state.data = 0;
     typeof __STATE__ === "object" &&
       Object.assign(state, __STATE__[state.serverStateId]);
-    undefined;
   }
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
   return (
@@ -29,8 +28,9 @@ exports.MyComponent_onMount = (state) => {
         ></div>
       </div>
       <CoreButton
+        builder-id="builder-6f8fe6a1d2284f2890ae97657eed084a"
         text="Something else"
-        class="c9nzze9"
+        class="c9nzze9 builder-block"
         onClickQrl={qrl("./high.js", "MyComponent_onClick_0", [state])}
       ></CoreButton>
     </>