.commitlintrc.cjs

@@ -0,0 +1,18 @@
+const fs = require('fs')
+const path = require('path')
+
+const getSubDirectories = (dir) => fs.readdirSync(dir).filter(item => fs.statSync(path.join(dir, item)).isDirectory())
+const corePackages = getSubDirectories(path.resolve(__dirname, 'packages'))
+const ecosystemPackages = getSubDirectories(path.resolve(__dirname, 'ecosystem'))
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'scope-enum': [
+      2,
+      'always',
+      [...corePackages, ...ecosystemPackages],
+    ],
+    'footer-max-line-length': [0],
+  },
+}

.eslintrc.js → .eslintrc.cjs

@@ -11,16 +11,14 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['*.ts', '*.vue'],
+      files: ['*.ts', '*.vue', '*.cts'],
       extends: 'vuepress-typescript',
       parserOptions: {
         project: ['tsconfig.json'],
       },
       rules: {
-        '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
         'vue/multi-word-component-names': 'off',
       },
     },
@@ -31,12 +29,10 @@ module.exports = {
       },
     },
     {
-      files: ['**/__tests__/**/*.ts'],
-      env: {
-        jest: true,
-      },
+      files: ['**/tests/**/*.ts', 'tsup.config.ts'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'off',
+        'import/no-extraneous-dependencies': 'off',
         'vue/one-component-per-file': 'off',
       },
     },

.github/workflows/check.yml

@@ -37,11 +37,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Lint
-        run: pnpm lint
-
       - name: Build
         run: pnpm build
 
+      - name: Lint
+        run: pnpm lint
+
       - name: Test
         run: pnpm test

.github/workflows/coverage.yml

@@ -38,7 +38,7 @@ jobs:
         run: pnpm build
 
       - name: Test coverage
-        run: pnpm run test --coverage
+        run: pnpm test:cov
 
       - name: Coveralls
         uses: coverallsapp/github-action@master

.github/workflows/issue-daily.yml

@@ -13,11 +13,11 @@ jobs:
         with:
           actions: 'check-inactive'
           token: ${{ secrets.GITHUB_TOKEN }}
-          inactive-day: 7
+          inactive-day: 15
           inactive-label: 'stale'
-          exclude-labels: 'bug, documentation, enhancement, feature, help wanted, need reproduction, stale'
+          exclude-labels: 'bug, documentation, enhancement, feature, help wanted, need reproduction, need review, stale'
           body: |
-            This issue is marked as `stale` because it has not had recent activity. Issues marked with `stale` will be closed if they have no activity within 3 days.
+            This issue is marked as `stale` because it has not had recent activity. Issues marked with `stale` will be closed if they have no activity within 7 days.
 
   issue-close-stale:
     name: close stale issues
@@ -28,7 +28,7 @@ jobs:
           actions: 'close-issues'
           token: ${{ secrets.GITHUB_TOKEN }}
           labels: 'stale'
-          inactive-day: 3
+          inactive-day: 7
 
   issue-close-need-reproduction:
     name: close need-reproduction issues
@@ -39,4 +39,4 @@ jobs:
           actions: 'close-issues'
           token: ${{ secrets.GITHUB_TOKEN }}
           labels: 'need reproduction'
-          inactive-day: 3
+          inactive-day: 7

.github/workflows/issue-labeled.yml

@@ -27,4 +27,4 @@ jobs:
           actions: 'create-comment'
           token: ${{ secrets.GITHUB_TOKEN }}
           body: |
-            Hello @${{ github.event.issue.user.login }}. Please provide a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) using a GitHub repository or [v2.vuepress.vuejs.org/new](https://v2.vuepress.vuejs.org/new). Issues marked with `need reproduction` will be closed if they have no activity within 3 days.
+            Hello @${{ github.event.issue.user.login }}. Please provide a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) using a GitHub repository or [v2.vuepress.vuejs.org/new](https://v2.vuepress.vuejs.org/new). Issues marked with `need reproduction` will be closed if they have no activity within 7 days.

CHANGELOG.md

@@ -1,3 +1,35 @@
+# [2.0.0-beta.50](https://github.com/vuepress/vuepress-next/compare/v2.0.0-beta.49...v2.0.0-beta.50) (2022-08-23)
+
+
+### Bug Fixes
+
+* **cli:** handle config file __dirname correctly ([8171f4d](https://github.com/vuepress/vuepress-next/commit/8171f4d58406d95bfe3d415107f6e0b88521e082))
+* **plugin-active-header-links:** keep query when updating hash (close [#991](https://github.com/vuepress/vuepress-next/issues/991)) ([0fdb021](https://github.com/vuepress/vuepress-next/commit/0fdb021c678d22f435fe8e94375c92f0bee8b125))
+* **plugin-docsearch:** handle navigation url correctly (close [#1024](https://github.com/vuepress/vuepress-next/issues/1024)) ([b6ded16](https://github.com/vuepress/vuepress-next/commit/b6ded16f607f5db5a27967260e7e6b7b69a26c2b))
+* **theme-default:** fix initial open state of sidebar item ([392297f](https://github.com/vuepress/vuepress-next/commit/392297fa856fd5869de40e4999c5bc4d126a3941))
+* workaround for vite hash issue (close [#1008](https://github.com/vuepress/vuepress-next/issues/1008)) ([f8cdc9e](https://github.com/vuepress/vuepress-next/commit/f8cdc9e7adad9ec64986761084ea0656064867a4))
+
+
+### Code Refactoring
+
+* **markdown:** bump sfc plugin to v0.9 ([b0fc856](https://github.com/vuepress/vuepress-next/commit/b0fc8566db65cbb8443d9520daaed573a1387f22))
+
+
+### Features
+
+* **client:** add devtools custom inspector ([5568abe](https://github.com/vuepress/vuepress-next/commit/5568abe9d4fde1e0830810ebb449670d85e18dbb))
+* **core:** pass isServer flag to alias and define hooks ([7862813](https://github.com/vuepress/vuepress-next/commit/7862813cce58160bf6511d50b44c5071602aa404))
+* migrate to pure ESM ([#1030](https://github.com/vuepress/vuepress-next/issues/1030)) ([d283ffe](https://github.com/vuepress/vuepress-next/commit/d283ffe3ef0668bfea54e6d973066695f46f13c0))
+
+
+### BREAKING CHANGES
+
+* VuePress is now published as pure ESM packages
+* CommonJS config file is not supported anymore
+* **markdown:** type of node-api `page.sfcBlocks` has been changed
+
+
+
 # [2.0.0-beta.49](https://github.com/vuepress/vuepress-next/compare/v2.0.0-beta.48...v2.0.0-beta.49) (2022-07-11)
 
 

docs/.vuepress/config.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { webpackBundler } from '@vuepress/bundler-webpack'
 import { defineUserConfig } from '@vuepress/cli'
@@ -6,9 +7,16 @@ 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 { head, navbarEn, navbarZh, sidebarEn, sidebarZh } from './configs'
+import { getDirname, path } from '@vuepress/utils'
+import {
+  head,
+  navbarEn,
+  navbarZh,
+  sidebarEn,
+  sidebarZh,
+} from './configs/index.js'
 
+const __dirname = getDirname(import.meta.url)
 const isProd = process.env.NODE_ENV === 'production'
 
 export default defineUserConfig({
@@ -105,10 +113,7 @@ export default defineUserConfig({
   markdown: {
     importCode: {
       handleImportPath: (str) =>
-        str.replace(
-          /^@vuepress/,
-          path.resolve(__dirname, '../../packages/@vuepress')
-        ),
+        str.replace(/^@vuepress/, path.resolve(__dirname, '../../ecosystem')),
     },
   },
 

docs/.vuepress/configs/index.ts

@@ -1,3 +1,3 @@
-export * from './head'
-export * from './navbar'
-export * from './sidebar'
+export * from './head.js'
+export * from './navbar/index.js'
+export * from './sidebar/index.js'

docs/.vuepress/configs/meta.ts

@@ -1 +1,8 @@
-export const { version } = require('@vuepress/core/package.json')
+import { createRequire } from 'node:module'
+import { fs } from '@vuepress/utils'
+
+const require = createRequire(import.meta.url)
+
+export const version = fs.readJSONSync(
+  require.resolve('@vuepress/core/package.json')
+).version

docs/.vuepress/configs/navbar/en.ts

@@ -1,5 +1,5 @@
 import type { NavbarConfig } from '@vuepress/theme-default'
-import { version } from '../meta'
+import { version } from '../meta.js'
 
 export const navbarEn: NavbarConfig = [
   {

docs/.vuepress/configs/navbar/index.ts

@@ -1,2 +1,2 @@
-export * from './en'
-export * from './zh'
+export * from './en.js'
+export * from './zh.js'

docs/.vuepress/configs/navbar/zh.ts

@@ -1,5 +1,5 @@
 import type { NavbarConfig } from '@vuepress/theme-default'
-import { version } from '../meta'
+import { version } from '../meta.js'
 
 export const navbarZh: NavbarConfig = [
   {

docs/.vuepress/configs/sidebar/index.ts

@@ -1,2 +1,2 @@
-export * from './en'
-export * from './zh'
+export * from './en.js'
+export * from './zh.js'

docs/advanced/architecture.md

@@ -11,8 +11,8 @@ The above figure shows a brief overview of the VuePress architecture:
 
 As a developer, you must be aware of that VuePress has two main parts: **Node App** and **Client App**, which is important when developing plugins and themes:
 
-- The entry file of a plugin or a theme will be loaded in Node App. So you need to use CommonJS format for them.
-- Client files will be loaded in Client App, which will be handled by bundler. For example, layouts, components, app setup files, app enhance files, etc. You'd better use ESM format for them.
+- The entry file of a plugin or a theme will be loaded in Node App.
+- Client files will be loaded in Client App, which will be handled by bundler. For example, layouts, components, app setup files, app enhance files, etc.
 
 ## Core Process and Hooks
 

docs/advanced/cookbook/making-a-theme-extendable.md

@@ -30,6 +30,9 @@ First, set `alias` for replaceable components of you theme:
 
 ```ts
 import type { Theme } from '@vuepress/core'
+import { getDirname } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
 
 export const fooTheme = (options): Theme => {
   return {

docs/advanced/cookbook/passing-data-to-client-code.md

@@ -8,8 +8,8 @@ Plugin API provides a [define](../../reference/plugin-api.md#define) hook to def
 
 First, define some constants in `define` hook:
 
-```js
-module.exports = (options) => ({
+```ts
+export default (options) => ({
   define: {
     __FOO__: options.foo || 'str',
     __OBJ__: {
@@ -21,7 +21,7 @@ module.exports = (options) => ({
 
 Then use them in client code directly:
 
-```js
+```ts
 const foo = __FOO__
 const obj = __OBJ__
 ```
@@ -39,8 +39,8 @@ If you need to achieve some more complex features, you can write temp files and
 
 First, write a temp file `foo.js`, which will be generated in the [temp](../../reference/config.md#temp) directory:
 
-```js
-module.exports = (options) => ({
+```ts
+export default (options) => ({
   async onPrepared(app) {
     // write temp file
     await app.writeTemp('foo.js', `export const foo = ${JSON.stringify(options.foo)}`)
@@ -50,7 +50,7 @@ module.exports = (options) => ({
 
 Then, load the temp file via `@temp` alias in client code:
 
-```js
+```ts
 import { foo } from '@temp/foo'
 ```
 

docs/advanced/cookbook/usage-of-client-config.md

@@ -3,7 +3,9 @@
 You can make use of the [client config file](../../guide/configuration.md#client-config-file) directly in your project, or specify the file path in your plugin or theme via [clientConfigFile](../../reference/plugin-api.md#clientconfigfile) hook:
 
 ```ts
-import { path } from '@vuepress/utils'
+import { getDirname, path } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
 
 const pluginOrTheme = {
   clientConfigFile: path.resolve(__dirname, './path/to/clientConfig.ts'),

docs/advanced/plugin.md

@@ -8,16 +8,16 @@ Before reading this guide, you'd better learn the VuePress [architecture](./arch
 
 A plugin should be a plain JavaScript object that satisfies the [Plugin API](../reference/plugin-api.md), which is called a *Plugin Object*:
 
-```js
+```ts
 const fooPlugin = {
   name: 'vuepress-plugin-foo',
   // ...
 }
 ```
 
-A plugin could also be a function that receives the [app instace](../reference/node-api.md#app) as the param and returns a *Plugin Object*, which is called a *Plugin Function*:
+A plugin could also be a function that receives the [app instance](../reference/node-api.md#app) as the param and returns a *Plugin Object*, which is called a *Plugin Function*:
 
-```js
+```ts
 const barPlugin = (app) => {
   return {
     name: 'vuepress-plugin-bar',
@@ -28,7 +28,7 @@ const barPlugin = (app) => {
 
 A plugin usually needs to allow user options, so we typically provide users with a function to receive options, and returns a *Plugin Object* or a *Plugin Function*. Then your plugin should be converted like this:
 
-```js
+```ts
 const fooPlugin = (options) => {
   return {
     name: 'vuepress-plugin-foo',

docs/advanced/theme.md

@@ -8,8 +8,10 @@ Before reading this guide, you'd better learn the guide of [Writing a Plugin](./
 
 A VuePress theme is a special plugin, which should satisfy the [Theme API](../reference/theme-api.md). Like plugins, a theme should also be a *Theme Object* or a *Theme Function*, and could be wrapped with a function to receive options:
 
-```js
-const { path } = require('@vuepress/utils')
+```ts
+import { getDirname, path } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
 
 const fooTheme = (options) => {
   return {