feat: build vapor & add @vue/vapor package

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

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

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')
+}

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

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'

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.

packages/vue-vapor/README.md

@@ -0,0 +1 @@
+# @vue/vapor

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')
+}

packages/vue-vapor/index.mjs

@@ -0,0 +1 @@
+export * from './index.js'

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:*"
+  }
+}

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()
+  }
+}

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'

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 */
+    )
+  }
+}

packages/vue/compiler-vapor/index.d.mts

@@ -1 +0,0 @@
-export * from '@vue/compiler-vapor'

packages/vue/compiler-vapor/index.d.ts

@@ -1 +0,0 @@
-export * from '@vue/compiler-vapor'

packages/vue/compiler-vapor/index.js

@@ -1 +0,0 @@
-module.exports = require('@vue/compiler-vapor')

packages/vue/compiler-vapor/index.mjs

@@ -1 +0,0 @@
-export * from '@vue/compiler-vapor'

packages/vue/compiler-vapor/package.json

@@ -1,4 +0,0 @@
-{
-  "main": "index.js",
-  "module": "index.mjs"
-}

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:*"
   },

packages/vue/vapor/index.d.mts

@@ -1 +1 @@
-export * from '@vue/runtime-vapor'
+export * from '@vue/vapor'

packages/vue/vapor/index.d.ts

@@ -1 +1 @@
-export * from '@vue/runtime-vapor'
+export * from '@vue/vapor'

packages/vue/vapor/index.js

@@ -1 +1 @@
-module.exports = require('@vue/runtime-vapor')
+module.exports = require('@vue/vapor')

packages/vue/vapor/index.mjs

@@ -1 +1 @@
-export * from '@vue/runtime-vapor'
+export * from '@vue/vapor'

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:

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<T, K> & Required<Pick<T, K>> } MarkRequired
+ * @template T
+ * @template {keyof T} K
+ */
+
+/** @typedef {import('rollup').ModuleFormat} Format */
+/** @typedef {MarkRequired<import('rollup').OutputOptions, 'file'>} Output */
+
+/** @type {Record<string, Output>} */
 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<string, string>} */
     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({

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())

scripts/pre-dev-sfc.js → scripts/prepare-cjs.js

@@ -6,6 +6,7 @@ const packagesToCheck = [
   'compiler-core',
   'compiler-dom',
   'compiler-ssr',
+  'compiler-vapor',
   'reactivity-transform',
   'shared'
 ]

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()

tsconfig.build.json

@@ -10,6 +10,7 @@
     "packages/runtime-test",
     "packages/template-explorer",
     "packages/sfc-playground",
-    "packages/dts-test"
+    "packages/dts-test",
+    "playground"
   ]
 }

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"]
     }