build: adjust esm formats

.github/contributing.md

@@ -71,8 +71,8 @@ yarn build runtime --all
 By default, each package will be built in multiple distribution formats as specified in the `buildOptions.formats` field in its `package.json`. These can be overwritten via the `-f` flag. The following formats are supported:
 
 - **`global`**: for direct use via `<script>` in the browser. The global variable exposed is specified via the `buildOptions.name` field in a package's `package.json`.
-- **`esm`**: for use with bundlers.
-- **`esm-browser`**: for in-browser usage via native ES modules import (`<script type="module">`)
+- **`esm-bundler`**: for use with bundlers like `webpack`, `rollup` and `parcel`.
+- **`esm`**: for usage via native ES modules imports (in browser via `<script type="module">`, or via Node.js native ES modules support in the future)
 - **`cjs`**: for use in Node.js via `require()`.
 
 For example, to build `runtime-core` with the global build only:

packages/compiler-core/package.json

@@ -11,6 +11,7 @@
   "types": "dist/compiler-core.d.ts",
   "buildOptions": {
     "formats": [
+      "esm-bundler",
       "cjs"
     ]
   },

packages/compiler-dom/package.json

@@ -14,9 +14,10 @@
   "buildOptions": {
     "name": "VueDOMCompiler",
     "formats": [
+      "esm-bundler",
       "cjs",
       "global",
-      "esm-browser"
+      "esm"
     ]
   },
   "repository": {

packages/reactivity/package.json

@@ -18,10 +18,10 @@
   "buildOptions": {
     "name": "VueObserver",
     "formats": [
-      "esm",
+      "esm-bundler",
       "cjs",
       "global",
-      "esm-browser"
+      "esm"
     ]
   },
   "keywords": [

packages/runtime-core/package.json

@@ -9,6 +9,12 @@
     "dist"
   ],
   "types": "dist/runtime-core.d.ts",
+  "buildOptions": {
+    "formats": [
+      "esm-bundler",
+      "cjs"
+    ]
+  },
   "sideEffects": false,
   "repository": {
     "type": "git",

packages/runtime-dom/package.json

@@ -14,10 +14,10 @@
   "buildOptions": {
     "name": "VueDOMRuntime",
     "formats": [
-      "esm",
+      "esm-bundler",
       "cjs",
       "global",
-      "esm-browser"
+      "esm"
     ],
     "dts": [
       "jsx.d.ts"

packages/runtime-test/package.json

@@ -2,6 +2,7 @@
   "name": "@vue/runtime-test",
   "version": "3.0.0-alpha.0",
   "description": "@vue/runtime-test",
+  "private": true,
   "main": "index.js",
   "module": "dist/runtime-test.esm-bundler.js",
   "files": [
@@ -16,8 +17,6 @@
   "buildOptions": {
     "name": "VueTestRuntime",
     "formats": [
-      "esm",
-      "cjs",
       "global"
     ]
   },

packages/vue/package.json

@@ -13,10 +13,10 @@
   "buildOptions": {
     "name": "Vue",
     "formats": [
-      "esm",
+      "esm-bundler",
       "cjs",
       "global",
-      "esm-browser"
+      "esm"
     ]
   },
   "repository": {

rollup.config.js

@@ -24,7 +24,7 @@ const knownExternals = fs.readdirSync(packagesDir).filter(p => {
 let hasTSChecked = false
 
 const configs = {
-  esm: {
+  'esm-bundler': {
     file: resolve(`dist/${name}.esm-bundler.js`),
     format: `es`
   },
@@ -36,13 +36,13 @@ const configs = {
     file: resolve(`dist/${name}.global.js`),
     format: `iife`
   },
-  'esm-browser': {
-    file: resolve(`dist/${name}.esm-browser.js`),
+  esm: {
+    file: resolve(`dist/${name}.esm.js`),
     format: `es`
   }
 }
 
-const defaultFormats = ['esm', 'cjs']
+const defaultFormats = ['esm-bundler', 'cjs']
 const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')
 const packageFormats = inlineFormats || packageOptions.formats || defaultFormats
 const packageConfigs = process.env.PROD_ONLY
@@ -54,7 +54,7 @@ if (process.env.NODE_ENV === 'production') {
     if (format === 'cjs' && packageOptions.prod !== false) {
       packageConfigs.push(createProductionConfig(format))
     }
-    if (format === 'global' || format === 'esm-browser') {
+    if (format === 'global' || format === 'esm') {
       packageConfigs.push(createMinifiedConfig(format))
     }
   })
@@ -69,7 +69,7 @@ function createConfig(output, plugins = []) {
     process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
   const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file)
   const isBundlerESMBuild = /\.esm-bundler\.js$/.test(output.file)
-  const isBrowserESMBuild = /esm-browser(\.prod)?\.js$/.test(output.file)
+  const isRawESMBuild = /esm(\.prod)?\.js$/.test(output.file)
   const isRuntimeCompileBuild = /vue\./.test(output.file)
 
   if (isGlobalBuild) {
@@ -103,7 +103,7 @@ function createConfig(output, plugins = []) {
     // Global and Browser ESM builds inlines everything so that they can be
     // used alone.
     external:
-      isGlobalBuild || isBrowserESMBuild
+      isGlobalBuild || isRawESMBuild
         ? []
         : knownExternals.concat(Object.keys(pkg.dependencies || [])),
     plugins: [
@@ -114,7 +114,7 @@ function createConfig(output, plugins = []) {
       createReplacePlugin(
         isProductionBuild,
         isBundlerESMBuild,
-        (isGlobalBuild || isBrowserESMBuild) &&
+        (isGlobalBuild || isRawESMBuild) &&
           !packageOptions.enableNonBrowserBranches,
         isRuntimeCompileBuild
       ),
@@ -145,7 +145,7 @@ function createReplacePlugin(
         !isProduction,
     // this is only used during tests
     __TEST__: isBundlerESMBuild ? `(process.env.NODE_ENV === 'test')` : false,
-    // If the build is expected to run directly in the browser (global / esm-browser builds)
+    // If the build is expected to run directly in the browser (global / esm builds)
     __BROWSER__: isBrowserBuild,
     // support compile in browser?
     __RUNTIME_COMPILE__: isRuntimeCompileBuild,

scripts/build.js

@@ -27,7 +27,8 @@ const targets = args._
 const formats = args.formats || args.f
 const devOnly = args.devOnly || args.d
 const prodOnly = !devOnly && (args.prodOnly || args.p)
-const buildTypes = args.t || args.types
+const isRelease = args.release
+const buildTypes = args.t || args.types || isRelease
 const buildAllMatching = args.all || args.a
 const lean = args.lean || args.l
 const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
@@ -54,6 +55,11 @@ async function build(target) {
   const pkgDir = path.resolve(`packages/${target}`)
   const pkg = require(`${pkgDir}/package.json`)
 
+  // only build published packages for release
+  if (isRelease && pkg.private) {
+    return
+  }
+
   // if building a specific format, do not remove dist.
   if (!formats) {
     await fs.remove(`${pkgDir}/dist`)

scripts/release.js

@@ -79,7 +79,7 @@ async function main() {
 
   // build all packages with types
   if (!skipBuild) {
-    await run('yarn', ['build', '-t'])
+    await run('yarn', ['build', '--release'])
     // test generated dts files
     await run(bin('tsd'))
   }