Merge branch 'main' into bwsy/fix/teleportDisabled

.github/contributing.md

@@ -261,7 +261,7 @@ import { h } from '@vue/runtime-core'
 This is made possible via several configurations:
 
 - For TypeScript, `compilerOptions.paths` in `tsconfig.json`
-- Vitest and Rollup share the sae set of aliases from `scripts/aliases.js`
+- Vitest and Rollup share the same set of aliases from `scripts/aliases.js`
 - For plain Node.js, they are linked using [PNPM Workspaces](https://pnpm.io/workspaces).
 
 ### Package Dependencies
@@ -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",
@@ -35,7 +35,7 @@
     "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-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
-    "preinstall": "node ./scripts/preinstall.js",
+    "preinstall": "npx only-allow pnpm",
     "postinstall": "simple-git-hooks"
   },
   "simple-git-hooks": {

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-core/src/transforms/transformExpression.ts

@@ -25,7 +25,7 @@ import {
 } from '../babelUtils'
 import { advancePositionWithClone, isSimpleIdentifier } from '../utils'
 import {
-  isGloballyWhitelisted,
+  isGloballyAllowed,
   makeMap,
   hasOwn,
   isString,
@@ -225,7 +225,7 @@ export function processExpression(
 
   if (isSimpleIdentifier(rawExp)) {
     const isScopeVarReference = context.identifiers[rawExp]
-    const isAllowedGlobal = isGloballyWhitelisted(rawExp)
+    const isAllowedGlobal = isGloballyAllowed(rawExp)
     const isLiteral = isLiteralWhitelisted(rawExp)
     if (!asParams && !isScopeVarReference && !isAllowedGlobal && !isLiteral) {
       // const bindings exposed from setup can be skipped for patching but
@@ -358,7 +358,7 @@ export function processExpression(
 
 function canPrefix(id: Identifier) {
   // skip whitelisted globals
-  if (isGloballyWhitelisted(id.name)) {
+  if (isGloballyAllowed(id.name)) {
     return false
   }
   // special case for webpack compilation

packages/compiler-dom/src/decodeHtmlBrowser.ts

@@ -8,9 +8,9 @@ export function decodeHtmlBrowser(raw: string, asAttr = false): string {
   }
   if (asAttr) {
     decoder.innerHTML = `<div foo="${raw.replace(/"/g, '&quot;')}">`
-    return decoder.children[0].getAttribute('foo') as string
+    return decoder.children[0].getAttribute('foo')!
   } else {
     decoder.innerHTML = raw
-    return decoder.textContent as string
+    return decoder.textContent!
   }
 }

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

@@ -274,7 +274,7 @@ export function compileScript(
   const scriptAst = ctx.scriptAst
   const scriptSetupAst = ctx.scriptSetupAst!
 
-  // 1.1 walk import delcarations of <script>
+  // 1.1 walk import declarations of <script>
   if (scriptAst) {
     for (const node of scriptAst.body) {
       if (node.type === 'ImportDeclaration') {
@@ -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/defineModel.ts

@@ -30,7 +30,7 @@ export function processDefineModel(
 
   warnOnce(
     `This project is using defineModel(), which is an experimental ` +
-      ` feature. It may receive breaking changes or be removed in the future, so ` +
+      `feature. It may receive breaking changes or be removed in the future, so ` +
       `use at your own risk.\n` +
       `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503.`
   )

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

@@ -34,7 +34,7 @@ export function processPropsDestructure(
 
   warnOnce(
     `This project is using reactive props destructure, which is an experimental ` +
-      ` feature. It may receive breaking changes or be removed in the future, so ` +
+      `feature. It may receive breaking changes or be removed in the future, so ` +
       `use at your own risk.\n` +
       `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502.`
   )
@@ -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/compiler-sfc/src/style/cssVars.ts

@@ -53,8 +53,9 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   const vars: string[] = []
   sfc.styles.forEach(style => {
     let match
-    // ignore v-bind() in comments /* ... */
-    const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
+    // ignore v-bind() in comments, eg /* ... */
+    // and // (Less, Sass and Stylus all support the use of // to comment)
+    const content = style.content.replace(/\/\*([\s\S]*?)\*\/|\/\/.*/g, '')
     while ((match = vBindRE.exec(content))) {
       const start = match.index + match[0].length
       const end = lexBinding(content, start)

packages/compiler-sfc/src/style/preprocessors.ts

@@ -98,8 +98,7 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
 const styl: StylePreprocessor = (source, map, options, load = require) => {
   const nodeStylus = load('stylus')
   try {
-    const ref = nodeStylus(source)
-    Object.keys(options).forEach(key => ref.set(key, options[key]))
+    const ref = nodeStylus(source, options)
     if (map) ref.set('sourcemap', { inline: false, comment: false })
 
     const result = ref.render()

packages/dts-test/README.md

@@ -4,4 +4,4 @@ Tests Typescript types to ensure the types remain as expected.
 
 - This directory is included in the root `tsconfig.json`, where package imports are aliased to `src` directories, so in IDEs and the `pnpm check` script the types are validated against source code.
 
-- When running `tsc` with `packages/dts-test/tsconfig.test.json`, packages are resolved using using normal `node` resolution, so the types are validated against actual **built** types. This requires the types to be built first via `pnpm build-types`.
+- When running `tsc` with `packages/dts-test/tsconfig.test.json`, packages are resolved using normal `node` resolution, so the types are validated against actual **built** types. This requires the types to be built first via `pnpm build-types`.

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/reactivity/__tests__/computed.spec.ts

@@ -259,13 +259,13 @@ describe('reactivity/computed', () => {
     const onTrigger = vi.fn((e: DebuggerEvent) => {
       events.push(e)
     })
-    const obj = reactive({ foo: 1 })
+    const obj = reactive<{ foo?: number }>({ foo: 1 })
     const c = computed(() => obj.foo, { onTrigger })
 
     // computed won't trigger compute until accessed
     c.value
 
-    obj.foo++
+    obj.foo!++
     expect(c.value).toBe(2)
     expect(onTrigger).toHaveBeenCalledTimes(1)
     expect(events[0]).toEqual({
@@ -277,7 +277,6 @@ describe('reactivity/computed', () => {
       newValue: 2
     })
 
-    // @ts-ignore
     delete obj.foo
     expect(c.value).toBeUndefined()
     expect(onTrigger).toHaveBeenCalledTimes(2)

packages/reactivity/__tests__/reactive.spec.ts

@@ -23,7 +23,7 @@ describe('reactivity/reactive', () => {
     const reactiveObj = reactive(obj)
     expect(isReactive(reactiveObj)).toBe(true)
     // read prop of reactiveObject will cause reactiveObj[prop] to be reactive
-    // @ts-ignore
+    // @ts-expect-error
     const prototype = reactiveObj['__proto__']
     const otherObj = { data: ['a'] }
     expect(isReactive(otherObj)).toBe(false)
@@ -204,7 +204,7 @@ describe('reactivity/reactive', () => {
     const dummy = computed(() => observed.a)
     expect(dummy.value).toBe(0)
 
-    // @ts-ignore
+    // @ts-expect-error
     observed.a = bar
     expect(dummy.value).toBe(1)
 
@@ -233,6 +233,9 @@ describe('reactivity/reactive', () => {
     // symbol
     const s = Symbol()
     assertValue(s)
+    // bigint
+    const bn = BigInt('9007199254740991')
+    assertValue(bn)
 
     // built-ins should work and return same value
     const p = Promise.resolve()

packages/reactivity/src/collectionHandlers.ts

@@ -27,7 +27,7 @@ function get(
   const rawTarget = toRaw(target)
   const rawKey = toRaw(key)
   if (!isReadonly) {
-    if (key !== rawKey) {
+    if (hasChanged(key, rawKey)) {
       track(rawTarget, TrackOpTypes.GET, key)
     }
     track(rawTarget, TrackOpTypes.GET, rawKey)
@@ -50,7 +50,7 @@ function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
   const rawTarget = toRaw(target)
   const rawKey = toRaw(key)
   if (!isReadonly) {
-    if (key !== rawKey) {
+    if (hasChanged(key, rawKey)) {
       track(rawTarget, TrackOpTypes.HAS, key)
     }
     track(rawTarget, TrackOpTypes.HAS, rawKey)

packages/reactivity/src/ref.ts

@@ -342,7 +342,7 @@ class ObjectRefImpl<T extends object, K extends keyof T> {
 
   get value() {
     const val = this._object[this._key]
-    return val === undefined ? (this._defaultValue as T[K]) : val
+    return val === undefined ? this._defaultValue! : val
   }
 
   set value(newVal) {