@builder.io/mitosis 0.0.50-8 → 0.0.54

package/dist/src/helpers/parsers.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = void 0;
+var babel = __importStar(require("@babel/core"));
+var jsxPlugin = require('@babel/plugin-syntax-jsx');
+var tsPreset = require('@babel/preset-typescript');
+var decorators = require('@babel/plugin-syntax-decorators');
+function parseCode(code) {
+    var ast = babel.parse(code, {
+        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
+        plugins: [[decorators, { legacy: true }], jsxPlugin],
+    });
+    var body = babel.types.isFile(ast)
+        ? ast.program.body
+        : babel.types.isProgram(ast)
+            ? ast.body
+            : [];
+    return body;
+}
+exports.parseCode = parseCode;
+var isCodeBodyExpression = function (body) {
+    return body.length == 1 &&
+        (babel.types.isExpression(body[0]) ||
+            babel.types.isExpressionStatement(body[0]));
+};
+exports.isCodeBodyExpression = isCodeBodyExpression;
+/**
+ * Returns `true` if the `code` is a valid expression. (vs a statement)
+ */
+function isExpression(code) {
+    try {
+        var body = parseCode(code);
+        return (0, exports.isCodeBodyExpression)(body);
+    }
+    catch (e) {
+        return false;
+    }
+}
+exports.isExpression = isExpression;
+var isCodeBodyIdentifier = function (body) {
+    return body.length == 1 && babel.types.isIdentifier(body[0]);
+};
+exports.isCodeBodyIdentifier = isCodeBodyIdentifier;

package/dist/src/helpers/remove-surrounding-block.test.d.ts

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

package/dist/src/helpers/remove-surrounding-block.test.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var remove_surrounding_block_1 = require("./remove-surrounding-block");
+describe('removeSurroundingBlock', function () {
+    test('It removes the surrounding wrapper block', function () {
+        var output = (0, remove_surrounding_block_1.removeSurroundingBlock)('{ const foo = "bar" }');
+        expect(output).toBe(' const foo = "bar" ');
+    });
+});

package/dist/src/helpers/render-imports.d.ts

@@ -1,4 +1,2 @@
-import { MitosisComponent, MitosisImport } from '../types/mitosis-component';
-export declare const renderImport: (theImport: MitosisImport) => string;
-export declare const renderImports: (imports: MitosisImport[]) => string;
-export declare const renderPreComponent: (component: MitosisComponent) => string;
+import { MitosisComponent } from '../types/mitosis-component';
+export declare const renderPreComponent: (component: MitosisComponent, target?: "angular" | "builder" | "customElement" | "html" | "mitosis" | "liquid" | "react" | "reactNative" | "solid" | "svelte" | "swift" | "template" | "webcomponent" | "vue" | undefined) => string;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderPreComponent = exports.renderImports = exports.renderImport = void 0;
-var getStarImport = function (theImport) {
+exports.renderPreComponent = void 0;
+var getStarImport = function (_a) {
+    var theImport = _a.theImport;
     for (var key in theImport.imports) {
         var value = theImport.imports[key];
         if (value === '*') {
@@ -10,7 +11,8 @@ var getStarImport = function (theImport) {
     }
     return null;
 };
-var getDefaultImport = function (theImport) {
+var getDefaultImport = function (_a) {
+    var theImport = _a.theImport;
     for (var key in theImport.imports) {
         var value = theImport.imports[key];
         if (value === 'default') {
@@ -19,14 +21,32 @@ var getDefaultImport = function (theImport) {
     }
     return null;
 };
-var renderImport = function (theImport) {
+var transformImportPath = function (theImport, target) {
+    // We need to drop the `.lite` from context files, because the context generator does so as well.
+    if (theImport.path.endsWith('.context.lite')) {
+        return theImport.path.replace('.lite', '');
+    }
+    switch (target) {
+        case 'svelte':
+            if (theImport.path.endsWith('.lite'))
+                // all svelte components have `.svelte` extension
+                return theImport.path.replace('.lite', '.svelte');
+            else {
+                return theImport.path;
+            }
+        default:
+            return theImport.path;
+    }
+};
+var renderImport = function (_a) {
+    var theImport = _a.theImport, target = _a.target;
     var importString = 'import ';
-    var starImport = getStarImport(theImport);
+    var starImport = getStarImport({ theImport: theImport });
     if (starImport) {
         importString += " * as ".concat(starImport, " ");
     }
     else {
-        var defaultImport = getDefaultImport(theImport);
+        var defaultImport = getDefaultImport({ theImport: theImport });
         if (defaultImport) {
             importString += " ".concat(defaultImport, ", ");
         }
@@ -50,11 +70,12 @@ var renderImport = function (theImport) {
         }
         importString += ' } ';
     }
-    importString += " from '".concat(theImport.path, "';");
+    var path = transformImportPath(theImport, target);
+    importString += " from '".concat(path, "';");
     return importString;
 };
-exports.renderImport = renderImport;
-var renderImports = function (imports) {
+var renderImports = function (_a) {
+    var imports = _a.imports, target = _a.target;
     var importString = '';
     for (var _i = 0, imports_1 = imports; _i < imports_1.length; _i++) {
         var theImport = imports_1[_i];
@@ -66,12 +87,9 @@ var renderImports = function (imports) {
         if (theImport.path.startsWith('@builder.io/mitosis')) {
             continue;
         }
-        importString += (0, exports.renderImport)(theImport) + '\n';
+        importString += renderImport({ theImport: theImport, target: target }) + '\n';
     }
     return importString;
 };
-exports.renderImports = renderImports;
-var renderPreComponent = function (component) {
-    return "\n    ".concat((0, exports.renderImports)(component.imports), "\n    ").concat(component.hooks.preComponent || '', "\n  ");
-};
+var renderPreComponent = function (component, target) { return "\n    ".concat(renderImports({ imports: component.imports, target: target }), "\n    ").concat(component.hooks.preComponent || '', "\n  "); };
 exports.renderPreComponent = renderPreComponent;

package/dist/src/index.d.ts

@@ -27,7 +27,9 @@ export * from './parsers/context';
 export * from './generators/vue';
 export * from './generators/angular';
 export * from './generators/context/react';
+export * from './generators/context/solid';
 export * from './generators/context/vue';
+export * from './generators/context/svelte';
 export * from './generators/react';
 export * from './generators/solid';
 export * from './generators/liquid';

package/dist/src/index.js

@@ -53,7 +53,9 @@ __exportStar(require("./parsers/context"), exports);
 __exportStar(require("./generators/vue"), exports);
 __exportStar(require("./generators/angular"), exports);
 __exportStar(require("./generators/context/react"), exports);
+__exportStar(require("./generators/context/solid"), exports);
 __exportStar(require("./generators/context/vue"), exports);
+__exportStar(require("./generators/context/svelte"), exports);
 __exportStar(require("./generators/react"), exports);
 __exportStar(require("./generators/solid"), exports);
 __exportStar(require("./generators/liquid"), exports);

package/dist/src/parsers/builder.d.ts

@@ -36,7 +36,6 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         imports: import("..").MitosisImport[];
         meta: import("../types/json").JSONObject & {
             useMetadata?: import("../types/json").JSONObject | undefined;
-            metadataHook?: import("../types/json").JSONObject | undefined;
         };
         inputs: import("..").MitosisComponentInput[];
         state: import("../types/json").JSONObject;
@@ -70,7 +69,6 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
     imports: import("..").MitosisImport[];
     meta: import("../types/json").JSONObject & {
         useMetadata?: import("../types/json").JSONObject | undefined;
-        metadataHook?: import("../types/json").JSONObject | undefined;
     };
     inputs: import("..").MitosisComponentInput[];
     state: import("../types/json").JSONObject;

package/dist/src/parsers/builder.js

@@ -49,9 +49,7 @@ var capitalize_1 = require("../helpers/capitalize");
 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 jsxPlugin = require('@babel/plugin-syntax-jsx');
-var tsPreset = require('@babel/preset-typescript');
-var decorators = require('@babel/plugin-syntax-decorators');
+var parsers_1 = require("../helpers/parsers");
 // Omit some superflous styles that can come from Builder's web importer
 var styleOmitList = [
     'backgroundRepeatX',
@@ -182,7 +180,7 @@ var getBlockNonActionBindings = function (block, options) {
     if (options.includeBuilderExtras) {
         for (var key in obj) {
             if (!isValidBindingKey(key)) {
-                console.warn('Skipping invalid biding key:', key);
+                console.warn('Skipping invalid binding key:', key);
                 continue;
             }
             var value = obj[key];
@@ -209,7 +207,7 @@ var wrapBinding = function (value) {
     if (!(value.includes(';') || value.match(/(^|\s|;)return[^a-z0-9A-Z]/))) {
         return value;
     }
-    return "(() => {\n    try { ".concat(isExpression(value) ? 'return ' : '').concat(value, " }\n    catch (err) {\n      console.warn('Builder code error', err);\n    }\n  })()");
+    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));
@@ -556,7 +554,7 @@ var getHooks = function (content) {
 function extractStateHook(code) {
     var types = babel.types;
     var state = {};
-    var body = parseCode(code);
+    var body = (0, parsers_1.parseCode)(code);
     var newBody = body.slice();
     for (var i = 0; i < body.length; i++) {
         var statement = body[i];
@@ -594,7 +592,7 @@ function extractStateHook(code) {
 exports.extractStateHook = extractStateHook;
 function convertExportDefaultToReturn(code) {
     var types = babel.types;
-    var body = parseCode(code);
+    var body = (0, parsers_1.parseCode)(code);
     var newBody = body.slice();
     for (var i = 0; i < body.length; i++) {
         var statement = body[i];
@@ -608,32 +606,6 @@ function convertExportDefaultToReturn(code) {
     return (0, generator_1.default)(types.program(newBody)).code || '';
 }
 exports.convertExportDefaultToReturn = convertExportDefaultToReturn;
-function parseCode(code) {
-    var ast = babel.parse(code, {
-        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
-        plugins: [[decorators, { legacy: true }], jsxPlugin],
-    });
-    var body = babel.types.isFile(ast)
-        ? ast.program.body
-        : babel.types.isProgram(ast)
-            ? ast.body
-            : [];
-    return body;
-}
-/**
- * Returns `true` if the `code` is a valid expression. (vs a statement)
- */
-function isExpression(code) {
-    try {
-        var body = parseCode(code);
-        return (body.length == 1 &&
-            (babel.types.isExpression(body[0]) ||
-                babel.types.isExpressionStatement(body[0])));
-    }
-    catch (e) {
-        return false;
-    }
-}
 // TODO: maybe this should be part of the builder -> Mitosis part
 function extractSymbols(json) {
     var _a, _b, _c, _d;

package/dist/src/parsers/jsx.d.ts

@@ -9,5 +9,12 @@ declare type ParseMitosisOptions = {
     format: 'react' | 'simple';
     jsonHookNames?: string[];
 };
+/**
+ * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
+ * each generator function.
+ *
+ * @param jsx string representation of the Mitosis component
+ * @returns A JSON representation of the Mitosis component
+ */
 export declare function parseJsx(jsx: string, options?: Partial<ParseMitosisOptions>): MitosisComponent;
 export {};

package/dist/src/parsers/jsx.js

@@ -622,6 +622,13 @@ function extractContextComponents(json) {
 var isImportOrDefaultExport = function (node) {
     return types.isExportDefaultDeclaration(node) || types.isImportDeclaration(node);
 };
+/**
+ * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
+ * each generator function.
+ *
+ * @param jsx string representation of the Mitosis component
+ * @returns A JSON representation of the Mitosis component
+ */
 function parseJsx(jsx, options) {
     if (options === void 0) { options = {}; }
     var useOptions = __assign({ format: 'react' }, options);

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

@@ -76,7 +76,7 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
         if (cssCode) {
             collectComponentStyles && collectComponentStyles.push((0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), cssCode));
         }
-        while (path[0 /* Path.DEPTH */] >= this.path.length) {
+        while (path[0 /* DEPTH */] >= this.path.length) {
             path.shift();
             path.shift();
         }
@@ -92,10 +92,10 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
                         collectComponentState[id] = state;
                     }
                 }
-                if (path[0 /* Path.DEPTH */] < this.path.length) {
+                if (path[0 /* DEPTH */] < this.path.length) {
                     var id = getIdFromSymbol(el);
                     hierarchy[id] = [];
-                    addIfMissing(hierarchy[path[1 /* Path.ID */]], id);
+                    addIfMissing(hierarchy[path[1 /* ID */]], id);
                     path.unshift(this.path.length, id);
                 }
                 // TODO(misko): This should be `el.content` not `el`

package/dist/src/types/mitosis-component.d.ts

@@ -45,7 +45,6 @@ export declare type MitosisComponent = {
     imports: MitosisImport[];
     meta: JSONObject & {
         useMetadata?: JSONObject;
-        metadataHook?: JSONObject;
     };
     inputs: MitosisComponentInput[];
     state: JSONObject;

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

@@ -0,0 +1,207 @@
+import { h, qrl, useLexicalScope } 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_onRender = () => {
+  const state = useLexicalScope()[0];
+  return (
+    <div
+      gridRowWidth="25%"
+      class="csw5022"
+      items={[
+        {
+          title: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item title",
+              id: "builder-5fed2723c1cc4fb39e9d22b9c54ef179",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-2cad86b387ec405d82917895d7af0a12",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 1</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  marginTop: "10px",
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+          detail: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item detail",
+              id: "builder-18279a99b32240f19aa21d3f4b015cc9",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-2dbfa56b8988461c8566bbe759580e9b",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 1 content</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      paddingTop: "50px",
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                      paddingBottom: "50px",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  marginTop: "10px",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+        },
+        {
+          title: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item title",
+              id: "builder-2a93def22a354cf7aa193c20d1ad6def",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-1365fc457ece45db82ad90dbe9819e7c",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 2</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  marginTop: "10px",
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+          detail: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              layerName: "Accordion item detail",
+              id: "builder-fd6ef41da6d040328fbd8b0801611fe5",
+              children: [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "@version": 2,
+                  id: "builder-7362f9fd64c647c5a400d9e75c74473f",
+                  component: {
+                    name: "Text",
+                    options: { text: "<p>Item 2 content</p>" },
+                  },
+                  responsiveStyles: {
+                    large: {
+                      paddingTop: "50px",
+                      textAlign: "left",
+                      display: "flex",
+                      flexDirection: "column",
+                      paddingBottom: "50px",
+                    },
+                  },
+                },
+              ],
+              responsiveStyles: {
+                large: {
+                  position: "relative",
+                  display: "flex",
+                  alignItems: "stretch",
+                  flexDirection: "column",
+                  marginTop: "10px",
+                  paddingBottom: "10px",
+                },
+              },
+            },
+          ],
+        },
+      ]}
+      animate={true}
+    >
+      <div>
+        <div builder="accordion">
+          <div builder="accordion-title">
+            <div 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 class="ctcw2m4">
+                <div
+                  innerHTML="<p>Item 1 content</p>"
+                  class="builder-text"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div builder="accordion">
+          <div builder="accordion-title">
+            <div 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 class="ctcw2m4">
+                <div
+                  innerHTML="<p>Item 2 content</p>"
+                  class="builder-text"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+export const MyComponent_onMount = (state) => {
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return qrl("./low.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);

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

@@ -0,0 +1,33 @@
+import { h, qrl, useLexicalScope } from "@builder.io/qwik";
+export const MyComponent_styles = `.cvdfnp5{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:0px;padding-left:20px;padding-right:20px;padding-top:50px;padding-bottom:50px;width:100vw;margin-left:calc(50% - 50vw)}.cz5wnof{width:100%;align-self:stretch;flex-grow:1;box-sizing:border-box;max-width:1200px;display:flex;flex-direction:column;align-items:stretch;margin-left:auto;margin-right:auto}.cdrk993{text-align:center}`;
+export const MyComponent_onRender = () => {
+  const state = useLexicalScope()[0];
+  return (
+    <div class="cvdfnp5" maxWidth={1200}>
+      <section class="cz5wnof">
+        {(state.simpleList.results || []).map(
+          function (__value__) {
+            var state = Object.assign({}, this, {
+              resultsItem: __value__ == null ? {} : __value__,
+            });
+            return (
+              <div class="cdrk993">
+                <div
+                  class="builder-text"
+                  innerHTML={(() => {
+                    try {
+                      var _virtual_index = state.resultsItem.data.title;
+                      return _virtual_index;
+                    } catch (err) {
+                      console.warn("Builder code error", err);
+                    }
+                  })()}
+                ></div>
+              </div>
+            );
+          }.bind(state)
+        )}
+      </section>
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+export const MyComponent_onMount = (state) => {
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return qrl("./low.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);

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

@@ -0,0 +1,9 @@
+import { useLexicalScope } from "@builder.io/qwik";
+export const MyComponent_onClick_0 = () => {
+  const state = useLexicalScope()[0];
+  try {
+    return (state.myState = "changed value");
+  } catch (err) {
+    console.warn("Builder code error", err);
+  }
+};