@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextKey = exports.checkIfContextHasStrName = exports.getContextValue = exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.mapMitosisComponentToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
+const babel_transform_1 = require("../../helpers/babel-transform");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const patterns_1 = require("../../helpers/patterns");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const slots_1 = require("../../helpers/slots");
+const core_1 = require("@babel/core");
+const function_1 = require("fp-ts/lib/function");
+const lodash_1 = require("lodash");
+const html_tags_1 = require("../../constants/html_tags");
+const addPropertiesToJson = (properties) => (json) => ({
+    ...json,
+    properties: {
+        ...json.properties,
+        ...properties,
+    },
+});
+exports.addPropertiesToJson = addPropertiesToJson;
+const addBindingsToJson = (bindings) => (json) => ({
+    ...json,
+    bindings: {
+        ...json.bindings,
+        ...bindings,
+    },
+});
+exports.addBindingsToJson = addBindingsToJson;
+const ON_UPDATE_HOOK_NAME = 'onUpdateHook';
+const getOnUpdateHookName = (index) => ON_UPDATE_HOOK_NAME + `${index}`;
+exports.getOnUpdateHookName = getOnUpdateHookName;
+const invertBooleanExpression = (expression) => `!Boolean(${expression})`;
+exports.invertBooleanExpression = invertBooleanExpression;
+function encodeQuotes(string) {
+    return string.replace(/"/g, '"');
+}
+exports.encodeQuotes = encodeQuotes;
+const mapMitosisComponentToKebabCase = (componentName) => componentName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+exports.mapMitosisComponentToKebabCase = mapMitosisComponentToKebabCase;
+// Transform <FooBar> to <foo-bar> as Vue2 needs
+const renameMitosisComponentsToKebabCase = (str) => str.replace(/<\/?\w+/g, (match) => {
+    const tagName = match.replaceAll('<', '').replaceAll('/', '');
+    if (html_tags_1.VALID_HTML_TAGS.includes(tagName)) {
+        return match;
+    }
+    else {
+        return (0, exports.mapMitosisComponentToKebabCase)(match);
+    }
+});
+exports.renameMitosisComponentsToKebabCase = renameMitosisComponentsToKebabCase;
+function getContextNames(json) {
+    return Object.keys(json.context.get);
+}
+exports.getContextNames = getContextNames;
+function shouldAppendValueToRef(path) {
+    const { parent, node } = path;
+    if (core_1.types.isFunctionDeclaration(parent) && parent.id === node) {
+        return false;
+    }
+    if (core_1.types.isCallExpression(parent)) {
+        return false;
+    }
+    const isMemberExpression = core_1.types.isMemberExpression(parent);
+    if (isMemberExpression &&
+        core_1.types.isThisExpression(parent.object) &&
+        core_1.types.isProgram(path.scope.block) &&
+        path.scope.hasReference(node.name)) {
+        return false;
+    }
+    if (isMemberExpression &&
+        core_1.types.isIdentifier(parent.object) &&
+        core_1.types.isIdentifier(parent.property) &&
+        parent.property.name === node.name) {
+        return false;
+    }
+    if (Object.keys(path.scope.bindings).includes(path.node.name)) {
+        return false;
+    }
+    if (path.parentPath.listKey === 'arguments' || path.parentPath.listKey === 'params') {
+        return false;
+    }
+    return true;
+}
+const getAllRefs = (component) => {
+    const refKeys = Object.keys(component.refs);
+    const stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'property'));
+    const allKeys = [...refKeys, ...stateKeys];
+    return allKeys;
+};
+function processRefs({ input, component, options, thisPrefix, }) {
+    const { api } = options;
+    const refs = api === 'options' ? getContextNames(component) : getAllRefs(component);
+    return (0, babel_transform_1.babelTransformExpression)(input, {
+        Identifier(path) {
+            const name = path.node.name;
+            // Composition api should use .value all the time
+            if (refs.includes(name) && (api === 'composition' || shouldAppendValueToRef(path))) {
+                const newValue = api === 'options' ? `${thisPrefix}.${name}` : `${name}.value`;
+                path.replaceWith(core_1.types.identifier(newValue));
+            }
+        },
+    });
+}
+function prefixMethodsWithThis(input, component, options) {
+    if (options.api === 'options') {
+        const allMethodNames = Object.entries(component.state)
+            .filter(([_key, value]) => (value === null || value === void 0 ? void 0 : value.type) === 'function')
+            .map(([key]) => key);
+        if (!allMethodNames.length)
+            return input;
+        return (0, replace_identifiers_1.replaceIdentifiers)({ code: input, from: allMethodNames, to: (name) => `this.${name}` });
+    }
+    else {
+        return input;
+    }
+}
+function optionsApiStateAndPropsReplace(name, thisPrefix, codeType) {
+    const prefixToUse = codeType === 'bindings' ? '' : thisPrefix + '.';
+    if (name === 'children' || name.startsWith('children.')) {
+        return `${prefixToUse}$slots.default`;
+    }
+    return (0, slots_1.isSlotProperty)(name)
+        ? (0, slots_1.replaceSlotsInString)(name, (x) => `${prefixToUse}$slots.${x}`)
+        : `${prefixToUse}${name}`;
+}
+// TODO: migrate all stripStateAndPropsRefs to use this here
+// to properly replace context refs
+const processBinding = ({ code, options, json, preserveGetter = false, thisPrefix = 'this', codeType, }) => {
+    try {
+        return (0, function_1.pipe)(code, (0, replace_identifiers_1.replacePropsIdentifier)((name) => {
+            switch (options.api) {
+                // keep pointing to `props.${value}`
+                case 'composition':
+                    const slotPrefix = codeType === 'bindings' ? '$slots' : 'useSlots()';
+                    if (name === 'children' || name.startsWith('children.')) {
+                        return `${slotPrefix}.default`;
+                    }
+                    return (0, slots_1.isSlotProperty)(name)
+                        ? (0, slots_1.replaceSlotsInString)(name, (x) => `${slotPrefix}.${x}`)
+                        : codeType === 'bindings'
+                            ? name
+                            : `props.${name}`;
+                case 'options':
+                    return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
+            }
+        }), (0, replace_identifiers_1.replaceStateIdentifier)((name) => {
+            switch (options.api) {
+                case 'composition':
+                    return name;
+                case 'options':
+                    return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
+            }
+        }), codeType === 'bindings'
+            ? function_1.identity
+            : (0, function_1.flow)((x) => processRefs({ input: x, component: json, options, thisPrefix }), (x) => prefixMethodsWithThis(x, json, options)), preserveGetter === false ? patterns_1.stripGetter : function_1.identity);
+    }
+    catch (e) {
+        console.error('could not process bindings in ', { code });
+        throw e;
+    }
+};
+exports.processBinding = processBinding;
+const getContextValue = ({ name, ref, value }) => {
+    const valueStr = value ? (0, get_state_object_string_1.stringifyContextValue)(value) : ref;
+    return valueStr;
+};
+exports.getContextValue = getContextValue;
+const checkIfContextHasStrName = (context) => {
+    // check if the name is wrapped in single or double quotes
+    const isStrName = context.name.startsWith("'") || context.name.startsWith('"');
+    return isStrName;
+};
+exports.checkIfContextHasStrName = checkIfContextHasStrName;
+const getContextKey = (context) => {
+    const isStrName = (0, exports.checkIfContextHasStrName)(context);
+    const key = isStrName ? context.name : `${context.name}.key`;
+    return key;
+};
+exports.getContextKey = getContextKey;

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

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

package/dist/src/generators/vue/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("./types"), exports);
+__exportStar(require("./vue"), exports);

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

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

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

@@ -0,0 +1,210 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateOptionsApiScript = void 0;
+const get_components_used_1 = require("../../helpers/get-components-used");
+const get_custom_imports_1 = require("../../helpers/get-custom-imports");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const nullable_1 = require("../../helpers/nullable");
+const render_imports_1 = require("../../helpers/render-imports");
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const on_mount_1 = require("../helpers/on-mount");
+const helpers_1 = require("./helpers");
+const getContextProvideString = (json, options) => {
+    return `{
+    ${Object.values(json.context.set)
+        .map((setVal) => {
+        const key = (0, helpers_1.getContextKey)(setVal);
+        return `[${key}]: ${(0, helpers_1.getContextValue)(setVal)}`;
+    })
+        .join(',')}
+  }`;
+};
+function getContextInjectString(component, options) {
+    let str = '{';
+    const contextGetters = component.context.get;
+    for (const key in contextGetters) {
+        const context = contextGetters[key];
+        str += `
+      ${key}: ${(0, helpers_1.encodeQuotes)((0, helpers_1.getContextKey)(context))},
+    `;
+    }
+    str += '}';
+    return str;
+}
+const generateComponentImport = (options) => (componentName) => {
+    if (options.asyncComponentImports) {
+        return `'${componentName}': defineAsyncComponent(${componentName})`;
+    }
+    else {
+        return `'${componentName}': ${componentName}`;
+    }
+};
+const generateComponents = (componentsUsed, options) => {
+    if (componentsUsed.length === 0) {
+        return '';
+    }
+    else {
+        return `components: { ${componentsUsed.map(generateComponentImport(options)).join(',')} },`;
+    }
+};
+const appendToDataString = ({ dataString, newContent, }) => dataString.replace(/}$/, `${newContent}}`);
+function generateOptionsApiScript(component, options, path, template, props, onUpdateWithDeps, onUpdateWithoutDeps) {
+    var _a, _b, _c;
+    const { exports: localExports } = component;
+    const localVarAsData = [];
+    const localVarAsFunc = [];
+    const isTs = options.typescript;
+    if (localExports) {
+        Object.keys(localExports).forEach((key) => {
+            if (localExports[key].usedInLocal) {
+                if (localExports[key].isFunction) {
+                    localVarAsFunc.push(key);
+                }
+                else {
+                    localVarAsData.push(key);
+                }
+            }
+        });
+    }
+    let dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: true,
+        functions: false,
+        getters: false,
+    });
+    // Append refs to data as { foo, bar, etc }
+    dataString = appendToDataString({
+        dataString,
+        newContent: (0, get_custom_imports_1.getCustomImports)(component).join(','),
+    });
+    if (localVarAsData.length) {
+        dataString = appendToDataString({ dataString, newContent: localVarAsData.join(',') });
+    }
+    const getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: false,
+        getters: true,
+        functions: false,
+    });
+    let functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: false,
+        getters: false,
+        functions: true,
+    });
+    const includeClassMapHelper = template.includes('_classStringToObject');
+    if (includeClassMapHelper) {
+        functionsString = functionsString.replace(/}\s*$/, `_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;
+      }  }`);
+    }
+    if (localVarAsFunc.length) {
+        functionsString = functionsString.replace(/}\s*$/, `${localVarAsFunc.join(',')}}`);
+    }
+    // Component references to include in `component: { YourComponent, ... }
+    const componentsUsedInTemplate = Array.from((0, get_components_used_1.getComponentsUsed)(component))
+        .filter((name) => name.length && !name.includes('.') && name[0].toUpperCase() === name[0])
+        // Strip out components that compile away
+        .filter((name) => !['For', 'Show', 'Fragment', 'Slot', component.name].includes(name));
+    // get default imports from component files
+    const importedComponents = component.imports
+        .filter(render_imports_1.checkIsComponentImport)
+        .map((imp) => { var _a; return (_a = Object.entries(imp.imports).find(([_, value]) => value === 'default')) === null || _a === void 0 ? void 0 : _a[0]; })
+        .filter(nullable_1.checkIsDefined);
+    const componentsUsed = (0, lodash_1.uniq)([...componentsUsedInTemplate, ...importedComponents]);
+    const getPropDefinition = ({ component, props, }) => {
+        const propsDefinition = Array.from(props).filter((prop) => prop !== 'children' && prop !== 'class');
+        let str = 'props: ';
+        if (component.defaultProps) {
+            const defalutPropsString = propsDefinition
+                .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}: { default: ${value} }`;
+            })
+                .join(',');
+            str += `{${defalutPropsString}}`;
+        }
+        else {
+            str += `${json5_1.default.stringify(propsDefinition)}`;
+        }
+        return `${str},`;
+    };
+    return `
+        export default ${options.defineComponent ? 'defineComponent(' : ''} {
+        ${!component.name
+        ? ''
+        : `name: '${path && ((_a = options.namePrefix) === null || _a === void 0 ? void 0 : _a.call(options, path)) ? ((_b = options.namePrefix) === null || _b === void 0 ? void 0 : _b.call(options, path)) + '-' : ''}${(0, lodash_1.kebabCase)(component.name)}',`}
+        ${generateComponents(componentsUsed, options)}
+        ${props.length ? getPropDefinition({ component, props }) : ''}
+        ${dataString.length < 4
+        ? ''
+        : `
+        data() {
+          return ${dataString}
+        },
+        `}
+
+        ${(0, lodash_1.size)(component.context.set)
+        ? `provide() {
+                const _this = this;
+                return ${getContextProvideString(component, options)}
+              },`
+        : ''}
+        ${(0, lodash_1.size)(component.context.get)
+        ? `inject: ${getContextInjectString(component, options)},`
+        : ''}
+        ${((_c = component.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)
+        ? `created() {
+                ${component.hooks.onInit.code}
+              },`
+        : ''}
+        ${component.hooks.onMount.length
+        ? `mounted() {
+                ${(0, on_mount_1.stringifySingleScopeOnMount)(component)}
+              },`
+        : ''}
+        ${onUpdateWithoutDeps.length
+        ? `updated() {
+            ${onUpdateWithoutDeps.map((hook) => hook.code).join('\n')}
+          },`
+        : ''}
+        ${onUpdateWithDeps.length
+        ? `watch: {
+            ${onUpdateWithDeps
+            .map((hook, index) => `${(0, helpers_1.getOnUpdateHookName)(index)}: { handler() { ${hook.code} }, immediate: true }`)
+            .join(',')}
+          },`
+        : ''}
+        ${component.hooks.onUnMount
+        ? `unmounted() {
+                ${component.hooks.onUnMount.code}
+              },`
+        : ''}
+
+        ${getterString.length < 4
+        ? ''
+        : `
+          computed: ${getterString},
+        `}
+        ${functionsString.length < 4
+        ? ''
+        : `
+          methods: ${functionsString},
+        `}
+        ${Object.entries(component.meta.vueConfig || {})
+        .map(([k, v]) => `${k}: ${v}`)
+        .join(',')}
+        }
+        ${options.defineComponent ? ')' : ''}`;
+}
+exports.generateOptionsApiScript = generateOptionsApiScript;

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

@@ -0,0 +1,33 @@
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export type Api = 'options' | 'composition';
+export interface ToVueOptions extends BaseTranspilerOptions {
+    cssNamespace?: () => string;
+    namePrefix?: (path: string) => string;
+    asyncComponentImports?: boolean;
+    defineComponent?: boolean;
+    api: Api;
+    convertClassStringToObject?: boolean;
+    casing?: 'pascal' | 'kebab';
+}
+export type VueMetadata = {};
+export type Prop<T> = {
+    (): T;
+} | {
+    new (...args: never[]): T & object;
+} | {
+    new (...args: string[]): Function;
+};
+export type PropType<T> = Prop<T> | Prop<T>[];
+export type PropValidator<T> = PropOptions<T> | PropType<T>;
+export interface PropOptions<T = any> {
+    type?: PropType<T>;
+    required?: boolean;
+    default?: T | null | undefined | (() => T | null | undefined);
+    validator?(value: T): boolean;
+}
+export type DefaultProps = Record<string, any>;
+export type RecordPropsDefinition<T> = {
+    [K in keyof T]: PropValidator<T[K]>;
+};
+export type ArrayPropsDefinition<T> = (keyof T)[];
+export type PropsDefinition<T> = ArrayPropsDefinition<T> | RecordPropsDefinition<T>;

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

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

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

@@ -0,0 +1,3 @@
+import { TranspilerGenerator } from '../../types/transpiler';
+import { ToVueOptions } from './types';
+export declare const componentToVue: TranspilerGenerator<Partial<ToVueOptions>>;