feat(core): support TypeScript + ESM configuration (#9317)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Chongyi Zheng 2023-10-13 20:46:03 -04:00 committed by GitHub
parent 336a44f3ea
commit 45f1a669b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
126 changed files with 2054 additions and 914 deletions

View file

@ -20,7 +20,7 @@ This diagram shows how Docusaurus works to build your app. Plugins each collect
Although you (either plugin authors or site creators) are writing JavaScript all the time, bear in mind that the JS is actually run in different environments:
- All plugin lifecycle methods are run in Node. Therefore, until we support ES Modules in our codebase, plugin source code must be provided as CommonJS that can be `require`'d.
- All plugin lifecycle methods are run in Node. Therefore, until we support ES Modules in our codebase, plugin source code must be provided as ES modules that can be imported, or CommonJS that can be `require`'d.
- The theme code is built with Webpack. They can be provided as ESM—following React conventions.
Plugin code and theme code never directly import each other: they only communicate through protocols (in our case, through JSON temp files and calls to `addRoute`). A useful mental model is to imagine that the plugins are not written in JavaScript, but in another language like Rust. The only way to interact with plugins for the user is through `docusaurus.config.js`, which itself is run in Node (hence you can use `require` and pass callbacks as plugin options).

View file

@ -11,7 +11,7 @@ A plugin is a function that takes two parameters: `context` and `options`. It re
You can use a plugin as a function directly included in the Docusaurus config file:
```js title="docusaurus.config.js"
module.exports = {
export default {
// ...
plugins: [
// highlight-start
@ -38,7 +38,7 @@ module.exports = {
You can use a plugin as a module path referencing a separate file or npm package:
```js title="docusaurus.config.js"
module.exports = {
export default {
// ...
plugins: [
// without options:
@ -52,7 +52,7 @@ module.exports = {
Then in the folder `my-plugin`, you can create an `index.js` such as this:
```js title="my-plugin/index.js"
module.exports = async function myPlugin(context, options) {
export default async function myPlugin(context, options) {
// ...
return {
name: 'my-plugin',
@ -64,7 +64,7 @@ module.exports = async function myPlugin(context, options) {
},
/* other lifecycle API */
};
};
}
```
---
@ -99,7 +99,7 @@ This is a contrived example: in practice, `@docusaurus/theme-classic` provides t
:::
```js title="docusaurus.config.js"
module.exports = {
export default {
// highlight-next-line
themes: ['theme-blog'],
plugins: ['plugin-content-blog'],
@ -109,7 +109,7 @@ module.exports = {
And if you want to use Bootstrap styling, you can swap out the theme with `theme-blog-bootstrap` (another fictitious non-existing theme):
```js title="docusaurus.config.js"
module.exports = {
export default {
// highlight-next-line
themes: ['theme-blog-bootstrap'],
plugins: ['plugin-content-blog'],