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

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/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/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/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);
                     }