From 0dbc8b6b9b0d3c014de594af21aaf74ad0bfeb28 Mon Sep 17 00:00:00 2001
From: Joe Pea <joe@trusktr.io>
Date: Sat, 24 Jun 2023 23:57:42 -0700
Subject: [PATCH] refactor: convert to ES Modulesand remove traces of CommonJS

BREAKING: The new project layout might break in some tooling setups.

We've added an exports field to `package.json` to specify where
statements like `import ... from 'docsify'` will import from, and left
the `main` and `unpkg` fields as-is for backwards compatibility with the
global <script> import method. Most people who use a non-module
`<script>` tag to import Docsify will not notice a difference. Anyone
else who is importing Docsify into a specilized build setup using
`import` statements has a chance of being broken, so we've marked this
as BREAKING.
---
 .eslintrc.js                           |  2 +-
 .vscode/launch.json                    | 19 +++++++++---------
 README.md                              |  5 ++++-
 build/build.js                         | 21 ++++++++++----------
 build/cover.js                         | 20 ++++++++++---------
 build/css.js                           |  9 +++++----
 build/emoji.js                         |  6 +++---
 build/mincss.js                        | 10 +++++-----
 package.json                           | 24 +++++++++++------------
 server.js                              | 10 +++++-----
 src/core/Docsify.js                    |  4 ++--
 src/core/config.js                     |  2 +-
 src/core/event/index.js                |  8 ++++----
 src/core/event/scroll.js               |  8 ++++----
 src/core/event/sidebar.js              |  4 ++--
 src/core/fetch/ajax.js                 |  4 ++--
 src/core/fetch/index.js                |  8 ++++----
 src/core/global-api.js                 | 10 +++++-----
 src/core/index.js                      |  4 ++--
 src/core/init/lifecycle.js             |  2 +-
 src/core/render/compiler.js            | 27 +++++++++++++-------------
 src/core/render/compiler/code.js       |  2 +-
 src/core/render/compiler/headline.js   |  4 ++--
 src/core/render/compiler/image.js      |  4 ++--
 src/core/render/compiler/link.js       |  4 ++--
 src/core/render/compiler/paragraph.js  |  2 +-
 src/core/render/embed.js               |  4 ++--
 src/core/render/index.js               | 20 +++++++++----------
 src/core/render/progressbar.js         |  2 +-
 src/core/render/slugify.js             |  2 +-
 src/core/router/history/base.js        |  4 ++--
 src/core/router/history/hash.js        | 10 +++++-----
 src/core/router/history/html5.js       |  8 ++++----
 src/core/router/index.js               | 10 +++++-----
 src/core/router/util.js                |  2 +-
 src/core/util/dom.js                   |  4 ++--
 src/core/util/index.js                 |  6 +++---
 src/core/util/polyfill/css-vars.js     |  4 ++--
 src/core/virtual-routes/exact-match.js |  2 +-
 src/core/virtual-routes/index.js       |  4 ++--
 src/plugins/front-matter/index.js      |  2 +-
 src/plugins/front-matter/parser.js     |  2 +-
 src/plugins/search/component.js        |  2 +-
 src/plugins/search/index.js            |  7 +++++--
 src/plugins/search/search.js           |  4 ++--
 45 files changed, 166 insertions(+), 156 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 091d3e9f0..06c290811 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,7 +12,7 @@ module.exports = {
     sourceType: 'module',
     ecmaVersion: 2019,
   },
-  plugins: ['prettier', 'import'],
+  plugins: ['prettier', 'import', 'importAssertions'],
   env: {
     browser: true,
     es6: true,
diff --git a/.vscode/launch.json b/.vscode/launch.json
index fb00f67b6..c9611c096 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -7,18 +7,18 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Run tests",
+      "name": "Run unit tests",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run-script", "test"],
+      "runtimeArgs": ["test"],
       "console": "integratedTerminal"
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Run current test file",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run-script", "test"],
-      "args": ["--", "-i", "${relativeFile}", "--testPathIgnorePatterns"],
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["jest"],
+      "args": ["-i", "${relativeFile}", "--testPathIgnorePatterns"],
       "console": "integratedTerminal"
     },
     {
@@ -41,10 +41,9 @@
       "type": "node",
       "request": "launch",
       "name": "Update current test file snapshot(s)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run-script", "test"],
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["jest"],
       "args": [
-        "--",
         "-i",
         "${relativeFile}",
         "--updateSnapshot",
@@ -56,8 +55,8 @@
       "type": "node",
       "request": "launch",
       "name": "Update selected test name snapshot(s)",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run-script", "test"],
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["jest"],
       "args": [
         "--",
         "-i",
diff --git a/README.md b/README.md
index c06b68f78..294192723 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,10 @@
 - [`develop` branch preview](https://docsify-preview.vercel.app/)
 - [Documentation](https://docsify.js.org)
 - [CLI](https://github.com/docsifyjs/docsify-cli)
-- CDN: [UNPKG](https://unpkg.com/docsify/) | [jsDelivr](https://cdn.jsdelivr.net/npm/docsify/) | [cdnjs](https://cdnjs.com/libraries/docsify)
+- CDN:
+  - [UNPKG](https://unpkg.com/docsify/)
+  - [jsDelivr](https://cdn.jsdelivr.net/npm/docsify/)
+  - [cdnjs](https://cdnjs.com/libraries/docsify)
 - [Awesome docsify](https://github.com/docsifyjs/awesome-docsify)
 - [Community chat](https://discord.gg/3NwKFyR)
 
diff --git a/build/build.js b/build/build.js
index 1480f3592..25f8fc3b3 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,13 +1,14 @@
-const rollup = require('rollup')
-const buble = require('rollup-plugin-buble')
-const commonjs = require('rollup-plugin-commonjs')
-const nodeResolve = require('rollup-plugin-node-resolve')
-const { uglify } = require('rollup-plugin-uglify')
-const replace = require('rollup-plugin-replace')
-const isProd = process.env.NODE_ENV === 'production'
-const version = process.env.VERSION || require('../package.json').version
-const chokidar = require('chokidar')
-const path = require('path')
+import rollup from 'rollup';
+import buble from 'rollup-plugin-buble';
+import commonjs from 'rollup-plugin-commonjs';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import { uglify } from 'rollup-plugin-uglify';
+import replace from 'rollup-plugin-replace';
+import chokidar from 'chokidar';
+import path from 'path';
+import pkg from '../package.json' assert { type: 'json' };
+const isProd = process.env.NODE_ENV === 'production';
+const version = process.env.VERSION || pkg.version;
 
 /**
  * @param {{
diff --git a/build/cover.js b/build/cover.js
index fbd27f742..4477a3617 100644
--- a/build/cover.js
+++ b/build/cover.js
@@ -1,14 +1,16 @@
-var fs = require('fs')
-var read = fs.readFileSync
-var write = fs.writeFileSync
-var version = process.env.VERSION || require('../package.json').version
+import fs from 'fs';
+import pkg from '../package.json' assert { type: 'json' };
+var read = fs.readFileSync;
+var write = fs.writeFileSync;
+var version = process.env.VERSION || pkg.version;
 
-var file = __dirname + '/../docs/_coverpage.md'
-var cover = read(file, 'utf8').toString()
+const relative = path => new URL(path, import.meta.url);
+var file = relative('../docs/_coverpage.md');
+var cover = read(file, 'utf8').toString();
 
-console.log('Replace version number in cover page...')
+console.log('Replace version number in cover page...');
 cover = cover.replace(
   /<small>(\S+)?<\/small>/g,
   '<small>' + version + '</small>'
-)
-write(file, cover)
+);
+write(file, cover);
diff --git a/build/css.js b/build/css.js
index 2214f3fe4..baf981628 100644
--- a/build/css.js
+++ b/build/css.js
@@ -1,9 +1,10 @@
-const fs = require('fs')
-const path = require('path')
-const {spawn} = require('child_process')
+import fs from 'fs'
+import path from 'path'
+import {spawn} from 'child_process'
 
+const relative = path => new URL(path, import.meta.url);
 const args = process.argv.slice(2)
-fs.readdir(path.join(__dirname, '../src/themes'), (err, files) => {
+fs.readdir(relative('../src/themes'), (err, files) => {
     if (err) {
         console.error('err', err)
         process.exit(1)
diff --git a/build/emoji.js b/build/emoji.js
index c19b8e735..f9d5d0aa2 100644
--- a/build/emoji.js
+++ b/build/emoji.js
@@ -1,6 +1,6 @@
-const axios = require('axios');
-const fs = require('fs');
-const path = require('path');
+import axios from 'axios';
+import fs from 'fs';
+import path from 'path';
 
 const filePaths = {
   emojiMarkdown: path.resolve(process.cwd(), 'docs', 'emoji.md'),
diff --git a/build/mincss.js b/build/mincss.js
index 0c9c72280..05b8d770e 100644
--- a/build/mincss.js
+++ b/build/mincss.js
@@ -1,12 +1,12 @@
-const cssnano = require('cssnano').process
-const path = require('path')
-const fs = require('fs')
+import cssnano from 'cssnano';
+import path from 'path'
+import fs from 'fs'
 
-files = fs.readdirSync(path.resolve('lib/themes'))
+const files = fs.readdirSync(path.resolve('lib/themes'))
 
 files.forEach(file => {
   file = path.resolve('lib/themes', file)
-  cssnano(fs.readFileSync(file)).then(result => {
+  cssnano.process(fs.readFileSync(file)).then(result => {
     fs.writeFileSync(file, result.css)
   }).catch(e => {
     console.error(e)
diff --git a/package.json b/package.json
index 44e11c489..81529ef55 100644
--- a/package.json
+++ b/package.json
@@ -2,19 +2,22 @@
   "name": "docsify",
   "version": "4.13.0",
   "description": "A magical documentation generator.",
-  "author": {
-    "name": "qingwei-li",
-    "email": "cinwell.li@gmail.com",
-    "url": "https://github.com/QingWei-Li"
-  },
   "homepage": "https://docsify.js.org",
+  "repository": "github:docsifyjs/docsify",
+  "authors": "https://github.com/docsifyjs/docsify/graphs/contributors",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/docsifyjs/docsify.git"
+  "collective": {
+    "url": "https://opencollective.com/docsify"
   },
+  "type": "module",
+  "// The 'main' and 'unpkg' fields will remain as legacy for backwards compatbility for now. We will add deprectaion warnings to these outputs to give people time to see the warnings in their apps in a non-breaking way, and eventually we can remove the legacy stuff.": "",
   "main": "lib/docsify.js",
   "unpkg": "lib/docsify.min.js",
+  "// We're using the 'exports' field as an override of the 'main' field to provide the new ESM setup. Once we remove legacy 'main', we will remove the 'exports' field and have a simple ESM setup with only a 'main' field.": "",
+  "exports": {
+    ".": "./src/Docsify.js",
+    "./*": "./*"
+  },
   "files": [
     "lib",
     "themes"
@@ -117,8 +120,5 @@
     "documentation",
     "creator",
     "generator"
-  ],
-  "collective": {
-    "url": "https://opencollective.com/docsify"
-  }
+  ]
 }
diff --git a/server.js b/server.js
index f592598ef..00a863fe4 100644
--- a/server.js
+++ b/server.js
@@ -1,10 +1,10 @@
-const liveServer = require('live-server')
-const middleware = []
+import liveServer from 'live-server';
+const middleware = [];
 
 const params = {
   port: 3000,
   watch: ['lib', 'docs', 'themes'],
-  middleware
-}
+  middleware,
+};
 
-liveServer.start(params)
+liveServer.start(params);
diff --git a/src/core/Docsify.js b/src/core/Docsify.js
index 7ea7efa77..06f584335 100644
--- a/src/core/Docsify.js
+++ b/src/core/Docsify.js
@@ -6,8 +6,8 @@ import { VirtualRoutes } from './virtual-routes/index.js';
 import initGlobalAPI from './global-api.js';
 
 import config from './config.js';
-import { isFn } from './util/core';
-import { Lifecycle } from './init/lifecycle';
+import { isFn } from './util/core.js';
+import { Lifecycle } from './init/lifecycle.js';
 
 /** @typedef {new (...args: any[]) => any} Constructor */
 
diff --git a/src/core/config.js b/src/core/config.js
index 9a8bdb2f8..7d77c0383 100644
--- a/src/core/config.js
+++ b/src/core/config.js
@@ -1,4 +1,4 @@
-import { merge, hyphenate, isPrimitive, hasOwn } from './util/core';
+import { merge, hyphenate, isPrimitive, hasOwn } from './util/core.js';
 
 const currentScript = document.currentScript;
 
diff --git a/src/core/event/index.js b/src/core/event/index.js
index 11c02f975..a56daf3d1 100644
--- a/src/core/event/index.js
+++ b/src/core/event/index.js
@@ -1,7 +1,7 @@
-import { isMobile } from '../util/env';
-import { body, on } from '../util/dom';
-import * as sidebar from './sidebar';
-import { scrollIntoView, scroll2Top } from './scroll';
+import { isMobile } from '../util/env.js';
+import { body, on } from '../util/dom.js';
+import * as sidebar from './sidebar.js';
+import { scrollIntoView, scroll2Top } from './scroll.js';
 
 /** @typedef {import('../Docsify').Constructor} Constructor */
 
diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js
index d46447b7f..f01f01ba2 100644
--- a/src/core/event/scroll.js
+++ b/src/core/event/scroll.js
@@ -1,8 +1,8 @@
 import Tweezer from 'tweezer.js';
-import { isMobile } from '../util/env';
-import * as dom from '../util/dom';
-import { removeParams } from '../router/util';
-import config from '../config';
+import { isMobile } from '../util/env.js';
+import * as dom from '../util/dom.js';
+import { removeParams } from '../router/util.js';
+import config from '../config.js';
 
 const nav = {};
 let hoverOver = false;
diff --git a/src/core/event/sidebar.js b/src/core/event/sidebar.js
index c142529ef..0e8442914 100644
--- a/src/core/event/sidebar.js
+++ b/src/core/event/sidebar.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
-import { isMobile } from '../util/env';
-import * as dom from '../util/dom';
+import { isMobile } from '../util/env.js';
+import * as dom from '../util/dom.js';
 
 const title = dom.$.title;
 /**
diff --git a/src/core/fetch/ajax.js b/src/core/fetch/ajax.js
index a7896b0e2..fc18ba909 100644
--- a/src/core/fetch/ajax.js
+++ b/src/core/fetch/ajax.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
-import progressbar from '../render/progressbar';
-import { noop, hasOwn } from '../util/core';
+import progressbar from '../render/progressbar.js';
+import { noop, hasOwn } from '../util/core.js';
 
 const cache = {};
 
diff --git a/src/core/fetch/index.js b/src/core/fetch/index.js
index cb363bdb7..be6319db1 100644
--- a/src/core/fetch/index.js
+++ b/src/core/fetch/index.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-unused-vars */
-import { getParentPath, stringifyQuery } from '../router/util';
-import { noop, isExternal } from '../util/core';
-import { getAndActive } from '../event/sidebar';
-import { get } from './ajax';
+import { getParentPath, stringifyQuery } from '../router/util.js';
+import { noop, isExternal } from '../util/core.js';
+import { getAndActive } from '../event/sidebar.js';
+import { get } from './ajax.js';
 
 function loadNested(path, qs, file, next, vm, first) {
   path = first ? path : path.replace(/\/$/, '');
diff --git a/src/core/global-api.js b/src/core/global-api.js
index cb89e2bee..1673f0f92 100644
--- a/src/core/global-api.js
+++ b/src/core/global-api.js
@@ -1,10 +1,10 @@
 import prism from 'prismjs';
 import { marked } from 'marked';
-import * as util from './util';
-import * as dom from './util/dom';
-import { Compiler } from './render/compiler';
-import { slugify } from './render/slugify';
-import { get } from './fetch/ajax';
+import * as util from './util/index.js';
+import * as dom from './util/dom.js';
+import { Compiler } from './render/compiler.js';
+import { slugify } from './render/slugify.js';
+import { get } from './fetch/ajax.js';
 
 // TODO This is deprecated, kept for backwards compatibility. Remove in next
 // major release. We'll tell people to get everything from the DOCSIFY global
diff --git a/src/core/index.js b/src/core/index.js
index 6e6164186..7074b3b73 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -1,5 +1,5 @@
-import { documentReady } from './util/dom';
-import { Docsify } from './Docsify';
+import { documentReady } from './util/dom.js';
+import { Docsify } from './Docsify.js';
 
 /**
  * Run Docsify
diff --git a/src/core/init/lifecycle.js b/src/core/init/lifecycle.js
index 94a3981fe..531ef354d 100644
--- a/src/core/init/lifecycle.js
+++ b/src/core/init/lifecycle.js
@@ -1,4 +1,4 @@
-import { noop } from '../util/core';
+import { noop } from '../util/core.js';
 
 /** @typedef {import('../Docsify').Constructor} Constructor */
 
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 91764643a..fa9cee2e7 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -1,21 +1,21 @@
 import { marked } from 'marked';
-import { isAbsolutePath, getPath, getParentPath } from '../router/util';
-import { isFn, merge, cached, isPrimitive } from '../util/core';
-import { tree as treeTpl } from './tpl';
-import { genTree } from './gen-tree';
-import { slugify } from './slugify';
-import { emojify } from './emojify';
+import { isAbsolutePath, getPath, getParentPath } from '../router/util.js';
+import { isFn, merge, cached, isPrimitive } from '../util/core.js';
+import { tree as treeTpl } from './tpl.js';
+import { genTree } from './gen-tree.js';
+import { slugify } from './slugify.js';
+import { emojify } from './emojify.js';
 import {
   getAndRemoveConfig,
   removeAtag,
   getAndRemoveDocisfyIgnorConfig,
-} from './utils';
-import { imageCompiler } from './compiler/image';
-import { highlightCodeCompiler } from './compiler/code';
-import { paragraphCompiler } from './compiler/paragraph';
-import { taskListCompiler } from './compiler/taskList';
-import { taskListItemCompiler } from './compiler/taskListItem';
-import { linkCompiler } from './compiler/link';
+} from './utils.js';
+import { imageCompiler } from './compiler/image.js';
+import { highlightCodeCompiler } from './compiler/code.js';
+import { paragraphCompiler } from './compiler/paragraph.js';
+import { taskListCompiler } from './compiler/taskList.js';
+import { taskListItemCompiler } from './compiler/taskListItem.js';
+import { linkCompiler } from './compiler/link.js';
 
 const cachedLinks = {};
 
@@ -115,6 +115,7 @@ export class Compiler {
       })(text);
 
       const curFileName = this.router.parse().file;
+      console.log('filename:', curFileName);
 
       if (isCached) {
         this.toc = this.cacheTOC[curFileName];
diff --git a/src/core/render/compiler/code.js b/src/core/render/compiler/code.js
index b7fb060d6..a6abb0f1c 100644
--- a/src/core/render/compiler/code.js
+++ b/src/core/render/compiler/code.js
@@ -1,6 +1,6 @@
 import Prism from 'prismjs';
 // See https://github.com/PrismJS/prism/pull/1367
-import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-markup-templating.js';
 
 export const highlightCodeCompiler = ({ renderer }) =>
   (renderer.code = function (code, lang = 'markup') {
diff --git a/src/core/render/compiler/headline.js b/src/core/render/compiler/headline.js
index dafc2c98f..c656f715c 100644
--- a/src/core/render/compiler/headline.js
+++ b/src/core/render/compiler/headline.js
@@ -2,8 +2,8 @@ import {
   getAndRemoveConfig,
   removeAtag,
   getAndRemoveDocisfyIgnorConfig,
-} from '../utils';
-import { slugify } from './slugify';
+} from '../utils.js';
+import { slugify } from './slugify.js';
 
 export const headingCompiler = ({ renderer, router, _self }) =>
   (renderer.code = (text, level) => {
diff --git a/src/core/render/compiler/image.js b/src/core/render/compiler/image.js
index 982e5e55e..0e74645ac 100644
--- a/src/core/render/compiler/image.js
+++ b/src/core/render/compiler/image.js
@@ -1,5 +1,5 @@
-import { getAndRemoveConfig } from '../utils';
-import { isAbsolutePath, getPath, getParentPath } from '../../router/util';
+import { getAndRemoveConfig } from '../utils.js';
+import { isAbsolutePath, getPath, getParentPath } from '../../router/util.js';
 
 export const imageCompiler = ({ renderer, contentBase, router }) =>
   (renderer.image = (href, title, text) => {
diff --git a/src/core/render/compiler/link.js b/src/core/render/compiler/link.js
index 613101000..47684c814 100644
--- a/src/core/render/compiler/link.js
+++ b/src/core/render/compiler/link.js
@@ -1,5 +1,5 @@
-import { getAndRemoveConfig } from '../utils';
-import { isAbsolutePath } from '../../router/util';
+import { getAndRemoveConfig } from '../utils.js';
+import { isAbsolutePath } from '../../router/util.js';
 
 export const linkCompiler = ({
   renderer,
diff --git a/src/core/render/compiler/paragraph.js b/src/core/render/compiler/paragraph.js
index e166bf91e..19a2f3fef 100644
--- a/src/core/render/compiler/paragraph.js
+++ b/src/core/render/compiler/paragraph.js
@@ -1,4 +1,4 @@
-import { helper as helperTpl } from '../tpl';
+import { helper as helperTpl } from '../tpl.js';
 
 export const paragraphCompiler = ({ renderer }) =>
   (renderer.paragraph = text => {
diff --git a/src/core/render/embed.js b/src/core/render/embed.js
index 22d58c8f2..1e2ffdb91 100644
--- a/src/core/render/embed.js
+++ b/src/core/render/embed.js
@@ -1,6 +1,6 @@
 import stripIndent from 'strip-indent';
-import { get } from '../fetch/ajax';
-import { merge } from '../util/core';
+import { get } from '../fetch/ajax.js';
+import { merge } from '../util/core.js';
 
 const cached = {};
 
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 9b40939ed..56ec1c267 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -1,15 +1,15 @@
 /* eslint-disable no-unused-vars */
 import tinydate from 'tinydate';
-import * as dom from '../util/dom';
-import cssVars from '../util/polyfill/css-vars';
-import { getAndActive, sticky } from '../event/sidebar';
-import { getPath, isAbsolutePath } from '../router/util';
-import { isMobile, inBrowser } from '../util/env';
-import { isPrimitive, merge } from '../util/core';
-import { scrollActiveSidebar } from '../event/scroll';
-import { Compiler } from './compiler';
-import * as tpl from './tpl';
-import { prerenderEmbed } from './embed';
+import * as dom from '../util/dom.js';
+import cssVars from '../util/polyfill/css-vars.js';
+import { getAndActive, sticky } from '../event/sidebar.js';
+import { getPath, isAbsolutePath } from '../router/util.js';
+import { isMobile, inBrowser } from '../util/env.js';
+import { isPrimitive, merge } from '../util/core.js';
+import { scrollActiveSidebar } from '../event/scroll.js';
+import { Compiler } from './compiler.js';
+import * as tpl from './tpl.js';
+import { prerenderEmbed } from './embed.js';
 
 let vueGlobalData;
 
diff --git a/src/core/render/progressbar.js b/src/core/render/progressbar.js
index c48b9619e..caa69459c 100644
--- a/src/core/render/progressbar.js
+++ b/src/core/render/progressbar.js
@@ -1,4 +1,4 @@
-import * as dom from '../util/dom';
+import * as dom from '../util/dom.js';
 
 let barEl;
 let timeId;
diff --git a/src/core/render/slugify.js b/src/core/render/slugify.js
index f585d0290..a605f1765 100644
--- a/src/core/render/slugify.js
+++ b/src/core/render/slugify.js
@@ -1,4 +1,4 @@
-import { hasOwn } from '../util/core';
+import { hasOwn } from '../util/core.js';
 
 let cache = {};
 const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g;
diff --git a/src/core/router/history/base.js b/src/core/router/history/base.js
index 68c98b7f5..d628c58ec 100644
--- a/src/core/router/history/base.js
+++ b/src/core/router/history/base.js
@@ -5,8 +5,8 @@ import {
   cleanPath,
   replaceSlug,
   resolvePath,
-} from '../util';
-import { noop, merge } from '../../util/core';
+} from '../util.js';
+import { noop, merge } from '../../util/core.js';
 
 const cached = {};
 
diff --git a/src/core/router/history/hash.js b/src/core/router/history/hash.js
index 05435d2c9..2475c5c5a 100644
--- a/src/core/router/history/hash.js
+++ b/src/core/router/history/hash.js
@@ -1,8 +1,8 @@
-import { isExternal, noop } from '../../util/core';
-import { on } from '../../util/dom';
-import { endsWith } from '../../util/str';
-import { parseQuery, cleanPath, replaceSlug } from '../util';
-import { History } from './base';
+import { isExternal, noop } from '../../util/core.js';
+import { on } from '../../util/dom.js';
+import { endsWith } from '../../util/str.js';
+import { parseQuery, cleanPath, replaceSlug } from '../util.js';
+import { History } from './base.js';
 
 function replaceHash(path) {
   const i = location.href.indexOf('#');
diff --git a/src/core/router/history/html5.js b/src/core/router/history/html5.js
index 1304d0628..c5a89a168 100644
--- a/src/core/router/history/html5.js
+++ b/src/core/router/history/html5.js
@@ -1,7 +1,7 @@
-import { isExternal, noop } from '../../util/core';
-import { on } from '../../util/dom';
-import { parseQuery, getPath } from '../util';
-import { History } from './base';
+import { isExternal, noop } from '../../util/core.js';
+import { on } from '../../util/dom.js';
+import { parseQuery, getPath } from '../util.js';
+import { History } from './base.js';
 
 export class HTML5History extends History {
   constructor(config) {
diff --git a/src/core/router/index.js b/src/core/router/index.js
index 6bbd395b8..0a409846a 100644
--- a/src/core/router/index.js
+++ b/src/core/router/index.js
@@ -1,8 +1,8 @@
-import { supportsPushState } from '../util/env';
-import * as dom from '../util/dom';
-import { noop } from '../util/core';
-import { HashHistory } from './history/hash';
-import { HTML5History } from './history/html5';
+import { supportsPushState } from '../util/env.js';
+import * as dom from '../util/dom.js';
+import { noop } from '../util/core.js';
+import { HashHistory } from './history/hash.js';
+import { HTML5History } from './history/html5.js';
 
 /**
  * @typedef {{
diff --git a/src/core/router/util.js b/src/core/router/util.js
index b4a85d89e..1a764fa31 100644
--- a/src/core/router/util.js
+++ b/src/core/router/util.js
@@ -1,4 +1,4 @@
-import { cached } from '../util/core';
+import { cached } from '../util/core.js';
 
 const decode = decodeURIComponent;
 const encode = encodeURIComponent;
diff --git a/src/core/util/dom.js b/src/core/util/dom.js
index c0eb9831e..cd5db6d79 100644
--- a/src/core/util/dom.js
+++ b/src/core/util/dom.js
@@ -1,5 +1,5 @@
-import { isFn } from '../util/core';
-import { inBrowser } from './env';
+import { isFn } from '../util/core.js';
+import { inBrowser } from './env.js';
 
 const cacheNode = {};
 
diff --git a/src/core/util/index.js b/src/core/util/index.js
index 444ea9d47..841af1f71 100644
--- a/src/core/util/index.js
+++ b/src/core/util/index.js
@@ -1,3 +1,3 @@
-export * from './core';
-export * from './env';
-export * from '../router/util';
+export * from './core.js';
+export * from './env.js';
+export * from '../router/util.js';
diff --git a/src/core/util/polyfill/css-vars.js b/src/core/util/polyfill/css-vars.js
index 6c9ef2a3f..872eeba94 100644
--- a/src/core/util/polyfill/css-vars.js
+++ b/src/core/util/polyfill/css-vars.js
@@ -1,5 +1,5 @@
-import * as dom from '../dom';
-import { get } from '../../fetch/ajax';
+import * as dom from '../dom.js';
+import { get } from '../../fetch/ajax.js';
 
 function replaceVar(block, color) {
   block.innerHTML = block.innerHTML.replace(
diff --git a/src/core/virtual-routes/exact-match.js b/src/core/virtual-routes/exact-match.js
index 2304a7eb0..b825741e4 100644
--- a/src/core/virtual-routes/exact-match.js
+++ b/src/core/virtual-routes/exact-match.js
@@ -1,4 +1,4 @@
-import { startsWith, endsWith } from '../util/str';
+import { startsWith, endsWith } from '../util/str.js';
 
 /**
  * Adds beginning of input (^) and end of input ($) assertions if needed into a regex string
diff --git a/src/core/virtual-routes/index.js b/src/core/virtual-routes/index.js
index bc4eaa647..9c8f5fd56 100644
--- a/src/core/virtual-routes/index.js
+++ b/src/core/virtual-routes/index.js
@@ -1,5 +1,5 @@
-import { makeExactMatcher } from './exact-match';
-import { createNextFunction } from './next';
+import { makeExactMatcher } from './exact-match.js';
+import { createNextFunction } from './next.js';
 
 /** @typedef {import('../Docsify').Constructor} Constructor */
 
diff --git a/src/plugins/front-matter/index.js b/src/plugins/front-matter/index.js
index f47340129..e98245a7a 100644
--- a/src/plugins/front-matter/index.js
+++ b/src/plugins/front-matter/index.js
@@ -1,4 +1,4 @@
-import parser from './parser';
+import parser from './parser.js';
 
 const install = function (hook, vm) {
   // Used to remove front matter from embedded pages if installed.
diff --git a/src/plugins/front-matter/parser.js b/src/plugins/front-matter/parser.js
index f0ae37773..629f10412 100644
--- a/src/plugins/front-matter/parser.js
+++ b/src/plugins/front-matter/parser.js
@@ -2,7 +2,7 @@
  * Fork https://github.com/egoist/docute/blob/master/src/utils/front-matter.js
  */
 /* eslint-disable */
-import parser from './yaml'
+import parser from './yaml.js'
 
 var optionalByteOrderMark = '\\ufeff?'
 var pattern =
diff --git a/src/plugins/search/component.js b/src/plugins/search/component.js
index 946cc015e..f184c5837 100644
--- a/src/plugins/search/component.js
+++ b/src/plugins/search/component.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { search } from './search';
+import { search } from './search.js';
 
 let NO_DATA_TEXT = '';
 let options;
diff --git a/src/plugins/search/index.js b/src/plugins/search/index.js
index c3bdab96e..1e97200b5 100644
--- a/src/plugins/search/index.js
+++ b/src/plugins/search/index.js
@@ -1,6 +1,9 @@
 /* eslint-disable no-unused-vars */
-import { init as initComponent, update as updateComponent } from './component';
-import { init as initSearch } from './search';
+import {
+  init as initComponent,
+  update as updateComponent,
+} from './component.js';
+import { init as initSearch } from './search.js';
 
 const CONFIG = {
   placeholder: 'Type to search',
diff --git a/src/plugins/search/search.js b/src/plugins/search/search.js
index 88f9f1a4e..c3af63706 100644
--- a/src/plugins/search/search.js
+++ b/src/plugins/search/search.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
-import { getAndRemoveConfig } from '../../core/render/utils';
-import { removeDocsifyIgnoreTag } from '../../core/util/str';
+import { getAndRemoveConfig } from '../../core/render/utils.js';
+import { removeDocsifyIgnoreTag } from '../../core/util/str.js';
 
 let INDEXS = {};