Merge branch 'main' into 0617-with-defaults

.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>

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

@@ -285,7 +285,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') {

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.`
   )

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) {
+export function registerTS(_loadTS: () => typeof TS) {
-  ts = _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(
+        if (loadTS) ts = loadTS()
-          `Failed to resolve import source ${JSON.stringify(source)}. ` +
+        if (!ts) {
-            `typescript is required as a peer dep for vue in order ` +
+          return ctx.error(
-            `to support resolving types from module imports.`,
+            `Failed to resolve import source ${JSON.stringify(source)}. ` +
-          node,
+              `typescript is required as a peer dep for vue in order ` +
-          scope
+              `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/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/runtime-core/__tests__/apiWatch.spec.ts

@@ -1000,7 +1000,7 @@ describe('api: watch', () => {
       },
       mounted() {
         // this call runs while Comp is currentInstance, but
-        // the effect for this `$watch` should nontheless be registered with Child
+        // the effect for this `$watch` should nonetheless be registered with Child
         this.comp!.$watch(
           () => this.show,
           () => void 0
@@ -1171,7 +1171,7 @@ describe('api: watch', () => {
     expect(instance!.scope.effects.length).toBe(1)
   })
 
-  test('watchEffect should keep running if created in a detatched scope', async () => {
+  test('watchEffect should keep running if created in a detached scope', async () => {
     const trigger = ref(0)
     let countWE = 0
     let countW = 0

packages/runtime-core/src/apiCreateApp.ts

@@ -221,7 +221,7 @@ export function createAppAPI<HostElement>(
         set() {
           warn(
             `app.config.unwrapInjectedRef has been deprecated. ` +
-              `3.3 now alawys unwraps injected refs in Options API.`
+              `3.3 now always unwraps injected refs in Options API.`
           )
         }
       })

packages/runtime-core/src/component.ts

@@ -256,7 +256,7 @@ export interface ComponentInternalInstance {
    */
   ssrRender?: Function | null
   /**
-   * Object containing values this component provides for its descendents
+   * Object containing values this component provides for its descendants
    * @internal
    */
   provides: Data

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -322,7 +322,7 @@ describe('defineCustomElement', () => {
               emit('my-click', 1)
             },
             onMousedown: () => {
-              emit('myEvent', 1) // validate hypenization
+              emit('myEvent', 1) // validate hyphenation
             }
           })
       }

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/server-renderer/__tests__/ssrScopeId.spec.ts

@@ -156,7 +156,7 @@ describe('ssr: scopedId runtime behavior', () => {
   })
 
   // #3513
-  test('scopeId inheritance across ssr-compiled andn on-ssr compiled parent chain', async () => {
+  test('scopeId inheritance across ssr-compiled and on-ssr compiled parent chain', async () => {
     const Child = {
       ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)}></div>`)

packages/sfc-playground/package.json

@@ -12,7 +12,7 @@
     "vite": "^4.3.0"
   },
   "dependencies": {
-    "@vue/repl": "^1.4.1",
+    "@vue/repl": "^1.5.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

packages/shared/src/general.ts

@@ -149,7 +149,7 @@ export const looseToNumber = (val: any): any => {
 }
 
 /**
- * Only conerces number-like strings
+ * Only concerns number-like strings
  * "123-foo" will be returned as-is
  */
 export const toNumber = (val: any): any => {

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/shared/src/normalizeProp.ts

@@ -19,9 +19,7 @@ export function normalizeStyle(
       }
     }
     return res
-  } else if (isString(value)) {
+  } else if (isString(value) || isObject(value)) {
-    return value
-  } else if (isObject(value)) {
     return value
   }
 }

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

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -329,8 +333,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^1.4.1
+        specifier: ^1.5.0
-        version: 1.4.1(vue@packages+vue)
+        version: 1.5.0(vue@packages+vue)
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -382,6 +386,9 @@ importers:
       '@vue/shared':
         specifier: 3.3.4
         version: link:../shared
+      typescript:
+        specifier: '*'
+        version: 5.0.2
 
   packages/vue-compat:
     dependencies:
@@ -1296,8 +1303,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@1.4.1(vue@packages+vue):
+  /@vue/repl@1.5.0(vue@packages+vue):
-    resolution: {integrity: sha512-7ONz/o1OtS611jW6SdAOZXn4HdN8gfyatcOzcEu+3bDMvgbyr7ZUcbRV6Y4xdkxDARKDBzs+sb3/oz1Na5hAeQ==}
+    resolution: {integrity: sha512-qFqKtvA2FM9viYXzbWrpGrL8mDGswsqDsEjfaibr/YOqeza7i49VmO0AKPrOdQDOS2qmq9uV+G6OPX1rGhUSIQ==}
     peerDependencies:
       vue: ^3.2.13
     dependencies:
@@ -5406,7 +5413,6 @@ packages:
     resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
     engines: {node: '>=12.20'}
     hasBin: true
-    dev: true
 
   /ufo@1.1.1:
     resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}

rollup.dts.config.js

@@ -46,7 +46,7 @@ export default targetPackages.map(pkg => {
  *    and remove them from the big export {} declaration
  *    otherwise it gets weird in vitepress `defineComponent` call with
  *    "the inferred type cannot be named without a reference"
- * 3. Append custom agumentations (jsx, macros)
+ * 3. Append custom augmentations (jsx, macros)
  * @returns {import('rollup').Plugin}
  */
 function patchTypes(pkg) {

scripts/build.js

@@ -17,7 +17,7 @@ nr build core --formats cjs
 */
 
 import fs from 'node:fs/promises'
-import { existsSync, readFileSync, rmSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import path from 'node:path'
 import minimist from 'minimist'
 import { gzipSync, brotliCompressSync } from 'node:zlib'

scripts/const-enum.js

@@ -1,7 +1,7 @@
 // @ts-check
 
 /**
- * We use rollup-plugin-esbuild for faster builds, but esbuild in insolation
+ * We use rollup-plugin-esbuild for faster builds, but esbuild in isolation
  * mode compiles const enums into runtime enums, bloating bundle size.
  *
  * Here we pre-process all the const enums in the project and turn them into
@@ -189,7 +189,7 @@ export function constEnum() {
   )
 
   // 3. during transform:
-  //    3.1 files w/ const enum declaration: remove delcaration
+  //    3.1 files w/ const enum declaration: remove declaration
   //    3.2 files using const enum: inject into esbuild define
   /**
    * @type {import('rollup').Plugin}