From 9a3d2911d71234981600e92203861ab77020fb3c Mon Sep 17 00:00:00 2001 From: hangzou Date: Tue, 10 Nov 2020 10:38:38 +0800 Subject: [PATCH] feat(build): upgrade rollup-plugin-vue (#563) --- build/build.component.js | 3 +- build/plugin.js | 479 ----------------------------- build/rollup.config.bundle.js | 2 +- package.json | 2 +- packages/dropdown/src/dropdown.vue | 1 - yarn.lock | 7 +- 6 files changed, 7 insertions(+), 487 deletions(-) delete mode 100644 build/plugin.js diff --git a/build/build.component.js b/build/build.component.js index 3a7c8a9e75..4fa52319e7 100644 --- a/build/build.component.js +++ b/build/build.component.js @@ -4,7 +4,7 @@ const path = require('path') const { getPackages } = require('@lerna/project') const css = require('rollup-plugin-css-only') const { nodeResolve } = require('@rollup/plugin-node-resolve') -const vue = require('./plugin.js') +const vue = require('rollup-plugin-vue') const rollup = require('rollup') const typescript = require('rollup-plugin-typescript2') @@ -17,7 +17,6 @@ const runBuild = async () => { .map(pkg => pkg.name) .filter(name => name.includes('@element-plus') && - !name.includes('transition') && !name.includes('utils'), ).slice(process.argv[2], process.argv[3]) diff --git a/build/plugin.js b/build/plugin.js deleted file mode 100644 index 56e11c912a..0000000000 --- a/build/plugin.js +++ /dev/null @@ -1,479 +0,0 @@ -/* eslint-disable */ -'use strict' -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { 'default': mod } -} -Object.defineProperty(exports, '__esModule', { value: true }) -try { - require.resolve('@vue/compiler-sfc') -} -catch (e) { - throw new Error('rollup-plugin-vue requires @vue/compiler-sfc to be present in the dependency ' + - 'tree.') -} -const compiler_sfc_1 = require('@vue/compiler-sfc') -const fs_1 = __importDefault(require('fs')) -const debug_1 = __importDefault(require('debug')) -const hash_sum_1 = __importDefault(require('hash-sum')) -const path_1 = require('path') -const querystring_1 = __importDefault(require('querystring')) -const rollup_pluginutils_1 = require('rollup-pluginutils') -const debug = debug_1.default('rollup-plugin-vue') -const defaultOptions = { - include: /\.vue$/, - exclude: [], - target: 'browser', - exposeFilename: false, - customBlocks: [], -} -function PluginVue(userOptions = {}) { - const options = { - ...defaultOptions, - ...userOptions, - } - const isServer = options.target === 'node' - const isProduction = process.env.NODE_ENV === 'production' || process.env.BUILD === 'production' - const rootContext = process.cwd() - const filter = rollup_pluginutils_1.createFilter(options.include, options.exclude) - const filterCustomBlock = createCustomBlockFilter(options.customBlocks) - return { - name: 'vue', - async resolveId(id, importer) { - const query = parseVuePartRequest(id) - if (query.vue) { - if (query.src) { - const resolved = await this.resolve(query.filename, importer, { - skipSelf: true, - }) - if (resolved) { - cache.set(resolved.id, getDescriptor(importer)) - const [, originalQuery] = id.split('?', 2) - resolved.id += `?${originalQuery}` - return resolved - } - } - else if (!filter(query.filename)) { - return undefined - } - debug(`resolveId(${id})`) - return id - } - return undefined - }, - load(id) { - const query = parseVuePartRequest(id) - if (query.vue) { - if (query.src) { - return fs_1.default.readFileSync(query.filename, 'utf-8') - } - const descriptor = getDescriptor(query.filename) - if (descriptor) { - const block = query.type === 'template' - ? descriptor.template - : query.type === 'script' - ? descriptor.script - : query.type === 'style' - ? descriptor.styles[query.index] - : typeof query.index === 'number' - ? descriptor.customBlocks[query.index] - : null - if (block) { - return { - code: block.content, - map: normalizeSourceMap(block.map, id), - } - } - } - } - return undefined - }, - async transform(code, id) { - const query = parseVuePartRequest(id) - if (query.vue) { - if (!query.src && !filter(query.filename)) - return null - const descriptor = getDescriptor(query.filename) - const hasScoped = descriptor.styles.some(s => s.scoped) - if (query.src) { - this.addWatchFile(query.filename) - } - if (query.type === 'template') { - debug(`transform(${id})`) - const block = descriptor.template - const preprocessLang = block.lang - const preprocessOptions = preprocessLang && - options.templatePreprocessOptions && - options.templatePreprocessOptions[preprocessLang] - const result = compiler_sfc_1.compileTemplate({ - filename: query.filename, - source: code, - inMap: query.src ? undefined : block.map, - preprocessLang, - preprocessOptions, - preprocessCustomRequire: options.preprocessCustomRequire, - compiler: options.compiler, - ssr: isServer, - compilerOptions: { - ...options.compilerOptions, - scopeId: hasScoped ? `data-v-${query.id}` : undefined, - bindingMetadata: descriptor.script - ? descriptor.script.bindings - : undefined, - }, - transformAssetUrls: options.transformAssetUrls, - }) - if (result.errors.length) { - result.errors.forEach(error => this.error(typeof error === 'string' - ? { id: query.filename, message: error } - : createRollupError(query.filename, error))) - return null - } - if (result.tips.length) { - result.tips.forEach(tip => this.warn({ - id: query.filename, - message: tip, - })) - } - return { - code: result.code, - map: normalizeSourceMap(result.map, id), - } - } - else if (query.type === 'style') { - debug(`transform(${id})`) - const block = descriptor.styles[query.index] - let preprocessOptions = options.preprocessOptions || {} - const preprocessLang = (options.preprocessStyles - ? block.lang - : undefined) - if (preprocessLang) { - preprocessOptions = - preprocessOptions[preprocessLang] || preprocessOptions - // include node_modules for imports by default - switch (preprocessLang) { - case 'scss': - case 'sass': - preprocessOptions = { - includePaths: ['node_modules'], - ...preprocessOptions, - } - break - case 'less': - case 'stylus': - preprocessOptions = { - paths: ['node_modules'], - ...preprocessOptions, - } - } - } - else { - preprocessOptions = {} - } - const result = await compiler_sfc_1.compileStyleAsync({ - filename: query.filename, - id: `data-v-${query.id}`, - source: code, - scoped: block.scoped, - vars: !!block.vars, - modules: !!block.module, - postcssOptions: options.postcssOptions, - postcssPlugins: options.postcssPlugins, - modulesOptions: options.cssModulesOptions, - preprocessLang, - preprocessCustomRequire: options.preprocessCustomRequire, - preprocessOptions, - }) - if (result.errors.length) { - result.errors.forEach(error => this.error({ - id: query.filename, - message: error.message, - })) - return null - } - if (query.module) { - return { - code: `export default ${_(result.modules)}`, - map: null, - } - } - else { - return { - code: result.code, - map: normalizeSourceMap(result.map, id), - } - } - } - return null - } - else if (filter(id)) { - debug(`transform(${id})`) - const { descriptor, errors } = parseSFC(code, id, rootContext) - if (errors.length) { - errors.forEach(error => this.error(createRollupError(id, error))) - return null - } - // module id for scoped CSS & hot-reload - const output = transformVueSFC(code, id, descriptor, { rootContext, isProduction, isServer, filterCustomBlock }, options) - debug('transient .vue file:', '\n' + output + '\n') - return { - code: output, - map: { - mappings: '', - }, - } - } - else { - return null - } - }, - } -} -exports.default = PluginVue -function createCustomBlockFilter(queries) { - if (!queries || queries.length === 0) - return () => false - const allowed = new Set(queries.filter(query => /^[a-z]/i.test(query))) - const disallowed = new Set(queries - .filter(query => /^![a-z]/i.test(query)) - .map(query => query.substr(1))) - const allowAll = queries.includes('*') || !queries.includes('!*') - return type => { - if (allowed.has(type)) - return true - if (disallowed.has(type)) - return true - return allowAll - } -} -function parseVuePartRequest(id) { - const [filename, query] = id.split('?', 2) - if (!query) - return { vue: false, filename } - const raw = querystring_1.default.parse(query) - if ('vue' in raw) { - return { - ...raw, - filename, - vue: true, - index: Number(raw.index), - src: 'src' in raw, - scoped: 'scoped' in raw, - } - } - return { vue: false, filename } -} -const cache = new Map() -function getDescriptor(id) { - if (cache.has(id)) { - return cache.get(id) - } - throw new Error(`${id} is not parsed yet`) -} -function parseSFC(code, id, sourceRoot) { - const { descriptor, errors } = compiler_sfc_1.parse(code, { - sourceMap: true, - filename: id, - sourceRoot: sourceRoot, - }) - cache.set(id, descriptor) - return { descriptor, errors: errors } -} -function transformVueSFC(code, resourcePath, descriptor, { rootContext, isProduction, isServer, filterCustomBlock }, options) { - const shortFilePath = path_1.relative(rootContext, resourcePath) - .replace(/^(\.\.[\/\\])+/, '') - .replace(/\\/g, '/') - const id = hash_sum_1.default(isProduction ? shortFilePath + '\n' + code : shortFilePath) - // feature information - const hasScoped = descriptor.styles.some(s => s.scoped) - const templateImport = !descriptor.template - ? '' - : getTemplateCode(descriptor, resourcePath, id, hasScoped, isServer) - const renderReplace = !descriptor.template - ? '' - : isServer - ? `script.ssrRender = ssrRender` - : `script.render = render` - const scriptImport = getScriptCode(descriptor, resourcePath) - const stylesCode = getStyleCode(descriptor, resourcePath, id, options.preprocessStyles) - const customBlocksCode = getCustomBlock(descriptor, resourcePath, filterCustomBlock) - const output = [ - scriptImport, - templateImport, - stylesCode, - customBlocksCode, - renderReplace, - ] - if (hasScoped) { - output.push(`script.__scopeId = ${_(`data-v-${id}`)}`) - } - if (!isProduction) { - output.push(`script.__file = ${_(shortFilePath)}`) - } - else if (options.exposeFilename) { - output.push(`script.__file = ${_(path_1.basename(shortFilePath))}`) - } - output.push('export default script') - return output.join('\n') -} -function getTemplateCode(descriptor, resourcePath, id, hasScoped, isServer) { - const renderFnName = isServer ? 'ssrRender' : 'render' - let templateImport = `const ${renderFnName} = () => {}` - let templateRequest - if (descriptor.template) { - const src = descriptor.template.src || resourcePath - const idQuery = `&id=${id}` - const scopedQuery = hasScoped ? `&scoped=true` : `` - const srcQuery = descriptor.template.src ? `&src` : `` - const attrsQuery = attrsToQuery(descriptor.template.attrs, 'js', true) - const query = `?vue&type=template${idQuery}${srcQuery}${scopedQuery}${attrsQuery}` - templateRequest = _(src + query) - templateImport = `import { ${renderFnName} } from ${templateRequest}` - } - return templateImport -} -function getScriptCode(descriptor, resourcePath) { - let scriptImport = `const script = {}` - if (descriptor.script || descriptor.scriptSetup) { - if (compiler_sfc_1.compileScript) { - descriptor.script = compiler_sfc_1.compileScript(descriptor) - } - if (descriptor.script) { - const src = descriptor.script.src || resourcePath - const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js') - const srcQuery = descriptor.script.src ? `&src` : `` - const query = `?vue&type=script${srcQuery}${attrsQuery}` - const scriptRequest = _(src + query) - scriptImport = - `import script from ${scriptRequest}\n` + - `export * from ${scriptRequest}` // support named exports - } - } - return scriptImport -} -function getStyleCode(descriptor, resourcePath, id, preprocessStyles) { - let stylesCode = `` - let hasCSSModules = false - if (descriptor.styles.length) { - descriptor.styles.forEach((style, i) => { - const src = style.src || resourcePath - // do not include module in default query, since we use it to indicate - // that the module needs to export the modules json - const attrsQuery = attrsToQuery(style.attrs, 'css', preprocessStyles) - const attrsQueryWithoutModule = attrsQuery.replace(/&module(=true|=[^&]+)?/, '') - // make sure to only pass id when necessary so that we don't inject - // duplicate tags when multiple components import the same css file - const idQuery = style.scoped ? `&id=${id}` : `` - const srcQuery = style.src ? `&src` : `` - const query = `?vue&type=style&index=${i}${srcQuery}${idQuery}` - const styleRequest = src + query + attrsQuery - const styleRequestWithoutModule = src + query + attrsQueryWithoutModule - if (style.module) { - if (!hasCSSModules) { - stylesCode += `\nconst cssModules = script.__cssModules = {}` - hasCSSModules = true - } - stylesCode += genCSSModulesCode(id, i, styleRequest, styleRequestWithoutModule, style.module) - } - else { - stylesCode += `\nimport ${_(styleRequest)}` - } - // TODO SSR critical CSS collection - }) - } - return stylesCode -} -function getCustomBlock(descriptor, resourcePath, filter) { - let code = '' - descriptor.customBlocks.forEach((block, index) => { - if (filter(block.type)) { - const src = block.src || resourcePath - const attrsQuery = attrsToQuery(block.attrs, block.type) - const srcQuery = block.src ? `&src` : `` - const query = `?vue&type=${block.type}&index=${index}${srcQuery}${attrsQuery}` - const request = _(src + query) - code += `import block${index} from ${request}\n` - code += `if (typeof block${index} === 'function') block${index}(script)\n` - } - }) - return code -} -function createRollupError(id, error) { - if ('code' in error) { - return { - id, - plugin: 'vue', - pluginCode: String(error.code), - message: error.message, - frame: error.loc.source, - parserError: error, - loc: error.loc - ? { - file: id, - line: error.loc.start.line, - column: error.loc.start.column, - } - : undefined, - } - } - else { - return { - id, - plugin: 'vue', - message: error.message, - parserError: error, - } - } -} -// these are built-in query parameters so should be ignored -// if the user happen to add them as attrs -const ignoreList = ['id', 'index', 'src', 'type', 'lang'] -function attrsToQuery(attrs, langFallback, forceLangFallback = false) { - let query = `` - for (const name in attrs) { - const value = attrs[name] - if (!ignoreList.includes(name)) { - query += `&${querystring_1.default.escape(name)}${value ? `=${querystring_1.default.escape(String(value))}` : ``}` - } - } - if (langFallback || attrs.lang) { - query += - `lang` in attrs - ? forceLangFallback - ? `&lang.${langFallback}` - : `&lang.${attrs.lang}` - : `&lang.${langFallback}` - } - return query -} -function _(any) { - return JSON.stringify(any) -} -function normalizeSourceMap(map, id) { - if (!map) - return null - if (!id.includes('type=script')) { - map.file = id - map.sources[0] = id - } - return { - ...map, - version: Number(map.version), - mappings: typeof map.mappings === 'string' ? map.mappings : '', - } -} -function genCSSModulesCode( -// @ts-ignore - id, index, request, requestWithoutModule, moduleName) { - const styleVar = `style${index}` - let code = - // first import the CSS for extraction - `\nimport ${_(requestWithoutModule)}` + - // then import the json file to expose to component... - `\nimport ${styleVar} from ${_(request + '.js')}` - // inject variable - const name = typeof moduleName === 'string' ? moduleName : '$style' - code += `\ncssModules["${name}"] = ${styleVar}` - return code -} -// overwrite for cjs require('rollup-plugin-vue')() usage -module.exports = PluginVue diff --git a/build/rollup.config.bundle.js b/build/rollup.config.bundle.js index 7e1b038541..73ea859939 100644 --- a/build/rollup.config.bundle.js +++ b/build/rollup.config.bundle.js @@ -8,7 +8,7 @@ import typescript from 'rollup-plugin-typescript2' import pkg from '../package.json' const deps = Object.keys(pkg.dependencies) // eslint-disable-next-line @typescript-eslint/no-var-requires -const vue = require('./plugin.js') +const vue = require('rollup-plugin-vue') export default [ { diff --git a/package.json b/package.json index f72e77c059..aff34cef5e 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "rollup-plugin-css-only": "^2.1.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.27.3", - "rollup-plugin-vue": "^6.0.0-beta.10", + "rollup-plugin-vue": "^6.0.0-beta.11", "sass": "^1.26.10", "sass-loader": "^10.0.1", "style-loader": "^1.2.1", diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue index ac716bc5a1..885320c6a1 100644 --- a/packages/dropdown/src/dropdown.vue +++ b/packages/dropdown/src/dropdown.vue @@ -46,7 +46,6 @@ import { computed, watch, onMounted, - nextTick, ComponentPublicInstance, } from 'vue' import { on, addClass, removeClass } from '@element-plus/utils/dom' diff --git a/yarn.lock b/yarn.lock index b11ee96cd7..9b2d7b7ed9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10217,9 +10217,10 @@ rollup-plugin-typescript2@^0.27.3: resolve "1.17.0" tslib "2.0.1" -rollup-plugin-vue@^6.0.0-beta.10: - version "6.0.0-beta.10" - resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.10.tgz#66d9b9a8dd2d085267d1cc398ea0113360879ac1" +rollup-plugin-vue@^6.0.0-beta.11: + version "6.0.0-beta.11" + resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.11.tgz#fdbc6b7484a361ef8c5e8009cef4a6bd45435013" + integrity sha512-osqLkFc7N76TOI0CeW0BOujlMFsMIoytyTRVUivaeYSMponNfk1iSuqyoeciUB3EjFqyL/dTTFPi+7rhaAm73w== dependencies: debug "^4.1.1" hash-sum "^2.0.0"