@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,8 +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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,86 +22,78 @@ 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.componentToSvelte = void 0;
-var babel_transform_1 = require("../../helpers/babel-transform");
-var dedent_1 = require("../../helpers/dedent");
-var fast_clone_1 = require("../../helpers/fast-clone");
-var get_props_1 = require("../../helpers/get-props");
-var get_refs_1 = require("../../helpers/get-refs");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var getters_to_functions_1 = require("../../helpers/getters-to-functions");
-var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var merge_options_1 = require("../../helpers/merge-options");
-var on_event_1 = require("../../helpers/on-event");
-var patterns_1 = require("../../helpers/patterns");
-var process_code_1 = require("../../helpers/plugins/process-code");
-var render_imports_1 = require("../../helpers/render-imports");
-var slots_1 = require("../../helpers/slots");
-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 function_1 = require("fp-ts/lib/function");
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var prettierPluginSvelte = __importStar(require("prettier-plugin-svelte"));
-var parser_babel_1 = __importDefault(require("prettier/parser-babel"));
-var parser_html_1 = __importDefault(require("prettier/parser-html"));
-var parser_postcss_1 = __importDefault(require("prettier/parser-postcss"));
-var parser_typescript_1 = __importDefault(require("prettier/parser-typescript"));
-var standalone_1 = require("prettier/standalone");
-var plugins_1 = require("../../modules/plugins");
-var context_1 = require("../helpers/context");
-var functions_1 = require("../helpers/functions");
-var blocks_1 = require("./blocks");
-var helpers_2 = require("./helpers");
-var getContextCode = function (json) {
-    var contextGetters = json.context.get;
+const babel_transform_1 = require("../../helpers/babel-transform");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const get_props_1 = require("../../helpers/get-props");
+const get_refs_1 = require("../../helpers/get-refs");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const getters_to_functions_1 = require("../../helpers/getters-to-functions");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const merge_options_1 = require("../../helpers/merge-options");
+const on_event_1 = require("../../helpers/on-event");
+const patterns_1 = require("../../helpers/patterns");
+const process_code_1 = require("../../helpers/plugins/process-code");
+const render_imports_1 = require("../../helpers/render-imports");
+const slots_1 = require("../../helpers/slots");
+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 function_1 = require("fp-ts/lib/function");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const prettierPluginSvelte = __importStar(require("prettier-plugin-svelte"));
+const parser_babel_1 = __importDefault(require("prettier/parser-babel"));
+const parser_html_1 = __importDefault(require("prettier/parser-html"));
+const parser_postcss_1 = __importDefault(require("prettier/parser-postcss"));
+const parser_typescript_1 = __importDefault(require("prettier/parser-typescript"));
+const standalone_1 = require("prettier/standalone");
+const plugins_1 = require("../../modules/plugins");
+const context_1 = require("../helpers/context");
+const functions_1 = require("../helpers/functions");
+const blocks_1 = require("./blocks");
+const helpers_2 = require("./helpers");
+const getContextCode = (json) => {
+    const contextGetters = json.context.get;
     return Object.entries(contextGetters)
-        .map(function (_a) {
-        var key = _a[0], context = _a[1];
-        var name = context.name;
-        var contextType = (0, context_1.getContextType)({ component: json, context: context });
+        .map(([key, context]) => {
+        const { name } = context;
+        const contextType = (0, context_1.getContextType)({ component: json, context });
         switch (contextType) {
             case 'reactive':
             case 'normal':
-                return "let ".concat(key, " = getContext(").concat(name, ".key);");
+                return `let ${key} = getContext(${name}.key);`;
         }
     })
         .join('\n');
 };
-var setContextCode = function (_a) {
-    var json = _a.json, options = _a.options;
-    var processCode = (0, helpers_2.stripStateAndProps)({ json: json, options: options });
+const setContextCode = ({ json, options, }) => {
+    const processCode = (0, helpers_2.stripStateAndProps)({ json, options });
     return Object.values(json.context.set)
-        .map(function (context) {
-        var value = context.value, name = context.name, ref = context.ref;
-        var nameIsStringLiteral = (name.startsWith("'") && name.endsWith("'")) ||
+        .map((context) => {
+        const { value, name, ref } = context;
+        const nameIsStringLiteral = (name.startsWith("'") && name.endsWith("'")) ||
             (name.startsWith('"') && name.endsWith('"'));
-        var key = nameIsStringLiteral ? name : "".concat(name, ".key");
-        var valueStr = value
+        const key = nameIsStringLiteral ? name : `${name}.key`;
+        const valueStr = value
             ? processCode((0, get_state_object_string_1.stringifyContextValue)(value))
             : ref
                 ? processCode(ref)
                 : 'undefined';
-        var contextType = (0, context_1.getContextType)({ component: json, context: context });
+        const contextType = (0, context_1.getContextType)({ component: json, context });
         switch (contextType) {
             case 'normal':
-                return "setContext(".concat(key, ", ").concat(valueStr, ");");
+                return `setContext(${key}, ${valueStr});`;
             case 'reactive':
-                var storeName = "".concat(name, "ContextStoreValue");
-                return "\n            const ".concat(storeName, " = writable(").concat(valueStr, ");\n            setContext(").concat(key, ", ").concat(storeName, ");\n          ");
+                const storeName = `${name}ContextStoreValue`;
+                return `
+            const ${storeName} = writable(${valueStr});
+            setContext(${key}, ${storeName});
+          `;
         }
     })
         .join('\n');
@@ -117,7 +105,7 @@ var setContextCode = function (_a) {
  *    <input bind:value={state.name}/>
  * when easily identified, for more idiomatic svelte code
  */
-var useBindValue = function (json, options) {
+const useBindValue = (json, options) => {
     function normalizeStr(str) {
         return str
             .trim()
@@ -129,10 +117,10 @@ var useBindValue = function (json, options) {
     }
     (0, legacy_1.default)(json).forEach(function (item) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            var _a = item.bindings, value = _a.value, onChange = _a.onChange;
+            const { value, onChange } = item.bindings;
             if (value && onChange) {
-                var _b = onChange.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
-                if (normalizeStr(onChange.code) === "".concat(normalizeStr(value.code), "=").concat(cusArgs[0], ".target.value")) {
+                const { arguments: cusArgs = ['event'] } = onChange;
+                if (normalizeStr(onChange.code) === `${normalizeStr(value.code)}=${cusArgs[0]}.target.value`) {
                     delete item.bindings.value;
                     delete item.bindings.onChange;
                     item.bindings['bind:value'] = value;
@@ -141,236 +129,282 @@ var useBindValue = function (json, options) {
         }
     });
 };
-var DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS = {
     stateType: 'variables',
     prettier: true,
 };
-var componentToSvelte = function (userProvidedOptions) {
-    return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var component = _a.component;
-        var options = (0, merge_options_1.initializeOptions)({
-            target: 'svelte',
-            component: component,
-            defaults: DEFAULT_OPTIONS,
-            userOptions: userProvidedOptions,
-        });
-        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
-            (0, on_event_1.processOnEventHooksPlugin)(),
-            functions_1.FUNCTION_HACK_PLUGIN,
-            // Strip types from any JS code that ends up in the template, because Svelte does not support TS code in templates.
-            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
-                switch (codeType) {
-                    case 'bindings':
-                    case 'properties':
-                        return babel_transform_1.convertTypeScriptToJS;
-                    case 'hooks':
-                    case 'hooks-deps':
-                    case 'state':
-                    case 'context-set':
-                    case 'dynamic-jsx-elements':
-                    case 'types':
-                        return function (x) { return x; };
-                }
-            }),
-            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
-                switch (codeType) {
-                    case 'hooks':
-                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), babel_transform_1.babelTransformCode);
-                    case 'bindings':
-                    case 'hooks-deps':
-                    case 'state':
-                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), patterns_1.stripGetter);
-                    case 'properties':
-                    case 'context-set':
-                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }));
-                    case 'dynamic-jsx-elements':
-                    case 'types':
-                        return function (x) { return x; };
-                }
-            }),
-        ], false);
-        // Make a copy we can safely mutate, similar to babel's toolchain
-        var json = (0, fast_clone_1.fastClone)(component);
-        json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
-        useBindValue(json, options);
-        (0, getters_to_functions_1.gettersToFunctions)(json);
-        var filteredProps = Array.from((0, get_props_1.getProps)(json))
-            .filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); })
-            // map $prop to prop for reactive state
-            .map(function (x) { return (x.startsWith('$') ? x.slice(1) : x); });
-        // this helps make sure we don't have duplicate props
-        var props = Array.from(new Set(filteredProps));
-        var refs = Array.from((0, get_refs_1.getRefs)(json))
-            .map((0, helpers_2.stripStateAndProps)({ json: json, options: options }))
-            .filter(function (x) { return !props.includes(x); });
-        json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
-        var css = (0, collect_css_1.collectCss)(json);
-        (0, strip_meta_properties_1.stripMetaProperties)(json);
-        var usesWritable = false;
-        var dataString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-            data: true,
-            functions: false,
-            getters: false,
-            format: options.stateType === 'proxies' ? 'object' : 'variables',
-            keyPrefix: options.stateType === 'variables' ? 'let ' : '',
-            valueMapper: function (code, _t, _p, key) {
-                var _a;
-                if (((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.propertyType) === 'reactive') {
-                    usesWritable = true;
-                    return "writable(".concat(code, ")");
-                }
-                return code;
-            },
-        }), babel_transform_1.babelTransformCode);
-        var getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-            data: false,
-            getters: true,
-            functions: false,
-            format: 'variables',
-            keyPrefix: '$: ',
-            valueMapper: function (code) {
-                return code
-                    .trim()
-                    .replace(/^([a-zA-Z_\$0-9]+)/, '$1 = ')
-                    .replace(/\)/, ') => ');
-            },
-        }), babel_transform_1.babelTransformCode);
-        var functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-            data: false,
-            getters: false,
-            functions: true,
-            format: 'variables',
-        }), babel_transform_1.babelTransformCode);
-        var hasData = dataString.length > 4;
-        var str = '';
-        var tsLangAttribute = options.typescript ? "lang='ts'" : '';
-        if (options.typescript && ((_b = json.types) === null || _b === void 0 ? void 0 : _b.length)) {
-            str += (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <script context='module' ", ">\n        ", "\n      </script>\n      \n\n      \n\n      "], ["\n      <script context='module' ", ">\n        ", "\n      </script>\n      \\n\n      \\n\n      "])), tsLangAttribute, json.types ? json.types.join('\n\n') + '\n' : '');
-        }
-        // prepare svelte imports
-        var svelteImports = [];
-        var svelteStoreImports = [];
-        if (json.hooks.onMount.length) {
-            svelteImports.push('onMount');
-        }
-        if ((_d = (_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.filter(function (x) { return !x.deps; })) === null || _d === void 0 ? void 0 : _d.length) {
-            svelteImports.push('afterUpdate');
-        }
-        if ((_f = (_e = json.hooks.onUnMount) === null || _e === void 0 ? void 0 : _e.code) === null || _f === void 0 ? void 0 : _f.length) {
-            svelteImports.push('onDestroy');
+const componentToSvelte = (userProvidedOptions) => ({ component }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const options = (0, merge_options_1.initializeOptions)({
+        target: 'svelte',
+        component,
+        defaults: DEFAULT_OPTIONS,
+        userOptions: userProvidedOptions,
+    });
+    options.plugins = [
+        ...(options.plugins || []),
+        (0, on_event_1.processOnEventHooksPlugin)(),
+        functions_1.FUNCTION_HACK_PLUGIN,
+        // Strip types from any JS code that ends up in the template, because Svelte does not support TS code in templates.
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+            switch (codeType) {
+                case 'bindings':
+                case 'properties':
+                    return babel_transform_1.convertTypeScriptToJS;
+                case 'hooks':
+                case 'hooks-deps':
+                case 'state':
+                case 'context-set':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (x) => x;
+            }
+        }),
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+            switch (codeType) {
+                case 'hooks':
+                    return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json, options }), babel_transform_1.babelTransformCode);
+                case 'bindings':
+                case 'hooks-deps':
+                case 'state':
+                    return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json, options }), patterns_1.stripGetter);
+                case 'properties':
+                case 'context-set':
+                    return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json, options }));
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (x) => x;
+            }
+        }),
+    ];
+    // Make a copy we can safely mutate, similar to babel's toolchain
+    let json = (0, fast_clone_1.fastClone)(component);
+    json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    useBindValue(json, options);
+    (0, getters_to_functions_1.gettersToFunctions)(json);
+    const filteredProps = Array.from((0, get_props_1.getProps)(json))
+        .filter((prop) => !(0, slots_1.isSlotProperty)(prop))
+        // map $prop to prop for reactive state
+        .map((x) => (x.startsWith('$') ? x.slice(1) : x));
+    // this helps make sure we don't have duplicate props
+    const props = Array.from(new Set(filteredProps));
+    const refs = Array.from((0, get_refs_1.getRefs)(json))
+        .map((0, helpers_2.stripStateAndProps)({ json, options }))
+        .filter((x) => !props.includes(x));
+    json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    const css = (0, collect_css_1.collectCss)(json);
+    (0, strip_meta_properties_1.stripMetaProperties)(json);
+    let usesWritable = false;
+    const dataString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        data: true,
+        functions: false,
+        getters: false,
+        format: options.stateType === 'proxies' ? 'object' : 'variables',
+        keyPrefix: options.stateType === 'variables' ? 'let ' : '',
+        valueMapper: (code, _t, _p, key) => {
+            var _a;
+            if (((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.propertyType) === 'reactive') {
+                usesWritable = true;
+                return `writable(${code})`;
+            }
+            return code;
+        },
+    }), babel_transform_1.babelTransformCode);
+    const getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        data: false,
+        getters: true,
+        functions: false,
+        format: 'variables',
+        keyPrefix: '$: ',
+        valueMapper: (code) => {
+            return code
+                .trim()
+                .replace(/^([a-zA-Z_\$0-9]+)/, '$1 = ')
+                .replace(/\)/, ') => ');
+        },
+    }), babel_transform_1.babelTransformCode);
+    const functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        data: false,
+        getters: false,
+        functions: true,
+        format: 'variables',
+    }), babel_transform_1.babelTransformCode);
+    const hasData = dataString.length > 4;
+    let str = '';
+    const tsLangAttribute = options.typescript ? `lang='ts'` : '';
+    if (options.typescript && ((_a = json.types) === null || _a === void 0 ? void 0 : _a.length)) {
+        str += (0, dedent_1.dedent) `
+      <script context='module' ${tsLangAttribute}>
+        ${json.types ? json.types.join('\n\n') + '\n' : ''}
+      </script>
+      \n
+      \n
+      `;
+    }
+    // prepare svelte imports
+    let svelteImports = [];
+    let svelteStoreImports = [];
+    if (json.hooks.onMount.length) {
+        svelteImports.push('onMount');
+    }
+    if ((_c = (_b = json.hooks.onUpdate) === null || _b === void 0 ? void 0 : _b.filter((x) => !x.deps)) === null || _c === void 0 ? void 0 : _c.length) {
+        svelteImports.push('afterUpdate');
+    }
+    if ((_e = (_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) === null || _e === void 0 ? void 0 : _e.length) {
+        svelteImports.push('onDestroy');
+    }
+    if ((0, context_1.hasGetContext)(component)) {
+        svelteImports.push('getContext');
+    }
+    if ((0, context_1.hasSetContext)(component)) {
+        svelteImports.push('setContext');
+    }
+    if (usesWritable) {
+        svelteStoreImports.push('writable');
+    }
+    str += (0, dedent_1.dedent) `
+      <script ${tsLangAttribute}>
+      ${!svelteImports.length ? '' : `import { ${svelteImports.sort().join(', ')} } from 'svelte'`}
+      ${!svelteStoreImports.length
+        ? ''
+        : `import { ${svelteStoreImports.sort().join(', ')} } from 'svelte/store'`}
+
+      ${(0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
+        component: json,
+        target: 'svelte',
+    })}
+
+      ${!hasData || options.stateType === 'variables' ? '' : `import onChange from 'on-change'`}
+      ${props
+        .map((name) => {
+        var _a, _b, _c;
+        if (name === 'children') {
+            return '';
         }
-        if ((0, context_1.hasGetContext)(component)) {
-            svelteImports.push('getContext');
+        let propDeclaration = `export let ${name}`;
+        if (options.typescript && json.propsTypeRef && json.propsTypeRef !== 'any') {
+            propDeclaration += `: ${json.propsTypeRef.split(' |')[0]}['${name}']`;
         }
-        if ((0, context_1.hasSetContext)(component)) {
-            svelteImports.push('setContext');
+        if ((_b = (_a = json.props) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.optional) {
+            propDeclaration += `= undefined`;
         }
-        if (usesWritable) {
-            svelteStoreImports.push('writable');
+        if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
+            propDeclaration += `=${(_c = json.defaultProps[name]) === null || _c === void 0 ? void 0 : _c.code}`;
         }
-        str += (0, dedent_1.dedent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      <script ", ">\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    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      "
-            // https://github.com/sveltejs/svelte/issues/7311
-            , "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      "
-            // make sure this is after all other state/code is initialized
-            , "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), !svelteStoreImports.length
-            ? ''
-            : "import { ".concat(svelteStoreImports.sort().join(', '), " } from 'svelte/store'"), (0, render_imports_1.renderPreComponent)({
-            explicitImportFileExtension: options.explicitImportFileExtension,
-            component: json,
-            target: 'svelte',
-        }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
-            .map(function (name) {
-            var _a, _b, _c;
-            if (name === 'children') {
-                return '';
-            }
-            var propDeclaration = "export let ".concat(name);
-            if (options.typescript && json.propsTypeRef && json.propsTypeRef !== 'any') {
-                propDeclaration += ": ".concat(json.propsTypeRef.split(' |')[0], "['").concat(name, "']");
-            }
-            if ((_b = (_a = json.props) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.optional) {
-                propDeclaration += "= undefined";
-            }
-            if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
-                propDeclaration += "=".concat((_c = json.defaultProps[name]) === null || _c === void 0 ? void 0 : _c.code);
-            }
-            propDeclaration += ';';
-            return propDeclaration;
-        })
-            .join('\n'), 
-        // https://github.com/sveltejs/svelte/issues/7311
-        (0, helpers_1.hasStyle)(json)
-            ? (0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        \tfunction stringifyStyles(stylesObj) {\n            let styles = '';\n            for (let key in stylesObj) {\n              const dashedKey = key.replace(/[A-Z]/g, function(match) {\n                return '-' + match.toLowerCase();\n              });\n              styles += dashedKey + \":\" + stylesObj[key] + \";\";\n            }\n            return styles;\n          }\n      "], ["\n        \tfunction stringifyStyles(stylesObj) {\n            let styles = '';\n            for (let key in stylesObj) {\n              const dashedKey = key.replace(/[A-Z]/g, function(match) {\n                return '-' + match.toLowerCase();\n              });\n              styles += dashedKey + \":\" + stylesObj[key] + \";\";\n            }\n            return styles;\n          }\n      "]))) : '', getContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat(ref); }).join('\n'), options.stateType === 'proxies'
-            ? dataString.length < 4
-                ? ''
-                : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, (_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'), ((_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map(function (_a, index) {
-            var code = _a.code, deps = _a.deps;
-            if (!deps) {
-                return "afterUpdate(() => { ".concat(code, " });");
+        propDeclaration += ';';
+        return propDeclaration;
+    })
+        .join('\n')}
+      ${
+    // https://github.com/sveltejs/svelte/issues/7311
+    (0, helpers_1.hasStyle)(json)
+        ? (0, dedent_1.dedent) `
+        	function stringifyStyles(stylesObj) {
+            let styles = '';
+            for (let key in stylesObj) {
+              const dashedKey = key.replace(/[A-Z]/g, function(match) {
+                return '-' + match.toLowerCase();
+              });
+              styles += dashedKey + ":" + stylesObj[key] + ";";
             }
-            var fnName = "onUpdateFn_".concat(index);
-            var depsArray = deps
-                .slice(1, deps.length - 1)
-                .split(',')
-                .map(function (x) { return x.trim(); });
-            var getReactiveDepName = function (dep) {
-                return "".concat(fnName, "_").concat(dep.slice(1).replace(/(\.|\?)/g, '_'));
-            };
-            var isStoreAccessDep = function (dep) { return dep.startsWith('$'); };
-            var reactiveDepsWorkaround = depsArray
-                .filter(isStoreAccessDep)
-                .map(function (dep) { return "$: ".concat(getReactiveDepName(dep), " = ").concat(dep, ";"); })
-                .join('\n');
-            var depsArrayStr = depsArray
-                .map(function (x) { return (isStoreAccessDep(x) ? getReactiveDepName(x) : x); })
-                .join(', ');
-            /**
-             * We create a reactive value for each `onUpdate`'s dependency that
-             * accesses a store so that Svelte has accurate dependency tracking.
-             *
-             * Otherwise, if the dependency is a value within a store, Svelte will
-             * rerun the effect every time the parent store is changed in any way.
-             */
-            return "\n              function ".concat(fnName, "(..._args").concat(options.typescript ? ': any[]' : '', ") {\n                ").concat(code, "\n              }\n              ").concat(reactiveDepsWorkaround, "\n              $: ").concat(fnName, "(...[").concat(depsArrayStr, "]);\n            ");
-        }).join('\n')) || '', 
-        // make sure this is after all other state/code is initialized
-        setContextCode({ json: json, options: options }), !((_k = json.hooks.onUnMount) === null || _k === void 0 ? void 0 : _k.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
-            .map(function (item) {
-            return (0, blocks_1.blockToSvelte)({
-                json: item,
-                options: options,
-                parentComponent: json,
-            });
-        })
-            .join('\n'), !css.trim().length
+            return styles;
+          }
+      `
+        : ''}
+      ${getContextCode(json)}
+
+      ${functionsString.length < 4 ? '' : functionsString}
+      ${getterString.length < 4 ? '' : getterString}
+
+      ${refs.map((ref) => `let ${ref}`).join('\n')}
+
+      ${options.stateType === 'proxies'
+        ? dataString.length < 4
             ? ''
-            : "<style>\n      ".concat(css, "\n    </style>"));
-        str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
-        if (options.prettier !== false) {
-            try {
-                str = (0, standalone_1.format)(str, {
-                    parser: 'svelte',
-                    plugins: [
-                        // To support running in browsers
-                        parser_html_1.default,
-                        parser_postcss_1.default,
-                        parser_babel_1.default,
-                        parser_typescript_1.default,
-                        prettierPluginSvelte,
-                    ],
-                });
-            }
-            catch (err) {
-                console.warn('Could not prettify');
-                console.warn(str, err);
-            }
+            : `let state = onChange(${dataString}, () => state = state)`
+        : dataString}
+      ${(_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')}
+
+      ${((_h = json.hooks.onUpdate) === null || _h === void 0 ? void 0 : _h.map(({ code, deps }, index) => {
+        if (!deps) {
+            return `afterUpdate(() => { ${code} });`;
         }
-        str = str.replace(/<script>\n<\/script>/g, '').trim();
-        str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
-        return str;
-    };
+        const fnName = `onUpdateFn_${index}`;
+        const depsArray = deps
+            .slice(1, deps.length - 1)
+            .split(',')
+            .map((x) => x.trim());
+        const getReactiveDepName = (dep) => `${fnName}_${dep.slice(1).replace(/(\.|\?)/g, '_')}`;
+        const isStoreAccessDep = (dep) => dep.startsWith('$');
+        const reactiveDepsWorkaround = depsArray
+            .filter(isStoreAccessDep)
+            .map((dep) => `$: ${getReactiveDepName(dep)} = ${dep};`)
+            .join('\n');
+        const depsArrayStr = depsArray
+            .map((x) => (isStoreAccessDep(x) ? getReactiveDepName(x) : x))
+            .join(', ');
+        /**
+         * We create a reactive value for each `onUpdate`'s dependency that
+         * accesses a store so that Svelte has accurate dependency tracking.
+         *
+         * Otherwise, if the dependency is a value within a store, Svelte will
+         * rerun the effect every time the parent store is changed in any way.
+         */
+        return `
+              function ${fnName}(..._args${options.typescript ? ': any[]' : ''}) {
+                ${code}
+              }
+              ${reactiveDepsWorkaround}
+              $: ${fnName}(...[${depsArrayStr}]);
+            `;
+    }).join('\n')) || ''}
+
+      ${
+    // make sure this is after all other state/code is initialized
+    setContextCode({ json, options })}
+
+      ${!((_j = json.hooks.onUnMount) === null || _j === void 0 ? void 0 : _j.code) ? '' : `onDestroy(() => { ${json.hooks.onUnMount.code} });`}
+    </script>
+
+    ${json.children
+        .map((item) => (0, blocks_1.blockToSvelte)({
+        json: item,
+        options: options,
+        parentComponent: json,
+    }))
+        .join('\n')}
+
+    ${!css.trim().length
+        ? ''
+        : `<style>
+      ${css}
+    </style>`}
+  `;
+    str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+    if (options.prettier !== false) {
+        try {
+            str = (0, standalone_1.format)(str, {
+                parser: 'svelte',
+                plugins: [
+                    // To support running in browsers
+                    parser_html_1.default,
+                    parser_postcss_1.default,
+                    parser_babel_1.default,
+                    parser_typescript_1.default,
+                    prettierPluginSvelte,
+                ],
+            });
+        }
+        catch (err) {
+            console.warn('Could not prettify');
+            console.warn(str, err);
+        }
+    }
+    str = str.replace(/<script>\n<\/script>/g, '').trim();
+    str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    return str;
 };
 exports.componentToSvelte = componentToSvelte;
-var templateObject_1, templateObject_2, templateObject_3;