@builder.io/mitosis/dist/src/generators/vue/compositionApi.js

Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io

"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;