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

package/dist/src/__tests__/data/advanced-ref.raw.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/advanced-ref.raw.jsx

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefComponent(props) {
+    var inputRef = (0, mitosis_1.useRef)(null);
+    var inputNoArgRef = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    function onBlur() {
+        // Maintain focus
+        inputRef.focus();
+    }
+    function lowerCaseName() {
+        return state.name.toLowerCase();
+    }
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('Received an update');
+    }, [inputRef, inputNoArgRef]);
+    return (<div>
+      {props.showInput && (<>
+          <input ref={inputRef} css={{
+                color: 'red',
+            }} value={state.name} onBlur={function (event) { return onBlur(); }} onChange={function (event) { return (state.name = event.target.value); }}/>
+
+          <label ref={inputNoArgRef} for="cars">
+            Choose a car:
+          </label>
+
+          <select name="cars" id="cars">
+            <option value="supra">GR Supra</option>
+            <option value="86">GR 86</option>
+          </select>
+        </>)}
+      Hello
+      {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+    </div>);
+}
+exports.default = MyBasicRefComponent;

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

@@ -5,4 +5,7 @@ describe('hashCode', function () {
     test('should compute object', function () {
         expect((0, __1.hashCodeAsString)({ foo: 'bar' })).toEqual('1jo4fm');
     });
+    test('order of properties should not matter', function () {
+        expect((0, __1.hashCodeAsString)({ a: 'first', b: 'second' })).toEqual((0, __1.hashCodeAsString)({ b: 'second', a: 'first' }));
+    });
 });

package/dist/src/__tests__/shared.js

@@ -128,6 +128,12 @@ var SHOW_TESTS = {
     nestedShow: require('./data/show/nested-show.raw'),
     showWithFor: require('./data/show/show-with-for.raw'),
 };
+var ADVANCED_REF = {
+    AdvancedRef: require('./data/advanced-ref.raw'),
+};
+var ON_UPDATE_RETURN = {
+    basicOnUpdateReturn: require('./data/basic-onUpdate-return.raw'),
+};
 var TESTS_FOR_TARGET = {
     react: [
         BASIC_TESTS,
@@ -136,6 +142,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FOR_SHOW_TESTS,
     ],
     angular: [
@@ -146,6 +154,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     webcomponent: [
         BASIC_TESTS,
@@ -154,6 +164,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FORM_BLOCK_TESTS
     ],
     vue: [
@@ -164,6 +176,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     svelte: [
         BASIC_TESTS,
@@ -172,6 +186,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     html: [
         BASIC_TESTS,
@@ -180,6 +196,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FORM_BLOCK_TESTS
     ],
     stencil: [
@@ -189,6 +207,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         // MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FOR_SHOW_TESTS
     ],
     solid: [
@@ -199,6 +219,8 @@ var TESTS_FOR_TARGET = {
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     reactNative: [
         BASIC_TESTS,
@@ -207,6 +229,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
         // FOR_SHOW_TESTS,
     ],
     liquid: [
@@ -216,6 +240,8 @@ var TESTS_FOR_TARGET = {
         FORWARD_REF_TESTS,
         MULTI_ON_UPDATE_TESTS,
         FORM_BLOCK_TESTS,
+        ADVANCED_REF,
+        ON_UPDATE_RETURN,
     ],
     qwik: [
         BASIC_TESTS,

package/dist/src/generators/angular.d.ts

@@ -6,6 +6,7 @@ interface AngularBlockOptions {
     contextVars?: string[];
     outputVars?: string[];
     childComponents?: string[];
+    domRefs?: string[];
 }
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
 export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;

package/dist/src/generators/angular.js

@@ -68,6 +68,7 @@ var blockToAngular = function (json, options, blockOptions) {
     var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
     var outputVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.outputVars) || [];
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
+    var domRefs = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.domRefs) || [];
     if (mappers[json.name]) {
         return mappers[json.name](json, options, blockOptions);
     }
@@ -86,6 +87,7 @@ var blockToAngular = function (json, options, blockOptions) {
             // the context is the class
             contextVars: [],
             outputVars: outputVars,
+            domRefs: domRefs,
         }), "}}");
     }
     var str = '';
@@ -94,6 +96,7 @@ var blockToAngular = function (json, options, blockOptions) {
         str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
             contextVars: contextVars,
             outputVars: outputVars,
+            domRefs: domRefs,
         }), "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
@@ -102,6 +105,7 @@ var blockToAngular = function (json, options, blockOptions) {
         str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code, {
             contextVars: contextVars,
             outputVars: outputVars,
+            domRefs: domRefs,
         }), "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
@@ -136,6 +140,7 @@ var blockToAngular = function (json, options, blockOptions) {
             var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
                 contextVars: contextVars,
                 outputVars: outputVars,
+                domRefs: domRefs,
             });
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
@@ -252,14 +257,14 @@ var componentToAngular = function (options) {
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }
+        var blockOptions = {
+            contextVars: contextVars,
+            outputVars: outputVars,
+            domRefs: [],
+            childComponents: childComponents,
+        };
         var template = json.children
-            .map(function (item) {
-            return (0, exports.blockToAngular)(item, options, {
-                contextVars: contextVars,
-                outputVars: outputVars,
-                childComponents: childComponents,
-            });
-        })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n');
         if (options.prettier !== false) {
             template = tryFormat(template, 'html');
@@ -272,6 +277,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 });
             },
         });
@@ -294,6 +300,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 }))
                 : '', ";");
         })
@@ -313,6 +320,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 }), "\n                "), "\n            }"), !((_o = component.hooks.onUpdate) === null || _o === void 0 ? void 0 : _o.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
@@ -320,6 +328,7 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
                 });
                 return code + '\n';
             }, ''), "\n            }"), !component.hooks.onUnMount
@@ -328,6 +337,7 @@ var componentToAngular = function (options) {
                 replaceWith: 'this.',
                 contextVars: contextVars,
                 outputVars: outputVars,
+                domRefs: Array.from(domRefs),
             }), "\n            }"));
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);

package/dist/src/generators/builder.js

@@ -33,6 +33,7 @@ var lodash_1 = require("lodash");
 var builder_1 = require("../parsers/builder");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var traverse_1 = __importDefault(require("traverse"));
+var symbol_processor_1 = require("../symbols/symbol-processor");
 var omitMetaProperties = function (obj) {
     return (0, lodash_1.omitBy)(obj, function (_value, key) { return key.startsWith('$'); });
 };
@@ -109,7 +110,7 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
         }, options);
     } });
 var el = function (options, toBuilderOptions) { return (__assign(__assign({ '@type': '@builder.io/sdk:Element' }, (toBuilderOptions.includeIds && {
-    id: 'builder-' + Math.random().toString(36).split('.')[1],
+    id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options),
 })), options)); };
 function tryFormat(code) {
     var str = code;

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

@@ -56,7 +56,9 @@ function getCommonStyles(fileSet) {
 function addComponent(fileSet, component, opts) {
     if (opts === void 0) { 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 }));
+    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { 
+        // A set of components that should not be compiled away because they are implemented as runtime components.
+        Image: undefined, CoreButton: undefined }));
     addBuilderBlockClass(component.children);
     var componentName = component.name;
     var handlers = (0, handlers_1.renderHandlers)(fileSet.high, componentName, component.children);
@@ -141,17 +143,33 @@ 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, _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]);'], 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), ['}',
+        this.emit((0, src_generator_1.arrowFnValue)(['props'], function () {
+            var _a;
+            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{',
+                'const state=',
+                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),
+                'return state;',
+                '});',
                 useStyles,
                 onRenderEmit,
                 ';}'], false));
         }));
     });
 }
+function inlineCode(code) {
+    return function () {
+        if (code) {
+            // HACK: remove the return value as it is not the state we are creating.
+            code = code
+                .trim()
+                .replace(/return main\(\);?$/, '')
+                .trim();
+            this.emit(code, ';');
+        }
+    };
+}
 function generateQrl(fromFile, dstFile, componentName, capture) {
     if (capture === void 0) { capture = []; }
     return (0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, 'qrl'), [

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

@@ -110,7 +110,7 @@ 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')) {
+            ((key.startsWith('on') && key.endsWith('$')) || key == 'style')) {
             dstProps[key] = srcProps[key];
         }
     }

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

@@ -40,7 +40,7 @@ function renderHandlers(file, componentName, children) {
             if (Object.prototype.hasOwnProperty.call(bindings, key)) {
                 var binding = bindings[key].code;
                 if (binding != null) {
-                    if (key.startsWith('on')) {
+                    if (isEventName(key)) {
                         var block = extractJSBlock(binding) || binding;
                         var symbol = "".concat(componentName, "_").concat(key, "_").concat(id++);
                         map.set(binding, symbol);
@@ -67,3 +67,6 @@ function renderHandler(file, symbol, code) {
 function stripBlock(block) {
     return block.substring(1, block.length - 1).trim();
 }
+function isEventName(name) {
+    return name.startsWith('on') && name.charAt(2).toUpperCase() == name.charAt(2);
+}

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

@@ -162,27 +162,31 @@ function isTextNode(child) {
  * @returns
  */
 function rewriteHandlers(file, handlers, bindings, symbolBindings) {
+    var _a;
     var outBindings = {};
     for (var key in bindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
-            var binding = bindings[key].code;
+            var bindingExpr = (_a = bindings === null || bindings === void 0 ? void 0 : bindings[key]) === null || _a === void 0 ? void 0 : _a.code;
             var handlerBlock = void 0;
-            if (binding != null) {
+            if (bindingExpr != null) {
                 if (key == 'css') {
                     continue;
                 }
-                else if ((handlerBlock = handlers.get(binding))) {
-                    key = "".concat(key, "Qrl");
-                    binding = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
+                else if ((handlerBlock = handlers.get(bindingExpr))) {
+                    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]',
                     ]);
                 }
                 else if (symbolBindings && key.startsWith('symbol.data.')) {
-                    symbolBindings[(0, src_generator_1.lastProperty)(key)] = binding;
+                    symbolBindings[(0, src_generator_1.lastProperty)(key)] = bindingExpr;
+                }
+                else if (key.startsWith('component.options.')) {
+                    key = (0, src_generator_1.lastProperty)(key);
                 }
-                outBindings[key] = { code: binding };
+                outBindings[key] = { code: bindingExpr };
             }
         }
     }

package/dist/src/helpers/babel-transform.js

@@ -44,6 +44,7 @@ var babelTransform = function (code, visitor) {
         configFile: false,
         babelrc: false,
         presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
+        parserOpts: { allowReturnOutsideFunction: true },
         plugins: __spreadArray([[decorators, { legacy: true }], jsxPlugin], (visitor ? [function () { return ({ visitor: visitor }); }] : []), true),
     });
 };

package/dist/src/helpers/map-refs.js

@@ -101,6 +101,9 @@ var mapRefs = function (component, mapper) {
                 if (hook.code) {
                     hook.code = replaceRefsInString(hook.code, refs, mapper);
                 }
+                if (hook.deps) {
+                    hook.deps = replaceRefsInString(hook.deps, refs, mapper);
+                }
             });
         }
         else {
@@ -108,6 +111,9 @@ var mapRefs = function (component, mapper) {
             if (hookCode) {
                 hooks.code = replaceRefsInString(hookCode, refs, mapper);
             }
+            if (hooks === null || hooks === void 0 ? void 0 : hooks.deps) {
+                hooks.deps = replaceRefsInString(hooks === null || hooks === void 0 ? void 0 : hooks.deps, refs, mapper);
+            }
         }
     }
 };

package/dist/src/helpers/render-imports.js

@@ -102,7 +102,7 @@ var renderImport = function (_a) {
             return "const ".concat(importValue, " = () => import('").concat(path, "')");
         }
     }
-    return "import ".concat(importValue, " from '").concat(path, "';");
+    return importValue ? "import ".concat(importValue, " from '").concat(path, "';") : "import '".concat(path, "';");
 };
 exports.renderImport = renderImport;
 var renderImports = function (_a) {
@@ -116,6 +116,9 @@ var renderImports = function (_a) {
             theImport.path.startsWith('@builder.io/mitosis')) {
             return false;
         }
+        else if (target === 'angular' && theImport.path.includes('.lite')) {
+            return false;
+        }
         else {
             return true;
         }

package/dist/src/helpers/render-imports.test.js

@@ -16,4 +16,18 @@ describe('renderImport', function () {
         });
         expect(output).toMatchSnapshot();
     });
+    test('Adds correctly a side-effect import', function () {
+        var data = [
+            {
+                imports: {},
+                path: '../render-blocks.scss',
+            },
+        ];
+        var output = (0, render_imports_1.renderImport)({
+            theImport: data[0],
+            target: 'react',
+            asyncComponentImports: false,
+        });
+        expect(output).toEqual("import '../render-blocks.scss';");
+    });
 });

package/dist/src/helpers/strip-state-and-props-refs.d.ts

@@ -5,6 +5,7 @@ export declare type StripStateAndPropsRefsOptions = {
     contextVars?: string[];
     outputVars?: string[];
     context?: string;
+    domRefs?: string[];
 };
 /**
  * Remove state. and props. from expressions, e.g.

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -16,10 +16,11 @@ var stripStateAndPropsRefs = function (code, options) {
     var contextVars = (options === null || options === void 0 ? void 0 : options.contextVars) || [];
     var outputVars = (options === null || options === void 0 ? void 0 : options.outputVars) || [];
     var context = (options === null || options === void 0 ? void 0 : options.context) || 'this.';
+    var domRefs = (options === null || options === void 0 ? void 0 : options.domRefs) || [];
     if (contextVars.length) {
         contextVars.forEach(function (_var) {
             newCode = newCode.replace(
-            // determine expression edge cases
+            // determine expression edge cases - https://regex101.com/r/iNcTSM/1
             new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + context + _var + '$2');
         });
     }
@@ -51,6 +52,13 @@ var stripStateAndPropsRefs = function (code, options) {
             newCode = newCode.replace(/state\.([\$a-z0-9_]+)/gi, function (memo, name) { return replacer(name); });
         }
     }
+    if (domRefs.length) {
+        domRefs.forEach(function (_var) {
+            newCode = newCode.replace(
+            // determine expression edge cases - https://regex101.com/r/iNcTSM/1
+            new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + 'this.' + _var + '$2');
+        });
+    }
     return newCode;
 };
 exports.stripStateAndPropsRefs = stripStateAndPropsRefs;

package/dist/src/parsers/builder.js

@@ -203,7 +203,7 @@ var getBlockNonActionBindings = function (block, options) {
     }
     return obj;
 };
-var wrapBinding = function (value) {
+function wrapBinding(value) {
     if (!value) {
         return value;
     }
@@ -211,7 +211,7 @@ var wrapBinding = function (value) {
         return value;
     }
     return "(() => {\n    try { ".concat((0, parsers_1.isExpression)(value) ? 'return ' : '').concat(value, " }\n    catch (err) {\n      console.warn('Builder code error', err);\n    }\n  })()");
-};
+}
 var getBlockBindings = function (block, options) {
     var obj = __assign(__assign({}, getBlockNonActionBindings(block, options)), getBlockActionsAsBindings(block, options));
     return obj;
@@ -281,15 +281,16 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         });
         delete node.bindings.columns;
         delete node.properties.columns;
-        node.children = (_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map(function (col, index) {
-            return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({ name: 'Column', bindings: {
-                    width: { code: col.width },
-                } }, (col.link && {
-                properties: {
-                    link: col.link,
-                },
-            })), { children: col.blocks.map(function (col) { return (0, exports.builderElementToMitosisNode)(col, options); }) }));
-        });
+        node.children =
+            ((_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options.columns) === null || _b === void 0 ? void 0 : _b.map(function (col, index) {
+                return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({ name: 'Column', bindings: {
+                        width: { code: col.width },
+                    } }, (col.link && {
+                    properties: {
+                        link: col.link,
+                    },
+                })), { children: col.blocks.map(function (col) { return (0, exports.builderElementToMitosisNode)(col, options); }) }));
+            })) || [];
         return node;
     }, 'Shopify:For': function (block, options) {
         return (0, create_mitosis_node_1.createMitosisNode)({
@@ -303,12 +304,12 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             children: (block.children || []).map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); }),
         });
     }, Text: function (block, options) {
-        var _a, _b;
-        var _c;
+        var _a;
+        var _b;
         var css = getCssFromBlock(block);
         var styleString = getStyleStringFromBlock(block, options);
         var actionBindings = getActionBindingsFromBlock(block, options);
-        var blockBindings = __assign(__assign({}, (_c = block.code) === null || _c === void 0 ? void 0 : _c.bindings), block.bindings);
+        var blockBindings = __assign(__assign({}, mapBuilderBindingsToMitosisBindingWithCode((_b = block.code) === null || _b === void 0 ? void 0 : _b.bindings)), mapBuilderBindingsToMitosisBindingWithCode(block.bindings));
         var bindings = __assign(__assign(__assign(__assign({}, (0, lodash_1.omitBy)(blockBindings, function (value, key) {
             if (key === 'component.options.text') {
                 return true;
@@ -326,14 +327,16 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
         if (block.layerName) {
             properties.$name = block.layerName;
         }
-        var innerBindings = (_a = {},
-            _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = {
-                code: wrapBindingIfNeeded(blockBindings['component.options.text'], options),
-            },
+        var innerBindings = {};
+        var componentOptionsText = blockBindings['component.options.text'];
+        if (componentOptionsText) {
+            innerBindings[options.preserveTextBlocks ? 'innerHTML' : '_text'] = {
+                code: wrapBindingIfNeeded(componentOptionsText.code, options),
+            };
+        }
+        var innerProperties = (_a = {},
+            _a[options.preserveTextBlocks ? 'innerHTML' : '_text'] = block.component.options.text,
             _a);
-        var innerProperties = (_b = {},
-            _b[options.preserveTextBlocks ? 'innerHTML' : '_text'] = block.component.options.text,
-            _b);
         if (options.preserveTextBlocks) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: block.tagName || 'div',
@@ -712,3 +715,20 @@ var builderContentToMitosisComponent = function (builderContent, options) {
     return componentJson;
 };
 exports.builderContentToMitosisComponent = builderContentToMitosisComponent;
+function mapBuilderBindingsToMitosisBindingWithCode(bindings) {
+    var result = {};
+    bindings &&
+        Object.keys(bindings).forEach(function (key) {
+            var value = bindings[key];
+            if (typeof value === 'string') {
+                result[key] = { code: value };
+            }
+            else if (value && typeof value === 'object' && value.code) {
+                result[key] = { code: value.code };
+            }
+            else {
+                throw new Error('Unexpected binding value: ' + JSON.stringify(value));
+            }
+        });
+    return result;
+}

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

@@ -189,7 +189,8 @@ function hashCode(obj, hash) {
                 }
             }
             else {
-                for (var key in obj) {
+                for (var _i = 0, _a = Object.keys(obj).sort(); _i < _a.length; _i++) {
+                    var key = _a[_i];
                     if (obj.hasOwnProperty(key)) {
                         hash = hashCode(obj[key], hash);
                     }

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

@@ -1,11 +1,20 @@
-import { Fragment, h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
 export const MyComponent_styles = `.csw5022{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;align-items:stretch}.csanagh{margin-top:10px;position:relative;display:flex;align-items:stretch;flex-direction:column;padding-bottom:10px}.c4qyc1p{position:relative;display:flex;align-items:stretch;flex-direction:column;margin-top:10px;padding-bottom:10px}.crwdrpw{text-align:left;display:flex;flex-direction:column}.ctcw2m4{padding-top:50px;text-align:left;display:flex;flex-direction:column;padding-bottom:50px}`;
-export const MyComponent_onMount = (state) => {
-  if (!state.__INIT__) {
-    state.__INIT__ = true;
-    typeof __STATE__ === "object" &&
-      Object.assign(state, __STATE__[state.serverStateId]);
-  }
+export const MyComponent_onMount = (props) => {
+  const state = useStore(() => {
+    const state = Object.assign(
+      {},
+      props,
+      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
+    );
+    return state;
+  });
   withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <div