@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/generators/template/generator.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToTemplate = void 0;
+const event_handlers_1 = require("../../helpers/event-handlers");
+const standalone_1 = require("prettier/standalone");
+const html_tags_1 = require("../../constants/html_tags");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const plugins_1 = require("../../modules/plugins");
+const mitosis_node_1 = require("../../types/mitosis-node");
+const mappers = {
+    Fragment: (json, options) => {
+        return `<div>${json.children.map((item) => blockToTemplate(item, options)).join('\n')}</div>`;
+    },
+};
+// TODO: spread support
+const blockToTemplate = (json, options = {}) => {
+    var _a, _b, _c, _d, _e;
+    if (mappers[json.name]) {
+        return mappers[json.name](json, options);
+    }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if (json.bindings._text) {
+        return `\${${(_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code}}`;
+    }
+    let str = '';
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        str += `\${${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}?.map(${json.scope.forName} => \``;
+        if (json.children) {
+            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
+        }
+        str += '`).join("")}';
+    }
+    else if (json.name === 'Show') {
+        str += `\${!(${(_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code}) ? '' : \``;
+        if (json.children) {
+            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
+        }
+        str += '`}';
+    }
+    else {
+        str += `<${json.name} `;
+        // TODO: JS iteration or with helper
+        // if (json.bindings._spread === '_spread') {
+        //   str += `
+        //       {% for _attr in ${json.bindings._spread} %}
+        //         {{ _attr[0] }}="{{ _attr[1] }}"
+        //       {% endfor %}
+        //     `;
+        // }
+        for (const key in json.properties) {
+            const value = json.properties[key];
+            str += ` ${key}="${value}" `;
+        }
+        for (const key in json.bindings) {
+            if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread' || key === 'ref' || key === 'css') {
+                continue;
+            }
+            const value = (_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.code;
+            // TODO: proper babel transform to replace. Util for this
+            const useValue = value;
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
+                // Do nothing
+            }
+            else {
+                str += ` ${key}="\${${useValue}}" `;
+            }
+        }
+        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
+            return str + ' />';
+        }
+        str += '>';
+        if (json.children) {
+            str += json.children.map((item) => blockToTemplate(item, options)).join('\n');
+        }
+        str += `</${json.name}>`;
+    }
+    return str;
+};
+// TODO: add JS support similar to componentToHtml()
+const componentToTemplate = (options = {}) => ({ component }) => {
+    let json = (0, fast_clone_1.fastClone)(component);
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    const css = (0, collect_css_1.collectCss)(json);
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    let str = json.children.map((item) => blockToTemplate(item)).join('\n');
+    if (css.trim().length) {
+        str += `<style>${css}</style>`;
+    }
+    str = (0, dedent_1.dedent) `
+    export default function template(props) {
+      let state = ${(0, get_state_object_string_1.getStateObjectStringFromComponent)(json)}
+
+      return \`${str.replace(/\s+/g, ' ')}\`
+    }
+  
+  `;
+    if (options.plugins) {
+        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    if (options.prettier !== false) {
+        try {
+            str = (0, standalone_1.format)(str, {
+                parser: 'typescript',
+                htmlWhitespaceSensitivity: 'ignore',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-typescript'),
+                    require('prettier/parser-postcss'),
+                    require('prettier/parser-babel'),
+                ],
+            });
+        }
+        catch (err) {
+            console.warn('Could not prettify', { string: str }, err);
+        }
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
+};
+exports.componentToTemplate = componentToTemplate;

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

@@ -0,0 +1,2 @@
+export * from './generator';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./generator"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,4 @@
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export interface ToTemplateOptions extends BaseTranspilerOptions {
+}
+export type TemplateMetadata = {};

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

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

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

@@ -0,0 +1,8 @@
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToVueOptions } from './types';
+type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
+interface Scope {
+    isRootNode?: boolean;
+}
+export declare const blockToVue: BlockRenderer;
+export {};

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

@@ -0,0 +1,217 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToVue = void 0;
+const bindings_1 = require("../../helpers/bindings");
+const event_handlers_1 = require("../../helpers/event-handlers");
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const is_children_1 = __importDefault(require("../../helpers/is-children"));
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const nullable_1 = require("../../helpers/nullable");
+const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const slots_1 = require("../../helpers/slots");
+const function_1 = require("fp-ts/lib/function");
+const html_tags_1 = require("../../constants/html_tags");
+const helpers_1 = require("./helpers");
+const SPECIAL_PROPERTIES = {
+    V_IF: 'v-if',
+    V_FOR: 'v-for',
+    V_ELSE: 'v-else',
+    V_ELSE_IF: 'v-else-if',
+    V_ON: 'v-on',
+    V_ON_AT: '@',
+    V_BIND: 'v-bind',
+};
+/**
+ * blockToVue executed after processBinding,
+ * when processBinding is executed,
+ * SLOT_PREFIX from `slot` change to `$slots.`
+ */
+const SLOT_PREFIX = '$slots.';
+// TODO: Maybe in the future allow defining `string | function` as values
+const BINDING_MAPPERS = {
+    innerHTML: 'v-html',
+};
+const NODE_MAPPERS = {
+    Fragment(json, options, scope) {
+        const children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+        const childrenStr = children.map((item) => (0, exports.blockToVue)(item, options)).join('\n');
+        return childrenStr;
+    },
+    For(_json, options) {
+        var _a, _b, _c, _d;
+        const json = _json;
+        const keyValue = json.bindings.key || { code: (_a = json.scope.indexName) !== null && _a !== void 0 ? _a : 'index', type: 'single' };
+        const forValue = `(${(_b = json.scope.forName) !== null && _b !== void 0 ? _b : '_'}, ${(_c = json.scope.indexName) !== null && _c !== void 0 ? _c : 'index'}) in ${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}`;
+        // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
+        return `<template :key="${(0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index')}" v-for="${(0, helpers_1.encodeQuotes)(forValue)}">
+        ${json.children.map((item) => (0, exports.blockToVue)(item, options)).join('\n')}
+      </template>`;
+    },
+    Show(json, options, scope) {
+        var _a;
+        const ifValue = ((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code) || '';
+        const defaultShowTemplate = `
+    <template ${SPECIAL_PROPERTIES.V_IF}="${(0, helpers_1.encodeQuotes)(ifValue)}">
+      ${json.children.map((item) => (0, exports.blockToVue)(item, options)).join('\n')}
+    </template>
+    ${(0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
+            ? `
+        <template ${SPECIAL_PROPERTIES.V_ELSE}>
+          ${(0, exports.blockToVue)(json.meta.else, options)}
+        </template>`
+            : ''}
+    `;
+        return defaultShowTemplate;
+    },
+    Slot(json, options) {
+        var _a, _b, _c;
+        const slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
+        const renderChildren = () => { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToVue)(item, options)).join('\n'); };
+        if (!slotName) {
+            const key = Object.keys(json.bindings).find(Boolean);
+            if (!key) {
+                if (!((_b = json.children) === null || _b === void 0 ? void 0 : _b.length)) {
+                    return '<slot/>';
+                }
+                return `<slot>${renderChildren()}</slot>`;
+            }
+            return `
+        <template #${key}>
+          ${(_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code}
+        </template>
+      `;
+        }
+        if (slotName === 'default') {
+            return `<slot>${renderChildren()}</slot>`;
+        }
+        return `<slot name="${(0, slots_1.toKebabSlot)(slotName, SLOT_PREFIX)}">${renderChildren()}</slot>`;
+    },
+};
+const SPECIAL_HTML_TAGS = ['style', 'script'];
+const stringifyBinding = (node, options) => ([key, value]) => {
+    const isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(node.name);
+    if (value.type === 'spread') {
+        return ''; // we handle this after
+    }
+    else if (key === 'class' && options.convertClassStringToObject) {
+        return `:class="_classStringToObject(${value === null || value === void 0 ? void 0 : value.code})"`;
+        // TODO: support dynamic classes as objects somehow like Vue requires
+        // https://vuejs.org/v2/guide/class-and-style.html
+    }
+    else {
+        // TODO: proper babel transform to replace. Util for this
+        const useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
+        if ((0, event_handlers_1.checkIsEvent)(key) && isValidHtmlTag) {
+            // handle html native on[event] props
+            const { arguments: cusArgs = ['event'], async } = value;
+            let event = key.replace('on', '').toLowerCase();
+            const isAssignmentExpression = useValue.includes('=');
+            let eventHandlerValue;
+            if (async) {
+                eventHandlerValue = (0, function_1.pipe)((0, replace_identifiers_1.replaceIdentifiers)({
+                    code: useValue,
+                    from: cusArgs[0],
+                    to: '$event',
+                }), isAssignmentExpression ? function_1.identity : remove_surrounding_block_1.removeSurroundingBlock, remove_surrounding_block_1.removeSurroundingBlock, helpers_1.encodeQuotes);
+            }
+            else {
+                eventHandlerValue = `async (${cusArgs.join(', ')}) => ${useValue}`;
+            }
+            const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
+            return `${eventHandlerKey}="${eventHandlerValue}"`;
+        }
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
+            // handle on[custom event] props
+            const { arguments: cusArgs = ['event'] } = node.bindings[key];
+            return `:${key}="(${cusArgs.join(',')}) => ${(0, helpers_1.encodeQuotes)(useValue)}"`;
+        }
+        else if (key === 'ref') {
+            return `ref="${(0, helpers_1.encodeQuotes)(useValue)}"`;
+        }
+        else if (BINDING_MAPPERS[key]) {
+            return `${BINDING_MAPPERS[key]}="${(0, helpers_1.encodeQuotes)(useValue.replace(/"/g, "\\'"))}"`;
+        }
+        else {
+            return `:${key}="${(0, helpers_1.encodeQuotes)(useValue)}"`;
+        }
+    }
+};
+const stringifySpreads = ({ node, spreadType }) => {
+    const spreads = Object.values(node.bindings)
+        .filter(nullable_1.checkIsDefined)
+        .filter((binding) => binding.type === 'spread' && binding.spreadType === spreadType)
+        .map((value) => (value.code === 'props' ? '$props' : value.code));
+    if (spreads.length === 0) {
+        return '';
+    }
+    const stringifiedValue = spreads.length > 1 ? `{${spreads.map((spread) => `...${spread}`).join(', ')}}` : spreads[0];
+    const key = spreadType === 'normal' ? SPECIAL_PROPERTIES.V_BIND : SPECIAL_PROPERTIES.V_ON;
+    return ` ${key}="${(0, helpers_1.encodeQuotes)(stringifiedValue)}" `;
+};
+const getBlockBindings = (node, options) => {
+    const stringifiedProperties = Object.entries(node.properties)
+        .map(([key, value]) => {
+        if (key === 'className') {
+            return '';
+        }
+        else if (key === SPECIAL_PROPERTIES.V_ELSE) {
+            return `${key}`;
+        }
+        else if (typeof value === 'string') {
+            return `${key}="${(0, helpers_1.encodeQuotes)(value)}"`;
+        }
+    })
+        .join(' ');
+    const stringifiedBindings = Object.entries(node.bindings)
+        .map(stringifyBinding(node, options))
+        .join(' ');
+    return [
+        stringifiedProperties,
+        stringifiedBindings,
+        stringifySpreads({ node, spreadType: 'normal' }),
+        stringifySpreads({ node, spreadType: 'event-handlers' }),
+    ].join(' ');
+};
+const blockToVue = (node, options, scope) => {
+    var _a;
+    const nodeMapper = NODE_MAPPERS[node.name];
+    if (nodeMapper) {
+        return nodeMapper(node, options, scope);
+    }
+    if ((0, is_children_1.default)({ node })) {
+        return `<slot/>`;
+    }
+    if (SPECIAL_HTML_TAGS.includes(node.name)) {
+        // Vue doesn't allow style/script tags in templates, but does support them through dynamic components.
+        node.bindings.is = (0, bindings_1.createSingleBinding)({ code: `'${node.name}'` });
+        node.name = 'component';
+    }
+    if (node.properties._text) {
+        return `${node.properties._text}`;
+    }
+    const textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        if ((0, slots_1.isSlotProperty)(textCode, SLOT_PREFIX)) {
+            const slotName = (0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase();
+            if (slotName === 'default')
+                return `<slot/>`;
+            return `<slot name="${slotName}"/>`;
+        }
+        return `{{${textCode}}}`;
+    }
+    let str = `<${node.name} `;
+    str += getBlockBindings(node, options);
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(node.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (node.children) {
+        str += node.children.map((item) => (0, exports.blockToVue)(item, options)).join('');
+    }
+    return str + `</${node.name}>`;
+};
+exports.blockToVue = blockToVue;

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

@@ -0,0 +1,3 @@
+import { BaseHook, MitosisComponent } from '../../types/mitosis-component';
+import { ToVueOptions } from './types';
+export declare function generateCompositionApiScript(component: MitosisComponent, options: ToVueOptions, template: string, props: Array<string>, onUpdateWithDeps: BaseHook[], onUpdateWithoutDeps: BaseHook[]): string;

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

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCompositionApiScript = void 0;
+const dedent_1 = require("../../helpers/dedent");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const helpers_1 = require("./helpers");
+const getCompositionPropDefinition = ({ options, component, props, }) => {
+    const isTs = options.typescript;
+    let str = 'const props = ';
+    if (component.defaultProps) {
+        const generic = isTs && component.propsTypeRef !== 'any' ? `<${component.propsTypeRef}>` : '';
+        const defalutPropsString = props
+            .map((prop) => {
+            var _a;
+            const value = component.defaultProps.hasOwnProperty(prop)
+                ? (_a = component.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+                : 'undefined';
+            return `${prop}: ${value}`;
+        })
+            .join(',');
+        str += `withDefaults(defineProps${generic}(), {${defalutPropsString}})`;
+    }
+    else if (isTs && component.propsTypeRef && component.propsTypeRef !== 'any') {
+        str += `defineProps<${component.propsTypeRef}>()`;
+    }
+    else {
+        str += `defineProps(${json5_1.default.stringify(props)})`;
+    }
+    return str;
+};
+function generateCompositionApiScript(component, options, template, props, onUpdateWithDeps, onUpdateWithoutDeps) {
+    var _a, _b, _c, _d, _e, _f;
+    const isTs = options.typescript;
+    let refs = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: true,
+        functions: false,
+        getters: false,
+        format: 'variables',
+        valueMapper: (code, _, typeParameter) => {
+            return isTs && typeParameter ? `ref<${typeParameter}>(${code})` : `ref(${code})`;
+        },
+        keyPrefix: 'const',
+    });
+    let methods = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: false,
+        getters: false,
+        functions: true,
+        format: 'variables',
+        valueMapper: (code, type, typeParameter) => {
+            if (type != 'data') {
+                return (0, get_typed_function_1.getTypedFunction)(code, isTs, typeParameter);
+            }
+            return code;
+        },
+    });
+    if (template.includes('_classStringToObject')) {
+        methods += ` function _classStringToObject(str${isTs ? ': string' : ''}) {
+      const obj${isTs ? ': Record<string, boolean>' : ''} = {};
+      if (typeof str !== 'string') { return obj }
+      const classNames = str.trim().split(/\\s+/);
+      for (const name of classNames) {
+        obj[name] = true;
+      }
+      return obj;
+    } `;
+    }
+    const getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'getter'));
+    let str = (0, dedent_1.dedent) `
+    ${props.length ? getCompositionPropDefinition({ component, props, options }) : ''}
+    ${refs}
+
+    ${(_a = Object.entries(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(([key, context]) => {
+        return `const ${key} = inject(${(0, helpers_1.getContextKey)(context)})`;
+    }).join('\n')}
+
+    ${(_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map((contextSet) => {
+        const contextValue = (0, helpers_1.getContextValue)(contextSet);
+        const key = (0, helpers_1.getContextKey)(contextSet);
+        return `provide(${key}, ${contextValue})`;
+    }).join('\n')}
+
+    ${(_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map((key) => {
+        var _a;
+        if (isTs) {
+            const type = (_a = component.refs[key].typeParameter) !== null && _a !== void 0 ? _a : 'any';
+            return `const ${key} = ref<${type}>(null)`;
+        }
+        else {
+            return `const ${key} = ref(null)`;
+        }
+    }).join('\n')}
+    ${(_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : ''}
+    ${component.hooks.onMount.map((hook) => `onMounted(() => { ${hook.code} })`).join('\n')}
+    ${!((_f = component.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code)
+        ? ''
+        : `onUnmounted(() => { ${component.hooks.onUnMount.code}})`}
+    ${(getterKeys === null || getterKeys === void 0 ? void 0 : getterKeys.map((key) => {
+        var _a, _b;
+        const code = (_b = (_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.toString();
+        if (!code) {
+            return '';
+        }
+        // transform `foo() { return this.bar }` to `() => { return bar.value }`
+        const getterAsFunction = code.replace(key, '').trim().replace(/^\(\)/, '() =>');
+        const computedCode = `const ${key} = computed(${getterAsFunction})`;
+        return computedCode;
+    }).join('\n')) || ''}
+
+    ${(onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.map((hook) => `onUpdated(() => {${hook.code}})`).join('\n')) || ''}
+
+    ${(onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.map((hook) => {
+        return `watch(() => ${(0, helpers_1.processBinding)({
+            code: hook.deps || '',
+            options,
+            json: component,
+        })}, () => { ${hook.code} }, {immediate: true})`;
+    }).join('\n')) || ''}
+    ${methods !== null && methods !== void 0 ? methods : ''}
+  `;
+    return str;
+}
+exports.generateCompositionApiScript = generateCompositionApiScript;

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

@@ -0,0 +1,25 @@
+import { Nullable } from '../../helpers/nullable';
+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;
+export declare const addBindingsToJson: (bindings: MitosisNode['bindings']) => (json: MitosisNode) => MitosisNode;
+export declare const getOnUpdateHookName: (index: number) => string;
+export declare const invertBooleanExpression: (expression: string) => string;
+export declare function encodeQuotes(string: string): string;
+export declare const mapMitosisComponentToKebabCase: (componentName: string) => string;
+export declare const renameMitosisComponentsToKebabCase: (str: string) => string;
+export declare function getContextNames(json: MitosisComponent): string[];
+type ProcessBinding = {
+    code: string;
+    options: ToVueOptions;
+    json: MitosisComponent;
+    preserveGetter?: boolean;
+    thisPrefix?: 'this' | '_this';
+    codeType?: 'state' | 'hooks' | 'bindings' | 'hooks-deps' | 'properties';
+};
+export declare const processBinding: ({ code, options, json, preserveGetter, thisPrefix, codeType, }: ProcessBinding) => string;
+export declare const getContextValue: ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
+export declare const checkIfContextHasStrName: (context: ContextGetInfo | ContextSetInfo) => boolean;
+export declare const getContextKey: (context: ContextGetInfo | ContextSetInfo) => string;
+export {};