[WIP] convert all files to ES Module format

.eslintrc.js → .eslintrc.cjs

@@ -1,3 +1,4 @@
+// eslint doesn't support ESM config yet
 module.exports = {
   root: true,
   parser: 'babel-eslint',

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [17.x]
         os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
     steps:

babel.config.json

@@ -0,0 +1 @@
+{}

build/build.js

@@ -1,13 +1,18 @@
-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')
+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 fs from 'fs'
+import { fileURLToPath } from 'url'
+
 const isProd = process.env.NODE_ENV === 'production'
-const version = process.env.VERSION || require('../package.json').version
-const chokidar = require('chokidar')
-const path = require('path')
+const dir = path.dirname(fileURLToPath(import.meta.url))
+const pkg = JSON.parse(fs.readFileSync(path.resolve(dir, '..', 'package.json')).toString())
+const version = process.env.VERSION || pkg.version
 
 /**
  * @param {{

build/cover.js

@@ -1,7 +1,12 @@
-var fs = require('fs')
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, '..', 'package.json')).toString())
 var read = fs.readFileSync
 var write = fs.writeFileSync
-var version = process.env.VERSION || require('../package.json').version
+var version = process.env.VERSION || pkg.version
 
 var file = __dirname + '/../docs/_coverpage.md'
 var cover = read(file, 'utf8').toString()

build/css.js

@@ -1,7 +1,9 @@
-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'
+import {fileURLToPath} from 'url'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const args = process.argv.slice(2)
 fs.readdir(path.join(__dirname, '../src/themes'), (err, files) => {
     if (err) {

build/mincss.js

@@ -1,8 +1,9 @@
-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 cssnano = _cssnano.process
+const files = fs.readdirSync(path.resolve('lib/themes'))
 
 files.forEach(file => {
   file = path.resolve('lib/themes', file)

build/ssr.js

@@ -1,15 +1,21 @@
-var rollup = require('rollup')
-var buble = require('rollup-plugin-buble')
-var async = require('rollup-plugin-async')
-var replace = require('rollup-plugin-replace')
+import rollup from 'rollup'
+import buble from 'rollup-plugin-buble'
+import async from 'rollup-plugin-async'
+import replace from 'rollup-plugin-replace'
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+const dir = path.dirname(fileURLToPath(import.meta.url))
+const pkg = JSON.parse(fs.readFileSync(path.resolve(dir, '..', 'package.json')).toString())
 
 rollup
   .rollup({
     input: 'packages/docsify-server-renderer/index.js',
     plugins: [
       async(),
       replace({
-        __VERSION__: process.env.VERSION || require('../package.json').version,
+        __VERSION__: process.env.VERSION || pkg.version,
         'process.env.SSR': true
       }),
       buble({

jest.config.js

@@ -1,17 +1,20 @@
-const { TEST_HOST } = require('./test/config/server.js');
+import { TEST_HOST } from './test/config/server.js';
 
 const sharedConfig = {
   errorOnDeprecated: true,
   globals: {
+    // TODO avoid globals.
     TEST_HOST,
   },
   globalSetup: './test/config/jest.setup.js',
   globalTeardown: './test/config/jest.teardown.js',
   resetModules: true,
   restoreMocks: true,
+  testEnvironment: 'jsdom',
 };
 
-module.exports = {
+export default {
+  transform: {},
   // Adding globals to config root for easier importing into .eslint.js, but
   // as of Jest 26.4.2 these globals need to be added to each project config
   // as well.
@@ -33,29 +36,30 @@ module.exports = {
       testMatch: ['<rootDir>/test/integration/*.test.js'],
       testURL: `${TEST_HOST}/_blank.html`,
     },
-    // E2E Tests (Jest + Playwright)
-    {
-      ...sharedConfig,
-      displayName: 'e2e',
-      preset: 'jest-playwright-preset',
-      setupFilesAfterEnv: [
-        '<rootDir>/test/config/jest-playwright.setup-tests.js',
-      ],
-      testEnvironmentOptions: {
-        'jest-playwright': {
-          // prettier-ignore
-          browsers: [
-            'chromium',
-            'firefox',
-            'webkit',
-          ],
-          launchOptions: {
-            // headless: false,
-            // devtools: true,
-          },
-        },
-      },
-      testMatch: ['<rootDir>/test/e2e/*.test.js'],
-    },
+    // E2E Tests (Playwright)
+    // WIP, porting to official playwright test runner
+    // {
+    //   ...sharedConfig,
+    //   displayName: 'e2e',
+    //   preset: 'jest-playwright-preset',
+    //   setupFilesAfterEnv: [
+    //     '<rootDir>/test/config/jest-playwright.setup-tests.js',
+    //   ],
+    //   testEnvironmentOptions: {
+    //     'jest-playwright': {
+    //       // prettier-ignore
+    //       browsers: [
+    //         'chromium',
+    //         'firefox',
+    //         'webkit',
+    //       ],
+    //       launchOptions: {
+    //         // headless: false,
+    //         // devtools: true,
+    //       },
+    //     },
+    //   },
+    //   testMatch: ['<rootDir>/test/e2e/*.test.js'],
+    // },
   ],
 };

package.json

@@ -7,6 +7,7 @@
     "email": "[email protected]",
     "url": "https://github.com/QingWei-Li"
   },
+  "type": "module",
   "homepage": "https://docsify.js.org",
   "license": "MIT",
   "repository": {
@@ -27,10 +28,11 @@
     "dev:ssr": "run-p serve:ssr watch:*",
     "lint": "eslint .",
     "fixlint": "eslint . --fix",
-    "test": "jest",
-    "test:e2e": "jest --selectProjects e2e",
-    "test:integration": "jest --selectProjects integration",
-    "test:unit": "jest --selectProjects unit",
+    "test": "npm run jest",
+    "test:e2e": "npm run jest -- --selectProjects e2e",
+    "test:integration": "npm run jest -- --selectProjects integration",
+    "test:unit": "npm run jest -- --selectProjects unit",
+    "jest": "NODE_OPTIONS=--experimental-vm-modules jest",
     "css": "node build/css",
     "watch:css": "npm run css -- -o themes -w",
     "watch:js": "node build/build.js",
@@ -64,26 +66,27 @@
     "tweezer.js": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
     "autoprefixer-stylus": "^1.0.0",
     "axios": "^0.21.1",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^26.3.0",
+    "babel-jest": "^27.0.0",
     "browser-sync": "^2.26.12",
     "chokidar": "^3.4.2",
     "common-tags": "^1.8.0",
     "conventional-changelog-cli": "^2.1.0",
     "copy-dir": "^1.2.0",
     "cross-env": "^6.0.3",
     "cssnano": "^4.1.10",
-    "eslint": "^5.16.0",
+    "es-main": "^1.0.2",
+    "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jest": "^24.0.2",
     "eslint-plugin-jest-playwright": "^0.2.1",
     "eslint-plugin-prettier": "^3.1.2",
     "husky": "^3.1.0",
-    "jest": "^26.4.2",
+    "jest": "^27.0.0",
     "jest-image-snapshot": "^4.2.0",
     "jest-playwright-preset": "^1.4.1",
     "lerna": "^3.22.1",
@@ -92,7 +95,7 @@
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.1.5",
     "playwright": "^1.8.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.5.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.23.1",
     "rollup-plugin-async": "^1.2.0",

packages/docsify-server-renderer/index.js

@@ -153,10 +153,10 @@ export default class Renderer {
         html = this.compiler.cover(html);
         break;
       case 'main':
-        tokens = await new Promise(r => {
+        tokens = await new Promise((r) => {
           prerenderEmbed(
             {
-              fetch: url => this._loadFile(this._getPath(url)),
+              fetch: (url) => this._loadFile(this._getPath(url)),
               compiler: this.compiler,
               raw: html,
             },

server.js

@@ -1,9 +1,10 @@
-const liveServer = require('live-server')
+import liveServer from 'live-server'
+
 const isSSR = !!process.env.SSR
 const middleware = []
 
 if (isSSR) {
-  const Renderer = require('./packages/docsify-server-renderer/build.js')
+  const Renderer = await import('./packages/docsify-server-renderer/build.js')
   const renderer = new Renderer({
     template: `
   <!DOCTYPE html>

src/core/Docsify.js

@@ -30,7 +30,7 @@ export class Docsify extends Fetch(Events(Render(Router(Lifecycle(Object))))) {
   initPlugin() {
     []
       .concat(this.config.plugins)
-      .forEach(fn => isFn(fn) && fn(this._lifecycle, this));
+      .forEach((fn) => isFn(fn) && fn(this._lifecycle, this));
   }
 }
 

src/core/config.js

@@ -3,7 +3,7 @@ import { merge, hyphenate, isPrimitive, hasOwn } from './util/core';
 const currentScript = document.currentScript;
 
 /** @param {import('./Docsify').Docsify} vm */
-export default function(vm) {
+export default function (vm) {
   const config = merge(
     {
       el: '#app',
@@ -46,7 +46,7 @@ export default function(vm) {
     currentScript ||
     [].slice
       .call(document.getElementsByTagName('script'))
-      .filter(n => /docsify\./.test(n.src))[0];
+      .filter((n) => /docsify\./.test(n.src))[0];
 
   if (script) {
     for (const prop in config) {

src/core/event/scroll.js

@@ -22,7 +22,7 @@ function scrollTo(el, offset = 0) {
       Math.round(el.getBoundingClientRect().top) + window.pageYOffset - offset,
     duration: 500,
   })
-    .on('tick', v => window.scrollTo(0, v))
+    .on('tick', (v) => window.scrollTo(0, v))
     .on('done', () => {
       enableScrollEvent = true;
       scroller = null;

src/core/event/sidebar.js

@@ -9,14 +9,14 @@ const title = dom.$.title;
  * @void
  */
 export function btn(el) {
-  const toggle = _ => dom.body.classList.toggle('close');
+  const toggle = (_) => dom.body.classList.toggle('close');
 
   el = dom.getNode(el);
   if (el === null || el === undefined) {
     return;
   }
 
-  dom.on(el, 'click', e => {
+  dom.on(el, 'click', (e) => {
     e.stopPropagation();
     toggle();
   });
@@ -25,7 +25,7 @@ export function btn(el) {
     dom.on(
       dom.body,
       'click',
-      _ => dom.body.classList.contains('close') && toggle()
+      (_) => dom.body.classList.contains('close') && toggle()
     );
 }
 
@@ -82,7 +82,7 @@ export function getAndActive(router, el, isParent, autoTitle) {
 
   links
     .sort((a, b) => b.href.length - a.href.length)
-    .forEach(a => {
+    .forEach((a) => {
       const href = decodeURI(a.getAttribute('href'));
       const node = isParent ? a.parentNode : a;