@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectClassString = void 0;
+// This should really be a preprocessor mapping the `class` attribute binding based on what other values have
+// to make this more pluggable
+const collectClassString = (json, options) => {
+    var _a, _b, _c;
+    const staticClasses = [];
+    if (json.properties.class) {
+        staticClasses.push(json.properties.class);
+        delete json.properties.class;
+    }
+    if (json.properties.className) {
+        staticClasses.push(json.properties.className);
+        delete json.properties.className;
+    }
+    const dynamicClasses = [];
+    if (typeof ((_a = json.bindings.class) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
+        dynamicClasses.push(json.bindings.class.code);
+        delete json.bindings.class;
+    }
+    if (typeof ((_b = json.bindings.className) === null || _b === void 0 ? void 0 : _b.code) === 'string') {
+        dynamicClasses.push(json.bindings.className.code);
+        delete json.bindings.className;
+    }
+    if (typeof ((_c = json.bindings.css) === null || _c === void 0 ? void 0 : _c.code) === 'string' &&
+        json.bindings.css.code.trim().length > 4 &&
+        options.stylesType === 'styled-components') {
+        dynamicClasses.push(`css(${json.bindings.css.code})`);
+    }
+    delete json.bindings.css;
+    const staticClassesString = staticClasses.join(' ');
+    const dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    const hasStaticClasses = Boolean(staticClasses.length);
+    const hasDynamicClasses = Boolean(dynamicClasses.length);
+    if (hasStaticClasses && !hasDynamicClasses) {
+        return `"${staticClassesString}"`;
+    }
+    if (hasDynamicClasses && !hasStaticClasses) {
+        return `{${dynamicClassesString}}`;
+    }
+    if (hasDynamicClasses && hasStaticClasses) {
+        return `{"${staticClassesString} " + ${dynamicClassesString}}`;
+    }
+    return null;
+};
+exports.collectClassString = collectClassString;

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

@@ -0,0 +1,4 @@
+import { TranspilerGenerator } from '../../types/transpiler';
+import { ToSolidOptions } from './types';
+export declare const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>>;
+export * from './types';

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

@@ -0,0 +1,264 @@
+"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;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToSolid = void 0;
+const bindings_1 = require("../../helpers/bindings");
+const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const get_components_used_1 = require("../../helpers/get-components-used");
+const get_refs_1 = require("../../helpers/get-refs");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const is_root_text_node_1 = require("../../helpers/is-root-text-node");
+const merge_options_1 = require("../../helpers/merge-options");
+const nullable_1 = require("../../helpers/nullable");
+const on_event_1 = require("../../helpers/on-event");
+const process_code_1 = require("../../helpers/plugins/process-code");
+const render_imports_1 = require("../../helpers/render-imports");
+const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const helpers_1 = require("../../helpers/styles/helpers");
+const Array_1 = require("fp-ts/lib/Array");
+const S = __importStar(require("fp-ts/string"));
+const hash_sum_1 = __importDefault(require("hash-sum"));
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const standalone_1 = require("prettier/standalone");
+const plugins_1 = require("../../modules/plugins");
+const context_1 = require("../helpers/context");
+const blocks_1 = require("./blocks");
+const state_1 = require("./state");
+const helpers_2 = require("./state/helpers");
+// Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
+function processDynamicComponents(json, options) {
+    let found = false;
+    (0, legacy_1.default)(json).forEach((node) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.name.includes('.') && !node.name.endsWith('.Provider')) {
+                node.bindings.component = (0, bindings_1.createSingleBinding)({ code: node.name });
+                node.name = 'Dynamic';
+                found = true;
+            }
+        }
+    });
+    return found;
+}
+function getContextString(component, options) {
+    let str = '';
+    for (const key in component.context.get) {
+        str += `
+      const ${key} = useContext(${component.context.get[key].name});
+    `;
+    }
+    return str;
+}
+const getRefsString = (json, options) => Array.from((0, get_refs_1.getRefs)(json))
+    .map((ref) => {
+    var _a;
+    // fix prettier issue when encounter `let props.ref`
+    // Prettier playground: https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAzArlMMCW0AEAsgJ4DCEAtgA7QIwAUVAThFQM5ICGUxAlPsAA6UfPgA2cGPmas2AOhxQq6GACU4qANzDRTSeiYj6O0fgA8i5VPx7UAXmAz2CpSvWoAhAF9RAegB8JqK8wl7CcAAeNExSACYanOhiUiTk1LSwmiAANCCsuNBsyKCcTCwA7gAKpQhFKJxi5ZzERbkARkycYADWkgDKnBRwADKKcMioDWxw7Z09-VRdigDmyDBM6DMg0xQ4axtbkVRwTDhDsA0AKidQpThwdZNi07lsKxIAiugQ8BNTWwArNgRPrvOBfH7jJBPF4gACO33glRY7GQIE4bAAtFA4HB4rEciB1pwcGIVmkKJw0Q0xIS3lBlhIAIIwdY4NoqOCVE6jHF-Z5bAAWMAoYgA6oKcPA2IswHA+rUpTgAG5S4hosBsVogZWbACSUHisD6YFOVBgTMNfRgxAk-NhMmmYs6VDRzAeJ2V41yimmMWRnGWlPtW0WTD9aJtxzYppw5sJzEUMDFOFiMEFyAAHAAGXJ6BE4PQBoNU6H-XIwThtFNpjNIABMuXQ00uVce5ZAcAobTx+OG3GW6EDcAAYhAmJTWStqSoICAvF4gA
+    if (ref.includes('.'))
+        return '';
+    const typeParameter = (options.typescript && ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.typeParameter)) || '';
+    return `let ${ref}${typeParameter ? ': ' + typeParameter : ''};`;
+})
+    .join('\n');
+function addProviderComponents(json, options) {
+    for (const key in json.context.set) {
+        const { name, value, ref } = json.context.set[key];
+        const bindingValue = value
+            ? (0, bindings_1.createSingleBinding)({ code: (0, get_state_object_string_1.stringifyContextValue)(value) })
+            : ref
+                ? (0, bindings_1.createSingleBinding)({ code: ref })
+                : undefined;
+        json.children = [
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: `${name}.Provider`,
+                children: json.children,
+                ...(bindingValue && { bindings: { value: bindingValue } }),
+            }),
+        ];
+    }
+}
+const DEFAULT_OPTIONS = {
+    state: 'signals',
+    stylesType: 'style-tag',
+};
+const componentToSolid = (passedOptions) => ({ component }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let json = (0, fast_clone_1.fastClone)(component);
+    const options = (0, merge_options_1.initializeOptions)({
+        target: 'solid',
+        component,
+        defaults: DEFAULT_OPTIONS,
+        userOptions: passedOptions,
+    });
+    options.plugins = [
+        ...(options.plugins || []),
+        (0, on_event_1.processOnEventHooksPlugin)(),
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+            switch (codeType) {
+                case 'state':
+                case 'context-set':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (c) => c;
+                case 'bindings':
+                case 'hooks':
+                case 'hooks-deps':
+                case 'hooks-deps-array':
+                case 'properties':
+                    return (0, helpers_2.updateStateCode)({
+                        component: json,
+                        options,
+                        updateSetters: codeType === 'properties' ? false : true,
+                    });
+            }
+        }),
+    ];
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    addProviderComponents(json, options);
+    const componentHasStyles = (0, helpers_1.hasCss)(json);
+    const hasCustomStyles = !!((_a = json.style) === null || _a === void 0 ? void 0 : _a.length);
+    const shouldInjectCustomStyles = hasCustomStyles && options.stylesType === 'styled-components';
+    const addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1 ||
+        options.stylesType === 'style-tag' ||
+        shouldInjectCustomStyles ||
+        (0, is_root_text_node_1.isRootTextNode)(json);
+    // we need to run this before we run the code processor plugin, so the dynamic component variables are transformed
+    const foundDynamicComponents = processDynamicComponents(json, options);
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    (0, strip_meta_properties_1.stripMetaProperties)(json);
+    const css = options.stylesType === 'style-tag' && (0, collect_css_1.collectCss)(json, { prefix: (0, hash_sum_1.default)(json) });
+    const state = (0, state_1.getState)({ json, options });
+    const componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
+    const hasShowComponent = componentsUsed.has('Show');
+    const hasForComponent = componentsUsed.has('For');
+    const solidJSImports = (0, Array_1.uniq)(S.Eq)([
+        (0, context_1.hasGetContext)(json) ? 'useContext' : undefined,
+        hasShowComponent ? 'Show' : undefined,
+        hasForComponent ? 'For' : undefined,
+        json.hooks.onMount.length ? 'onMount' : undefined,
+        ...(((_b = json.hooks.onUpdate) === null || _b === void 0 ? void 0 : _b.length) ? ['on', 'createEffect', 'createMemo'] : []),
+        ...((_c = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _c !== void 0 ? _c : []),
+    ].filter(nullable_1.checkIsDefined));
+    const storeImports = (_d = state === null || state === void 0 ? void 0 : state.import.store) !== null && _d !== void 0 ? _d : [];
+    const propType = json.propsTypeRef || 'any';
+    const propsArgs = `props${options.typescript ? `:${propType}` : ''}`;
+    let str = (0, dedent_1.dedent) `
+    ${solidJSImports.length > 0 ? `import { ${solidJSImports.join(', ')} } from 'solid-js';` : ''}
+    ${!foundDynamicComponents ? '' : `import { Dynamic } from 'solid-js/web';`}
+    ${storeImports.length > 0 ? `import { ${storeImports.join(', ')} } from 'solid-js/store';` : ''}
+    ${componentHasStyles && options.stylesType === 'styled-components'
+        ? 'import { css } from "solid-styled-components";'
+        : ``}
+    ${json.types && options.typescript ? json.types.join('\n') : ''}
+    ${(0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
+        component: json,
+        target: 'solid',
+    })}
+
+    function ${json.name}(${propsArgs}) {
+      ${(_e = state === null || state === void 0 ? void 0 : state.str) !== null && _e !== void 0 ? _e : ''}
+
+      ${getRefsString(json, options)}
+      ${getContextString(json, options)}
+      ${(_g = (_f = json.hooks.onInit) === null || _f === void 0 ? void 0 : _f.code) !== null && _g !== void 0 ? _g : ''}
+
+      ${json.hooks.onMount.map((hook) => `onMount(() => { ${hook.code} })`).join('\n')}
+      ${json.hooks.onUpdate
+        ? json.hooks.onUpdate
+            .map((hook, index) => {
+            // TO-DO: support `onUpdate` without `deps`
+            if (!hook.deps)
+                return '';
+            const hookName = `onUpdateFn_${index}`;
+            const depsArray = hook.deps
+                .slice(1, hook.deps.length - 1)
+                .split(',')
+                .map((x) => x.trim());
+            const getReactiveDepName = (dep) => {
+                const newLocal = dep.replace(/(\.|\?|\(|\)|\[|\])/g, '_');
+                return `${hookName}_${newLocal}`;
+            };
+            const needsMemo = (dep) => true;
+            const reactiveDepsWorkaround = depsArray
+                .filter(needsMemo)
+                .map((dep) => `const ${getReactiveDepName(dep)} = createMemo(() => ${dep});`)
+                .join('\n');
+            const depsArrayStr = depsArray
+                .map((x) => (needsMemo(x) ? `${getReactiveDepName(x)}()` : x))
+                .join(', ');
+            return `
+                    ${reactiveDepsWorkaround}
+                    function ${hookName}() { ${hook.code} };
+                    createEffect(on(() => [${depsArrayStr}], ${hookName}));
+                  `;
+        })
+            .join('\n')
+        : ''}
+
+      return (${addWrapper ? '<>' : ''}
+        ${json.children
+        .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+        .map((item) => (0, blocks_1.blockToSolid)(item, component, options, addWrapper))
+        .join('\n')}
+        ${options.stylesType === 'style-tag' && css && css.trim().length > 4
+        ? `<style>{\`${css}\`}</style>`
+        : ''}
+        ${shouldInjectCustomStyles ? `<style>{\`${json.style}\`}</style>` : ''}
+        ${addWrapper ? '</>' : ''})
+    }
+
+    export default ${json.name};
+  `;
+    if (options.plugins) {
+        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    if (options.prettier !== false) {
+        str = (0, standalone_1.format)(str, {
+            parser: 'typescript',
+            plugins: [require('prettier/parser-typescript'), require('prettier/parser-postcss')],
+        });
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
+};
+exports.componentToSolid = componentToSolid;
+__exportStar(require("./types"), exports);

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,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateStateCode = exports.getStateTypeForValue = exports.getStateSetterName = void 0;
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const capitalize_1 = require("../../../helpers/capitalize");
+const replace_identifiers_1 = require("../../../helpers/replace-identifiers");
+const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
+const transform_state_setters_1 = require("../../../helpers/transform-state-setters");
+const getStateSetterName = (stateName) => `set${(0, capitalize_1.capitalize)(stateName)}`;
+exports.getStateSetterName = getStateSetterName;
+const getStateTypeForValue = ({ value, component, options, }) => {
+    var _a, _b, _c, _d;
+    // e.g. state.useContent?.blocks[0].id => useContent
+    const extractStateSliceName = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value).split('.')[0].split('?')[0];
+    const stateOverrideForValue = (_d = (_c = (_b = (_a = component.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.solid) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d[extractStateSliceName];
+    const stateType = stateOverrideForValue || options.state;
+    return stateType;
+};
+exports.getStateTypeForValue = getStateTypeForValue;
+const getNewStateSetterExpression = (stateType) => ({ path, propertyName, }) => {
+    /**
+     * passes the value to the setter function
+     * ```ts
+     * // BEFORE
+     * state.count = newCount
+     * // AFTER
+     * setCount(newCount)
+     * ```
+     */
+    const callValueSetter = (args) => 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]));
+    }
+};
+const updateStateSettersInCode = ({ options, component }) => (value) => {
+    const stateType = (0, exports.getStateTypeForValue)({ value, component, options });
+    switch (stateType) {
+        case 'mutable':
+            return value;
+        case 'store':
+        case 'signals':
+            try {
+                return (0, transform_state_setters_1.transformStateSetters)({
+                    value,
+                    transformer: getNewStateSetterExpression(stateType),
+                });
+            }
+            catch (error) {
+                console.error(`[Solid.js]: could not update state setters in ${stateType} code`, value);
+                throw error;
+            }
+    }
+};
+const updateStateGettersInCode = (options, component) => (0, replace_identifiers_1.replaceStateIdentifier)((name) => {
+    const stateType = (0, exports.getStateTypeForValue)({ value: name, component, options });
+    const 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 `${name}()`;
+            }
+            else {
+                return name;
+            }
+        case 'store':
+        case 'mutable':
+            return name;
+    }
+});
+const updateStateCode = ({ options, component, updateSetters = true, }) => (0, function_1.flow)(updateSetters ? updateStateSettersInCode({ options, component }) : function_1.identity, updateStateGettersInCode(options, component), (x) => 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,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSignalsCode = void 0;
+const function_1 = require("fp-ts/lib/function");
+const patterns_1 = require("../../../helpers/patterns");
+const helpers_1 = require("./helpers");
+const processSignalStateValue = ({ options, component, }) => {
+    const mapValue = (0, helpers_1.updateStateCode)({ options, component });
+    return ([key, stateVal]) => {
+        if (!stateVal) {
+            return '';
+        }
+        const getDefaultCase = () => (0, function_1.pipe)(value, mapValue, (x) => `const [${key}, ${(0, helpers_1.getStateSetterName)(key)}] = createSignal(${x})`);
+        const value = stateVal.code;
+        const type = stateVal.type;
+        if (typeof value === 'string') {
+            switch (type) {
+                case 'getter':
+                    return (0, function_1.pipe)(value, mapValue, patterns_1.extractGetterCodeBlock, (x) => `const ${key} = createMemo(() => {${x}})`);
+                case 'function':
+                    return mapValue(value);
+                case 'method':
+                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+                default:
+                    return getDefaultCase();
+            }
+        }
+        else {
+            return getDefaultCase();
+        }
+    };
+};
+const LINE_ITEM_DELIMITER = '\n\n\n';
+const getSignalsCode = ({ json, options, state, }) => Object.entries(state)
+    .map(processSignalStateValue({ options, component: json }))
+    /**
+     * We need to sort state so that signals are at the top.
+     */
+    .sort((a, b) => {
+    const aHasSignal = a.includes('createSignal(');
+    const 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';
+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,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getState = void 0;
+const function_1 = require("fp-ts/lib/function");
+const get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+const state_1 = require("../../../helpers/state");
+const helpers_1 = require("./helpers");
+const signals_1 = require("./signals");
+const store_1 = require("./store");
+const getState = ({ json, options, }) => {
+    const 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
+    const { mutable, signal, store } = Object.entries(json.state).reduce((acc, [key, value]) => {
+        const stateType = (0, helpers_1.getStateTypeForValue)({ value: key, component: json, options });
+        switch (stateType) {
+            case 'mutable':
+                return { ...acc, mutable: { ...acc.mutable, [key]: value } };
+            case 'signals':
+                return { ...acc, signal: { ...acc.signal, [key]: value } };
+            case 'store':
+                return { ...acc, store: { ...acc.store, [key]: value } };
+        }
+    }, { mutable: {}, signal: {}, store: {} });
+    const hasMutableState = Object.keys(mutable).length > 0;
+    const hasSignalState = Object.keys(signal).length > 0;
+    const hasStoreState = Object.keys(store).length > 0;
+    const mutableStateStr = hasMutableState
+        ? (0, function_1.pipe)(mutable, get_state_object_string_1.getMemberObjectString, (str) => `const state = createMutable(${str});`)
+        : '';
+    const signalStateStr = hasSignalState ? (0, signals_1.getSignalsCode)({ json, options, state: signal }) : '';
+    const storeStateStr = hasStoreState ? (0, store_1.getStoreCode)({ json, options, state: store }) : '';
+    const stateStr = `
+  ${mutableStateStr}
+  ${signalStateStr}
+  ${storeStateStr}
+  `;
+    const importObj = {
+        store: [
+            ...(hasMutableState ? ['createMutable'] : []),
+            ...(hasStoreState ? ['createStore', 'reconcile'] : []),
+        ],
+        solidjs: [
+            ...(hasSignalState ? ['createSignal', 'createMemo'] : []),
+            ...(hasStoreState ? ['createEffect', 'on'] : []),
+        ],
+    };
+    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,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStoreCode = void 0;
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const babel_transform_1 = require("../../../helpers/babel-transform");
+const capitalize_1 = require("../../../helpers/capitalize");
+const patterns_1 = require("../../../helpers/patterns");
+const helpers_1 = require("./helpers");
+const collectUsedStateAndPropsInFunction = (fnValue) => {
+    const stateUsed = new Set();
+    const propsUsed = new Set();
+    (0, babel_transform_1.babelTransformExpression)(fnValue, {
+        MemberExpression(path) {
+            const { node } = path;
+            if (core_1.types.isIdentifier(node.object)) {
+                if (core_1.types.isIdentifier(node.property)) {
+                    if (node.object.name === 'state') {
+                        stateUsed.add(`state.${node.property.name}`);
+                    }
+                    else if (node.object.name === 'props') {
+                        propsUsed.add(`props.${node.property.name}`);
+                    }
+                }
+            }
+        },
+    });
+    return { stateUsed, propsUsed };
+};
+const getStoreCode = ({ json: component, options, state, }) => {
+    const mapValue = (0, helpers_1.updateStateCode)({ options, component });
+    const stateUpdater = ([key, stateVal]) => {
+        if (!stateVal) {
+            return '';
+        }
+        const getCreateStoreStr = (initialValue) => `const [${key}, ${(0, helpers_1.getStateSetterName)(key)}] = createStore(${initialValue})`;
+        const getDefaultCase = () => (0, function_1.pipe)(value, mapValue, getCreateStoreStr);
+        const value = stateVal.code;
+        const type = stateVal.type;
+        if (typeof value === 'string') {
+            switch (type) {
+                case 'getter':
+                    const getterValueAsFunction = (0, patterns_1.replaceGetterWithFunction)(value);
+                    const { stateUsed, propsUsed } = collectUsedStateAndPropsInFunction(getterValueAsFunction);
+                    const fnValueWithMappedRefs = mapValue(getterValueAsFunction);
+                    const FUNCTION_NAME = `update${(0, capitalize_1.capitalize)(key)}`;
+                    const deps = [
+                        ...Array.from(stateUsed).map((0, helpers_1.updateStateCode)({
+                            options,
+                            component,
+                            // there are no setters in deps
+                            updateSetters: false,
+                        })),
+                        ...Array.from(propsUsed),
+                    ].join(', ');
+                    return `
+          const ${FUNCTION_NAME} = ${fnValueWithMappedRefs}
+          ${getCreateStoreStr(`${FUNCTION_NAME}()`)}
+          createEffect(on(() => [${deps}], () => ${(0, helpers_1.getStateSetterName)(key)}(reconcile(${FUNCTION_NAME}()))))
+          `;
+                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;
+const LINE_ITEM_DELIMITER = '\n\n\n';

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

@@ -0,0 +1,10 @@
+import { Dictionary } from '../../helpers/typescript';
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export type SolidState = 'mutable' | 'signals' | 'store';
+export interface ToSolidOptions extends BaseTranspilerOptions {
+    state: SolidState;
+    stylesType?: 'styled-components' | 'style-tag';
+}
+export type SolidMetadata = {
+    state?: Dictionary<SolidState>;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });