From: 三咲智子 Kevin Deng Date: Tue, 28 Nov 2023 17:25:46 +0000 (+0800) Subject: feat: build vapor & add @vue/vapor package X-Git-Tag: v3.6.0-alpha.1~16^2~796 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ab9a2d28d7ebc0c2cf7e6e2d17904536c2f9b53e;p=thirdparty%2Fvuejs%2Fcore.git feat: build vapor & add @vue/vapor package --- diff --git a/package.json b/package.json index e2db412dcb..27814f80d2 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,16 @@ { "private": true, - "version": "3.3.9", + "version": "0.0.0-vapor", "packageManager": "pnpm@8.10.5", "type": "module", "scripts": { - "dev": "node scripts/dev.js", + "dev": "node scripts/dev.js vue vue-vapor", "build": "node scripts/build.js", "build-dts": "tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js", "clean": "rimraf packages/*/dist temp .eslintcache", "size": "run-s \"size-*\" && tsx scripts/usage-size.ts", - "size-global": "node scripts/build.js vue runtime-dom compiler-dom compiler-vapor -f global -p --size", - "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime", + "size-global": "node scripts/build.js vue vue-vapor runtime-dom runtime-vapor -f global -p --size", + "size-esm-runtime": "node scripts/build.js vue vue-vapor -f esm-bundler-runtime", "size-esm": "node scripts/build.js runtime-dom runtime-vapor runtime-core reactivity shared -f esm-bundler", "check": "tsc --incremental --noEmit", "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts", @@ -25,11 +25,14 @@ "release": "node scripts/release.js", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", "dev-esm": "node scripts/dev.js -if esm-bundler-runtime", + "dev-prepare-cjs": "node scripts/prepare-cjs.js || npm run build-all-cjs", "dev-compiler": "run-p \"dev template-explorer\" serve", - "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run", - "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-all-cjs", + "dev-sfc": "run-s dev-prepare-cjs dev-sfc-run", "dev-sfc-serve": "vite packages/sfc-playground --host", "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve", + "dev-vapor": "run-s dev-prepare-cjs dev-vapor-run", + "dev-vapor-run": "run-p \"dev vue-vapor -if esm-bundler-runtime\" \"dev vue-vapor -ipf esm-browser-runtime\" dev-vapor-serve", + "dev-vapor-serve": "pnpm -C playground run dev", "serve": "serve", "open": "open http://localhost:3000/packages/template-explorer/local.html", "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self", diff --git a/packages/compiler-vapor/package.json b/packages/compiler-vapor/package.json index 98124ac674..1b63871509 100644 --- a/packages/compiler-vapor/package.json +++ b/packages/compiler-vapor/package.json @@ -1,6 +1,6 @@ { "name": "@vue/compiler-vapor", - "version": "0.0.0", + "version": "0.0.0-vapor", "description": "@vue/compiler-vapor", "main": "index.js", "module": "dist/compiler-vapor.esm-bundler.js", diff --git a/packages/runtime-vapor/index.js b/packages/runtime-vapor/index.js new file mode 100644 index 0000000000..5eefe1299b --- /dev/null +++ b/packages/runtime-vapor/index.js @@ -0,0 +1,7 @@ +'use strict' + +if (process.env.NODE_ENV === 'production') { + module.exports = require('./dist/runtime-vapor.cjs.prod.js') +} else { + module.exports = require('./dist/runtime-vapor.cjs.js') +} diff --git a/packages/runtime-vapor/package.json b/packages/runtime-vapor/package.json index a2f218cbf0..1e97e3bcef 100644 --- a/packages/runtime-vapor/package.json +++ b/packages/runtime-vapor/package.json @@ -1,6 +1,6 @@ { "name": "@vue/runtime-vapor", - "version": "0.0.0", + "version": "0.0.0-vapor", "description": "@vue/runtime-vapor", "main": "index.js", "module": "dist/runtime-vapor.esm-bundler.js", diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts index d6c95e4376..8c315ecab8 100644 --- a/packages/runtime-vapor/src/index.ts +++ b/packages/runtime-vapor/src/index.ts @@ -1,3 +1,40 @@ +// Core API ------------------------------------------------------------------ + +export const version = __VERSION__ +export { + // core + reactive, + ref, + readonly, + // utilities + unref, + proxyRefs, + isRef, + toRef, + toValue, + toRefs, + isProxy, + isReactive, + isReadonly, + isShallow, + // advanced + customRef, + triggerRef, + shallowRef, + shallowReactive, + shallowReadonly, + markRaw, + toRaw, + // effect + effect, + stop, + ReactiveEffect, + // effect scope + effectScope, + EffectScope, + getCurrentScope, + onScopeDispose +} from '@vue/reactivity' export * from './on' export * from './render' export * from './template' diff --git a/packages/vue-vapor/LICENSE b/packages/vue-vapor/LICENSE new file mode 100644 index 0000000000..15f1f7e7a4 --- /dev/null +++ b/packages/vue-vapor/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2018-present, Yuxi (Evan) You + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/packages/vue-vapor/README.md b/packages/vue-vapor/README.md new file mode 100644 index 0000000000..ceb922d7cf --- /dev/null +++ b/packages/vue-vapor/README.md @@ -0,0 +1 @@ +# @vue/vapor diff --git a/packages/vue-vapor/index.js b/packages/vue-vapor/index.js new file mode 100644 index 0000000000..2625461ea9 --- /dev/null +++ b/packages/vue-vapor/index.js @@ -0,0 +1,7 @@ +'use strict' + +if (process.env.NODE_ENV === 'production') { + module.exports = require('./dist/vue-vapor.cjs.prod.js') +} else { + module.exports = require('./dist/vue-vapor.cjs.js') +} diff --git a/packages/vue-vapor/index.mjs b/packages/vue-vapor/index.mjs new file mode 100644 index 0000000000..8b43612483 --- /dev/null +++ b/packages/vue-vapor/index.mjs @@ -0,0 +1 @@ +export * from './index.js' \ No newline at end of file diff --git a/packages/vue-vapor/package.json b/packages/vue-vapor/package.json new file mode 100644 index 0000000000..cc6d40a550 --- /dev/null +++ b/packages/vue-vapor/package.json @@ -0,0 +1,59 @@ +{ + "name": "@vue/vapor", + "version": "0.0.0-vapor", + "description": "The progressive JavaScript framework for building modern web UI.", + "main": "index.js", + "module": "dist/vue-vapor.runtime.esm-bundler.js", + "types": "dist/vue-vapor.d.ts", + "unpkg": "dist/vue-vapor.global.js", + "jsdelivr": "dist/vue-vapor.global.js", + "files": [ + "index.js", + "index.mjs", + "dist" + ], + "exports": { + ".": { + "import": { + "types": "./dist/vue-vapor.d.mts", + "node": "./index.mjs", + "default": "./dist/vue-vapor.runtime.esm-bundler.js" + }, + "require": { + "types": "./dist/vue-vapor.d.ts", + "default": "./index.js" + } + }, + "./dist/*": "./dist/*", + "./package.json": "./package.json" + }, + "buildOptions": { + "name": "VueVapor", + "formats": [ + "esm-bundler", + "esm-bundler-runtime", + "cjs", + "global", + "global-runtime", + "esm-browser", + "esm-browser-runtime" + ] + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/core-vapor.git" + }, + "keywords": [ + "vue" + ], + "author": "Evan You", + "license": "MIT", + "bugs": { + "url": "https://github.com/vuejs/core-vapor/issues" + }, + "homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/vapor#readme", + "dependencies": { + "@vue/runtime-vapor": "workspace:*", + "@vue/compiler-vapor": "workspace:*" + } +} diff --git a/packages/vue-vapor/src/dev.ts b/packages/vue-vapor/src/dev.ts new file mode 100644 index 0000000000..79f233ed92 --- /dev/null +++ b/packages/vue-vapor/src/dev.ts @@ -0,0 +1,15 @@ +import { initCustomFormatter } from '@vue/runtime-dom' + +export function initDev() { + if (__BROWSER__) { + /* istanbul ignore if */ + if (!__ESM_BUNDLER__) { + console.info( + `You are running a development build of Vue.\n` + + `Make sure to use the production build (*.prod.js) when deploying for production.` + ) + } + + initCustomFormatter() + } +} diff --git a/packages/vue-vapor/src/index.ts b/packages/vue-vapor/src/index.ts new file mode 100644 index 0000000000..6c963db54a --- /dev/null +++ b/packages/vue-vapor/src/index.ts @@ -0,0 +1,12 @@ +// This entry is the "full-build" that includes both the runtime +// and the compiler, and supports on-the-fly compilation of the template option. +import { initDev } from './dev' + +if (__DEV__) { + initDev() +} + +// TODO register compiler + +export { compile } from '@vue/compiler-vapor' +export * from '@vue/runtime-vapor' diff --git a/packages/vue-vapor/src/runtime.ts b/packages/vue-vapor/src/runtime.ts new file mode 100644 index 0000000000..753b4b5974 --- /dev/null +++ b/packages/vue-vapor/src/runtime.ts @@ -0,0 +1,26 @@ +// This entry exports the runtime only, and is built as +// `dist/vue.esm-bundler.js` which is used by default for bundlers. +import { initDev } from './dev' +// TODO implement warn +// import { warn } from '@vue/runtime-vapor' + +if (__DEV__) { + initDev() +} + +export * from '@vue/runtime-vapor' + +export const compile = () => { + if (__DEV__) { + console.warn( + `Runtime compilation is not supported in this build of Vue.` + + (__ESM_BUNDLER__ + ? ` Configure your bundler to alias "vue" to "vue/dist/vue-vapor.esm-bundler.js".` + : __ESM_BROWSER__ + ? ` Use "vue-vapor.esm-browser.js" instead.` + : __GLOBAL__ + ? ` Use "vue-vapor.global.js" instead.` + : ``) /* should not happen */ + ) + } +} diff --git a/packages/vue/compiler-vapor/index.d.mts b/packages/vue/compiler-vapor/index.d.mts deleted file mode 100644 index 0afc1e937e..0000000000 --- a/packages/vue/compiler-vapor/index.d.mts +++ /dev/null @@ -1 +0,0 @@ -export * from '@vue/compiler-vapor' diff --git a/packages/vue/compiler-vapor/index.d.ts b/packages/vue/compiler-vapor/index.d.ts deleted file mode 100644 index 0afc1e937e..0000000000 --- a/packages/vue/compiler-vapor/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@vue/compiler-vapor' diff --git a/packages/vue/compiler-vapor/index.js b/packages/vue/compiler-vapor/index.js deleted file mode 100644 index 228123f1e9..0000000000 --- a/packages/vue/compiler-vapor/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@vue/compiler-vapor') diff --git a/packages/vue/compiler-vapor/index.mjs b/packages/vue/compiler-vapor/index.mjs deleted file mode 100644 index 0afc1e937e..0000000000 --- a/packages/vue/compiler-vapor/index.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from '@vue/compiler-vapor' diff --git a/packages/vue/compiler-vapor/package.json b/packages/vue/compiler-vapor/package.json deleted file mode 100644 index 4cf44a46cb..0000000000 --- a/packages/vue/compiler-vapor/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "main": "index.js", - "module": "index.mjs" -} diff --git a/packages/vue/package.json b/packages/vue/package.json index be8d69fd3b..19d57a8c69 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -63,16 +63,6 @@ "default": "./vapor/index.js" } }, - "./compiler-vapor": { - "import": { - "types": "./compiler-vapor/index.d.mts", - "default": "./compiler-vapor/index.mjs" - }, - "require": { - "types": "./compiler-vapor/index.d.ts", - "default": "./compiler-vapor/index.js" - } - }, "./jsx-runtime": { "types": "./jsx-runtime/index.d.ts", "import": "./jsx-runtime/index.mjs", @@ -117,10 +107,9 @@ "homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/vue#readme", "dependencies": { "@vue/shared": "workspace:*", + "@vue/vapor": "workspace:*", "@vue/compiler-dom": "workspace:*", "@vue/runtime-dom": "workspace:*", - "@vue/runtime-vapor": "workspace:*", - "@vue/compiler-vapor": "workspace:*", "@vue/compiler-sfc": "workspace:*", "@vue/server-renderer": "workspace:*" }, diff --git a/packages/vue/vapor/index.d.mts b/packages/vue/vapor/index.d.mts index bddf2c71a4..658617456b 100644 --- a/packages/vue/vapor/index.d.mts +++ b/packages/vue/vapor/index.d.mts @@ -1 +1 @@ -export * from '@vue/runtime-vapor' +export * from '@vue/vapor' diff --git a/packages/vue/vapor/index.d.ts b/packages/vue/vapor/index.d.ts index bddf2c71a4..658617456b 100644 --- a/packages/vue/vapor/index.d.ts +++ b/packages/vue/vapor/index.d.ts @@ -1 +1 @@ -export * from '@vue/runtime-vapor' +export * from '@vue/vapor' diff --git a/packages/vue/vapor/index.js b/packages/vue/vapor/index.js index 684bafc39b..a6b4e3cdaf 100644 --- a/packages/vue/vapor/index.js +++ b/packages/vue/vapor/index.js @@ -1 +1 @@ -module.exports = require('@vue/runtime-vapor') +module.exports = require('@vue/vapor') diff --git a/packages/vue/vapor/index.mjs b/packages/vue/vapor/index.mjs index bddf2c71a4..658617456b 100644 --- a/packages/vue/vapor/index.mjs +++ b/packages/vue/vapor/index.mjs @@ -1 +1 @@ -export * from '@vue/runtime-vapor' +export * from '@vue/vapor' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef2662c476..5ced0741e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -413,21 +413,18 @@ importers: '@vue/compiler-sfc': specifier: workspace:* version: link:../compiler-sfc - '@vue/compiler-vapor': - specifier: workspace:* - version: link:../compiler-vapor '@vue/runtime-dom': specifier: workspace:* version: link:../runtime-dom - '@vue/runtime-vapor': - specifier: workspace:* - version: link:../runtime-vapor '@vue/server-renderer': specifier: workspace:* version: link:../server-renderer '@vue/shared': specifier: workspace:* version: link:../shared + '@vue/vapor': + specifier: workspace:* + version: link:../vue-vapor typescript: specifier: '*' version: 5.2.2 @@ -447,6 +444,15 @@ importers: specifier: workspace:* version: link:../vue + packages/vue-vapor: + dependencies: + '@vue/compiler-vapor': + specifier: workspace:* + version: link:../compiler-vapor + '@vue/runtime-vapor': + specifier: workspace:* + version: link:../runtime-vapor + playground: dependencies: vue: diff --git a/rollup.config.js b/rollup.config.js index d8dfc98a39..63d62b7304 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -27,6 +27,7 @@ const consolidatePkg = require('@vue/consolidate/package.json') const packagesDir = path.resolve(__dirname, 'packages') const packageDir = path.resolve(packagesDir, process.env.TARGET) +/** @param {string} p */ const resolve = p => path.resolve(packageDir, p) const pkg = require(resolve(`package.json`)) const packageOptions = pkg.buildOptions || {} @@ -34,6 +35,16 @@ const name = packageOptions.filename || path.basename(packageDir) const [enumPlugin, enumDefines] = constEnum() +/** + * @typedef { Omit & Required> } MarkRequired + * @template T + * @template {keyof T} K + */ + +/** @typedef {import('rollup').ModuleFormat} Format */ +/** @typedef {MarkRequired} Output */ + +/** @type {Record} */ const outputConfigs = { 'esm-bundler': { file: resolve(`dist/${name}.esm-bundler.js`), @@ -71,24 +82,37 @@ const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',') const packageFormats = inlineFormats || packageOptions.formats || defaultFormats const packageConfigs = process.env.PROD_ONLY ? [] - : packageFormats.map(format => createConfig(format, outputConfigs[format])) + : packageFormats.map( + /** @param {Format} format */ + format => createConfig(format, outputConfigs[format]) + ) if (process.env.NODE_ENV === 'production') { - packageFormats.forEach(format => { - if (packageOptions.prod === false) { - return - } - if (format === 'cjs') { - packageConfigs.push(createProductionConfig(format)) - } - if (/^(global|esm-browser)(-runtime)?/.test(format)) { - packageConfigs.push(createMinifiedConfig(format)) + packageFormats.forEach( + /** @param {Format} format */ + format => { + if (packageOptions.prod === false) { + return + } + if (format === 'cjs') { + packageConfigs.push(createProductionConfig(format)) + } + if (/^(global|esm-browser)(-runtime)?/.test(format)) { + packageConfigs.push(createMinifiedConfig(format)) + } } - }) + ) } export default packageConfigs +/** + * + * @param {Format} format + * @param {Output} output + * @param {import('rollup').Plugin[]} plugins + * @returns {import('rollup').RollupOptions} + */ function createConfig(format, output, plugins = []) { if (!output) { console.log(pico.yellow(`invalid format: "${format}"`)) @@ -120,18 +144,53 @@ function createConfig(format, output, plugins = []) { output.name = packageOptions.name } - let entryFile = /runtime$/.test(format) ? `src/runtime.ts` : `src/index.ts` + let entryFile = /\bruntime\b/.test(format) ? `runtime.ts` : `index.ts` // the compat build needs both default AND named exports. This will cause // Rollup to complain for non-ESM targets, so we use separate entries for // esm vs. non-esm builds. if (isCompatPackage && (isBrowserESMBuild || isBundlerESMBuild)) { - entryFile = /runtime$/.test(format) - ? `src/esm-runtime.ts` - : `src/esm-index.ts` + entryFile = `esm-${entryFile}` + } + entryFile = 'src/' + entryFile + + return { + input: resolve(entryFile), + // Global and Browser ESM builds inlines everything so that they can be + // used alone. + external: resolveExternal(), + plugins: [ + json({ + namedExports: false + }), + alias({ + entries + }), + enumPlugin, + ...resolveReplace(), + esbuild({ + tsconfig: path.resolve(__dirname, 'tsconfig.json'), + sourceMap: output.sourcemap, + minify: false, + target: isServerRenderer || isNodeBuild ? 'es2019' : 'es2015', + define: resolveDefine() + }), + ...resolveNodePlugins(), + ...plugins + ], + output, + onwarn(msg, warn) { + if (!/Circular/.test(msg.message)) { + warn(msg) + } + }, + treeshake: { + moduleSideEffects: false + } } function resolveDefine() { + /** @type {Record} */ const replacements = { __COMMIT__: `"${process.env.COMMIT}"`, __VERSION__: `"${masterVersion}"`, @@ -170,7 +229,7 @@ function createConfig(format, output, plugins = []) { //__RUNTIME_COMPILE__=true pnpm build runtime-core Object.keys(replacements).forEach(key => { if (key in process.env) { - replacements[key] = process.env[key] + replacements[key] = /** @type {string} */ (process.env[key]) } }) return replacements @@ -240,6 +299,7 @@ function createConfig(format, output, plugins = []) { function resolveNodePlugins() { // we are bundling forked consolidate.js in compiler-sfc which dynamically // requires a ton of template engines which should be ignored. + /** @type { string[] } */ let cjsIgnores = [] if ( pkg.name === '@vue/compiler-sfc' || @@ -272,56 +332,27 @@ function createConfig(format, output, plugins = []) { return nodePlugins } - - return { - input: resolve(entryFile), - // Global and Browser ESM builds inlines everything so that they can be - // used alone. - external: resolveExternal(), - plugins: [ - json({ - namedExports: false - }), - alias({ - entries - }), - enumPlugin, - ...resolveReplace(), - esbuild({ - tsconfig: path.resolve(__dirname, 'tsconfig.json'), - sourceMap: output.sourcemap, - minify: false, - target: isServerRenderer || isNodeBuild ? 'es2019' : 'es2015', - define: resolveDefine() - }), - ...resolveNodePlugins(), - ...plugins - ], - output, - onwarn: (msg, warn) => { - if (!/Circular/.test(msg)) { - warn(msg) - } - }, - treeshake: { - moduleSideEffects: false - } - } } +/** + * @param {Format} format + */ function createProductionConfig(format) { return createConfig(format, { - file: resolve(`dist/${name}.${format}.prod.js`), - format: outputConfigs[format].format + ...outputConfigs[format], + file: resolve(`dist/${name}.${format}.prod.js`) }) } +/** + * @param {Format} format + */ function createMinifiedConfig(format) { return createConfig( format, { - file: outputConfigs[format].file.replace(/\.js$/, '.prod.js'), - format: outputConfigs[format].format + ...outputConfigs[format], + file: outputConfigs[format].file.replace(/\.js$/, '.prod.js') }, [ terser({ diff --git a/scripts/dev.js b/scripts/dev.js index ec5f9c674c..33c1a84a70 100644 --- a/scripts/dev.js +++ b/scripts/dev.js @@ -14,11 +14,10 @@ import { polyfillNode } from 'esbuild-plugin-polyfill-node' const require = createRequire(import.meta.url) const __dirname = dirname(fileURLToPath(import.meta.url)) const args = minimist(process.argv.slice(2)) -const target = args._[0] || 'vue' +const targets = args._ || ['vue'] const format = args.f || 'global' const prod = args.p || false const inlineDeps = args.i || args.inline -const pkg = require(`../packages/${target}/package.json`) // resolve output const outputFormat = format.startsWith('global') @@ -31,99 +30,102 @@ const postfix = format.endsWith('-runtime') ? `runtime.${format.replace(/-runtime$/, '')}` : format -const outfile = resolve( - __dirname, - `../packages/${target}/dist/${ - target === 'vue-compat' ? `vue` : target - }.${postfix}.${prod ? `prod.` : ``}js` -) -const relativeOutfile = relative(process.cwd(), outfile) +for (const target of targets) { + const pkg = require(`../packages/${target}/package.json`) + const outfile = resolve( + __dirname, + `../packages/${target}/dist/${ + target === 'vue-compat' ? `vue` : target + }.${postfix}.${prod ? `prod.` : ``}js` + ) + const relativeOutfile = relative(process.cwd(), outfile) -// resolve externals -// TODO this logic is largely duplicated from rollup.config.js -let external = [] -if (!inlineDeps) { - // cjs & esm-bundler: external all deps - if (format === 'cjs' || format.includes('esm-bundler')) { - external = [ - ...external, - ...Object.keys(pkg.dependencies || {}), - ...Object.keys(pkg.peerDependencies || {}), - // for @vue/compiler-sfc / server-renderer - 'path', - 'url', - 'stream' - ] - } + // resolve externals + // TODO this logic is largely duplicated from rollup.config.js + let external = [] + if (!inlineDeps) { + // cjs & esm-bundler: external all deps + if (format === 'cjs' || format.includes('esm-bundler')) { + external = [ + ...external, + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), + // for @vue/compiler-sfc / server-renderer + 'path', + 'url', + 'stream' + ] + } - if (target === 'compiler-sfc') { - const consolidatePkgPath = require.resolve( - '@vue/consolidate/package.json', - { - paths: [resolve(__dirname, `../packages/${target}/`)] - } - ) - const consolidateDeps = Object.keys( - require(consolidatePkgPath).devDependencies - ) - external = [ - ...external, - ...consolidateDeps, - 'fs', - 'vm', - 'crypto', - 'react-dom/server', - 'teacup/lib/express', - 'arc-templates/dist/es5', - 'then-pug', - 'then-jade' - ] + if (target === 'compiler-sfc') { + const consolidatePkgPath = require.resolve( + '@vue/consolidate/package.json', + { + paths: [resolve(__dirname, `../packages/${target}/`)] + } + ) + const consolidateDeps = Object.keys( + require(consolidatePkgPath).devDependencies + ) + external = [ + ...external, + ...consolidateDeps, + 'fs', + 'vm', + 'crypto', + 'react-dom/server', + 'teacup/lib/express', + 'arc-templates/dist/es5', + 'then-pug', + 'then-jade' + ] + } } -} -const plugins = [ - { - name: 'log-rebuild', - setup(build) { - build.onEnd(() => { - console.log(`built: ${relativeOutfile}`) - }) + const plugins = [ + { + name: 'log-rebuild', + setup(build) { + build.onEnd(() => { + console.log(`built: ${relativeOutfile}`) + }) + } } + ] + + if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) { + plugins.push(polyfillNode()) } -] -if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) { - plugins.push(polyfillNode()) + esbuild + .context({ + entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)], + outfile, + bundle: true, + external, + sourcemap: true, + format: outputFormat, + globalName: pkg.buildOptions?.name, + platform: format === 'cjs' ? 'node' : 'browser', + plugins, + define: { + __COMMIT__: `"dev"`, + __VERSION__: `"${pkg.version}"`, + __DEV__: prod ? `false` : `true`, + __TEST__: `false`, + __BROWSER__: String( + format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches + ), + __GLOBAL__: String(format === 'global'), + __ESM_BUNDLER__: String(format.includes('esm-bundler')), + __ESM_BROWSER__: String(format.includes('esm-browser')), + __NODE_JS__: String(format === 'cjs'), + __SSR__: String(format === 'cjs' || format.includes('esm-bundler')), + __COMPAT__: String(target === 'vue-compat'), + __FEATURE_SUSPENSE__: `true`, + __FEATURE_OPTIONS_API__: `true`, + __FEATURE_PROD_DEVTOOLS__: `false` + } + }) + .then(ctx => ctx.watch()) } - -esbuild - .context({ - entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)], - outfile, - bundle: true, - external, - sourcemap: true, - format: outputFormat, - globalName: pkg.buildOptions?.name, - platform: format === 'cjs' ? 'node' : 'browser', - plugins, - define: { - __COMMIT__: `"dev"`, - __VERSION__: `"${pkg.version}"`, - __DEV__: prod ? `false` : `true`, - __TEST__: `false`, - __BROWSER__: String( - format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches - ), - __GLOBAL__: String(format === 'global'), - __ESM_BUNDLER__: String(format.includes('esm-bundler')), - __ESM_BROWSER__: String(format.includes('esm-browser')), - __NODE_JS__: String(format === 'cjs'), - __SSR__: String(format === 'cjs' || format.includes('esm-bundler')), - __COMPAT__: String(target === 'vue-compat'), - __FEATURE_SUSPENSE__: `true`, - __FEATURE_OPTIONS_API__: `true`, - __FEATURE_PROD_DEVTOOLS__: `false` - } - }) - .then(ctx => ctx.watch()) diff --git a/scripts/pre-dev-sfc.js b/scripts/prepare-cjs.js similarity index 95% rename from scripts/pre-dev-sfc.js rename to scripts/prepare-cjs.js index b9b3a53446..467875ea8d 100644 --- a/scripts/pre-dev-sfc.js +++ b/scripts/prepare-cjs.js @@ -6,6 +6,7 @@ const packagesToCheck = [ 'compiler-core', 'compiler-dom', 'compiler-ssr', + 'compiler-vapor', 'reactivity-transform', 'shared' ] diff --git a/scripts/usage-size.ts b/scripts/usage-size.ts index 7c96136bc5..b91edb7978 100644 --- a/scripts/usage-size.ts +++ b/scripts/usage-size.ts @@ -8,7 +8,9 @@ import { brotliCompressSync, gzipSync } from 'node:zlib' const sizeDir = path.resolve('temp/size') const vue = path.resolve('./packages/vue/dist/vue.runtime.esm-bundler.js') -const vapor = path.resolve('./packages/vue/vapor/index.mjs') +const vapor = path.resolve( + './packages/vue-vapor/dist/vue-vapor.runtime.esm-bundler.js' +) interface Preset { name: string @@ -24,6 +26,7 @@ const presets: Preset[] = [ imports: ['defineCustomElement'], from: vue }, + { name: 'vapor', imports: '*', from: vapor }, { name: 'overall', imports: [ @@ -35,8 +38,7 @@ const presets: Preset[] = [ 'Suspense' ], from: vue - }, - { name: 'vapor', imports: '*', from: vapor } + } ] main() diff --git a/tsconfig.build.json b/tsconfig.build.json index 954103c0f2..c3be791568 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -10,6 +10,7 @@ "packages/runtime-test", "packages/template-explorer", "packages/sfc-playground", - "packages/dts-test" + "packages/dts-test", + "playground" ] } diff --git a/tsconfig.json b/tsconfig.json index 1864a3e8e0..c1354dfa28 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,7 @@ "rootDir": ".", "paths": { "@vue/compat": ["packages/vue-compat/src"], + "@vue/vapor": ["packages/vue-vapor/src"], "@vue/*": ["packages/*/src"], "vue": ["packages/vue/src"] }