Merge branch 'main' into route-option

.github/workflows/check.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4

.github/workflows/coverage.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/e2e.yml

@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
 
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4

.vscode/settings.json

@@ -28,6 +28,7 @@
     "frontmatter",
     "globby",
     "gtag",
+    "lightningcss",
     "mdit",
     "nprogress",
     "prefetch",

CHANGELOG.md

@@ -1,3 +1,13 @@
+# [2.0.0-rc.11](https://github.com/vuepress/core/compare/v2.0.0-rc.10...v2.0.0-rc.11) (2024-05-16)
+
+
+### Features
+
+* **client:** improve AutoLinkProps ([#1554](https://github.com/vuepress/core/issues/1554)) ([0777d09](https://github.com/vuepress/core/commit/0777d098e420ebc44ed9bb983009ee5d6367bb1d))
+* **client:** support slot props in AutoLink ([630e29a](https://github.com/vuepress/core/commit/630e29a0a64973cf41369b854c0663ea36b12608))
+
+
+
 # [2.0.0-rc.10](https://github.com/vuepress/core/compare/v2.0.0-rc.9...v2.0.0-rc.10) (2024-05-16)
 
 

e2e/docs/.vuepress/config.ts

@@ -41,6 +41,15 @@ export default defineUserConfig({
         ['meta', { name: 'bar', content: 'foobar zh' }],
       ],
     },
+    '/中文/': {
+      lang: '中文',
+      title: 'VuePress E2E',
+      description: 'VuePress E2E 测试站点',
+      head: [
+        ['meta', { name: 'foo-中文', content: 'foo-中文' }],
+        ['meta', { name: 'bar', content: '中文' }],
+      ],
+    },
   },
 
   markdown: {

e2e/docs/.vuepress/theme/client/config.ts

@@ -1,5 +1,6 @@
 import { defineClientConfig } from 'vuepress/client'
 import RootComponentFromTheme from './components/RootComponentFromTheme.vue'
+import CssModulesLayout from './layouts/CssModulesLayout.vue'
 import CustomLayout from './layouts/CustomLayout.vue'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
@@ -16,6 +17,7 @@ export default defineClientConfig({
   },
 
   layouts: {
+    CssModulesLayout,
     CustomLayout,
     Layout,
     NotFound,

e2e/docs/.vuepress/theme/client/layouts/CssModulesLayout.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import styles from '../styles/styles.module.css'
+import variables from '../styles/variables.module.scss'
+</script>
+
+<template>
+  <div class="e2e-theme-css-modules-layout">
+    <main class="e2e-theme-css-modules-layout-content">
+      <div id="e2e-theme-css-modules-scss">{{ variables.fooScss }}</div>
+      <div id="e2e-theme-css-modules-css" :class="styles.greenText">
+        CSS modules green text
+      </div>
+      <Content />
+    </main>
+  </div>
+</template>

e2e/docs/.vuepress/theme/client/styles/styles.module.css

@@ -0,0 +1,3 @@
+.greenText {
+  color: rgb(0, 129, 0);
+}

e2e/docs/.vuepress/theme/client/styles/variables.module.scss

@@ -0,0 +1,3 @@
+:export {
+  fooScss: 234px;
+}

e2e/docs/components/auto-link.md

@@ -1,16 +1,39 @@
 # AutoLink
 
 <div id="route-link">
-  <AutoLink v-for="item in routeLinksConfig" v-bind="item" />
+  <AutoLink v-for="item in routeLinksConfig" :config="item" />
 </div>
 
 <div id="external-link">
-  <AutoLink v-for="item in externalLinksConfig" v-bind="item" />
+  <AutoLink v-for="item in externalLinksConfig" :config="item" />
 </div>
 
 <div id="config">
-  <AutoLink v-bind="{ text: 'text1', link: '/', ariaLabel: 'label' }" />
-  <AutoLink v-bind="{ text: 'text2', link: 'https://example.com/test/' }" />
+  <AutoLink :config="{ text: 'text1', link: '/', ariaLabel: 'label' }" />
+  <AutoLink :config="{ text: 'text2', link: 'https://example.com/test/' }" />
+</div>
+
+<div id="attrs">
+  <AutoLink class="class" :config="{ text: 'text1', link: '/', ariaLabel: 'label', icon: 'icon1' }" />
+  <AutoLink id="id" :config="{ text: 'text2', link: 'https://example.com/test/', unknown: 'value' }" />
+  <AutoLink download="example-test.png" :config="{ text: 'text3', link: 'https://example.com/test.png' }" />
+</div>
+
+<div id="slots">
+  <AutoLink :config="{ text: 'text1', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    slot-text
+  </AutoLink>
+  <AutoLink :config="{ text: 'text2', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    <template v-slot="{ ariaLabel }">{{ ariaLabel }}</template>
+  </AutoLink>
+  <AutoLink :config="{ text: 'text3', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    <template #before>before</template>
+    <template #after>after</template>
+  </AutoLink>
+  <AutoLink :config="{ text: 'text4', link: '/', ariaLabel: 'label', icon: 'icon1' }">
+    <template #before="{ ariaLabel }">before {{ ariaLabel }}</template>
+    <template #after="{ ariaLabel }">after {{ ariaLabel }}</template>
+  </AutoLink>
 </div>
 
 <script setup lang="ts">

e2e/docs/styles/css-container.md

@@ -0,0 +1,23 @@
+Check if the `@container` rule could be supported and minimized correctly.
+
+<div class="container">
+
+Container text
+
+</div>
+
+<style>
+.container {
+  container-type: inline-size;
+}
+.container p {
+  font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
+  text-align: left;
+}
+@container (max-width: 480px) {
+  .container p {
+    text-align: center;
+    font-weight: bold;
+  }
+}
+</style>

e2e/docs/styles/css-modules.md

@@ -0,0 +1,3 @@
+---
+layout: CssModulesLayout
+---

e2e/docs/zh/README.md

@@ -1 +1 @@
-foo
+bar

e2e/docs/中文/README.md

@@ -0,0 +1 @@
+baz

e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/e2e",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.11",
   "private": true,
   "type": "module",
   "scripts": {
@@ -19,7 +19,7 @@
     "@vuepress-e2e/conditional-exports": "file:./modules/conditional-exports",
     "@vuepress/bundler-vite": "workspace:*",
     "@vuepress/bundler-webpack": "workspace:*",
-    "sass": "^1.77.1",
+    "sass": "^1.77.2",
     "sass-loader": "^14.2.1",
     "vue": "^3.4.27",
     "vuepress": "workspace:*"

e2e/tests/components/auto-link.spec.ts

@@ -36,3 +36,41 @@ test('should render config correctly', async ({ page }) => {
   await expect(locator.nth(1)).toHaveAttribute('target', '_blank')
   await expect(locator.nth(1)).toHaveAttribute('rel', 'noopener noreferrer')
 })
+
+test('should append attrs correctly', async ({ page }) => {
+  const locator = page.locator('.e2e-theme-content #attrs a')
+
+  await expect(locator.nth(0)).toHaveText('text1')
+  await expect(locator.nth(0)).toHaveAttribute('href', BASE)
+  await expect(locator.nth(0)).toHaveAttribute('aria-label', 'label')
+  await expect(locator.nth(0)).toHaveAttribute('class', /class/)
+  await expect(locator.nth(0)).not.toHaveAttribute('icon')
+
+  await expect(locator.nth(1)).toHaveText('text2')
+  await expect(locator.nth(1)).toHaveAttribute(
+    'href',
+    'https://example.com/test/',
+  )
+  await expect(locator.nth(1)).toHaveAttribute('target', '_blank')
+  await expect(locator.nth(1)).toHaveAttribute('rel', 'noopener noreferrer')
+  await expect(locator.nth(1)).toHaveAttribute('id', 'id')
+  await expect(locator.nth(1)).not.toHaveAttribute('unknown')
+
+  await expect(locator.nth(2)).toHaveText('text3')
+  await expect(locator.nth(2)).toHaveAttribute(
+    'href',
+    'https://example.com/test.png',
+  )
+  await expect(locator.nth(2)).toHaveAttribute('target', '_blank')
+  await expect(locator.nth(2)).toHaveAttribute('rel', 'noopener noreferrer')
+  await expect(locator.nth(2)).toHaveAttribute('download', 'example-test.png')
+})
+
+test('should render slots correctly', async ({ page }) => {
+  const locator = page.locator('.e2e-theme-content #slots a')
+
+  await expect(locator.nth(0)).toHaveText('slot-text')
+  await expect(locator.nth(1)).toHaveText('label')
+  await expect(locator.nth(2)).toHaveText('beforetext3after')
+  await expect(locator.nth(3)).toHaveText('before labeltext4after label')
+})

e2e/tests/site-data.spec.ts

@@ -95,3 +95,50 @@ test.describe('zh-CN', () => {
     await expect(fooZhLocator.first()).toHaveAttribute('content', 'foo-zh')
   })
 })
+
+test.describe('non-ASCII', () => {
+  test.beforeEach(async ({ page }) => page.goto('中文/'))
+
+  test('lang', async ({ page }) => {
+    await expect(page.locator('html')).toHaveAttribute('lang', '中文')
+  })
+
+  test('title', async ({ page }) => {
+    const locator = page.locator('head title')
+
+    await expect(page).toHaveTitle('VuePress E2E')
+    await expect(locator).toHaveCount(1)
+    await expect(locator.first()).toHaveText('VuePress E2E', {
+      useInnerText: true,
+    })
+  })
+
+  test('description', async ({ page }) => {
+    const locator = page.locator('head meta[name="description"]')
+
+    await expect(locator).toHaveCount(1)
+    await expect(locator.first()).toHaveAttribute(
+      'content',
+      'VuePress E2E 测试站点',
+    )
+  })
+
+  test('head', async ({ page }) => {
+    const fooLocator = page.locator('head meta[name="foo"]')
+    const barLocator = page.locator('head meta[name="bar"]')
+    const bazLocator = page.locator('head meta[name="baz"]')
+    const fooChsLocator = page.locator('head meta[name="foo-中文"]')
+
+    await expect(fooLocator).toHaveCount(1)
+    await expect(fooLocator.first()).toHaveAttribute('content', 'foo')
+
+    await expect(barLocator).toHaveCount(1)
+    await expect(barLocator.first()).toHaveAttribute('content', '中文')
+
+    await expect(bazLocator).toHaveCount(1)
+    await expect(bazLocator.first()).toHaveAttribute('content', 'baz')
+
+    await expect(fooChsLocator).toHaveCount(1)
+    await expect(fooChsLocator.first()).toHaveAttribute('content', 'foo-中文')
+  })
+})

e2e/tests/styles/css-modules.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test'
+
+test('Should load CSS modules correctly', async ({ page }) => {
+  await page.goto('styles/css-modules.html')
+  await expect(page.locator('#e2e-theme-css-modules-scss')).toHaveText('234px')
+  await expect(page.locator('#e2e-theme-css-modules-css')).toHaveCSS(
+    'color',
+    'rgb(0, 129, 0)',
+  )
+})

e2e/tests/update-head.spec.ts

@@ -9,6 +9,7 @@ test('should update head correctly', async ({ page }) => {
   const bazLocator = page.locator('head meta[name="baz"]')
   const fooEnLocator = page.locator('head meta[name="foo-en"]')
   const fooZhLocator = page.locator('head meta[name="foo-zh"]')
+  const fooChsLocator = page.locator('head meta[name="foo-中文"]')
 
   // en-US
   await page.goto('')
@@ -36,6 +37,8 @@ test('should update head correctly', async ({ page }) => {
   await expect(bazLocator.first()).toHaveAttribute('content', 'foobar baz')
   await expect(fooEnLocator).toHaveCount(1)
   await expect(fooEnLocator.first()).toHaveAttribute('content', 'foo-en')
+  await expect(fooZhLocator).toHaveCount(0)
+  await expect(fooChsLocator).toHaveCount(0)
 
   // navigate to zh-CN
   await page.locator('.e2e-theme-nav a', { hasText: 'zh-CN' }).click()
@@ -61,6 +64,37 @@ test('should update head correctly', async ({ page }) => {
   await expect(barLocator.first()).toHaveAttribute('content', 'foobar zh')
   await expect(bazLocator).toHaveCount(1)
   await expect(bazLocator.first()).toHaveAttribute('content', 'baz')
+  await expect(fooEnLocator).toHaveCount(0)
   await expect(fooZhLocator).toHaveCount(1)
   await expect(fooZhLocator.first()).toHaveAttribute('content', 'foo-zh')
+  await expect(fooChsLocator).toHaveCount(0)
+
+  // navigate to non-ASCII path
+  await page.locator('.e2e-theme-nav a', { hasText: '中文' }).click()
+
+  // lang
+  await expect(htmlLocator).toHaveAttribute('lang', '中文')
+  // title
+  await expect(page).toHaveTitle('VuePress E2E')
+  await expect(titleLocator).toHaveCount(1)
+  await expect(titleLocator.first()).toHaveText('VuePress E2E', {
+    useInnerText: true,
+  })
+  // description
+  await expect(descriptionLocator).toHaveCount(1)
+  await expect(descriptionLocator.first()).toHaveAttribute(
+    'content',
+    'VuePress E2E 测试站点',
+  )
+  // head
+  await expect(fooLocator).toHaveCount(1)
+  await expect(fooLocator.first()).toHaveAttribute('content', 'foo')
+  await expect(barLocator).toHaveCount(1)
+  await expect(barLocator.first()).toHaveAttribute('content', '中文')
+  await expect(bazLocator).toHaveCount(1)
+  await expect(bazLocator.first()).toHaveAttribute('content', 'baz')
+  await expect(fooEnLocator).toHaveCount(0)
+  await expect(fooZhLocator).toHaveCount(0)
+  await expect(fooChsLocator).toHaveCount(1)
+  await expect(fooChsLocator.first()).toHaveAttribute('content', 'foo-中文')
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/monorepo",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.11",
   "private": true,
   "type": "module",
   "scripts": {
@@ -43,7 +43,7 @@
     "eslint-config-vuepress": "^4.10.1",
     "eslint-config-vuepress-typescript": "^4.10.1",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.4",
     "prettier": "^3.2.5",
     "prettier-config-vuepress": "^4.4.0",
     "rimraf": "^5.0.7",
@@ -53,9 +53,9 @@
     "typescript": "^5.4.5",
     "vite": "~5.2.11",
     "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.17"
+    "vue-tsc": "^2.0.19"
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].2",
   "engines": {
     "node": ">=18.16.0"
   }

packages/bundler-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/bundler-vite",
-  "version": "2.0.0-rc.10",
+  "version": "2.0.0-rc.11",
   "description": "Bundler vite package of VuePress",
   "keywords": [
     "vuepress-bundler",