From f71c58e219be2a2de26e450fbac0759a864ced3b Mon Sep 17 00:00:00 2001 From: Luffy <52o@qq52o.cn> Date: Mon, 6 Jul 2026 12:50:11 +0800 Subject: [PATCH 1/4] feat: add ESM configuration for Docsify --- rollup.config.js | 14 ++++++++++++-- test/consume-types/example.js | 4 +++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index b0d853c236..c6153365f7 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -18,6 +18,13 @@ const docsifyConfig = { outputName: 'docsify', title: 'Docsify', }; +const docsifyEsmConfig = { + inputPath: 'src/core/module.js', + outputDir: 'dist', + outputName: 'docsify.esm', + title: 'Docsify', + format: 'es', +}; // Plugins const pluginPaths = await glob(['src/plugins/*.js', 'src/plugins/*/index.js']); @@ -65,8 +72,9 @@ const baseConfig = { const bundleConfigs = []; // Generate rollup configurations -[docsifyConfig, ...pluginConfigs].forEach(bundleConfig => { - const { inputPath, outputDir, outputName, title } = bundleConfig; +[docsifyConfig, docsifyEsmConfig, ...pluginConfigs].forEach(bundleConfig => { + const { inputPath, outputDir, outputName, title, format } = bundleConfig; + const outputFormat = format || baseConfig.output.format; // prettier-ignore const banner = stripIndent` /*! @@ -83,6 +91,7 @@ const bundleConfigs = []; ...baseConfig.output, banner, file: path.join(outputDir, `${outputName}.min.js`), + format: outputFormat, sourcemap: true, }, plugins: [ @@ -101,6 +110,7 @@ const bundleConfigs = []; ...baseConfig.output, banner, file: path.join(outputDir, `${outputName}.js`), + format: outputFormat, }, plugins: [ ...baseConfig.plugins, diff --git a/test/consume-types/example.js b/test/consume-types/example.js index 494b916ef7..cbe2cf1d7b 100644 --- a/test/consume-types/example.js +++ b/test/consume-types/example.js @@ -26,7 +26,8 @@ await import('prismjs'); // Prism being global is not statically analyzable by the ES Module system so it // will try to execute Docsify's graph before prism.js has finished executed. // This is very odd, I didn't think this was possible. -const { Docsify } = await import('docsify'); +const { Compiler, Docsify, dom, get, marked, prism, slugify, util, version } = + await import('docsify'); const d = new Docsify({ el: '#app', @@ -40,6 +41,7 @@ const d = new Docsify({ }); console.log(d); +console.log(Compiler, dom, get, marked, prism, slugify, util, version); // @ts-expect-error global types not available to ESM window.Docsify; From e84b3e7b45e57ff7cb8729875877b453fcfd763e Mon Sep 17 00:00:00 2001 From: Luffy <52o@qq52o.cn> Date: Thu, 3 Sep 2026 10:26:17 +0800 Subject: [PATCH 2/4] Apply batched suggestions from code review Co-authored-by: Luffy --- rollup.config.js | 2 +- test/consume-types/example.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index c6153365f7..18245bcdf2 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -21,7 +21,7 @@ const docsifyConfig = { const docsifyEsmConfig = { inputPath: 'src/core/module.js', outputDir: 'dist', - outputName: 'docsify.esm', + outputName: 'docsify.module', title: 'Docsify', format: 'es', }; diff --git a/test/consume-types/example.js b/test/consume-types/example.js index cbe2cf1d7b..494b916ef7 100644 --- a/test/consume-types/example.js +++ b/test/consume-types/example.js @@ -26,8 +26,7 @@ await import('prismjs'); // Prism being global is not statically analyzable by the ES Module system so it // will try to execute Docsify's graph before prism.js has finished executed. // This is very odd, I didn't think this was possible. -const { Compiler, Docsify, dom, get, marked, prism, slugify, util, version } = - await import('docsify'); +const { Docsify } = await import('docsify'); const d = new Docsify({ el: '#app', @@ -41,7 +40,6 @@ const d = new Docsify({ }); console.log(d); -console.log(Compiler, dom, get, marked, prism, slugify, util, version); // @ts-expect-error global types not available to ESM window.Docsify; From 03e125fce8a95f43aef01b2c102e4cc890defbfa Mon Sep 17 00:00:00 2001 From: Luffy <52o@qq52o.cn> Date: Thu, 3 Sep 2026 11:33:58 +0800 Subject: [PATCH 3/4] feat: update configuration for ESM and add type definitions --- build/types.js | 18 ++++++++++++++++++ docs/configuration.md | 18 +++++++++++++++++- package.json | 9 ++++++--- test/e2e/module.test.js | 21 +++++++++++++++++++++ 4 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 build/types.js create mode 100644 test/e2e/module.test.js diff --git a/build/types.js b/build/types.js new file mode 100644 index 0000000000..3cfd66110f --- /dev/null +++ b/build/types.js @@ -0,0 +1,18 @@ +import fs from 'node:fs/promises'; +import path from 'node:path'; + +const projectDir = path.join(import.meta.dirname, '..'); +const sourcePath = path.join(projectDir, 'src/core/module.d.ts'); +const outputDir = path.join(projectDir, 'dist'); +const outputNames = ['docsify.module.d.ts', 'docsify.module.min.d.ts']; + +const declaration = (await fs.readFile(sourcePath, 'utf8')) + .replaceAll('"./', '"../src/core/') + .replace(/\/\/# sourceMappingURL=.*\n?$/, ''); + +await fs.mkdir(outputDir, { recursive: true }); +await Promise.all( + outputNames.map(outputName => + fs.writeFile(path.join(outputDir, outputName), declaration), + ), +); diff --git a/docs/configuration.md b/docs/configuration.md index 5ad0b8958d..7575acee78 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1,6 +1,22 @@ # Configuration -You can configure Docsify by defining `window.$docsify` as an object: +The recommended way to configure and start Docsify is to import the ES module +from a CDN and create a new `Docsify` instance: + +```html + +``` + +If you load the classic Docsify script instead, you can configure Docsify by +defining `window.$docsify` as an object: ```html ``` -If you load the classic Docsify script instead, you can configure Docsify by -defining `window.$docsify` as an object: +Docsify is also available as an ES module. Import `Docsify` from a CDN and pass +the configuration object to a new `Docsify` instance: ```html - ```