docs: remove cjs syntax

Author: meteorlxy

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,7 +8,7 @@ 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',
   // ...
@@ -17,7 +17,7 @@ const fooPlugin = {
 
 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*:
 
-```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 {

docs/guide/assets.md

@@ -92,8 +92,12 @@ npm install -D package-name
 
 The path aliases that set in config file are also supported:
 
-```js
-module.exports = {
+```ts
+import { getDirname, path } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export default {
   alias: {
     '@alias': path.resolve(__dirname, './path/to/some/dir'),
   },

docs/guide/bundler.md

@@ -38,11 +38,11 @@ Generally, you could use a bundler without extra configuration, because we have
 
 You can configure bundler for advanced usage via the [bundler](../reference/config.md#bundler) option:
 
-```js
-const { viteBundler } = require('vuepress')
-// const { webpackBundler } = require('vuepress-webpack')
+```ts
+import { viteBundler } from 'vuepress'
+// import { webpackBundler } from 'vuepress-webpack'
 
-module.exports = {
+export default {
   bundler: viteBundler({
     vuePluginOptions: {
       template: {

docs/guide/configuration.md

@@ -34,21 +34,6 @@ vuepress dev docs --config my-config.js
 
 A basic config file looks like this:
 
-<CodeGroup>
-  <CodeGroupItem title="JS" active>
-
-```js
-module.exports = {
-  lang: 'en-US',
-  title: 'Hello, VuePress!',
-  description: 'This is my first VuePress site',
-}
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="TS">
-
 ```ts
 import { defineUserConfig } from 'vuepress'
 
@@ -59,9 +44,6 @@ export default defineUserConfig({
 })
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
-
 ::: tip
 Check out the [Config Reference](../reference/config.md) for a full list of VuePress config.
 :::

docs/guide/i18n.md

@@ -19,8 +19,8 @@ docs
 
 Then, specify the `locales` option in your [config file](./configuration.md#config-file):
 
-```js
-module.exports = {
+```ts
+export default {
   locales: {
     // The key is the path for the locale to be nested under.
     // As a special case, the default locale can use '/' as its path.
@@ -50,10 +50,10 @@ VuePress does not restrict how themes provide multi-language support, so each th
 
 If you are using default theme, the multi-language support is the same as above:
 
-```js
-const { defaultTheme } = require('vuepress')
+```ts
+import { defaultTheme } from 'vuepress'
 
-module.exports = {
+export default {
   theme: defaultTheme({
     locales: {
       '/': {

docs/guide/markdown.md

@@ -339,8 +339,12 @@ Here is a complex example:
 
 Notice that path aliases are not available in import code syntax. You can use following config to handle path alias yourself:
 
-```js
-module.exports = {
+```ts
+import { getDirname, path } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export default {
   markdown: {
     importCode: {
       handleImportPath: (str) =>