@builder.io/mitosis 0.0.82 → 0.0.84

package/dist/src/generators/angular.js

@@ -57,7 +57,7 @@ var html_tags_1 = require("../constants/html_tags");
 var function_1 = require("fp-ts/lib/function");
 var merge_options_1 = require("../helpers/merge-options");
 var process_code_1 = require("../helpers/plugins/process-code");
-var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
+var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 var mappers = {
     Fragment: function (json, options) {
         return "<ng-container>".concat(json.children
@@ -85,7 +85,7 @@ var mappers = {
     },
 };
 var generateNgModule = function (content, name, componentsUsed, component, bootstrapMapper) {
-    return "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [BrowserModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
+    return "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [CommonModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
 };
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDINGS_MAPPER = {

package/dist/src/generators/context/helpers/context-with-symbol-key.d.ts

@@ -0,0 +1,5 @@
+import { MitosisContext } from '../../../types/mitosis-context';
+import { BaseTranspilerOptions } from '../../../types/transpiler';
+export declare const getContextWithSymbolKey: (options: Pick<BaseTranspilerOptions, 'prettier'>) => ({ context }: {
+    context: MitosisContext;
+}) => string;

package/dist/src/generators/context/helpers/context-with-symbol-key.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextWithSymbolKey = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+var getContextWithSymbolKey = function (options) {
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.getContextWithSymbolKey = getContextWithSymbolKey;

package/dist/src/generators/context/svelte.d.ts

@@ -1,11 +1,7 @@
-import { MitosisContext } from '../../types/mitosis-context';
 import { BaseTranspilerOptions } from '../../types/transpiler';
-interface ContextToSvelteOptions extends Pick<BaseTranspilerOptions, 'prettier'> {
-}
 /**
  * TO-DO: support types
  */
-export declare const contextToSvelte: (options?: ContextToSvelteOptions) => ({ context }: {
-    context: MitosisContext;
+export declare const contextToSvelte: (options: Pick<BaseTranspilerOptions, "prettier">) => ({ context }: {
+    context: import("../../types/mitosis-context").MitosisContext;
 }) => string;
-export {};

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

@@ -1,31 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToSvelte = void 0;
-var standalone_1 = require("prettier/standalone");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
 /**
  * TO-DO: support types
  */
-var contextToSvelte = function (options) {
-    if (options === void 0) { options = {}; }
-    return function (_a) {
-        var context = _a.context;
-        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
-        if (options.prettier !== false) {
-            try {
-                str = (0, standalone_1.format)(str, {
-                    parser: 'typescript',
-                    plugins: [
-                        require('prettier/parser-typescript'), // To support running in browsers
-                    ],
-                });
-            }
-            catch (err) {
-                console.error('Format error for file:', str);
-                throw err;
-            }
-        }
-        return str;
-    };
-};
-exports.contextToSvelte = contextToSvelte;
+exports.contextToSvelte = context_with_symbol_key_1.getContextWithSymbolKey;

package/dist/src/generators/context/vue.d.ts

@@ -1,6 +1,3 @@
-import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToVueOptions = {
-    format?: boolean;
-};
-export declare function contextToVue(context: MitosisContext, options?: ContextToVueOptions): string;
-export {};
+export declare const contextToVue: (options: Pick<import("../..").BaseTranspilerOptions, "prettier">) => ({ context }: {
+    context: import("../../types/mitosis-context").MitosisContext;
+}) => string;

package/dist/src/generators/context/vue.js

@@ -1,9 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToVue = void 0;
-function contextToVue(context, options) {
-    if (options === void 0) { options = {}; }
-    var str = "\n    // Noop file\n    export default {};\n  ";
-    return str;
-}
-exports.contextToVue = contextToVue;
+var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
+exports.contextToVue = context_with_symbol_key_1.getContextWithSymbolKey;

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

@@ -0,0 +1,8 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToSolidOptions } from './types';
+export declare const blockToSolid: ({ json, options, component, }: {
+    json: MitosisNode;
+    options: ToSolidOptions;
+    component: MitosisComponent;
+}) => string;

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

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToSolid = void 0;
+var core_1 = require("@babel/core");
+var lodash_1 = require("lodash");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var typescript_1 = require("../../helpers/typescript");
+var jsx_1 = require("../../parsers/jsx");
+var mitosis_node_1 = require("../../types/mitosis-node");
+var styles_1 = require("./helpers/styles");
+var ATTTRIBUTE_MAPPERS = {
+    for: 'htmlFor',
+};
+var transformAttributeName = function (name) {
+    if ((0, typescript_1.objectHasKey)(ATTTRIBUTE_MAPPERS, name))
+        return ATTTRIBUTE_MAPPERS[name];
+    return name;
+};
+var blockToSolid = function (_a) {
+    var _b, _c;
+    var json = _a.json, options = _a.options, component = _a.component;
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
+        return "{".concat(json.bindings._text.code, "}");
+    }
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        var needsWrapper = json.children.length !== 1;
+        // The SolidJS `<For>` component has a special index() signal function.
+        // https://www.solidjs.com/docs/latest#%3Cfor%3E
+        return "<For each={".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, "}>\n    {(").concat(json.scope.forName, ", _index) => {\n      const ").concat(json.scope.indexName || 'index', " = _index();\n      return ").concat(needsWrapper ? '<>' : '').concat(json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (child) { return (0, exports.blockToSolid)({ component: component, json: child, options: options }); }), "}}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+    }
+    var str = '';
+    if (json.name === 'Fragment') {
+        str += '<';
+    }
+    else {
+        str += "<".concat(json.name, " ");
+    }
+    if (json.name === 'Show' && json.meta.else) {
+        str += "fallback={".concat((0, exports.blockToSolid)({ component: component, json: json.meta.else, options: options }), "}");
+    }
+    var classString = (0, styles_1.collectClassString)(json, options);
+    if (classString) {
+        str += " class=".concat(classString, " ");
+    }
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        var newKey = transformAttributeName(key);
+        str += " ".concat(newKey, "=\"").concat(value, "\" ");
+    }
+    for (var key in json.bindings) {
+        var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e, type = _d.type;
+        if (!code)
+            continue;
+        if (type === 'spread') {
+            str += " {...(".concat(code, ")} ");
+        }
+        else if (key.startsWith('on')) {
+            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            str += " ".concat(useKey, "={(").concat(cusArg.join(','), ") => ").concat(code, "} ");
+        }
+        else {
+            var useValue = code;
+            if (key === 'style') {
+                // Convert camelCase keys to kebab-case
+                // TODO: support more than top level objects, may need
+                // a runtime helper for expressions that are not a direct
+                // object literal, such as ternaries and other expression
+                // types
+                useValue = (0, babel_transform_1.babelTransformExpression)(code, {
+                    ObjectExpression: function (path) {
+                        // TODO: limit to top level objects only
+                        for (var _i = 0, _a = path.node.properties; _i < _a.length; _i++) {
+                            var property = _a[_i];
+                            if (core_1.types.isObjectProperty(property)) {
+                                if (core_1.types.isIdentifier(property.key) || core_1.types.isStringLiteral(property.key)) {
+                                    var key_1 = core_1.types.isIdentifier(property.key)
+                                        ? property.key.name
+                                        : property.key.value;
+                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key_1));
+                                }
+                            }
+                        }
+                    },
+                });
+            }
+            var newKey = transformAttributeName(key);
+            str += " ".concat(newKey, "={").concat(useValue, "} ");
+        }
+    }
+    if (jsx_1.selfClosingTags.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map(function (item) { return (0, exports.blockToSolid)({ component: component, json: item, options: options }); })
+            .join('\n');
+    }
+    if (json.name === 'Fragment') {
+        str += '</>';
+    }
+    else {
+        str += "</".concat(json.name, ">");
+    }
+    return str;
+};
+exports.blockToSolid = blockToSolid;

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

@@ -0,0 +1,3 @@
+import { MitosisNode } from '../../../types/mitosis-node';
+import { ToSolidOptions } from '../types';
+export declare const collectClassString: (json: MitosisNode, options: ToSolidOptions) => string | null;

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
+var collectClassString = function (json, options) {
+    var _a, _b, _c;
+    var 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;
+    }
+    var 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(".concat(json.bindings.css.code, ")"));
+    }
+    delete json.bindings.css;
+    var staticClassesString = staticClasses.join(' ');
+    var dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    var hasStaticClasses = Boolean(staticClasses.length);
+    var hasDynamicClasses = Boolean(dynamicClasses.length);
+    if (hasStaticClasses && !hasDynamicClasses) {
+        return "\"".concat(staticClassesString, "\"");
+    }
+    if (hasDynamicClasses && !hasStaticClasses) {
+        return "{".concat(dynamicClassesString, "}");
+    }
+    if (hasDynamicClasses && hasStaticClasses) {
+        return "{\"".concat(staticClassesString, " \" + ").concat(dynamicClassesString, "}");
+    }
+    return null;
+};
+exports.collectClassString = collectClassString;

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

@@ -56,8 +56,6 @@ var standalone_1 = require("prettier/standalone");
 var helpers_1 = require("../../helpers/styles/helpers");
 var get_refs_1 = require("../../helpers/get-refs");
 var render_imports_1 = require("../../helpers/render-imports");
-var jsx_1 = require("../../parsers/jsx");
-var mitosis_node_1 = require("../../types/mitosis-node");
 var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -66,9 +64,6 @@ var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
-var babel_transform_1 = require("../../helpers/babel-transform");
-var core_1 = require("@babel/core");
-var lodash_1 = require("lodash");
 var state_1 = require("./state");
 var nullable_1 = require("../../helpers/nullable");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
@@ -80,8 +75,8 @@ var helpers_2 = require("./state/helpers");
 var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
 var context_1 = require("../helpers/context");
-var typescript_1 = require("../../helpers/typescript");
-// Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
+var blocks_1 = require("./blocks");
+// Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json, options) {
     var found = false;
     (0, traverse_1.default)(json).forEach(function (node) {
@@ -102,170 +97,6 @@ function getContextString(component, options) {
     }
     return str;
 }
-// This should really be a preprocessor mapping the `class` attribute binding based on what other values have
-// to make this more pluggable
-var collectClassString = function (json, options) {
-    var _a, _b, _c;
-    var 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;
-    }
-    var 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(".concat(json.bindings.css.code, ")"));
-    }
-    delete json.bindings.css;
-    var staticClassesString = staticClasses.join(' ');
-    var dynamicClassesString = dynamicClasses.join(" + ' ' + ");
-    var hasStaticClasses = Boolean(staticClasses.length);
-    var hasDynamicClasses = Boolean(dynamicClasses.length);
-    if (hasStaticClasses && !hasDynamicClasses) {
-        return "\"".concat(staticClassesString, "\"");
-    }
-    if (hasDynamicClasses && !hasStaticClasses) {
-        return "{".concat(dynamicClassesString, "}");
-    }
-    if (hasDynamicClasses && hasStaticClasses) {
-        return "{\"".concat(staticClassesString, " \" + ").concat(dynamicClassesString, "}");
-    }
-    return null;
-};
-var preProcessBlockCode = function (_a) {
-    var json = _a.json, options = _a.options, component = _a.component;
-    for (var key in json.properties) {
-        var value = json.properties[key];
-        if (value) {
-            json.properties[key] = (0, helpers_2.updateStateCode)({ options: options, component: component, updateSetters: false })(value);
-        }
-    }
-    for (var key in json.bindings) {
-        var value = json.bindings[key];
-        if (value === null || value === void 0 ? void 0 : value.code) {
-            json.bindings[key] = {
-                arguments: value.arguments,
-                code: (0, helpers_2.updateStateCode)({ options: options, component: component, updateSetters: true })(value.code),
-                type: value === null || value === void 0 ? void 0 : value.type,
-            };
-        }
-    }
-};
-var ATTTRIBUTE_MAPPERS = {
-    for: 'htmlFor',
-};
-var transformAttributeName = function (name) {
-    if ((0, typescript_1.objectHasKey)(ATTTRIBUTE_MAPPERS, name))
-        return ATTTRIBUTE_MAPPERS[name];
-    return name;
-};
-var blockToSolid = function (_a) {
-    var _b, _c;
-    var json = _a.json, options = _a.options, component = _a.component;
-    if (json.properties._text) {
-        return json.properties._text;
-    }
-    if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
-        return "{".concat(json.bindings._text.code, "}");
-    }
-    if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        var needsWrapper = json.children.length !== 1;
-        // The SolidJS `<For>` component has a special index() signal function.
-        // https://www.solidjs.com/docs/latest#%3Cfor%3E
-        return "<For each={".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, "}>\n    {(").concat(json.scope.forName, ", _index) => {\n      const ").concat(json.scope.indexName || 'index', " = _index();\n      return ").concat(needsWrapper ? '<>' : '').concat(json.children
-            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (child) { return blockToSolid({ component: component, json: child, options: options }); }), "}}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
-    }
-    var str = '';
-    if (json.name === 'Fragment') {
-        str += '<';
-    }
-    else {
-        str += "<".concat(json.name, " ");
-    }
-    if (json.name === 'Show' && json.meta.else) {
-        str += "fallback={".concat(blockToSolid({ component: component, json: json.meta.else, options: options }), "}");
-    }
-    var classString = collectClassString(json, options);
-    if (classString) {
-        str += " class=".concat(classString, " ");
-    }
-    for (var key in json.properties) {
-        var value = json.properties[key];
-        var newKey = transformAttributeName(key);
-        str += " ".concat(newKey, "=\"").concat(value, "\" ");
-    }
-    for (var key in json.bindings) {
-        var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e, type = _d.type;
-        if (!code)
-            continue;
-        if (type === 'spread') {
-            str += " {...(".concat(code, ")} ");
-        }
-        else if (key.startsWith('on')) {
-            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-            str += " ".concat(useKey, "={(").concat(cusArg.join(','), ") => ").concat(code, "} ");
-        }
-        else {
-            var useValue = code;
-            if (key === 'style') {
-                // Convert camelCase keys to kebab-case
-                // TODO: support more than top level objects, may need
-                // a runtime helper for expressions that are not a direct
-                // object literal, such as ternaries and other expression
-                // types
-                useValue = (0, babel_transform_1.babelTransformExpression)(code, {
-                    ObjectExpression: function (path) {
-                        // TODO: limit to top level objects only
-                        for (var _i = 0, _a = path.node.properties; _i < _a.length; _i++) {
-                            var property = _a[_i];
-                            if (core_1.types.isObjectProperty(property)) {
-                                if (core_1.types.isIdentifier(property.key) || core_1.types.isStringLiteral(property.key)) {
-                                    var key_1 = core_1.types.isIdentifier(property.key)
-                                        ? property.key.name
-                                        : property.key.value;
-                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key_1));
-                                }
-                            }
-                        }
-                    },
-                });
-            }
-            var newKey = transformAttributeName(key);
-            str += " ".concat(newKey, "={").concat(useValue, "} ");
-        }
-    }
-    if (jsx_1.selfClosingTags.has(json.name)) {
-        return str + ' />';
-    }
-    str += '>';
-    if (json.children) {
-        str += json.children
-            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return blockToSolid({ component: component, json: item, options: options }); })
-            .join('\n');
-    }
-    if (json.name === 'Fragment') {
-        str += '</>';
-    }
-    else {
-        str += "</".concat(json.name, ">");
-    }
-    return str;
-};
 var getRefsString = function (json) {
     return Array.from((0, get_refs_1.getRefs)(json))
         .map(function (ref) { return "let ".concat(ref, ";"); })
@@ -317,15 +148,13 @@ var componentToSolid = function (passedOptions) {
         addProviderComponents(json, options);
         var componentHasStyles = (0, helpers_1.hasCss)(json);
         var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1 || options.stylesType === 'style-tag';
+        // 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, options.plugins);
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
-        var foundDynamicComponents = processDynamicComponents(json, options);
-        var css = options.stylesType === 'style-tag' &&
-            (0, collect_css_1.collectCss)(json, {
-                prefix: (0, hash_sum_1.default)(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');
@@ -354,7 +183,7 @@ var componentToSolid = function (passedOptions) {
                 .join('\n')
             : '', addWrapper ? '<>' : '', json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return blockToSolid({ component: component, json: item, options: options }); })
+            .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
             ? // We add the jsx attribute so prettier formats this nicely
                 "<style jsx>{`".concat(css, "`}</style>")

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

@@ -125,10 +125,12 @@ var componentToSvelte = function (userProvidedOptions) {
         // 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, options.plugins);
-        var refs = Array.from((0, get_refs_1.getRefs)(json));
         useBindValue(json, options);
         (0, getters_to_functions_1.gettersToFunctions)(json);
         var props = Array.from((0, get_props_1.getProps)(json)).filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
+        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, options.plugins);
         var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
@@ -206,7 +208,7 @@ var componentToSvelte = function (userProvidedOptions) {
         // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
         (0, helpers_1.hasStyle)(json)
             ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars || {}).forEach(([ p, v ]) => {\n            if (p.startsWith('--')) {\n              node.style.setProperty(p, v);\n            } else {\n              node.style[p] = v;\n            }\n          })\n        }\n      "
-            : '', getContextCode(json), setContextCode({ json: json, options: options }), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat((0, helpers_2.stripStateAndProps)({ json: json, options: options })(ref)); }).join('\n'), options.stateType === 'proxies'
+            : '', getContextCode(json), setContextCode({ json: json, options: options }), 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)")

package/dist/src/generators/vue/compositionApi.js

@@ -61,11 +61,13 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         methods += " function _classStringToObject(str) {\n      const obj = {};\n      if (typeof str !== 'string') { return obj }\n      const classNames = str.trim().split(/\\s+/);\n      for (const name of classNames) {\n        obj[name] = true;\n      }\n      return obj;\n    } ";
     }
     var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.keys(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (key) { return "const ".concat(key, " = inject(").concat(component.context.get[key].name, ")"); }).join('\n'), (_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (contextSet) {
-        return "provide(".concat(contextSet.name, ", ").concat((0, helpers_1.getContextValue)({
-            json: component,
-            options: options,
-        })(contextSet), ")");
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.entries(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
+        var key = _a[0], context = _a[1];
+        return "const ".concat(key, " = inject(").concat((0, helpers_1.getContextKey)(context), ")");
+    }).join('\n'), (_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (contextSet) {
+        var contextValue = (0, helpers_1.getContextValue)({ json: component, options: options })(contextSet);
+        var key = (0, helpers_1.getContextKey)(contextSet);
+        return "provide(".concat(key, ", ").concat(contextValue, ")");
     }).join('\n'), (_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map(function (key) {
         if (options.typescript) {
             return "const ".concat(key, " = ref<").concat(component.refs[key].typeParameter, ">()");

package/dist/src/generators/vue/helpers.d.ts

@@ -1,5 +1,5 @@
 import { Nullable } from '../../helpers/nullable';
-import { ContextSetInfo, MitosisComponent } from '../../types/mitosis-component';
+import { ContextGetInfo, ContextSetInfo, MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToVueOptions } from './types';
 export declare const addPropertiesToJson: (properties: MitosisNode['properties']) => (json: MitosisNode) => MitosisNode;
@@ -9,14 +9,15 @@ export declare const invertBooleanExpression: (expression: string) => string;
 export declare function encodeQuotes(string: string): string;
 export declare const renameMitosisComponentsToKebabCase: (str: string) => string;
 export declare function getContextNames(json: MitosisComponent): string[];
-export declare const processBinding: ({ code, options, json, preserveGetter, }: {
+declare type ProcessBinding = {
     code: string;
     options: ToVueOptions;
     json: MitosisComponent;
-    preserveGetter?: boolean | undefined;
-}) => string;
-export declare const getContextValue: ({ options, json }: {
-    options: ToVueOptions;
-    json: MitosisComponent;
-}) => ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
-export declare const getContextProvideString: (json: MitosisComponent, options: ToVueOptions) => string;
+    preserveGetter?: boolean;
+    thisPrefix?: 'this' | '_this';
+};
+export declare const processBinding: ({ code, options, json, preserveGetter, thisPrefix, }: ProcessBinding) => string;
+export declare const getContextValue: (args: Pick<ProcessBinding, 'options' | 'json' | 'thisPrefix'>) => ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
+export declare const checkIfContextHasStrName: (context: ContextGetInfo | ContextSetInfo) => boolean;
+export declare const getContextKey: (context: ContextGetInfo | ContextSetInfo) => string;
+export {};