vue-simple-compiler/dist/compiler.js

A lib to compile Vue Single-File Component into plain JavaScript & CSS.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.compile = void 0;
const compiler_sfc_1 = require("vue/compiler-sfc");
const constants_1 = require("./constants");
const transform_1 = require("./transform");
const map_1 = require("./map");
const context_1 = require("./context");
const script_1 = require("./script");
const template_1 = require("./template");
const style_1 = require("./style");
const getErrorResult = (errors, filename) => ({
    js: { filename, code: '' },
    css: [],
    externalJs: [],
    externalCss: [],
    errors: errors.map((error) => typeof error === 'string' ? new Error(error) : error),
});
/**
 * NOTICE: this API is experimental and may change without notice.
 * Compile a vue file into JavaScript and CSS.
 *
 * @param source the source code of the vue file
 * @param options the compilation options
 */
const compile = (source, options) => {
    const context = (0, context_1.createContext)(source, options);
    // get the code structure
    const { descriptor, errors: mainCompilerErrors } = (0, compiler_sfc_1.parse)(source, {
        filename: context.filename,
    });
    if (mainCompilerErrors.length) {
        return getErrorResult(mainCompilerErrors, context.destFilename);
    }
    // get the features
    (0, context_1.resolveFeatures)(descriptor, context);
    const { result: scriptResult, errors: scriptErrors } = (0, script_1.resolveScript)(descriptor, context);
    const { result: templateResult, errors: templateErrors } = (0, template_1.resolveTemplate)(descriptor, context);
    const { files: cssFiles, importList: cssImportList, errors: styleErrors, } = (0, style_1.resolveStyles)(descriptor, context);
    const errors = [
        ...mainCompilerErrors,
        ...(scriptErrors ?? []),
        ...(templateErrors ?? []),
        ...(styleErrors ?? []),
    ];
    if (errors.length ||
        !scriptResult ||
        !templateResult ||
        !cssFiles ||
        !cssImportList) {
        return getErrorResult(errors, context.destFilename);
    }
    // No source map update technically.
    const jsCode = context.options?.autoResolveImports
        ? (0, transform_1.resolveImports)(scriptResult.code, context.options)
        : scriptResult.code;
    const initialSourceMap = {
        version: '3',
        file: context.destFilename,
        sources: [context.filename],
        names: [],
        mappings: '',
        sourcesContent: [source],
    };
    // assemble the final code
    const finalTransformedResult = (0, map_1.bundleSourceMap)([
        { code: cssImportList.join('\n'), sourceMap: initialSourceMap },
        { code: jsCode, sourceMap: scriptResult.sourceMap },
        { code: templateResult.code, sourceMap: templateResult.sourceMap },
        { code: context.addedCodeList.join('\n') },
        {
            code: context.addedProps
                .map(([key, value]) => `${constants_1.COMP_ID}.${key} = ${value}`)
                .join('\n'),
        },
        { code: `export default ${constants_1.COMP_ID}` },
    ]);
    return {
        js: {
            filename: context.destFilename,
            code: finalTransformedResult.code,
            sourceMap: finalTransformedResult.sourceMap,
        },
        css: cssFiles,
        externalJs: context.externalJsList,
        externalCss: context.externalCssList,
        errors: [],
    };
};
exports.compile = compile;