@builder.io/mitosis 0.0.69 → 0.0.70

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

@@ -7,12 +7,12 @@ exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseSt
 var core_1 = require("@babel/core");
 var json5_1 = __importDefault(require("json5"));
 var traverse_1 = __importDefault(require("traverse"));
-var babel_transform_1 = require("../../helpers/babel-transform");
 var capitalize_1 = require("../../helpers/capitalize");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var function_1 = require("fp-ts/lib/function");
 var helpers_1 = require("./helpers");
 var patterns_1 = require("../../helpers/patterns");
+var transform_state_setters_1 = require("../../helpers/transform-state-setters");
 /**
  * Removes all `this.` references.
  */
@@ -88,19 +88,13 @@ var updateStateSettersInCode = function (value, options) {
     if (options.stateType !== 'useState') {
         return value;
     }
-    return (0, babel_transform_1.babelTransformExpression)(value, {
-        AssignmentExpression: function (path) {
+    return (0, transform_state_setters_1.transformStateSetters)({
+        value: value,
+        transformer: function (_a) {
+            var path = _a.path, propertyName = _a.propertyName;
             var node = path.node;
-            if (core_1.types.isMemberExpression(node.left)) {
-                if (core_1.types.isIdentifier(node.left.object)) {
-                    // TODO: utillity to properly trace this reference to the beginning
-                    if (node.left.object.name === 'state') {
-                        // TODO: ultimately support other property access like strings
-                        var propertyName = node.left.property.name;
-                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [node.right]));
-                    }
-                }
-            }
+            var newExpression = core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [node.right]);
+            return newExpression;
         },
     });
 };

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

@@ -14,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -52,6 +75,9 @@ var nullable_1 = require("../../helpers/nullable");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var hash_sum_1 = __importDefault(require("hash-sum"));
+var Array_1 = require("fp-ts/lib/Array");
+var S = __importStar(require("fp-ts/string"));
+var helpers_2 = require("./state/helpers");
 var DEFAULT_OPTIONS = {
     state: 'signals',
     stylesType: 'styled-components',
@@ -125,7 +151,7 @@ var preProcessBlockCode = function (_a) {
     for (var key in json.properties) {
         var value = json.properties[key];
         if (value) {
-            json.properties[key] = (0, state_1.updateStateCode)({ options: options, component: component, updateSetters: false })(value);
+            json.properties[key] = (0, helpers_2.updateStateCode)({ options: options, component: component, updateSetters: false })(value);
         }
     }
     for (var key in json.bindings) {
@@ -133,7 +159,7 @@ var preProcessBlockCode = function (_a) {
         if (value === null || value === void 0 ? void 0 : value.code) {
             json.bindings[key] = {
                 arguments: value.arguments,
-                code: (0, state_1.updateStateCode)({ options: options, component: component, updateSetters: true })(value.code),
+                code: (0, helpers_2.updateStateCode)({ options: options, component: component, updateSetters: true })(value.code),
             };
         }
     }
@@ -253,7 +279,7 @@ function addProviderComponents(json, options) {
 }
 var preProcessComponentCode = function (json, options) {
     var _a;
-    var processCode = (0, state_1.updateStateCode)({ options: options, component: json });
+    var processCode = (0, helpers_2.updateStateCode)({ options: options, component: json });
     if ((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) {
         json.hooks.onMount.code = processCode(json.hooks.onMount.code);
     }
@@ -295,12 +321,12 @@ var componentToSolid = function (passedOptions) {
         var componentHasContext = (0, context_1.hasContext)(json);
         var hasShowComponent = componentsUsed.has('Show');
         var hasForComponent = componentsUsed.has('For');
-        var solidJSImports = __spreadArray(__spreadArray([
+        var solidJSImports = (0, Array_1.uniq)(S.Eq)(__spreadArray(__spreadArray([
             componentHasContext ? 'useContext' : undefined,
             hasShowComponent ? 'Show' : undefined,
             hasForComponent ? 'For' : undefined,
             ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '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'] : []), 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 str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles && options.stylesType === 'styled-components'
             ? ''

package/dist/src/generators/solid/state/helpers.d.ts

@@ -0,0 +1,13 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { ToSolidOptions } from '../types';
+export declare const getStateSetterName: (stateName: string) => string;
+export declare const getStateTypeForValue: ({ value, component, options, }: {
+    value: string;
+    component: MitosisComponent;
+    options: ToSolidOptions;
+}) => import("../types").SolidState;
+export declare const updateStateCode: ({ options, component, updateSetters, }: {
+    options: ToSolidOptions;
+    component: MitosisComponent;
+    updateSetters?: boolean | undefined;
+}) => (value: string) => string;

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateStateCode = exports.getStateTypeForValue = exports.getStateSetterName = void 0;
+var core_1 = require("@babel/core");
+var strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
+var function_1 = require("fp-ts/lib/function");
+var transform_state_setters_1 = require("../../../helpers/transform-state-setters");
+var capitalize_1 = require("../../../helpers/capitalize");
+var getStateSetterName = function (stateName) { return "set".concat((0, capitalize_1.capitalize)(stateName)); };
+exports.getStateSetterName = getStateSetterName;
+var getStateTypeForValue = function (_a) {
+    var _b, _c, _d, _e;
+    var value = _a.value, component = _a.component, options = _a.options;
+    // e.g. state.useContent?.blocks[0].id => useContent
+    var extractStateSliceName = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value).split('.')[0].split('?')[0];
+    var stateOverrideForValue = (_e = (_d = (_c = (_b = component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.solid) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e[extractStateSliceName];
+    var stateType = stateOverrideForValue || options.state;
+    return stateType;
+};
+exports.getStateTypeForValue = getStateTypeForValue;
+var getNewStateSetterExpression = function (stateType) {
+    return function (_a) {
+        var path = _a.path, propertyName = _a.propertyName;
+        /**
+         * passes the value to the setter function
+         * ```ts
+         * // BEFORE
+         * state.count = newCount
+         * // AFTER
+         * setCount(newCount)
+         * ```
+         */
+        var callValueSetter = function (args) {
+            return core_1.types.callExpression(core_1.types.identifier((0, exports.getStateSetterName)(propertyName)), [args]);
+        };
+        switch (stateType) {
+            case 'signals':
+                return callValueSetter(path.node.right);
+            case 'store':
+                /**
+                 * Wrap value in a reconcile() call for Stores updates
+                 * ```ts
+                 * // BEFORE
+                 * state.count = newCount
+                 * // AFTER
+                 * setCount(reconcile(newCount))
+                 * ```
+                 */
+                return callValueSetter(core_1.types.callExpression(core_1.types.identifier('reconcile'), [path.node.right]));
+        }
+    };
+};
+var updateStateSettersInCode = function (_a) {
+    var options = _a.options, component = _a.component;
+    return function (value) {
+        var stateType = (0, exports.getStateTypeForValue)({ value: value, component: component, options: options });
+        switch (stateType) {
+            case 'mutable':
+                return value;
+            case 'store':
+            case 'signals':
+                try {
+                    return (0, transform_state_setters_1.transformStateSetters)({
+                        value: value,
+                        transformer: getNewStateSetterExpression(stateType),
+                    });
+                }
+                catch (error) {
+                    console.error("[Solid.js]: could not update state setters in ".concat(stateType, " code"), value);
+                    throw error;
+                }
+        }
+    };
+};
+var updateStateGettersInCode = function (options, component) {
+    return function (value) {
+        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
+            includeState: true,
+            includeProps: false,
+            replaceWith: function (name) {
+                var stateType = (0, exports.getStateTypeForValue)({ value: name, component: component, options: options });
+                var state = component.state[name];
+                switch (stateType) {
+                    case 'signals':
+                        if (
+                        // signal accessors are lazy, so we need to add a function call to property calls
+                        (state === null || state === void 0 ? void 0 : state.type) === 'property' ||
+                            // getters become plain functions, requiring a function call to access their value
+                            (state === null || state === void 0 ? void 0 : state.type) === 'getter') {
+                            return "".concat(name, "()");
+                        }
+                        else {
+                            return name;
+                        }
+                    case 'store':
+                    case 'mutable':
+                        return name;
+                }
+            },
+        });
+    };
+};
+var updateStateCode = function (_a) {
+    var options = _a.options, component = _a.component, _b = _a.updateSetters, updateSetters = _b === void 0 ? true : _b;
+    return (0, function_1.flow)(updateSetters ? updateStateSettersInCode({ options: options, component: component }) : function_1.identity, updateStateGettersInCode(options, component), function (x) { return x.trim(); });
+};
+exports.updateStateCode = updateStateCode;

package/dist/src/generators/solid/state/index.d.ts

@@ -0,0 +1 @@
+export { getState } from './state';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getState = void 0;
+var state_1 = require("./state");
+Object.defineProperty(exports, "getState", { enumerable: true, get: function () { return state_1.getState; } });

package/dist/src/generators/solid/state/signals.d.ts

@@ -0,0 +1,7 @@
+import { MitosisComponent, MitosisState } from '../../../types/mitosis-component';
+import { ToSolidOptions } from '../types';
+export declare const getSignalsCode: ({ json, options, state, }: {
+    json: MitosisComponent;
+    options: ToSolidOptions;
+    state: MitosisState;
+}) => string;

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSignalsCode = void 0;
+var json5_1 = __importDefault(require("json5"));
+var function_1 = require("fp-ts/lib/function");
+var patterns_1 = require("../../../helpers/patterns");
+var helpers_1 = require("./helpers");
+var processSignalStateValue = function (_a) {
+    var options = _a.options, component = _a.component;
+    var mapValue = (0, helpers_1.updateStateCode)({ options: options, component: component });
+    return function (_a) {
+        var key = _a[0], stateVal = _a[1];
+        var getDefaultCase = function () {
+            return (0, function_1.pipe)(value, json5_1.default.stringify, mapValue, function (x) { return "const [".concat(key, ", ").concat((0, helpers_1.getStateSetterName)(key), "] = createSignal(").concat(x, ")"); });
+        };
+        var value = stateVal === null || stateVal === void 0 ? void 0 : stateVal.code;
+        var type = stateVal === null || stateVal === void 0 ? void 0 : stateVal.type;
+        if (typeof value === 'string') {
+            switch (type) {
+                case 'getter':
+                    return (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+                case 'function':
+                    return mapValue(value);
+                case 'method':
+                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+                default:
+                    return getDefaultCase();
+            }
+        }
+        else {
+            return getDefaultCase();
+        }
+    };
+};
+var LINE_ITEM_DELIMITER = '\n\n\n';
+var getSignalsCode = function (_a) {
+    var json = _a.json, options = _a.options, state = _a.state;
+    return Object.entries(state)
+        .map(processSignalStateValue({ options: options, component: json }))
+        /**
+         * We need to sort state so that signals are at the top.
+         */
+        .sort(function (a, b) {
+        var aHasSignal = a.includes('createSignal(');
+        var bHasSignal = b.includes('createSignal(');
+        if (aHasSignal && !bHasSignal) {
+            return -1;
+        }
+        else if (!aHasSignal && bHasSignal) {
+            return 1;
+        }
+        else {
+            return 0;
+        }
+    })
+        .join(LINE_ITEM_DELIMITER);
+};
+exports.getSignalsCode = getSignalsCode;

package/dist/src/generators/solid/state/state.d.ts

@@ -0,0 +1,14 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { ToSolidOptions } from '../types';
+declare type State = {
+    str: string;
+    import: {
+        store?: string[];
+        solidjs?: string[];
+    };
+};
+export declare const getState: ({ json, options, }: {
+    json: MitosisComponent;
+    options: ToSolidOptions;
+}) => State | undefined;
+export {};

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

@@ -0,0 +1,68 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getState = void 0;
+var get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+var function_1 = require("fp-ts/lib/function");
+var state_1 = require("../../../helpers/state");
+var helpers_1 = require("./helpers");
+var signals_1 = require("./signals");
+var store_1 = require("./store");
+var getState = function (_a) {
+    var json = _a.json, options = _a.options;
+    var hasState = (0, state_1.checkHasState)(json);
+    if (!hasState) {
+        return undefined;
+    }
+    // unbundle state in case the user provides a type override of one of the state values
+    var _b = Object.entries(json.state).reduce(function (acc, _a) {
+        var _b, _c, _d;
+        var key = _a[0], value = _a[1];
+        var stateType = (0, helpers_1.getStateTypeForValue)({ value: key, component: json, options: options });
+        switch (stateType) {
+            case 'mutable':
+                return __assign(__assign({}, acc), { mutable: __assign(__assign({}, acc.mutable), (_b = {}, _b[key] = value, _b)) });
+            case 'signals':
+                return __assign(__assign({}, acc), { signal: __assign(__assign({}, acc.signal), (_c = {}, _c[key] = value, _c)) });
+            case 'store':
+                return __assign(__assign({}, acc), { store: __assign(__assign({}, acc.store), (_d = {}, _d[key] = value, _d)) });
+        }
+    }, { mutable: {}, signal: {}, store: {} }), mutable = _b.mutable, signal = _b.signal, store = _b.store;
+    var hasMutableState = Object.keys(mutable).length > 0;
+    var hasSignalState = Object.keys(signal).length > 0;
+    var hasStoreState = Object.keys(store).length > 0;
+    var mutableStateStr = hasMutableState
+        ? (0, function_1.pipe)(mutable, get_state_object_string_1.getMemberObjectString, function (str) { return "const state = createMutable(".concat(str, ");"); })
+        : '';
+    var signalStateStr = hasSignalState ? (0, signals_1.getSignalsCode)({ json: json, options: options, state: signal }) : '';
+    var storeStateStr = hasStoreState ? (0, store_1.getStoreCode)({ json: json, options: options, state: store }) : '';
+    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),
+    };
+    return {
+        str: stateStr,
+        import: importObj,
+    };
+};
+exports.getState = getState;

package/dist/src/generators/solid/state/store.d.ts

@@ -0,0 +1,7 @@
+import { MitosisComponent, MitosisState } from '../../../types/mitosis-component';
+import { ToSolidOptions } from '../types';
+export declare const getStoreCode: ({ json: component, options, state, }: {
+    json: MitosisComponent;
+    options: ToSolidOptions;
+    state: MitosisState;
+}) => string;

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

@@ -0,0 +1,83 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStoreCode = void 0;
+var core_1 = require("@babel/core");
+var json5_1 = __importDefault(require("json5"));
+var babel_transform_1 = require("../../../helpers/babel-transform");
+var capitalize_1 = require("../../../helpers/capitalize");
+var function_1 = require("fp-ts/lib/function");
+var patterns_1 = require("../../../helpers/patterns");
+var helpers_1 = require("./helpers");
+var collectUsedStateAndPropsInFunction = function (fnValue) {
+    var stateUsed = new Set();
+    var propsUsed = new Set();
+    (0, babel_transform_1.babelTransformExpression)(fnValue, {
+        MemberExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isIdentifier(node.object)) {
+                if (core_1.types.isIdentifier(node.property)) {
+                    if (node.object.name === 'state') {
+                        stateUsed.add("state.".concat(node.property.name));
+                    }
+                    else if (node.object.name === 'props') {
+                        propsUsed.add("props.".concat(node.property.name));
+                    }
+                }
+            }
+        },
+    });
+    return { stateUsed: stateUsed, propsUsed: propsUsed };
+};
+var getStoreCode = function (_a) {
+    var component = _a.json, options = _a.options, state = _a.state;
+    var mapValue = (0, helpers_1.updateStateCode)({ options: options, component: component });
+    var stateUpdater = function (_a) {
+        var key = _a[0], stateVal = _a[1];
+        var getCreateStoreStr = function (initialValue) {
+            return "const [".concat(key, ", ").concat((0, helpers_1.getStateSetterName)(key), "] = createStore(").concat(initialValue, ")");
+        };
+        var getDefaultCase = function () { return (0, function_1.pipe)(value, json5_1.default.stringify, mapValue, getCreateStoreStr); };
+        var value = stateVal === null || stateVal === void 0 ? void 0 : stateVal.code;
+        var type = stateVal === null || stateVal === void 0 ? void 0 : stateVal.type;
+        if (typeof value === 'string') {
+            switch (type) {
+                case 'getter':
+                    var getterValueAsFunction = (0, patterns_1.replaceGetterWithFunction)(value);
+                    var _b = collectUsedStateAndPropsInFunction(getterValueAsFunction), stateUsed = _b.stateUsed, propsUsed = _b.propsUsed;
+                    var fnValueWithMappedRefs = mapValue(getterValueAsFunction);
+                    var FUNCTION_NAME = "update".concat((0, capitalize_1.capitalize)(key));
+                    var deps = __spreadArray(__spreadArray([], Array.from(stateUsed).map((0, helpers_1.updateStateCode)({
+                        options: options,
+                        component: component,
+                        // there are no setters in deps
+                        updateSetters: false,
+                    })), true), Array.from(propsUsed), true).join(', ');
+                    return "\n          const ".concat(FUNCTION_NAME, " = ").concat(fnValueWithMappedRefs, "\n          ").concat(getCreateStoreStr("".concat(FUNCTION_NAME, "()")), "\n          createEffect(on(() => [").concat(deps, "], () => ").concat((0, helpers_1.getStateSetterName)(key), "(reconcile(").concat(FUNCTION_NAME, "()))))\n          ");
+                case 'function':
+                    return mapValue(value);
+                case 'method':
+                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+                default:
+                    return getDefaultCase();
+            }
+        }
+        else {
+            return getDefaultCase();
+        }
+    };
+    return Object.entries(state).map(stateUpdater).join(LINE_ITEM_DELIMITER);
+};
+exports.getStoreCode = getStoreCode;
+var LINE_ITEM_DELIMITER = '\n\n\n';

package/dist/src/generators/solid/types.d.ts

@@ -1,5 +1,5 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
-export declare type SolidState = 'mutable' | 'signals';
+export declare type SolidState = 'mutable' | 'signals' | 'store';
 export interface ToSolidOptions extends BaseTranspilerOptions {
     state: SolidState;
     stylesType?: 'styled-components' | 'style-tag';

package/dist/src/generators/vue.js

@@ -638,7 +638,14 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         methods += " function _classStringToObject(str) {\n    const obj = {};\n    if (typeof str !== 'string') { return obj }\n    const classNames = str.trim().split(/\\s+/);\n    for (const name of classNames) {\n      obj[name] = true;\n    }\n    return obj;\n    } ";
     }
     var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.keys(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (key) { return "const ".concat(key, " = inject(").concat(component.context.get[key].name, ")"); }).join('\n'), (_b = Object.keys(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (key) { return "provide(".concat(component.context.set[key].name, ", ").concat(component.context.set[key].ref, ")"); }).join('\n'), (_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map(function (key) { return "const ".concat(key, " = ref<").concat(component.refs[key].typeParameter, ">()"); }).join('\n'), appendValueToRefs((_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : '', component, options), !((_f = component.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code)
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.keys(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (key) { return "const ".concat(key, " = inject(").concat(component.context.get[key].name, ")"); }).join('\n'), (_b = Object.keys(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (key) { return "provide(".concat(component.context.set[key].name, ", ").concat(component.context.set[key].ref, ")"); }).join('\n'), (_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map(function (key) {
+        if (options.typescript) {
+            return "const ".concat(key, " = ref<").concat(component.refs[key].typeParameter, ">()");
+        }
+        else {
+            return "const ".concat(key, " = ref(null)");
+        }
+    }).join('\n'), appendValueToRefs((_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : '', component, options), !((_f = component.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code)
         ? ''
         : "onMounted(() => { ".concat(appendValueToRefs(component.hooks.onMount.code, component, options), "})"), !((_g = component.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
         ? ''

package/dist/src/helpers/transform-state-setters.d.ts

@@ -0,0 +1,14 @@
+import { types } from '@babel/core';
+declare type StateSetterTransformer = ({ path, propertyName, }: {
+    path: babel.NodePath<types.AssignmentExpression>;
+    propertyName: string;
+}) => types.CallExpression;
+/**
+ * Finds instances of state being set in `value`, and transforms them using the
+ * provided `transformer`.
+ */
+export declare const transformStateSetters: ({ value, transformer, }: {
+    value: string;
+    transformer: StateSetterTransformer;
+}) => string;
+export {};

package/dist/src/helpers/transform-state-setters.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformStateSetters = void 0;
+var core_1 = require("@babel/core");
+var babel_transform_1 = require("./babel-transform");
+/**
+ * Finds instances of state being set in `value`, and transforms them using the
+ * provided `transformer`.
+ */
+var transformStateSetters = function (_a) {
+    var value = _a.value, transformer = _a.transformer;
+    return (0, babel_transform_1.babelTransformExpression)(value, {
+        AssignmentExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isMemberExpression(node.left) &&
+                core_1.types.isIdentifier(node.left.object) &&
+                // TODO: utillity to properly trace this reference to the beginning
+                node.left.object.name === 'state') {
+                // TODO: ultimately support other property access like strings
+                var propertyName = node.left.property.name;
+                var newExpression = transformer({ path: path, propertyName: propertyName });
+                path.replaceWith(newExpression);
+            }
+        },
+    });
+};
+exports.transformStateSetters = transformStateSetters;