build: add runtime-with-vapor format + fix sfc playground for vapor mode

diff --git a/package.json b/package.json
index 7d6e46dcf63593f1d85e594f969a8e32d82fc50f..8dd04ee5240b2847d56b46955baf2eb018b39cb4 100644 (file)
--- a/package.json
+++ b/package.json
@@ -4,21 +4,21 @@
   "packageManager": "pnpm@9.12.3",
   "type": "module",
   "scripts": {
-    "dev": "node scripts/dev.js vue runtime-vapor",
+    "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
     "build-dts": "tsc -p tsconfig.build.json --noCheck && rollup -c rollup.dts.config.js",
     "clean": "rimraf --glob packages/*/dist temp .eslintcache",
     "size": "run-s \"size-*\" && node scripts/usage-size.js",
-    "size-global": "node scripts/build.js vue runtime-vapor runtime-dom runtime-vapor compiler-dom -f global -p --size",
+    "size-global": "node scripts/build.js vue runtime-dom compiler-dom -f global -p --size",
     "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime",
-    "size-esm": "node scripts/build.js runtime-shared runtime-dom runtime-vapor runtime-core reactivity shared runtime-vapor -f esm-bundler",
+    "size-esm": "node scripts/build.js runtime-shared runtime-dom runtime-core reactivity shared runtime-vapor -f esm-bundler",
     "check": "tsc --incremental --noEmit",
     "lint": "eslint --cache .",
     "format": "prettier --write --cache .",
     "format-check": "prettier --check --cache .",
     "test": "vitest",
     "test-unit": "vitest --project unit",
-    "test-e2e": "node scripts/build.js vue runtime-vapor -f global -d && vitest --project e2e",
+    "test-e2e": "node scripts/build.js vue -f global -d && vitest --project e2e",
     "test-dts": "run-s build-dts test-dts-only",
     "test-dts-only": "tsc -p packages-private/dts-built-test/tsconfig.json && tsc -p ./packages-private/dts-test/tsconfig.test.json",
     "test-coverage": "vitest run --project unit --coverage",
@@ -33,15 +33,13 @@
     "dev-compiler": "run-p \"dev template-explorer\" serve open",
     "dev-sfc": "run-s dev-prepare-cjs dev-sfc-run",
     "dev-sfc-serve": "vite packages-private/sfc-playground",
-    "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-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if vapor\" \"dev vue -ipf vapor\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
     "dev-vapor": "pnpm -C playground run dev",
     "serve": "serve",
     "open": "open http://localhost:3000/packages-private/template-explorer/local.html",
-    "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-browser-esm build-ssr-esm build-sfc-playground-self",
+    "build-sfc-playground": "run-s build-all-cjs build-all-esm build-sfc-playground-self",
     "build-all-cjs": "node scripts/build.js vue runtime compiler reactivity shared -af cjs",
-    "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
-    "build-browser-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler && node scripts/build.js vue -f esm-browser",
-    "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer runtime-vapor -f esm-browser",
+    "build-all-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler,esm-browser,esm-bundler-runtime,esm-browser-runtime && node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground-self": "cd packages-private/sfc-playground && npm run build",
     "preinstall": "npx only-allow pnpm",
     "postinstall": "simple-git-hooks"

diff --git a/packages-private/sfc-playground/src/App.vue b/packages-private/sfc-playground/src/App.vue
index 3315da4a03ae12645c54aa4b53546504bb13387f..683d581afa6381fe754c44d7bcbbbd718af64ac0 100644 (file)
--- a/packages-private/sfc-playground/src/App.vue
+++ b/packages-private/sfc-playground/src/App.vue
@@ -5,10 +5,8 @@ import {
   type SFCOptions,
   useStore,
   useVueImportMap,
-  mergeImportMap,
   File,
   StoreState,
-  ImportMap,
 } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
 import { ref, watchEffect, onMounted, computed, watch } from 'vue'
@@ -31,36 +29,26 @@ const initAutoSave: boolean = JSON.parse(
 )
 const autoSave = ref(initAutoSave)
 
-const {
-  vueVersion,
-  productionMode,
-  importMap: vueImportMap,
-} = useVueImportMap({
-  runtimeDev: import.meta.env.PROD
-    ? `${location.origin}/vue.runtime.esm-browser.js`
-    : `${location.origin}/src/vue-dev-proxy`,
-  runtimeProd: import.meta.env.PROD
-    ? `${location.origin}/vue.runtime.esm-browser.prod.js`
-    : `${location.origin}/src/vue-dev-proxy-prod`,
+const { vueVersion, productionMode, importMap } = useVueImportMap({
+  runtimeDev: () => {
+    return import.meta.env.PROD
+      ? useVaporMode.value
+        ? `${location.origin}/vue.runtime-with-vapor.esm-browser.js`
+        : `${location.origin}/vue.runtime.esm-browser.js`
+      : `${location.origin}/src/vue-dev-proxy`
+  },
+  runtimeProd: () => {
+    return import.meta.env.PROD
+      ? useVaporMode.value
+        ? `${location.origin}/vue.runtime-with-vapor.esm-browser.prod.js`
+        : `${location.origin}/vue.runtime.esm-browser.prod.js`
+      : `${location.origin}/src/vue-dev-proxy-prod`
+  },
   serverRenderer: import.meta.env.PROD
     ? `${location.origin}/server-renderer.esm-browser.js`
     : `${location.origin}/src/vue-server-renderer-dev-proxy`,
 })
 
-const importMap = computed(() => {
-  const vapor = import.meta.env.PROD
-    ? `${location.origin}/vue-vapor.esm-browser.js`
-    : `${location.origin}/src/vue-vapor-dev-proxy`
-
-  const vaporImportMap: ImportMap = {
-    imports: {
-      'vue/vapor': vapor,
-    },
-  }
-
-  return mergeImportMap(vueImportMap.value, vaporImportMap)
-})
-
 let hash = location.hash.slice(1)
 if (hash.startsWith('__DEV__')) {
   hash = hash.slice(7)
@@ -126,7 +114,7 @@ watch(
       files.value['src/index.html'] = new File(
         'src/index.html',
         `<script type="module">
-        import { createVaporApp } from 'vue/vapor'
+        import { createVaporApp } from 'vue'
         import App from './App.vue'
         createVaporApp(App).mount('#app')` +
           '<' +

diff --git a/packages-private/sfc-playground/src/vue-dev-proxy-prod.ts b/packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
index 3b2faf1953365c3d01b9abe0f09770e98ab3929e..6448f9d4c2f79017494797c8afa80af563c88d3c 100644 (file)
--- a/packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
+++ b/packages-private/sfc-playground/src/vue-dev-proxy-prod.ts
@@ -1,2 +1,2 @@
 // serve vue to the iframe sandbox during dev.
-export * from 'vue/dist/vue.runtime.esm-browser.prod.js'
+export * from 'vue/dist/vue.runtime-with-vapor.esm-browser.prod.js'

diff --git a/packages-private/sfc-playground/src/vue-dev-proxy.ts b/packages-private/sfc-playground/src/vue-dev-proxy.ts
index f254416d4fd239d48bc9fcb1c41a426b502afe01..427d41621c2dff9938827156737491a6d4617dc6 100644 (file)
--- a/packages-private/sfc-playground/src/vue-dev-proxy.ts
+++ b/packages-private/sfc-playground/src/vue-dev-proxy.ts
@@ -1,2 +1,2 @@
 // serve vue to the iframe sandbox during dev.
-export * from 'vue'
+export * from 'vue/dist/vue.runtime-with-vapor.esm-browser.js'

diff --git a/packages-private/sfc-playground/src/vue-vapor-dev-proxy.ts b/packages-private/sfc-playground/src/vue-vapor-dev-proxy.ts
deleted file mode 100644 (file)
index cafc65f..0000000
--- a/packages-private/sfc-playground/src/vue-vapor-dev-proxy.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// serve vue/vapor to the iframe sandbox during dev.
-export * from 'vue/vapor'

diff --git a/packages-private/sfc-playground/vite.config.ts b/packages-private/sfc-playground/vite.config.ts
index 62bac8cc6a9a417c0ff1709c9451d03dd82543e3..c1a40fd1ca9367182a4d86afaaeaf218ed78c6dd 100644 (file)
--- a/packages-private/sfc-playground/vite.config.ts
+++ b/packages-private/sfc-playground/vite.config.ts
@@ -53,8 +53,9 @@ function copyVuePlugin(): Plugin {
       copyFile(`vue/dist/vue.esm-browser.prod.js`)
       copyFile(`vue/dist/vue.runtime.esm-browser.js`)
       copyFile(`vue/dist/vue.runtime.esm-browser.prod.js`)
+      copyFile(`vue/dist/vue.runtime-with-vapor.esm-browser.js`)
+      copyFile(`vue/dist/vue.runtime-with-vapor.esm-browser.prod.js`)
       copyFile(`server-renderer/dist/server-renderer.esm-browser.js`)
-      copyFile(`vue-vapor/dist/vue-vapor.esm-browser.js`)
     },
   }
 }

diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index f795150b174f6963f705b0cfc59264207e032afe..9983071609eaad3d1337543438771eed7a8d7c61 100644 (file)
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -333,11 +333,6 @@ export interface CodegenOptions extends SharedTransformCodegenOptions {
    * @default 'vue'
    */
   runtimeModuleName?: string
-  /**
-   * Customize where to import runtime helpers from.
-   * @default 'vue/vapor'
-   */
-  vaporRuntimeModuleName?: string
   /**
    * Customize where to import ssr runtime helpers from/**
    * @default 'vue/server-renderer'

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 2bbc0e549fbd39d2d8e5b0ffb29329508e0c1bd9..b43fc84f4785fd8655c141763f8cb31e271cd4f6 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -379,8 +379,7 @@ export function compileScript(
   const vueImportAliases: Record<string, string> = {}
   for (const key in ctx.userImports) {
     const { source, imported, local } = ctx.userImports[key]
-    if (['vue', 'vue/vapor'].includes(source))
-      vueImportAliases[imported] = local
+    if (source === 'vue') vueImportAliases[imported] = local
   }
 
   // 2.1 process normal <script> body
@@ -736,7 +735,7 @@ export function compileScript(
     ctx.bindingMetadata[key] =
       imported === '*' ||
       (imported === 'default' && source.endsWith('.vue')) ||
-      ['vue', 'vue/vapor'].includes(source)
+      source === 'vue'
         ? BindingTypes.SETUP_CONST
         : BindingTypes.SETUP_MAYBE_REF
   }
@@ -847,7 +846,7 @@ export function compileScript(
     for (const key in allBindings) {
       if (
         allBindings[key] === true &&
-        !['vue', 'vue/vapor'].includes(ctx.userImports[key].source) &&
+        ctx.userImports[key].source !== 'vue' &&
         !ctx.userImports[key].source.endsWith('.vue')
       ) {
         // generate getter for import bindings
@@ -989,8 +988,7 @@ export function compileScript(
     ctx.s.prependLeft(
       startOffset,
       `\n${genDefaultAs} /*@__PURE__*/${ctx.helper(
-        `defineComponent`,
-        vapor,
+        vapor ? `defineVaporComponent` : `defineComponent`,
       )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
       }setup(${args}) {\n${exposeCall}`,
@@ -1031,13 +1029,6 @@ export function compileScript(
         .join(', ')} } from ${importSrc}\n`,
     )
   }
-  if (ctx.vaporHelperImports.size > 0) {
-    ctx.s.prepend(
-      `import { ${[...ctx.vaporHelperImports]
-        .map(h => `${h} as _${h}`)
-        .join(', ')} } from 'vue/vapor'\n`,
-    )
-  }
 
   return {
     ...scriptSetup,

diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index d7c5ef088ebd6a0af04222ffc5b1562d4d16f1c8..47b6b442a492ce092224be86472e7952cf4035ea 100644 (file)
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -64,9 +64,8 @@ export class ScriptCompileContext {
   // codegen
   bindingMetadata: BindingMetadata = {}
   helperImports: Set<string> = new Set()
-  vaporHelperImports: Set<string> = new Set()
-  helper(key: string, vapor?: boolean): string {
-    ;(vapor ? this.vaporHelperImports : this.helperImports).add(key)
+  helper(key: string): string {
+    this.helperImports.add(key)
     return `_${key}`
   }
 

diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 58cae3b884190c3fbbc8c78d30f00b925dc88d90..77b664cc19adeddc902d6a9f47dc6e1bb14f6355 100644 (file)
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -76,7 +76,6 @@ export class CodegenContext {
       scopeId: null,
       runtimeGlobalName: `Vue`,
       runtimeModuleName: `vue`,
-      vaporRuntimeModuleName: 'vue/vapor',
       ssrRuntimeModuleName: 'vue/server-renderer',
       ssr: false,
       isTS: false,
@@ -176,7 +175,7 @@ function genHelperImports({ helpers, vaporHelpers, options }: CodegenContext) {
   if (vaporHelpers.size) {
     imports += `import { ${[...vaporHelpers]
       .map(h => `${h} as _${h}`)
-      .join(', ')} } from '${options.vaporRuntimeModuleName}';\n`
+      .join(', ')} } from 'vue';\n`
   }
   return imports
 }

diff --git a/packages/runtime-vapor/package.json b/packages/runtime-vapor/package.json
index 91703f0793ff3864ae2b558c618ed87be2c3ee65..a76d78f18805ac41588aad1b12555a57a5721f3c 100644 (file)
--- a/packages/runtime-vapor/package.json
+++ b/packages/runtime-vapor/package.json
@@ -14,10 +14,7 @@
   "buildOptions": {
     "name": "VueRuntimeVapor",
     "formats": [
-      "esm-bundler",
-      "esm-browser",
-      "cjs",
-      "global"
+      "esm-bundler"
     ]
   },
   "repository": {

diff --git a/packages/runtime-vapor/src/apiDefineComponent.ts b/packages/runtime-vapor/src/apiDefineComponent.ts
index a9228df475c546d437c9d985be294c52aedfc29a..d23626a53ece7515cab55c8157bb7934c0f9c335 100644 (file)
--- a/packages/runtime-vapor/src/apiDefineComponent.ts
+++ b/packages/runtime-vapor/src/apiDefineComponent.ts
@@ -1,7 +1,7 @@
 import type { VaporComponent } from './component'
 
 /*! #__NO_SIDE_EFFECTS__ */
-export function defineComponent(comp: VaporComponent): VaporComponent {
+export function defineVaporComponent(comp: VaporComponent): VaporComponent {
   // TODO type inference
   return comp
 }

diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 348ee0c15115afaf4b20aaddbbea736e157fec05..ba47805b4821ecc8fdfa3c8b0fca3babee9d9574 100644 (file)
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -1,10 +1,11 @@
+// public APIs
+export { createVaporApp } from './apiCreateApp'
+export { defineVaporComponent } from './apiDefineComponent'
+
+// compiler-use only
 export { createComponent, createComponentWithFallback } from './component'
 export { renderEffect } from './renderEffect'
-export { createVaporApp } from './apiCreateApp'
-export { defineComponent } from './apiDefineComponent'
 export { createSlot } from './componentSlots'
-
-// DOM
 export { template, children, next } from './dom/template'
 export { insert, prepend, remove, createTextNode } from './dom/node'
 export { setStyle } from './dom/style'
@@ -20,6 +21,3 @@ export {
 } from './dom/prop'
 export { on, delegate, delegateEvents, setDynamicEvents } from './dom/event'
 export { setRef } from './dom/templateRef'
-
-// re-exports
-export { resolveComponent } from '@vue/runtime-dom'

diff --git a/packages/vue/package.json b/packages/vue/package.json
index f3437e5fafd7af6102f63b0c1c93c4b39e06516f..171c411525af74e6b9a6c72b209d65f115dfc1a0 100644 (file)
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -89,7 +89,8 @@
       "global",
       "global-runtime",
       "esm-browser",
-      "esm-browser-runtime"
+      "esm-browser-runtime",
+      "vapor"
     ]
   },
   "repository": {

diff --git a/packages/vue/src/runtime-with-vapor.ts b/packages/vue/src/runtime-with-vapor.ts
new file mode 100644 (file)
index 0000000..4f03329
--- /dev/null
+++ b/packages/vue/src/runtime-with-vapor.ts
@@ -0,0 +1,2 @@
+export * from './runtime'
+export * from '@vue/runtime-vapor'

diff --git a/rollup.config.js b/rollup.config.js
index 8cba6444e2f798fa1addaa876aad74de9ac4642d..5180d4637313eeb539adc379fbe8118d9f29836c 100644 (file)
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -21,7 +21,7 @@ import { minify as minifySwc } from '@swc/core'
  * @template {keyof T} K
  * @typedef { Omit<T, K> & Required<Pick<T, K>> } MarkRequired
  */
-/** @typedef {'cjs' | 'esm-bundler' | 'global' | 'global-runtime' | 'esm-browser' | 'esm-bundler-runtime' | 'esm-browser-runtime'} PackageFormat */
+/** @typedef {'cjs' | 'esm-bundler' | 'global' | 'global-runtime' | 'esm-browser' | 'esm-bundler-runtime' | 'esm-browser-runtime' | 'vapor'} PackageFormat */
 /** @typedef {MarkRequired<import('rollup').OutputOptions, 'file' | 'format'>} OutputOptions */
 
 if (!process.env.TARGET) {
@@ -85,6 +85,12 @@ const outputConfigs = {
     file: resolve(`dist/${name}.runtime.global.js`),
     format: 'iife',
   },
+  // The vapor format is a esm-browser + runtime only build that is meant for
+  // the SFC playground only.
+  vapor: {
+    file: resolve(`dist/${name}.runtime-with-vapor.esm-browser.js`),
+    format: 'es',
+  },
 }
 
 /** @type {ReadonlyArray<PackageFormat>} */
@@ -107,7 +113,7 @@ if (process.env.NODE_ENV === 'production') {
     if (format === 'cjs') {
       packageConfigs.push(createProductionConfig(format))
     }
-    if (/^(global|esm-browser)(-runtime)?/.test(format)) {
+    if (format === 'vapor' || /^(global|esm-browser)(-runtime)?/.test(format)) {
       packageConfigs.push(createMinifiedConfig(format))
     }
   })
@@ -131,7 +137,7 @@ function createConfig(format, output, plugins = []) {
   const isProductionBuild =
     process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
   const isBundlerESMBuild = /esm-bundler/.test(format)
-  const isBrowserESMBuild = /esm-browser/.test(format)
+  const isBrowserESMBuild = /esm-browser/.test(format) || format === 'vapor'
   const isServerRenderer = name === 'server-renderer'
   const isCJSBuild = format === 'cjs'
   const isGlobalBuild = /global/.test(format)
@@ -159,7 +165,12 @@ function createConfig(format, output, plugins = []) {
     output.name = packageOptions.name
   }
 
-  let entryFile = /\bruntime\b/.test(format) ? `runtime.ts` : `index.ts`
+  let entryFile =
+    format === 'vapor'
+      ? 'runtime-with-vapor.ts'
+      : /\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

diff --git a/scripts/dev.js b/scripts/dev.js
index a43d1142ae26e98f19281eb8cd1c591de1518fb8..06bf7de93ed3bee4ee286128d6b72e7e35230665 100644 (file)
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -49,9 +49,12 @@ const outputFormat = format.startsWith('global')
     ? 'cjs'
     : 'esm'
 
-const postfix = format.endsWith('-runtime')
-  ? `runtime.${format.replace(/-runtime$/, '')}`
-  : format
+const postfix =
+  format === 'vapor'
+    ? 'runtime-with-vapor.esm-browser'
+    : format.endsWith('-runtime')
+      ? `runtime.${format.replace(/-runtime$/, '')}`
+      : format
 
 const privatePackages = fs.readdirSync('packages-private')
 
@@ -127,9 +130,16 @@ for (const target of targets) {
     plugins.push(polyfillNode())
   }
 
+  const entry =
+    format === 'vapor'
+      ? 'runtime-with-vapor.ts'
+      : format.endsWith('-runtime')
+        ? 'runtime.ts'
+        : 'index.ts'
+
   esbuild
     .context({
-      entryPoints: [resolve(__dirname, `${pkgBasePath}/src/index.ts`)],
+      entryPoints: [resolve(__dirname, `${pkgBasePath}/src/${entry}`)],
       outfile,
       bundle: true,
       external,