Merge branch 'main' into chore-perf

Author: Alfred-Skyblue

.github/contributing.md

@@ -330,4 +330,4 @@ Funds donated via Patreon go directly to support Evan You's full-time work on Vu
 
 Thank you to all the people who have already contributed to Vue.js!
 
-<a href="https://github.com/vuejs/vue/graphs/contributors"><img src="https://opencollective.com/vuejs/contributors.svg?width=890" /></a>
+<a href="https://github.com/vuejs/core/graphs/contributors"><img src="https://opencollective.com/vuejs/contributors.svg?width=890" /></a>

BACKERS.md

@@ -4,6 +4,6 @@ Vue.js is an MIT-licensed open source project with its ongoing development made
 
 <p align="center">
   <a target="_blank" href="https://sponsors.vuejs.org/backers.svg">
-    <img alt="sponsors" src="https://sponsors.vuejs.org/backers.svg">
+    <img alt="sponsors" src="https://sponsors.vuejs.org/backers.svg?v1">
   </a>
 </p>

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "version": "3.3.4",
-  "packageManager": "pnpm@8.4.0",
+  "packageManager": "pnpm@8.6.2",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",

packages/compiler-core/src/babelUtils.ts

@@ -32,7 +32,7 @@ export function walkIdentifiers(
     root.body[0].type === 'ExpressionStatement' &&
     root.body[0].expression
 
-  ;(walk as any)(root, {
+  walk(root, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
       parent && parentStack.push(parent)
       if (

packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts

@@ -10,7 +10,7 @@ import {
 } from '../../src/script/resolveType'
 
 import ts from 'typescript'
-registerTS(ts)
+registerTS(() => ts)
 
 describe('resolveType', () => {
   test('type literal', () => {

packages/compiler-sfc/src/compileScript.ts

@@ -607,8 +607,8 @@ export function compileScript(
       node.type.endsWith('Statement')
     ) {
       const scope: Statement[][] = [scriptSetupAst.body]
-      ;(walk as any)(node, {
-        enter(child: Node, parent: Node) {
+      walk(node, {
+        enter(child: Node, parent: Node | undefined) {
           if (isFunctionType(child)) {
             this.skip()
           }
@@ -633,7 +633,7 @@ export function compileScript(
               ctx,
               child,
               needsSemi,
-              parent.type === 'ExpressionStatement'
+              parent!.type === 'ExpressionStatement'
             )
           }
         },

packages/compiler-sfc/src/script/definePropsDestructure.ts

@@ -238,7 +238,7 @@ export function transformDestructuredProps(
   // check root scope first
   const ast = ctx.scriptSetupAst!
   walkScope(ast, true)
-  ;(walk as any)(ast, {
+  walk(ast, {
     enter(node: Node, parent?: Node) {
       parent && parentStack.push(parent)
 

packages/compiler-sfc/src/script/resolveType.ts

@@ -708,13 +708,14 @@ function resolveGlobalScope(ctx: TypeResolveContext): TypeScope[] | undefined {
   }
 }
 
-let ts: typeof TS
+let ts: typeof TS | undefined
+let loadTS: (() => typeof TS) | undefined
 
 /**
  * @private
  */
-export function registerTS(_ts: any) {
-  ts = _ts
+export function registerTS(_loadTS: () => typeof TS) {
+  loadTS = _loadTS
 }
 
 type FS = NonNullable<SFCScriptCompileOptions['fs']>
@@ -723,7 +724,10 @@ function resolveFS(ctx: TypeResolveContext): FS | undefined {
   if (ctx.fs) {
     return ctx.fs
   }
-  const fs = ctx.options.fs || ts.sys
+  if (!ts && loadTS) {
+    ts = loadTS()
+  }
+  const fs = ctx.options.fs || ts?.sys
   if (!fs) {
     return
   }
@@ -779,22 +783,25 @@ function importSourceToScope(
     } else {
       // module or aliased import - use full TS resolution, only supported in Node
       if (!__NODE_JS__) {
-        ctx.error(
+        return ctx.error(
           `Type import from non-relative sources is not supported in the browser build.`,
           node,
           scope
         )
       }
       if (!ts) {
-        ctx.error(
-          `Failed to resolve import source ${JSON.stringify(source)}. ` +
-            `typescript is required as a peer dep for vue in order ` +
-            `to support resolving types from module imports.`,
-          node,
-          scope
-        )
+        if (loadTS) ts = loadTS()
+        if (!ts) {
+          return ctx.error(
+            `Failed to resolve import source ${JSON.stringify(source)}. ` +
+              `typescript is required as a peer dep for vue in order ` +
+              `to support resolving types from module imports.`,
+            node,
+            scope
+          )
+        }
       }
-      resolved = resolveWithTS(scope.filename, source, fs)
+      resolved = resolveWithTS(scope.filename, source, ts, fs)
     }
     if (resolved) {
       resolved = scope.resolvedImportSources[source] = normalizePath(resolved)
@@ -839,6 +846,7 @@ const tsConfigRefMap = new Map<string, string>()
 function resolveWithTS(
   containingFile: string,
   source: string,
+  ts: typeof TS,
   fs: FS
 ): string | undefined {
   if (!__NODE_JS__) return
@@ -853,7 +861,7 @@ function resolveWithTS(
     const normalizedConfigPath = normalizePath(configPath)
     const cached = tsConfigCache.get(normalizedConfigPath)
     if (!cached) {
-      configs = loadTSConfig(configPath, fs).map(config => ({ config }))
+      configs = loadTSConfig(configPath, ts, fs).map(config => ({ config }))
       tsConfigCache.set(normalizedConfigPath, configs)
     } else {
       configs = cached
@@ -918,7 +926,11 @@ function resolveWithTS(
   }
 }
 
-function loadTSConfig(configPath: string, fs: FS): TS.ParsedCommandLine[] {
+function loadTSConfig(
+  configPath: string,
+  ts: typeof TS,
+  fs: FS
+): TS.ParsedCommandLine[] {
   // The only case where `fs` is NOT `ts.sys` is during tests.
   // parse config host requires an extra `readDirectory` method
   // during tests, which is stubbed.
@@ -940,7 +952,7 @@ function loadTSConfig(configPath: string, fs: FS): TS.ParsedCommandLine[] {
   if (config.projectReferences) {
     for (const ref of config.projectReferences) {
       tsConfigRefMap.set(ref.path, configPath)
-      res.unshift(...loadTSConfig(ref.path, fs))
+      res.unshift(...loadTSConfig(ref.path, ts, fs))
     }
   }
   return res

packages/global.d.ts

@@ -33,6 +33,17 @@ declare module 'file-saver' {
   export function saveAs(blob: any, name: any): void
 }
 
+declare module 'estree-walker' {
+  export function walk<T>(
+    root: T,
+    options: {
+      enter?: (node: T, parent: T | undefined) => any
+      leave?: (node: T, parent: T | undefined) => any
+      exit?: (node: T) => any
+    } & ThisType<{ skip: () => void }>
+  )
+}
+
 declare interface String {
   /**
    * @deprecated Please use String.prototype.slice instead of String.prototype.substring in the repository.

packages/reactivity-transform/src/reactivityTransform.ts

@@ -636,7 +636,7 @@ export function transformAST(
 
   // check root scope first
   walkScope(ast, true)
-  ;(walk as any)(ast, {
+  walk(ast, {
     enter(node: Node, parent?: Node) {
       parent && parentStack.push(parent)
 

packages/runtime-dom/src/components/Transition.ts

@@ -445,6 +445,8 @@ function getTimeout(delays: string[], durations: string[]): number {
 // If comma is not replaced with a dot, the input will be rounded down
 // (i.e. acting as a floor function) causing unexpected behaviors
 function toMs(s: string): number {
+  // #8409 default value for CSS durations can be 'auto'
+  if (s === 'auto') return 0
   return Number(s.slice(0, -1).replace(',', '.')) * 1000
 }
 

packages/sfc-playground/index.html

@@ -8,14 +8,14 @@
     <title>Vue SFC Playground</title>
     <script>
       // process shim for old versions of @vue/compiler-sfc dependency
-      window.process = { env: {} }
-      const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
-      if (
-        savedPreferDark === 'true' ||
-        (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
-      ) {
+       window.process = { env: {} }
+       const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
+       if (
+         savedPreferDark === 'true' ||
+         (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
+       ) {
         document.documentElement.classList.add('dark')
-      }
+       }
     </script>
     <script type="module" src="/src/main.ts"></script>
   </head>

packages/sfc-playground/package.json

@@ -9,10 +9,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.3.0"
+    "vite": "^4.3.9"
   },
   "dependencies": {
-    "@vue/repl": "^1.4.1",
+    "@vue/repl": "^2.4.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

packages/sfc-playground/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import Header from './Header.vue'
 import { Repl, ReplStore, SFCOptions } from '@vue/repl'
-import { ref, watchEffect } from 'vue'
+import Monaco from '@vue/repl/monaco-editor'
+import { ref, watchEffect, onMounted } from 'vue'
 
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
@@ -71,17 +72,29 @@ function toggleSSR() {
   useSSRMode.value = !useSSRMode.value
   store.setFiles(store.getFiles())
 }
+
+const theme = ref('dark')
+function toggleTheme(isDark: boolean) {
+  theme.value = isDark ? 'dark' : 'light'
+}
+onMounted(() => {
+  const cls = document.documentElement.classList
+  toggleTheme(cls.contains('dark'))
+})
 </script>
 
 <template>
   <Header
     :store="store"
     :dev="useDevMode"
     :ssr="useSSRMode"
+    @toggle-theme="toggleTheme"
     @toggle-dev="toggleDevMode"
     @toggle-ssr="toggleSSR"
   />
   <Repl
+    :theme="theme"
+    :editor="Monaco"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
     :ssr="useSSRMode"
@@ -108,7 +121,7 @@ body {
 }
 
 .vue-repl {
-  height: calc(var(--vh) - var(--nav-height));
+  height: calc(var(--vh) - var(--nav-height)) !important;
 }
 
 button {

packages/sfc-playground/src/Header.vue

@@ -51,14 +51,16 @@ async function copyLink(e: MouseEvent) {
   alert('Sharable URL has been copied to clipboard.')
 }
 
-function toggleDark() {
+const emit = defineEmits(['toggle-theme', 'toggle-ssr','toggle-dev'])
+ function toggleDark() {
   const cls = document.documentElement.classList
-  cls.toggle('dark')
-  localStorage.setItem(
-    'vue-sfc-playground-prefer-dark',
-    String(cls.contains('dark'))
+   cls.toggle('dark')
+   localStorage.setItem(
+     'vue-sfc-playground-prefer-dark',
+     String(cls.contains('dark'))
   )
-}
+   emit('toggle-theme', cls.contains('dark'))
+ }
 
 onMounted(async () => {
   window.addEventListener('click', () => {
@@ -145,7 +147,7 @@ async function fetchVersions(): Promise<string[]> {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
-      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
+       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
       </button>

packages/sfc-playground/src/download/download.ts

@@ -27,7 +27,11 @@ export async function downloadProject(store: ReplStore) {
 
   const files = store.getFiles()
   for (const file in files) {
-    src.file(file, files[file])
+    if (file !== 'import-map.json') {
+      src.file(file, files[file])
+    } else {
+      zip.file(file, files[file])
+    }
   }
 
   const blob = await zip.generateAsync({ type: 'blob' })

packages/shared/src/globalsAllowList.ts

@@ -6,3 +6,6 @@ const GLOBALS_ALLOWED =
   'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console'
 
 export const isGloballyAllowed = /*#__PURE__*/ makeMap(GLOBALS_ALLOWED)
+
+/** @deprecated use `isGloballyAllowed` instead */
+export const isGloballyWhitelisted = isGloballyAllowed

packages/vue/compiler-sfc/index.browser.js

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

packages/vue/compiler-sfc/index.browser.mjs

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

packages/vue/compiler-sfc/register-ts.js

@@ -1,5 +1,5 @@
 if (typeof require !== 'undefined') {
   try {
-    require('@vue/compiler-sfc').registerTS(require('typescript'))
+    require('@vue/compiler-sfc').registerTS(() => require('typescript'))
   } catch (e) {}
 }

packages/vue/package.json

@@ -44,10 +44,12 @@
     "./compiler-sfc": {
       "import": {
         "types": "./compiler-sfc/index.d.mts",
+        "browser": "./compiler-sfc/index.browser.mjs",
         "default": "./compiler-sfc/index.mjs"
       },
       "require": {
         "types": "./compiler-sfc/index.d.ts",
+        "browser": "./compiler-sfc/index.browser.js",
         "default": "./compiler-sfc/index.js"
       }
     },
@@ -99,5 +101,13 @@
     "@vue/runtime-dom": "3.3.4",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/server-renderer": "3.3.4"
+  },
+  "peerDependencies": {
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   }
 }