@builder.io/mitosis 0.1.5 → 0.1.7

package/dist/src/generators/solid/index.js

@@ -185,7 +185,7 @@ var componentToSolid = function (passedOptions) {
             hasShowComponent ? 'Show' : undefined,
             hasForComponent ? 'For' : undefined,
             json.hooks.onMount.length ? 'onMount' : undefined
-        ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect'] : []), true), ((_d = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _d !== void 0 ? _d : []), true).filter(nullable_1.checkIsDefined));
+        ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect', 'createMemo'] : []), true), ((_d = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _d !== void 0 ? _d : []), true).filter(nullable_1.checkIsDefined));
         var storeImports = (_e = state === null || state === void 0 ? void 0 : state.import.store) !== null && _e !== void 0 ? _e : [];
         var propType = json.propsTypeRef || 'any';
         var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
@@ -198,14 +198,27 @@ var componentToSolid = function (passedOptions) {
         }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }).join('\n'), 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`
+                // TO-DO: support `onUpdate` without `deps`
+                if (!hook.deps)
                     return '';
-                }
+                var hookName = "onUpdateFn_".concat(index);
+                var depsArray = hook.deps
+                    .slice(1, hook.deps.length - 1)
+                    .split(',')
+                    .map(function (x) { return x.trim(); });
+                var getReactiveDepName = function (dep) {
+                    var newLocal = dep.replace(/(\.|\?|\(|\)|\[|\])/g, '_');
+                    return "".concat(hookName, "_").concat(newLocal);
+                };
+                var needsMemo = function (dep) { return true; };
+                var reactiveDepsWorkaround = depsArray
+                    .filter(needsMemo)
+                    .map(function (dep) { return "const ".concat(getReactiveDepName(dep), " = createMemo(() => ").concat(dep, ");"); })
+                    .join('\n');
+                var depsArrayStr = depsArray
+                    .map(function (x) { return (needsMemo(x) ? "".concat(getReactiveDepName(x), "()") : x); })
+                    .join(', ');
+                return "\n                    ".concat(reactiveDepsWorkaround, "\n                    function ").concat(hookName, "() { ").concat(hook.code, " };\n                    createEffect(on(() => [").concat(depsArrayStr, "], ").concat(hookName, "));\n                  ");
             })
                 .join('\n')
             : '', addWrapper ? '<>' : '', json.children

package/dist/src/generators/solid/state/signals.js

@@ -20,7 +20,7 @@ var processSignalStateValue = function (_a) {
         if (typeof value === 'string') {
             switch (type) {
                 case 'getter':
-                    return (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+                    return (0, function_1.pipe)(value, mapValue, patterns_1.extractGetterCodeBlock, function (x) { return "const ".concat(key, " = createMemo(() => {").concat(x, "})"); });
                 case 'function':
                     return mapValue(value);
                 case 'method':

package/dist/src/generators/solid/state/state.js

@@ -58,7 +58,7 @@ var getState = function (_a) {
     var stateStr = "\n  ".concat(mutableStateStr, "\n  ").concat(signalStateStr, "\n  ").concat(storeStateStr, "\n  ");
     var importObj = {
         store: __spreadArray(__spreadArray([], (hasMutableState ? ['createMutable'] : []), true), (hasStoreState ? ['createStore', 'reconcile'] : []), true),
-        solidjs: __spreadArray(__spreadArray([], (hasSignalState ? ['createSignal'] : []), true), (hasStoreState ? ['createEffect', 'on'] : []), true),
+        solidjs: __spreadArray(__spreadArray([], (hasSignalState ? ['createSignal', 'createMemo'] : []), true), (hasStoreState ? ['createEffect', 'on'] : []), true),
     };
     return {
         str: stateStr,

package/dist/src/generators/svelte/svelte.js

@@ -335,7 +335,7 @@ var componentToSvelte = function (userProvidedOptions) {
              * rerun the effect every time the parent store is changed in any way.
              */
             return "\n              function ".concat(fnName, "(..._args").concat(options.typescript ? ': any[]' : '', ") {\n                ").concat(code, "\n              }\n              ").concat(reactiveDepsWorkaround, "\n              $: ").concat(fnName, "(...[").concat(depsArrayStr, "]);\n            ");
-        }).join(';')) || '', 
+        }).join('\n')) || '', 
         // make sure this is after all other state/code is initialized
         setContextCode({ json: json, options: options }), !((_k = json.hooks.onUnMount) === null || _k === void 0 ? void 0 : _k.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
             .map(function (item) {

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

@@ -4,4 +4,5 @@ export declare const checkIsGetter: (code: string) => RegExpMatchArray | null;
 export declare const stripGetter: (str: string) => string;
 export declare const replaceGetterWithFunction: (str: string) => string;
 export declare const replaceFunctionWithGetter: (str: string) => string;
+export declare const extractGetterCodeBlock: (getter: string) => string;
 export declare const prefixWithFunction: (str: string) => string;

package/dist/src/helpers/patterns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefixWithFunction = exports.replaceFunctionWithGetter = exports.replaceGetterWithFunction = exports.stripGetter = exports.checkIsGetter = exports.SETTER = exports.GETTER = void 0;
+exports.prefixWithFunction = exports.extractGetterCodeBlock = exports.replaceFunctionWithGetter = exports.replaceGetterWithFunction = exports.stripGetter = exports.checkIsGetter = exports.SETTER = exports.GETTER = void 0;
 exports.GETTER = /^\s*get /;
 exports.SETTER = /^\s*set /;
 var checkIsGetter = function (code) { return code.match(exports.GETTER); };
@@ -11,5 +11,9 @@ var replaceGetterWithFunction = function (str) { return str.replace(/^(get )?/,
 exports.replaceGetterWithFunction = replaceGetterWithFunction;
 var replaceFunctionWithGetter = function (str) { return str.replace(/^(function )?/, 'get '); };
 exports.replaceFunctionWithGetter = replaceFunctionWithGetter;
+var extractGetterCodeBlock = function (getter) {
+    return getter.replace(/[\S\s]*\(\) \{([\S\s]*)\}[\S\s]*/, '$1').trim();
+};
+exports.extractGetterCodeBlock = extractGetterCodeBlock;
 var prefixWithFunction = function (str) { return "function ".concat(str); };
 exports.prefixWithFunction = prefixWithFunction;

package/package.json

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