@builder.io/mitosis 0.6.4 → 0.6.6

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

@@ -22,7 +22,7 @@ const standalone_1 = require("prettier/standalone");
 const componentToStencil = (_options = {
     typescript: true, // Stencil is uses .tsx always
 }) => ({ component }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let json = (0, fast_clone_1.fastClone)(component);
     const options = (0, merge_options_1.initializeOptions)({
         target: 'stencil',
@@ -84,7 +84,20 @@ const componentToStencil = (_options = {
         // Deprecated option, we shouldn't use this, instead change the name of your Mitosis component
         tagName = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName;
     }
-    const coreImports = (0, helpers_1.getStencilCoreImportsAsString)(wrap, events, props, dataString);
+    const noDependencyOnUpdateHooks = (_d = (_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.filter((hook) => !hook.deps)) !== null && _d !== void 0 ? _d : [];
+    /*
+     * We want to create a function for every onUpdate hook that has dependencies.
+     * We call the function once in "componentDidLoad"
+     * And we create "Watch" decorators for every dependency
+     */
+    const dependencyOnUpdateHooks = (_f = (_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter((hook) => hook.deps)) !== null && _f !== void 0 ? _f : [];
+    const coreImports = (0, helpers_1.getStencilCoreImportsAsString)({
+        wrap,
+        events,
+        props,
+        dataString,
+        watch: Boolean(dependencyOnUpdateHooks === null || dependencyOnUpdateHooks === void 0 ? void 0 : dependencyOnUpdateHooks.length),
+    });
     let str = (0, dedent_1.dedent) `
     ${(0, helpers_1.getImports)(json, options, childComponents)}
     
@@ -94,7 +107,7 @@ const componentToStencil = (_options = {
     
     @Component({
       tag: '${tagName}',
-      ${((_c = json.meta.useMetadata) === null || _c === void 0 ? void 0 : _c.isAttachedToShadowDom) ? 'shadow: true,' : ''}
+      ${((_g = json.meta.useMetadata) === null || _g === void 0 ? void 0 : _g.isAttachedToShadowDom) ? 'shadow: true,' : ''}
       ${css.length
         ? `styles: \`
         ${(0, indent_1.indent)(css, 8)}\`,`
@@ -107,19 +120,41 @@ const componentToStencil = (_options = {
         ${methodsString}
         
         ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
+        
+        ${dependencyOnUpdateHooks
+        .map((hook, index) => {
+        return `
+          watch${index}Fn() { 
+            ${hook.code} 
+          }
+          
+          ${(0, helpers_1.getDepsAsArray)(hook.deps)
+            .map((dep) => `@Watch("${dep}")`)
+            .join('\n')}
+            watch${index}(){
+              this.watch${index}Fn();
+            }            
+          `;
+    })
+        .join('\n')}
 
         ${`componentDidLoad() { 
             ${withAttributePassing
         ? `this.enableAttributePassing(this.${rootRef}, "${(0, dash_case_1.dashCase)(json.name)}");`
         : ''}
             ${json.hooks.onMount.length ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''} 
+            ${dependencyOnUpdateHooks
+        .map((_, index) => `this.watch${index}Fn();`)
+        .join('\n')}
             }`}
-        ${!((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
+        ${!((_h = json.hooks.onUnMount) === null || _h === void 0 ? void 0 : _h.code)
         ? ''
         : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
-        ${!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
-        ? ''
-        : `componentDidUpdate() { ${json.hooks.onUpdate.map((hook) => hook.code).join('\n')} }`}
+        ${noDependencyOnUpdateHooks.length
+        ? `componentDidUpdate() { ${noDependencyOnUpdateHooks
+            .map((hook) => hook.code)
+            .join('\n')} }`
+        : ''}
 
       render() {
         return (${wrap ? '<Host>' : ''}

package/dist/src/generators/stencil/helpers/index.d.ts

@@ -19,6 +19,18 @@ export declare const needsWrap: (children: MitosisNode[]) => boolean;
  * @param events
  * @param props
  * @param dataString
+ * @param watch
  */
-export declare const getStencilCoreImportsAsString: (wrap: boolean, events: string[], props: string[], dataString: string) => string;
+export declare const getStencilCoreImportsAsString: ({ wrap, events, props, dataString, watch, }: {
+    wrap: boolean;
+    events: string[];
+    props: string[];
+    dataString: string;
+    watch: boolean;
+}) => string;
 export declare const getImports: (json: MitosisComponent, options: ToStencilOptions, childComponents: string[]) => string;
+/**
+ * Converts the deps string into an array of strings
+ * @param deps The hook dependencies as string e.g.: "[this.a,this.b]"
+ */
+export declare const getDepsAsArray: (deps: string) => string[];

package/dist/src/generators/stencil/helpers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
+exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
 const dash_case_1 = require("../../../helpers/dash-case");
 const event_handlers_1 = require("../../../helpers/event-handlers");
 const render_imports_1 = require("../../../helpers/render-imports");
@@ -77,13 +77,15 @@ exports.needsWrap = needsWrap;
  * @param events
  * @param props
  * @param dataString
+ * @param watch
  */
-const getStencilCoreImportsAsString = (wrap, events, props, dataString) => {
+const getStencilCoreImportsAsString = ({ wrap, events, props, dataString, watch, }) => {
     const stencilCoreImports = {
         Component: true,
         h: true,
         Fragment: true,
         Host: wrap,
+        Watch: watch,
         Event: events.length > 0,
         Prop: props.length > 0,
         State: dataString.length > 0,
@@ -109,3 +111,16 @@ const getImports = (json, options, childComponents) => {
     });
 };
 exports.getImports = getImports;
+/**
+ * Converts the deps string into an array of strings
+ * @param deps The hook dependencies as string e.g.: "[this.a,this.b]"
+ */
+const getDepsAsArray = (deps) => {
+    return deps
+        .replace('[', '')
+        .replace(']', '')
+        .replaceAll('this.', '')
+        .split(',')
+        .map((dep) => dep.trim());
+};
+exports.getDepsAsArray = getDepsAsArray;

package/dist/src/parsers/builder/builder.js

@@ -1021,7 +1021,13 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
             const voidElemRegex = /(<area|base|br|col|embed|hr|img|input|keygen|link|meta|param|source|track|wbr[^>]+)>/gm;
             try {
                 if (((_a = elem.component) === null || _a === void 0 ? void 0 : _a.name) === 'Text') {
-                    elem.component.options.text = elem.component.options.text.replace(voidElemRegex, '$1 />');
+                    const text = elem.component.options.text;
+                    elem.component.options.text = text.replace(voidElemRegex, '$1 />');
+                    // Remove broken emojis
+                    const hasUnpairedSurrogate = /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/g;
+                    if (hasUnpairedSurrogate.test(text)) {
+                        elem.component.options.text = text.replace(hasUnpairedSurrogate, '');
+                    }
                 }
             }
             catch (_error) {

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.6.4",
+  "version": "0.6.6",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {