Merge branch 'main' into perf/router-view-rerenders

vuejs · Oct 29, 2024 · db036a5 · db036a5
2 parents 1191594 + 8c73877
commit db036a5
Show file tree

Hide file tree

Showing 248 changed files with 16,314 additions and 7,833 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -9,7 +9,7 @@ body:
     id: reproduction
     attributes:
       label: Reproduction
-      description: "If possible, provide a boiled down editable reproduction using a service like [JSFiddle](https://jsfiddle.net/posva/3yq6ojLv), Codepen, [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-s1sqc), or a GitHub repository. A failing unit test is even better! Otherwise provide as much information as possible to reproduce the problem. If we can't reproduce the problem, we won't be able to give it a look **and the issue will be converted into a question and moved to discussions**."
+      description: "If possible, provide a boiled down editable reproduction with the [Vue.js Playground](https://play.vuejs.org/#eNqlVG1P2zAQ/iu3bFKLRuNSEB+yUMEQGpv2gti0L8s+pInbGhLbsp1SVPW/72znrVD4MlVp7Lvn7p67x/EmKFPGwzsdRAErpVAGNpApmhp6ISVsYa5ECYNVRQcJbwFKVIaq1hsSb+ggNrbxpVKGPj7hbeYhPgcJBwgrTYc+3O9LUXEzHLzFsMFBcBjU4cgvNrSUBcZPLTBeHk2vaVEIW+xNTHDrzNK9cKGNEnwxvayUotx4ziBTs4xiUvtgs4F3zhHOq6K4QSdsty4N8Xlinq6ahLeO5VfG78GIsyQgSTD9JHAN16KkMen8L0akM7S0YRd29ywuJk3N2Gqzm+s3ow9Aalztjkk7GJyXn2Vo9ij6jZZCPV4zbfB1WBt93r7So1bNVk/boCvdiNoYamUb2W1DO7jW0h4BunbQTHBdi6LgbIfLcGPbW3qa0T7uw4NDC3HROoI/fkQbry4MyACbE0iJo/BRR37rovpAp8cuuuvBw//i/xaPJo6237Q9jzpTTBrQ1FQSipQvUGKjUV6riXfiEjdPDu5k2mTCYzt5puDOzP6vTptqbyGv2qhMJV4AgmMpN/mkdmCFCJzF2rqDYc1JsDRG6oiQisv7RYgDJB3i/CQ8DsckR7V61pDqcjRT4kHj+g6z13IkwTmCSE5XRohCj1LJXirxDHh+Gp6GR6RgM4LZCeM5XbvcNjV+yVts02g8bHO2eNKk1ZwVVP2QhuFh3Gk2xXvl4YuzGVXRlmi2pNn9HvudXnvKN4pidyvaa86kakHxo7fuq5/f6RrXrbMUeVUg+hXnLdWiqCxHD/tY8Rxp93CO7WenGeOLX/pqbSjXTVOWqJuGwzshL19pvaN7HJ70pqjNY0F1mGl7seANdQj2+vFxM6FyqiKYyDUgWZbD2/F4/MG6SkzH+GgmjBFlBEdjuXZ2meY5km0tWCXhmBamkMJ7fFziOrqgc/wy+8jlpF+5S98RyLKsRyCCMf4mdYZg+w+goli8), or an **editable** and **up to date** [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-s1sqc), Stackblitz, or a GitHub repository. A failing unit test is even better! Otherwise provide as much information as possible to reproduce the problem. If we can't reproduce the problem, we won't be able to give it a look **and the issue will be converted into a question and moved to discussions**."
       placeholder: Reproduction
     validations:
       required: true

diff --git a/.github/contributing.md b/.github/contributing.md
@@ -126,7 +126,7 @@ If you want to start translating the docs in a _new_ language:
 1. Create the corresponding `<lang>` sub-folder for your translation.
 2. Modify the i18n configuration in the `.vitepress` sub-folder.
 3. Translate the docs and run the doc site to self-test locally.
-4. Create a checkpoint for your language by running `pnpm run docs:translation-status <lang> [<commit>]`. A checkpoint is the hash and date of the latest commit when you do the translation. The checkpoint information is stored in the status file `packages/docs/.vitepress/translation-status.json`. _It's crucial for long-term maintenance since all the further translation sync-ups are based on their previous checkpoints._ Usually, you can skip the commit argument because the default value is `main`.
+4. Create a checkpoint for your language by running `pnpm run docs:translation:update <lang> [<commit>]`. A checkpoint is the hash and date of the latest commit when you do the translation. The checkpoint information is stored in the status file `packages/docs/.vitepress/translation-status.json`. _It's crucial for long-term maintenance since all the further translation sync-ups are based on their previous checkpoints._ Usually, you can skip the commit argument because the default value is `main`.
 5. Commit all the changes and create a pull request to our GitHub repo.
 
 We will have a paragraph at the top of each translation page that shows the translation status. That way, users can quickly determine if the translation is up-to-date or lags behind the English version.
@@ -135,9 +135,9 @@ Speaking of the up-to-date translation, we also need good long-term maintenance
 
 1. See what translation you need to sync up with the original docs. There are two popular ways:
    1. Via the [GitHub Compare](https://github.com/vuejs/router/compare/) page, only see the changes in `packages/docs/*` from the checkpoint hash to `main` branch. You can find the checkpoint hash for your language via the translation status file `packages/docs/.vitepress/translation-status.json`. The compare page can be directly opened with the hash as part of the URL, e.g. https://github.com/vuejs/router/compare/e008551...main
-   2. Via a local command: `pnpm run docs:compare-to-translate <lang> [<commit>]`.
+   2. Via a local command: `pnpm run docs:translation:compare <lang> [<commit>]`.
 2. Create your own branch and start the translation update, following the previous comparison.
-3. Create a checkpoint for your language by running `pnpm run docs:translation-status <lang> [<commit>]`.
+3. Create a checkpoint for your language by running `pnpm run docs:translation:update <lang> [<commit>]`.
 4. Commit all the changes and create a pull request to our GitHub repo.
 
 <!-- TODO: add an example once we have got one -->
@@ -149,18 +149,18 @@ You can also host the translation on your own. To create one, fork our GitHub re
 - Ensure you maintain the _checkpoint_ properly. Also, ensure the _translation status_ is well-displayed on the top of each translation page.
 - Utilize the diff result between the latest official repository and your own checkpoint to guide your translation.
 
-Tip: you can add the official repo as a remote to your forked repo. This way, you can still run `pnpm run docs:translation-status <lang> [<commit>]` and `npm run docs:compare-to-translate <lang> [<commit>]` to get the checkpoint and diff result:
+Tip: you can add the official repo as a remote to your forked repo. This way, you can still run `pnpm run docs:translation:update <lang> [<commit>]` and `npm run docs:translation:compare <lang> [<commit>]` to get the checkpoint and diff result:
 
 ```bash
 # prepare the upstream remote
 git remote add upstream [email protected]:vuejs/router.git
 git fetch upstream main
 
 # set the checkpoint
-pnpm run docs:translation-status <lang> upstream/main
+pnpm run docs:translation:update <lang> upstream/main
 
 # get the diff result
-pnpm run docs:compare-to-translate <lang> upstream/main
+pnpm run docs:translation:compare <lang> upstream/main
 ```
 
 <!-- TODO: add an example once we have got one -->

diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
@@ -0,0 +1,44 @@
+name: Publish Any Commit
+
+on:
+  pull_request:
+    branches: main
+    paths-ignore:
+    - 'packages/docs/**'
+    - 'packages/playground/**'
+
+  push:
+    branches:
+    - '**'
+    tags:
+    - '!**'
+    paths-ignore:
+    - 'packages/docs/**'
+    - 'packages/playground/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+    - uses: pnpm/action-setup@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: pnpm
+
+    - name: Install
+      run: pnpm install --frozen-lockfile
+
+    - name: Build
+      run: pnpm -C packages/router build
+
+    - name: Build DTS
+      run: pnpm -C packages/router build:dts
+
+    - name: Release
+      run: pnpm dlx pkg-pr-new publish --compact --pnpm './packages/*'
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -2,10 +2,14 @@ name: test
 
 on:
   push:
+    branches:
+      - main
     paths-ignore:
       - 'packages/docs/**'
       - 'packages/playground/**'
   pull_request:
+    branches:
+      - main
     paths-ignore:
       - 'packages/docs/**'
       - 'packages/playground/**'
@@ -15,14 +19,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          version: 8.5.0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          cache: 'pnpm'
+          node-version: 'lts/*'
+          cache: pnpm
       - name: 'BrowserStack Env Setup'
         uses: 'browserstack/github-actions/setup-env@master'
         # forks do not have access to secrets so just skip this
@@ -33,16 +35,17 @@ jobs:
 
       - run: pnpm install
       - run: pnpm run lint
-      - run: pnpm run -r test:types
-      - run: pnpm run -r test:unit
       - run: pnpm run -r build
       - run: pnpm run -r build:dts
-      - run: pnpm run -r test:dts
+      - run: pnpm run -r test:types
+      - run: pnpm run -r test:unit
 
       # e2e tests that that run locally
       - run: pnpm run -r test:e2e:ci
 
-      - uses: codecov/codecov-action@v2
+      - uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
 
       # - name: 'Start BrowserStackLocal Tunnel'
       #   uses: 'browserstack/github-actions/setup-local@master'

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# vue-router [![release candidate](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![test](https://github.com/vuejs/router/actions/workflows/test.yml/badge.svg)](https://github.com/vuejs/router/actions/workflows/test.yml)
+# vue-router [![release candidate](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![test](https://github.com/vuejs/router/actions/workflows/test.yml/badge.svg)](https://github.com/vuejs/router/actions/workflows/test.yml) [![codecov](https://codecov.io/gh/vuejs/router/graph/badge.svg?token=azNM3FI0d1)](https://codecov.io/gh/vuejs/router)
 
 > - This is the repository for Vue Router 4 (for Vue 3)
 > - For Vue Router 3 (for Vue 2) see [vuejs/vue-router](https://github.com/vuejs/vue-router).
@@ -14,10 +14,10 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje
 
 <h4 align="center">Silver Sponsors</h4>
 <p align="center">
-    <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer">
+    <a href="https://route4me.com" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" />
-      <img src="https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" height="42px" alt="VueMastery" />
+      <source srcset="https://posva-sponsors.pages.dev/logos/route4me.png" media="(prefers-color-scheme: dark)" height="42px" alt="Route Optimizer and Route Planner Software" />
+      <img src="https://posva-sponsors.pages.dev/logos/route4me.png" height="42px" alt="Route Optimizer and Route Planner Software" />
     </picture>
   </a>
     <a href="https://www.prefect.io/" target="_blank" rel="noopener noreferrer">
@@ -26,32 +26,38 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje
       <img src="https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg" height="42px" alt="Prefect" />
     </picture>
   </a>
+    <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" />
+      <img src="https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" height="42px" alt="VueMastery" />
+    </picture>
+  </a>
 </p>
 
 <h4 align="center">Bronze Sponsors</h4>
 <p align="center">
-    <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer">
+    <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" />
-      <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" />
+      <source srcset="https://posva-sponsors.pages.dev/logos/storyblok.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" />
+      <img src="https://posva-sponsors.pages.dev/logos/storyblok.png" height="26px" alt="Storyblok" />
     </picture>
   </a>
-    <a href="https://www.vuejs.de" target="_blank" rel="noopener noreferrer">
+    <a href="https://ui.nuxt.com/pro" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Antony Konstantinidis" />
-      <img src="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" height="26px" alt="Antony Konstantinidis" />
+      <source srcset="https://posva-sponsors.pages.dev/logos/nuxt-dark.svg" media="(prefers-color-scheme: dark)" height="26px" alt="Nuxt UI Pro Templates" />
+      <img src="https://posva-sponsors.pages.dev/logos/nuxt-light.svg" height="26px" alt="Nuxt UI Pro Templates" />
     </picture>
   </a>
-    <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer">
+    <a href="https://www.vuejs.de" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://posva-sponsors.pages.dev/logos/storyblok.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" />
-      <img src="https://posva-sponsors.pages.dev/logos/storyblok.png" height="26px" alt="Storyblok" />
+      <source srcset="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Antony Konstantinidis" />
+      <img src="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" height="26px" alt="Antony Konstantinidis" />
     </picture>
   </a>
-    <a href="https://ui.nuxt.com/pro" target="_blank" rel="noopener noreferrer">
+    <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://avatars.githubusercontent.com/u/81570812?v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Nuxt UI Pro Templates" />
-      <img src="https://avatars.githubusercontent.com/u/81570812?v=4" height="26px" alt="Nuxt UI Pro Templates" />
+      <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" />
+      <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" />
     </picture>
   </a>
 </p>

diff --git a/SECURITY.md b/SECURITY.md
@@ -0,0 +1,5 @@
+# Reporting a Vulnerability
+
+To report a vulnerability, please email [email protected].
+
+While the discovery of new vulnerabilities is rare, we also recommend always using the latest versions of Vue and its official companion libraries to ensure your application remains as secure as possible.
diff --git a/codecov.yml b/codecov.yml
@@ -0,0 +1,6 @@
+coverage:
+  status:
+    patch: off
+    project:
+      default:
+        threshold: 2%
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@vue/router-root",
   "private": true,
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@9.10.0",
   "engines": {
-    "node": ">=18.14.0"
+    "node": ">=20.9.0"
   },
   "workspaces": [
     "packages/*"
@@ -15,8 +15,9 @@
     "build:dts": "pnpm run -r build:dts",
     "docs": "pnpm run --filter ./packages/docs -r docs",
     "docs:api": "pnpm run --filter ./packages/docs -r docs:api",
-    "docs:compare-to-translate": "pnpm run --filter ./packages/docs -r docs:compare-to-translate",
-    "docs:translation-status": "pnpm run --filter ./packages/docs -r docs:translation-status",
+    "docs:translation:compare": "pnpm run --filter ./packages/docs -r docs:translation:compare",
+    "docs:translation:update": "pnpm run --filter ./packages/docs -r docs:translation:update",
+    "docs:translation:status": "pnpm run --filter ./packages/docs -r docs:translation:status",
     "docs:build": "pnpm run docs:api && pnpm run --filter ./packages/docs -r docs:build",
     "docs:preview": "pnpm run --filter ./packages/docs -r docs:preview",
     "play": "pnpm run -r play",
@@ -31,16 +32,16 @@
     "brotli": "^1.3.3",
     "chalk": "^5.3.0",
     "enquirer": "^2.4.1",
-    "execa": "^8.0.1",
-    "globby": "^14.0.0",
-    "lint-staged": "^15.2.0",
+    "execa": "^9.3.1",
+    "globby": "^14.0.2",
+    "lint-staged": "^15.2.10",
     "minimist": "^1.2.8",
     "p-series": "^3.0.0",
     "prettier": "^2.8.8",
-    "semver": "^7.5.4",
-    "typedoc": "^0.25.3",
+    "semver": "^7.6.3",
+    "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",
-    "typescript": "~5.1.6",
+    "typescript": "~5.3.3",
     "yorkie": "^2.0.0"
   },
   "gitHooks": {
@@ -65,6 +66,6 @@
     }
   },
   "volta": {
-    "node": "18.16.0"
+    "node": "20.11.1"
   }
 }
diff --git a/packages/docs/.vitepress/config/en.ts b/packages/docs/.vitepress/config/en.ts
@@ -46,7 +46,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           },
           {
             text: 'Vue.js Certification',
-            link: 'https://certification.vuejs.org/?friend=VUEROUTER',
+            link: 'https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=router_vuejs&utm_medium=link&utm_campaign=router_vuejs_links&utm_content=navbar',
           },
         ],
       },
@@ -70,7 +70,6 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         },
         {
           text: 'Essentials',
-          collapsible: false,
           items: [
             {
               text: 'Getting Started',
@@ -84,6 +83,10 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: "Routes' Matching Syntax",
               link: '/guide/essentials/route-matching-syntax.html',
             },
+            {
+              text: 'Named Routes',
+              link: '/guide/essentials/named-routes.html',
+            },
             {
               text: 'Nested Routes',
               link: '/guide/essentials/nested-routes.html',
@@ -92,10 +95,6 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: 'Programmatic Navigation',
               link: '/guide/essentials/navigation.html',
             },
-            {
-              text: 'Named Routes',
-              link: '/guide/essentials/named-routes.html',
-            },
             {
               text: 'Named Views',
               link: '/guide/essentials/named-views.html',
@@ -108,6 +107,10 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: 'Passing Props to Route Components',
               link: '/guide/essentials/passing-props.html',
             },
+            {
+              text: 'Active links',
+              link: '/guide/essentials/active-links.html',
+            },
             {
               text: 'Different History modes',
               link: '/guide/essentials/history-mode.html',
@@ -116,7 +119,6 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         },
         {
           text: 'Advanced',
-          collapsible: false,
           items: [
             {
               text: 'Navigation guards',

diff --git a/packages/docs/.vitepress/config/shared.ts b/packages/docs/.vitepress/config/shared.ts
@@ -1,4 +1,5 @@
 import { defineConfig, HeadConfig } from 'vitepress'
+import { zhSearch } from './zh'
 
 // TODO:
 // export const META_IMAGE = 'https://router.vuejs.org/social.png'
@@ -143,10 +144,14 @@ export const sharedConfig = defineConfig({
       text: 'Suggest changes',
     },
 
-    algolia: {
-      appId: 'BTNTW3I1XP',
-      apiKey: '771d10c8c5cc48f7922f15048b4d931c',
-      indexName: 'next_router_vuejs',
+    search: {
+      provider: 'algolia',
+      options: {
+        appId: 'BTNTW3I1XP',
+        apiKey: '771d10c8c5cc48f7922f15048b4d931c',
+        indexName: 'next_router_vuejs',
+        locales: { ...zhSearch },
+      },
     },
 
     carbonAds: {