@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,19 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -37,52 +22,43 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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)) {
-            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.componentToSolid = void 0;
-var bindings_1 = require("../../helpers/bindings");
-var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
-var dedent_1 = require("../../helpers/dedent");
-var fast_clone_1 = require("../../helpers/fast-clone");
-var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var get_components_used_1 = require("../../helpers/get-components-used");
-var get_refs_1 = require("../../helpers/get-refs");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var is_root_text_node_1 = require("../../helpers/is-root-text-node");
-var merge_options_1 = require("../../helpers/merge-options");
-var nullable_1 = require("../../helpers/nullable");
-var on_event_1 = require("../../helpers/on-event");
-var process_code_1 = require("../../helpers/plugins/process-code");
-var render_imports_1 = require("../../helpers/render-imports");
-var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var collect_css_1 = require("../../helpers/styles/collect-css");
-var helpers_1 = require("../../helpers/styles/helpers");
-var Array_1 = require("fp-ts/lib/Array");
-var S = __importStar(require("fp-ts/string"));
-var hash_sum_1 = __importDefault(require("hash-sum"));
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var standalone_1 = require("prettier/standalone");
-var plugins_1 = require("../../modules/plugins");
-var context_1 = require("../helpers/context");
-var blocks_1 = require("./blocks");
-var state_1 = require("./state");
-var helpers_2 = require("./state/helpers");
+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) {
-    var found = false;
-    (0, legacy_1.default)(json).forEach(function (node) {
+    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 });
@@ -94,157 +70,190 @@ function processDynamicComponents(json, options) {
     return found;
 }
 function getContextString(component, options) {
-    var str = '';
-    for (var key in component.context.get) {
-        str += "\n      const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n    ");
+    let str = '';
+    for (const key in component.context.get) {
+        str += `
+      const ${key} = useContext(${component.context.get[key].name});
+    `;
     }
     return str;
 }
-var getRefsString = function (json, options) {
-    return Array.from((0, get_refs_1.getRefs)(json))
-        .map(function (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 '';
-        var typeParameter = (options.typescript && ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.typeParameter)) || '';
-        return "let ".concat(ref).concat(typeParameter ? ': ' + typeParameter : '', ";");
-    })
-        .join('\n');
-};
+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 (var key in json.context.set) {
-        var _a = json.context.set[key], name_1 = _a.name, value = _a.value, ref = _a.ref;
-        var bindingValue = value
+    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)(__assign({ name: "".concat(name_1, ".Provider"), children: json.children }, (bindingValue && { bindings: { value: bindingValue } }))),
+            (0, create_mitosis_node_1.createMitosisNode)({
+                name: `${name}.Provider`,
+                children: json.children,
+                ...(bindingValue && { bindings: { value: bindingValue } }),
+            }),
         ];
     }
 }
-var DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS = {
     state: 'signals',
     stylesType: 'style-tag',
 };
-var componentToSolid = function (passedOptions) {
-    return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h;
-        var component = _a.component;
-        var json = (0, fast_clone_1.fastClone)(component);
-        var options = (0, merge_options_1.initializeOptions)({
-            target: 'solid',
-            component: component,
-            defaults: DEFAULT_OPTIONS,
-            userOptions: passedOptions,
+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 '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)({ component, json: item, options }))
+        .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')],
         });
-        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
-            (0, on_event_1.processOnEventHooksPlugin)(),
-            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
-                switch (codeType) {
-                    case 'state':
-                    case 'context-set':
-                    case 'dynamic-jsx-elements':
-                    case 'types':
-                        return function (c) { return c; };
-                    case 'bindings':
-                    case 'hooks':
-                    case 'hooks-deps':
-                    case 'properties':
-                        return (0, helpers_2.updateStateCode)({
-                            component: json,
-                            options: options,
-                            updateSetters: codeType === 'properties' ? false : true,
-                        });
-                }
-            }),
-        ], false);
-        if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        addProviderComponents(json, options);
-        var componentHasStyles = (0, helpers_1.hasCss)(json);
-        var hasCustomStyles = !!((_b = json.style) === null || _b === void 0 ? void 0 : _b.length);
-        var shouldInjectCustomStyles = hasCustomStyles && options.stylesType === 'styled-components';
-        var 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
-        var foundDynamicComponents = processDynamicComponents(json, options);
-        if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        (0, strip_meta_properties_1.stripMetaProperties)(json);
-        var css = options.stylesType === 'style-tag' && (0, collect_css_1.collectCss)(json, { prefix: (0, hash_sum_1.default)(json) });
-        var state = (0, state_1.getState)({ json: json, options: options });
-        var componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
-        var hasShowComponent = componentsUsed.has('Show');
-        var hasForComponent = componentsUsed.has('For');
-        var solidJSImports = (0, Array_1.uniq)(S.Eq)(__spreadArray(__spreadArray([
-            (0, context_1.hasGetContext)(json) ? 'useContext' : undefined,
-            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', '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) : '');
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\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'
-            ? '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',
-        }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), (_h = (_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code) !== null && _h !== void 0 ? _h : '', json.hooks.onMount.map(function (hook) { return "onMount(() => { ".concat(hook.code, " })"); }).join('\n'), json.hooks.onUpdate
-            ? json.hooks.onUpdate
-                .map(function (hook, index) {
-                // 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
-            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, blocks_1.blockToSolid)({ component: component, json: item, options: options }); })
-            .join('\n'), options.stylesType === 'style-tag' && css && css.trim().length > 4
-            ? "<style>{`".concat(css, "`}</style>")
-            : '', shouldInjectCustomStyles ? "<style>{`".concat(json.style, "`}</style>") : '', addWrapper ? '</>' : '', json.name);
-        if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)({ json: 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: json, code: str, plugins: options.plugins });
-        }
-        return str;
-    };
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
 };
 exports.componentToSolid = componentToSolid;
-var templateObject_1;

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

@@ -1,102 +1,88 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateStateCode = exports.getStateTypeForValue = exports.getStateSetterName = void 0;
-var core_1 = require("@babel/core");
-var function_1 = require("fp-ts/lib/function");
-var capitalize_1 = require("../../../helpers/capitalize");
-var replace_identifiers_1 = require("../../../helpers/replace-identifiers");
-var strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
-var transform_state_setters_1 = require("../../../helpers/transform-state-setters");
-var getStateSetterName = function (stateName) { return "set".concat((0, capitalize_1.capitalize)(stateName)); };
+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;
-var getStateTypeForValue = function (_a) {
-    var _b, _c, _d, _e;
-    var value = _a.value, component = _a.component, options = _a.options;
+const getStateTypeForValue = ({ value, component, options, }) => {
+    var _a, _b, _c, _d;
     // 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;
+    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;
-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]));
-        }
-    };
+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]));
+    }
 };
-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;
-                }
-        }
-    };
+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;
+            }
+    }
 };
-var updateStateGettersInCode = function (options, component) {
-    return (0, replace_identifiers_1.replaceStateIdentifier)(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':
+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;
-        }
-    });
-};
-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(); });
-};
+            }
+        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;