Merge branch 'main' into vuepress-rebuild

.eslintrc.cjs

@@ -34,6 +34,10 @@ module.exports = {
         'vue/multi-word-component-names': 'off',
       },
     },
+    {
+      files: ['**/e2e/**/*.cy.ts'],
+      extends: 'plugin:cypress/recommended',
+    },
     {
       files: ['**/tests/**/*.ts', 'tsup.config.ts'],
       rules: {

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,7 @@
 
 ### Before submitting the PR, please make sure you do the following <!-- (put an "X" next to an item) -->
 
-- [ ] Read the [Contributing Guidelines](https://github.com/vuepress/vuepress-next/blob/main/docs/contributing.md).
+- [ ] Read the [Contributing Guidelines](https://github.com/vuepress/vuepress-next/blob/main/CONTRIBUTING.md).
 - [ ] Provide a description in this PR that addresses **what** the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. `close #123`).
 
 ### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->

.github/workflows/check.yml

@@ -4,9 +4,6 @@ on:
   push:
     branches:
       - main
-    paths-ignore:
-      - 'docs/**'
-      - '**.md'
   pull_request:
     branches:
       - main
@@ -43,7 +40,7 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      - name: Test
+      - name: Unit test
         run: pnpm test
 
   check-result:

.github/workflows/coverage.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
     paths-ignore:
-      - 'docs/**'
+      - e2e/**
       - '**.md'
   pull_request:
     branches:
@@ -37,7 +37,7 @@ jobs:
       - name: Build source code
         run: pnpm build
 
-      - name: Test coverage
+      - name: Unit test coverage
         run: pnpm test:cov
 
       - name: Coveralls

.github/workflows/e2e.yml

@@ -0,0 +1,79 @@
+name: e2e
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node: ['18', '20']
+        bundler: ['vite', 'webpack']
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Get cypress cache path
+        working-directory: ./e2e
+        shell: bash
+        run: |
+          echo "CYPRESS_CACHE_PATH=$(pnpm cypress cache path)" >> $GITHUB_ENV
+
+      - name: Setup cypress cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.CYPRESS_CACHE_PATH }}
+          key: cypress-${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            cypress-${{ runner.os }}-node-${{ matrix.node }}-
+            cypress-${{ runner.os }}-
+
+      - name: Install cypress binary
+        working-directory: ./e2e
+        run: pnpm cypress install
+
+      - name: Build source files
+        run: pnpm build
+
+      - name: E2E dev
+        working-directory: ./e2e
+        run: pnpm e2e:ci:dev
+        env:
+          E2E_BUNDLER: ${{ matrix.bundler }}
+
+      - name: E2E build
+        working-directory: ./e2e
+        run: pnpm e2e:ci:build
+        env:
+          E2E_BUNDLER: ${{ matrix.bundler }}
+
+  e2e-result:
+    if: ${{ always() }}
+    name: e2e result
+    runs-on: ubuntu-latest
+    needs: [e2e]
+    steps:
+      - if: ${{ contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled') }}
+        run: exit 1

.gitignore

@@ -1,7 +1,7 @@
 # VuePress files
-docs/.vuepress/.temp/
-docs/.vuepress/.cache/
-docs/.vuepress/dist/
+**/.vuepress/.cache/
+**/.vuepress/.temp/
+**/.vuepress/dist/
 
 # Dist files
 dist/

.prettierignore

@@ -1,3 +1,3 @@
+CHANGELOG.md
 pnpm-lock.yaml
 *.html
-*.md

CONTRIBUTING.md

@@ -38,12 +38,6 @@ Build source code:
 pnpm build
 ```
 
-Start developing the documentation site:
-
-```bash
-pnpm docs:dev
-```
-
 Main tools that used in this project:
 
 - [TypeScript](https://www.typescriptlang.org/) as the development language
@@ -56,32 +50,14 @@ Main tools that used in this project:
 
 The `build` script uses `tsup` to compile TypeScript source files to JavaScript dist files.
 
-Also, it will copy necessary resources from source directory to dist directory, because some source files (e.g. `.vue`, `.css` files) would not be processed by `tsup`, but should keep the same relative path in the dist directory.
-
 You may need to run this script first after your clone this repository, because the dist files are ignored by `.gitignore`.
 
 ### `pnpm clean`
 
-The `clean` script runs `clean` script in all packages, cleaning all the dist files and caches. In other words, it will remove all the files that generated by `build`, `copy` scripts.
+The `clean` script runs `clean` script in all packages, cleaning all the dist files and caches. In other words, it will remove all the files that generated by `build` scripts.
 
 It's used before you want to re-build source files from a clean / initial state.
 
-### `pnpm docs:*`
-
-#### `pnpm docs:build`, `pnpm docs:dev`, `pnpm docs:clean`
-
-The `docs:` prefix indicates that these scripts are for documentation, i.e. the `docs` directory.
-
-VuePress is using itself to build its own documentation site.
-
-You need to run `pnpm build` to build VuePress source files first, then run these `docs:` scripts to develop and build our documentation.
-
-#### `pnpm docs:serve`
-
-Serve the documentation site locally.
-
-You need to run `pnpm docs:build` first to generate the documentation dist files, and then run `pnpm docs:serve` to serve them.
-
 ### `pnpm lint`
 
 The `lint` script uses ESLint to check all source files.

CONTRIBUTING_zh.md

@@ -36,12 +36,6 @@ pnpm install
 pnpm build
 ```
 
-开始开发项目文档网站：
-
-```bash
-pnpm docs:dev
-```
-
 本项目开发使用的一些主要工具：
 
 - [TypeScript](https://www.typescriptlang.org/) 作为开发语言
@@ -54,32 +48,14 @@ pnpm docs:dev
 
 `build` 命令会使用 `tsup` 将 TypeScript 源文件编译为 JavaScript 文件。
 
-此外，它还会将必要的资源文件从源文件目录复制到输出目录。这是因为一些资源文件不会被 `tsup` 处理，但它们仍需要被放置到输出目录，并保持它们的项目对路径不变。
-
 你在克隆代码仓库后，可能需要先执行该命令来确保项目代码可以顺利运行，因为编译后的输出目录被 `.gitignore` 排除在仓库以外了。
 
 ### `pnpm clean`
 
-`clean` 命令会执行所有子 Package 中的 `clean` 命令，清除所有的输出文件目录和缓存文件。换言之，它将移除所有通过 `build` 和 `copy` 命令生成的文件。
+`clean` 命令会执行所有子 Package 中的 `clean` 命令，清除所有的输出文件目录和缓存文件。换言之，它将移除所有通过 `build` 命令生成的文件。
 
 当你想要从最初状态重新构建源代码时，你可以执行该命令。
 
-### `pnpm docs:*`
-
-#### `pnpm docs:build`, `pnpm docs:dev`, `pnpm docs:clean`
-
-`docs:` 前缀表明，这些命令是针对文档 (documentation) 进行操作的，即 `docs` 目录。
-
-VuePress 使用它自己来构建自己的文档网站。
-
-你需要先执行 `pnpm build` 来构建 VuePress 源代码，然后再运行这些 `docs:` 开头的命令来开发或构建文档。
-
-#### `pnpm docs:serve`
-
-在本地启动文档网站服务器。
-
-你需要先运行 `pnpm docs:build` 来生成文档网站的输出文件，然后再通过该命令来启动文档网站。
-
 ### `pnpm lint`
 
 `lint` 命令使用 ESLint 来检查所有源文件。

e2e/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'tests/**/*.cy.ts',
+    supportFile: false,
+  },
+})

e2e/docs/.vuepress/config.ts

@@ -0,0 +1,31 @@
+import process from 'node:process'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
+import { defineUserConfig } from '@vuepress/cli'
+import { e2eTheme } from './theme/node/e2eTheme.js'
+
+export default defineUserConfig({
+  base: '/',
+
+  head: [],
+
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'VuePress E2E',
+      description: 'VuePress E2E Test Site',
+      head: [],
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      title: 'VuePress E2E',
+      description: 'VuePress E2E 测试站点',
+      head: [],
+    },
+  },
+
+  bundler:
+    process.env.E2E_BUNDLER === 'webpack' ? webpackBundler() : viteBundler(),
+
+  theme: e2eTheme(),
+})

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

@@ -0,0 +1,22 @@
+import { defineClientConfig } from '@vuepress/client'
+import CustomLayout from './layouts/CustomLayout.vue'
+import Layout from './layouts/Layout.vue'
+import NotFound from './layouts/NotFound.vue'
+
+import './styles/index.scss'
+
+export default defineClientConfig({
+  enhance({ app, router }) {
+    // ...
+  },
+
+  setup() {
+    // ...
+  },
+
+  layouts: {
+    CustomLayout,
+    Layout,
+    NotFound,
+  },
+})

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

@@ -0,0 +1,7 @@
+<template>
+  <div class="e2e-theme-custom-layout">
+    <main class="e2e-theme-custom-layout-content">
+      <Content />
+    </main>
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Content, useSiteData } from '@vuepress/client'
+
+const siteData = useSiteData()
+</script>
+
+<template>
+  <div class="e2e-theme">
+    <nav class="e2e-theme-nav">
+      <div>Languages</div>
+      <ul>
+        <li v-for="[key, value] in Object.entries(siteData.locales)" :key="key">
+          <RouterLink :to="key">{{ value.lang }}</RouterLink>
+        </li>
+      </ul>
+    </nav>
+
+    <main class="e2e-theme-content">
+      <Content />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,3 @@
+<template>
+  <div class="e2e-theme-not-found">404 Not Found</div>
+</template>