[WIP] Finish initial SSR (server side rendering) and add tests.

.eslintrc.js → .eslintrc.cjs

@@ -1,3 +1,19 @@
+const deasync = require('deasync'); // powerful magic
+
+const promiseSync = deasync((promise, cb) => {
+  promise.then(result => cb(null, result)).catch(error => cb(error));
+});
+
+const importSync = name => promiseSync(import(name));
+
+// Look, no await needed here!
+const jestConfig = importSync('./jest.config.js').default;
+const jestGlobals = {};
+
+for (const key of Object.keys(jestConfig.globals)) {
+  jestGlobals[key] = 'readonly';
+}
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',
@@ -39,6 +55,7 @@ module.exports = {
     'no-var': ['error'],
     'no-void': ['error'],
     'no-with': ['error'],
+    'no-prototype-builtins': 'off',
     radix: ['error'],
     'spaced-comment': ['error', 'always'],
     strict: ['error', 'global'],
@@ -60,4 +77,16 @@ module.exports = {
     $docsify: 'writable',
     dom: 'writable',
   },
+
+  overrides: [
+    {
+      files: ['test/**/*.js', '**/*.test.js'],
+      extends: ['plugin:jest/recommended', 'plugin:jest/style'],
+      globals: jestGlobals,
+    },
+    {
+      files: ['test/e2e/**/*.test.js'],
+      extends: ['plugin:jest-playwright/recommended'],
+    },
+  ],
 };

.gitignore

@@ -5,6 +5,7 @@ __diff_output__
 lib/
 node_modules
 themes/
+*lock.json
 
 # exceptions
 !.gitkeep

.prettierrc.js → .prettierrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
   singleQuote: true,
   trailingComma: 'es5',
+  useTabs: false,
+  tabWidth: 2,
+  arrowParens: 'avoid',
 };

babel.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  // presets: [
+  //   [
+  //     '@babel/preset-env',
+  //     {
+  //       targets: {
+  //         node: 'current',
+  //       },
+  //     },
+  //   ],
+  // ],
+};

build/build.js

@@ -1,13 +1,22 @@
-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')
+// @ts-check
+
+import rollup from 'rollup';
+import buble from 'rollup-plugin-buble';
+import commonjs from 'rollup-plugin-commonjs';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import chokidar from 'chokidar';
+import path from 'path';
+import fs from 'fs';
+import _uglify from 'rollup-plugin-uglify';
+
+const { uglify } = _uglify;
+const isProd = process.env.NODE_ENV === 'production';
+const dirname = path.dirname(import.meta.url.replace('file://', ''));
+const version =
+  process.env.VERSION ||
+  JSON.parse(fs.readFileSync(path.resolve(dirname, '..', 'package.json')).toString())
+    .version;
 
 /**
  * @param {{
@@ -24,89 +33,96 @@ async function build(opts) {
       plugins: (opts.plugins || []).concat([
         buble({
           transforms: {
-            dangerousForOf: true
-          }}),
+            dangerousForOf: true,
+          },
+        }),
         commonjs(),
         nodeResolve(),
         replace({
           __VERSION__: version,
-          'process.env.SSR': false
-        })
+          'process.env.SSR': false,
+        }),
       ]),
-      onwarn: function (message) {
+      onwarn: function(message) {
         if (message.code === 'UNRESOLVED_IMPORT') {
           throw new Error(
             `Could not resolve module ` +
-            message.source +
-            `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` +
-            `Module ${message.source} is imported in ${message.importer}`
-            )
+              message.source +
+              `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` +
+              `Module ${message.source} is imported in ${message.importer}`
+          );
         }
-      }
+      },
     })
-    .then(function (bundle) {
-      var dest = 'lib/' + (opts.output || opts.input)
+    .then(function(bundle) {
+      var dest = 'lib/' + (opts.output || opts.input);
 
-      console.log(dest)
+      console.log(dest);
       return bundle.write({
         format: 'iife',
-        output: opts.globalName ? {name: opts.globalName} : {},
+        output: opts.globalName ? { name: opts.globalName } : {},
         file: dest,
-        strict: false
-      })
-    })
+        strict: false,
+      });
+    });
 }
 
 async function buildCore() {
-  const promises = []
+  const promises = [];
 
-  promises.push(build({
-    input: 'src/core/index.js',
-    output: 'docsify.js',
-  }))
+  promises.push(
+    build({
+      input: 'src/core/index.js',
+      output: 'docsify.js',
+    })
+  );
 
   if (isProd) {
-    promises.push(build({
-      input: 'src/core/index.js',
-      output: 'docsify.min.js',
-      plugins: [uglify()]
-    }))
+    promises.push(
+      build({
+        input: 'src/core/index.js',
+        output: 'docsify.min.js',
+        plugins: [uglify()],
+      })
+    );
   }
 
-  await Promise.all(promises)
+  await Promise.all(promises);
 }
 
 async function buildAllPlugin() {
   var plugins = [
-    {name: 'search', input: 'search/index.js'},
-    {name: 'ga', input: 'ga.js'},
-    {name: 'matomo', input: 'matomo.js'},
-    {name: 'emoji', input: 'emoji.js'},
-    {name: 'external-script', input: 'external-script.js'},
-    {name: 'front-matter', input: 'front-matter/index.js'},
-    {name: 'zoom-image', input: 'zoom-image.js'},
-    {name: 'disqus', input: 'disqus.js'},
-    {name: 'gitalk', input: 'gitalk.js'}
-  ]
+    { name: 'search', input: 'search/index.js' },
+    { name: 'ga', input: 'ga.js' },
+    { name: 'matomo', input: 'matomo.js' },
+    { name: 'emoji', input: 'emoji.js' },
+    { name: 'external-script', input: 'external-script.js' },
+    { name: 'front-matter', input: 'front-matter/index.js' },
+    { name: 'zoom-image', input: 'zoom-image.js' },
+    { name: 'disqus', input: 'disqus.js' },
+    { name: 'gitalk', input: 'gitalk.js' },
+  ];
 
   const promises = plugins.map(item => {
     return build({
       input: 'src/plugins/' + item.input,
-      output: 'plugins/' + item.name + '.js'
-    })
-  })
+      output: 'plugins/' + item.name + '.js',
+    });
+  });
 
   if (isProd) {
     plugins.forEach(item => {
-      promises.push(build({
-        input: 'src/plugins/' + item.input,
-        output: 'plugins/' + item.name + '.min.js',
-        plugins: [uglify()]
-      }))
-    })
+      promises.push(
+        build({
+          input: 'src/plugins/' + item.input,
+          output: 'plugins/' + item.name + '.min.js',
+          plugins: [uglify()],
+        })
+      );
+    });
   }
 
-  await Promise.all(promises)
+  await Promise.all(promises);
 }
 
 async function main() {
@@ -116,41 +132,37 @@ async function main() {
         atomic: true,
         awaitWriteFinish: {
           stabilityThreshold: 1000,
-          pollInterval: 100
-        }
+          pollInterval: 100,
+        },
       })
       .on('change', p => {
-        console.log('[watch] ', p)
-        const dirs = p.split(path.sep)
+        console.log('[watch] ', p);
+        const dirs = p.split(path.sep);
         if (dirs[1] === 'core') {
-          buildCore()
+          buildCore();
         } else if (dirs[2]) {
-          const name = path.basename(dirs[2], '.js')
+          const name = path.basename(dirs[2], '.js');
           const input = `src/plugins/${name}${
             /\.js/.test(dirs[2]) ? '' : '/index'
-          }.js`
+          }.js`;
 
           build({
             input,
-            output: 'plugins/' + name + '.js'
-          })
+            output: 'plugins/' + name + '.js',
+          });
         }
       })
       .on('ready', () => {
-        console.log('[start]')
-        buildCore()
-        buildAllPlugin()
-      })
+        console.log('[start]');
+        buildCore();
+        buildAllPlugin();
+      });
   } else {
-    await Promise.all([
-      buildCore(),
-      buildAllPlugin()
-    ])
+    await Promise.all([buildCore(), buildAllPlugin()]);
   }
 }
 
-main().catch((e) => {
-  console.error(e)
-  process.exit(1)
-})
-
+main().catch(e => {
+  console.error(e);
+  process.exit(1);
+});

build/cover.js

@@ -1,10 +1,18 @@
-var fs = require('fs')
-var read = fs.readFileSync
-var write = fs.writeFileSync
-var version = process.env.VERSION || require('../package.json').version
+// @ts-check
 
-var file = __dirname + '/../docs/_coverpage.md'
-var cover = read(file, 'utf8').toString()
+import fs from 'fs'
+import path from 'path'
+
+const read = fs.readFileSync
+const write = fs.writeFileSync
+const dirname = path.dirname(import.meta.url.replace('file://', ''));
+const version =
+  process.env.VERSION ||
+  JSON.parse(fs.readFileSync(path.resolve(dirname, '..', 'package.json')).toString())
+    .version;
+
+const file = dirname + '/../docs/_coverpage.md'
+let cover = read(file, 'utf8').toString()
 
 console.log('Replace version number in cover page...')
 cover = cover.replace(

build/css.js

@@ -1,9 +1,12 @@
-const fs = require('fs')
-const path = require('path')
-const {spawn} = require('child_process')
+import fs from 'fs'
+import path from 'path'
+import child_process from 'child_process'
+
+const {spawn} = child_process
+const dirname = path.dirname(import.meta.url.replace('file://', ''));
 
 const args = process.argv.slice(2)
-fs.readdir(path.join(__dirname, '../src/themes'), (err, files) => {
+fs.readdir(path.join(dirname, '../src/themes'), (err, files) => {
     if (err) {
         console.error('err', err)
         process.exit(1)

build/mincss.js

@@ -1,8 +1,10 @@
-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)