refactor: drop support for using bundler, theme and plugins by name (#843)

- fix: solve client code circular reference issue
- build: move from yarn to pnpm
- build: pre-bundler client and shared package

BREAKING CHANGE: config `bundler` should import the bundler directly, and `bundlerConfig` has been removed
BREAKING CHANGE: config `theme` should import the theme directly, and `themeConfig` has been removed
BREAKING CHANGE: config `plugins` should import the plugins directly
BREAKING CHANGE: theme API `plugins` should import the plugins directly
BREAKING CHANGE: theme API `extends` should import the parent theme directly
BREAKING CHANGE: plugin function and theme function should no longer accept user options as the first param, please check out the guide for how to write a plugin and a theme

Author: meteorlxy

.eslintignore

@@ -1,6 +1,7 @@
-node_modules/
+!.vuepress/
+!.*.js
+.cache/
 .temp/
+node_modules/
 lib/
 dist/
-!.vuepress/
-!.*.js

.eslintrc.js

@@ -55,13 +55,14 @@ module.exports = {
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'off',
         'vue/one-component-per-file': 'off',
-        'import/no-extraneous-dependencies': 'off',
-      },
-    },
-    {
-      files: ['docs/**'],
-      rules: {
-        'import/no-extraneous-dependencies': 'off',
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            devDependencies: true,
+            optionalDependencies: false,
+            peerDependencies: false,
+          },
+        ],
       },
     },
   ],

.github/workflows/check-docs.yml

@@ -18,26 +18,31 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node: ['14', '16']
-        bundler: ['@vuepress/vite', '@vuepress/webpack']
+        bundler: ['vite', 'webpack']
 
     runs-on: ${{ matrix.os }}
 
     steps:
       - uses: actions/checkout@v3
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 6
+
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          cache: yarn
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Copy and build
-        run: yarn copy && yarn build
+        run: pnpm copy && pnpm build
 
       - name: Build docs with ${{ matrix.bundler }}
-        run: yarn docs:build
+        run: pnpm docs:build
         env:
           DOCS_BUNDLER: ${{ matrix.bundler }}

.github/workflows/check.yml

@@ -24,23 +24,28 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 6
+
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          cache: yarn
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm i --frozen-lockfile
 
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Copy
-        run: yarn copy
+        run: pnpm copy
 
       - name: Build
-        run: yarn build
+        run: pnpm build
 
       - name: Test
-        run: yarn test
+        run: pnpm test

.github/workflows/coverage.yml

@@ -22,17 +22,25 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 6
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
+
+      - name: Copy and build
+        run: pnpm copy && pnpm build
 
       - name: Test coverage
-        run: yarn test:coverage
+        run: pnpm test -- --coverage
 
       - name: Coveralls
         uses: coverallsapp/github-action@master

.github/workflows/docs.yml

@@ -21,17 +21,22 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 6
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build documentation site
-        run: yarn docs:release
+        run: pnpm docs:release
 
       - name: Deploy to GitHub Pages
         uses: crazy-max/[email protected]

.gitignore

@@ -4,6 +4,7 @@ docs/.vuepress/.cache/
 docs/.vuepress/dist/
 
 # Dist files
+dist/
 lib/
 
 # Test temp files

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn commitlint --edit $1
+pnpm commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

.vscode/launch.json

@@ -5,11 +5,10 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "node",
-      "request": "launch",
       "name": "docs:dev",
-      "program": "${workspaceFolder}/packages/vuepress/bin/vuepress.js",
-      "args": ["dev", "docs"]
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm docs:dev"
     }
   ]
 }

docs/.vuepress/config.ts

@@ -1,11 +1,17 @@
+import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
 import { defineUserConfig } from '@vuepress/cli'
-import type { DefaultThemeOptions } from '@vuepress/theme-default'
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+import { shikiPlugin } from '@vuepress/plugin-shiki'
+import { defaultTheme } from '@vuepress/theme-default'
 import { path } from '@vuepress/utils'
 import { navbar, sidebar } from './configs'
 
 const isProd = process.env.NODE_ENV === 'production'
 
-export default defineUserConfig<DefaultThemeOptions>({
+export default defineUserConfig({
   base: '/',
 
   head: [
@@ -66,11 +72,9 @@ export default defineUserConfig<DefaultThemeOptions>({
 
   bundler:
     // specify bundler via environment variable
-    process.env.DOCS_BUNDLER ??
-    // use vite by default
-    '@vuepress/vite',
+    process.env.DOCS_BUNDLER === 'webpack' ? webpackBundler() : viteBundler(),
 
-  themeConfig: {
+  theme: defaultTheme({
     logo: '/images/hero.png',
 
     repo: 'vuepress/vuepress-next',
@@ -141,7 +145,7 @@ export default defineUserConfig<DefaultThemeOptions>({
       // use shiki plugin in production mode instead
       prismjs: !isProd,
     },
-  },
+  }),
 
   markdown: {
     importCode: {
@@ -154,81 +158,65 @@ export default defineUserConfig<DefaultThemeOptions>({
   },
 
   plugins: [
-    [
-      '@vuepress/plugin-docsearch',
-      {
-        appId: '34YFD9IUQ2',
-        apiKey: '9a9058b8655746634e01071411c366b8',
-        indexName: 'vuepress',
-        searchParameters: {
-          facetFilters: ['tags:v2'],
-        },
-        locales: {
-          '/zh/': {
-            placeholder: '搜索文档',
-            translations: {
-              button: {
-                buttonText: '搜索文档',
-                buttonAriaLabel: '搜索文档',
+    docsearchPlugin({
+      appId: '34YFD9IUQ2',
+      apiKey: '9a9058b8655746634e01071411c366b8',
+      indexName: 'vuepress',
+      searchParameters: {
+        facetFilters: ['tags:v2'],
+      },
+      locales: {
+        '/zh/': {
+          placeholder: '搜索文档',
+          translations: {
+            button: {
+              buttonText: '搜索文档',
+              buttonAriaLabel: '搜索文档',
+            },
+            modal: {
+              searchBox: {
+                resetButtonTitle: '清除查询条件',
+                resetButtonAriaLabel: '清除查询条件',
+                cancelButtonText: '取消',
+                cancelButtonAriaLabel: '取消',
+              },
+              startScreen: {
+                recentSearchesTitle: '搜索历史',
+                noRecentSearchesText: '没有搜索历史',
+                saveRecentSearchButtonTitle: '保存至搜索历史',
+                removeRecentSearchButtonTitle: '从搜索历史中移除',
+                favoriteSearchesTitle: '收藏',
+                removeFavoriteSearchButtonTitle: '从收藏中移除',
+              },
+              errorScreen: {
+                titleText: '无法获取结果',
+                helpText: '你可能需要检查你的网络连接',
               },
-              modal: {
-                searchBox: {
-                  resetButtonTitle: '清除查询条件',
-                  resetButtonAriaLabel: '清除查询条件',
-                  cancelButtonText: '取消',
-                  cancelButtonAriaLabel: '取消',
-                },
-                startScreen: {
-                  recentSearchesTitle: '搜索历史',
-                  noRecentSearchesText: '没有搜索历史',
-                  saveRecentSearchButtonTitle: '保存至搜索历史',
-                  removeRecentSearchButtonTitle: '从搜索历史中移除',
-                  favoriteSearchesTitle: '收藏',
-                  removeFavoriteSearchButtonTitle: '从收藏中移除',
-                },
-                errorScreen: {
-                  titleText: '无法获取结果',
-                  helpText: '你可能需要检查你的网络连接',
-                },
-                footer: {
-                  selectText: '选择',
-                  navigateText: '切换',
-                  closeText: '关闭',
-                  searchByText: '搜索提供者',
-                },
-                noResultsScreen: {
-                  noResultsText: '无法找到相关结果',
-                  suggestedQueryText: '你可以尝试查询',
-                  openIssueText: '你认为该查询应该有结果？',
-                  openIssueLinkText: '点击反馈',
-                },
+              footer: {
+                selectText: '选择',
+                navigateText: '切换',
+                closeText: '关闭',
+                searchByText: '搜索提供者',
+              },
+              noResultsScreen: {
+                noResultsText: '无法找到相关结果',
+                suggestedQueryText: '你可以尝试查询',
+                reportMissingResultsText: '你认为该查询应该有结果？',
+                reportMissingResultsLinkText: '点击反馈',
               },
             },
           },
         },
       },
-    ],
-    [
-      '@vuepress/plugin-google-analytics',
-      {
-        // we have multiple deployments, which would use different id
-        id: process.env.DOCS_GA_ID,
-      },
-    ],
-    [
-      '@vuepress/plugin-register-components',
-      {
-        componentsDir: path.resolve(__dirname, './components'),
-      },
-    ],
+    }),
+    googleAnalyticsPlugin({
+      // we have multiple deployments, which would use different id
+      id: process.env.DOCS_GA_ID ?? '',
+    }),
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    }),
     // only enable shiki plugin in production mode
-    [
-      '@vuepress/plugin-shiki',
-      isProd
-        ? {
-            theme: 'dark-plus',
-          }
-        : false,
-    ],
+    isProd ? shikiPlugin({ theme: 'dark-plus' }) : [],
   ],
 })

docs/.vuepress/configs/meta.ts

@@ -1 +1 @@
-export { version } from '../../../lerna.json'
+export const { version } = require('@vuepress/core/package.json')