Merge branch 'main' into insert-matcher-perf

Author: skirtles-code

.github/workflows/test.yml

@@ -42,7 +42,9 @@ jobs:
       # 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'

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.

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@vue/router-root",
   "private": true,
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@8.15.3",
   "engines": {
-    "node": ">=18.14.0"
+    "node": ">=20.9.0"
   },
   "workspaces": [
     "packages/*"
@@ -33,13 +33,13 @@
     "chalk": "^5.3.0",
     "enquirer": "^2.4.1",
     "execa": "^8.0.1",
-    "globby": "^14.0.0",
-    "lint-staged": "^15.2.0",
+    "globby": "^14.0.1",
+    "lint-staged": "^15.2.2",
     "minimist": "^1.2.8",
     "p-series": "^3.0.0",
     "prettier": "^2.8.8",
-    "semver": "^7.5.4",
-    "typedoc": "^0.25.3",
+    "semver": "^7.6.0",
+    "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",
     "typescript": "~5.3.3",
     "yorkie": "^2.0.0"
@@ -66,6 +66,6 @@
     }
   },
   "volta": {
-    "node": "18.16.0"
+    "node": "20.11.1"
   }
 }

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

packages/docs/.vitepress/config/zh.ts

@@ -50,7 +50,7 @@ export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           },
           {
             text: 'Vue.js 认证',
-            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',
           },
         ],
       },
@@ -79,7 +79,6 @@ export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         },
         {
           text: '基础',
-          collapsible: false,
           items: [
             {
               text: '入门',
@@ -125,7 +124,6 @@ export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         },
         {
           text: '进阶',
-          collapsible: false,
           items: [
             {
               text: '导航守卫',

packages/docs/.vitepress/theme/components/AsideSponsors.vue

@@ -1,6 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VPDocAsideSponsors } from 'vitepress/theme'
+import sponsors from './sponsors.json'
+
+// to avoid the never[] type in json
+interface Sponsor {
+  alt: string
+  href: string
+  imgSrcDark: string
+  imgSrcLight: string
+}
+
+const asideSponsors = computed(() => {
+  return [
+    {
+      size: 'mini',
+      items: sponsors.platinum.length ? sponsors.platinum.map((sponsor: Sponsor) => ({
+        name: sponsor.alt,
+        url: sponsor.href,
+        img: sponsor.imgSrcLight,
+      })) : [
+        {
+          name: 'Become a sponsor',
+          url: 'https://github.com/sponsors/posva',
+          img: '/your-logo-here.svg'
+        }
+      ],
+    },
+    {
+      size: 'xmini',
+      // TODO: use gold instead once I have some
+      items: sponsors.silver.map((sponsor: Sponsor) => ({
+        name: sponsor.alt,
+        url: sponsor.href,
+        img: sponsor.imgSrcLight,
+      })),
+    },
+  ]
+})
+</script>
+
 <template>
+  <VPDocAsideSponsors :data="asideSponsors" />
+
   <a
-    class="mp-banner"
+    class="banner mp"
     href="https://masteringpinia.com/?utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_MP&utm_content=sidebar"
     target="_blank"
   >
@@ -13,21 +57,35 @@
   </a>
 
   <a
-    class="banner"
-    href="https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_CERT&utm_content=sidebar"
+    class="banner cert"
+    href="https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=router_vuejs&utm_medium=link&utm_campaign=router_vuejs_links&utm_content=sidebar"
     target="_blank"
   >
-    <img src="/banners/vuejs-certification.svg" alt="Vue.js Certification" />
+    <img width="22" height="22" src="/vue-cert-logo.svg" />
+    <span>
+      <p class="extra-info">The official</p>
+      <p class="heading">Vue.js Certification</p>
+      <p class="extra-info">Get certified!</p>
+    </span>
   </a>
 </template>
 
 <style scoped>
-.banner {
-  margin-bottom: 0.5rem;
+.VPDocAsideSponsors {
+  margin-top: 8px !important;
+}
+
+:deep(.vp-sponsor-grid.mini .vp-sponsor-grid-image) {
+  max-width: 158px;
+  max-height: 48px;
+}
+:deep(.vp-sponsor-grid.xmini .vp-sponsor-grid-image) {
+  max-width: 80px;
+  max-height: 32px;
 }
 
-.mp-banner {
-  margin: 1rem 0;
+.banner {
+  margin: 0.25rem 0;
   padding: 0.4rem 0;
   border-radius: 14px;
   position: relative;
@@ -44,27 +102,35 @@
   transition: border-color 0.5s;
 }
 
-.mp-banner:hover {
+.banner:last-of-type {
+  margin-bottom: 1rem;
+}
+
+.banner:hover {
   border: 2px solid var(--vp-c-brand-1);
 }
 
-.mp-banner img {
+.banner.cert:hover {
+  border: 2px solid var(--vp-c-green-1);
+}
+
+.banner img {
   transition: transform 0.5s;
   transform: scale(1.25);
 }
-.mp-banner:hover img {
+.banner:hover img {
   transform: scale(1.75);
 }
 
-.mp-banner .extra-info {
+.banner .extra-info {
   color: var(--vp-c-text-1);
   opacity: 0;
   font-size: 0.7rem;
   padding-left: 0.1rem;
   transition: opacity 0.5s;
 }
 
-.mp-banner .heading {
+.banner .heading {
   background-image: linear-gradient(
     120deg,
     var(--vp-c-brand-3) 16%,
@@ -76,7 +142,16 @@
   -webkit-text-fill-color: transparent;
 }
 
-.mp-banner:hover .extra-info {
+.banner.cert .heading {
+  background-image: linear-gradient(
+    120deg,
+    var(--vp-c-green-3) 16%,
+    var(--vp-c-green-2),
+    var(--vp-c-green-1)
+  );
+}
+
+.banner:hover .extra-info {
   opacity: 0.9;
 }
 </style>

packages/docs/.vitepress/theme/components/HomeSponsorsGroup.vue

@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import sponsors from './sponsors.json'
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const props = withDefaults(
+  defineProps<{
+    name: 'Gold' | 'Platinum' | 'Silver' | 'Bronze'
+    size?: number | string
+  }>(),
+  {
+    size: 140,
+  }
+)
+
+const { isDark } = useData()
+
+const list = computed(() =>
+  sponsors[props.name.toLowerCase()].map(sponsor => ({
+    ...sponsor,
+    imgSrc: isDark.value ? sponsor.imgSrcDark : sponsor.imgSrcLight,
+  }))
+)
+</script>
+
 <template>
   <h3>{{ name }} Sponsors</h3>
 
@@ -28,33 +53,6 @@
   </p>
 </template>
 
-<script setup lang="ts">
-import sponsors from './sponsors.json'
-import { computed } from 'vue'
-import type { PropType } from 'vue'
-import { useData } from 'vitepress'
-
-const { isDark } = useData()
-
-const props = defineProps({
-  name: {
-    type: String as PropType<'Gold' | 'Platinum' | 'Silver' | 'Bronze'>,
-    required: true,
-  },
-  size: {
-    type: [Number, String],
-    default: 140,
-  },
-})
-
-const list = computed(() =>
-  sponsors[props.name.toLowerCase()].map((sponsor) => ({
-    ...sponsor,
-    imgSrc: isDark.value ? sponsor.imgSrcDark : sponsor.imgSrcLight,
-  }))
-)
-</script>
-
 <style scoped>
 .sponsor_wrapper {
   padding: 5px;