chore: update miscellaneous parts of the source to reasonably modern …

…language alternatives, remove polyfills, improve some JSDoc comments, remove traces of IE BREAKING: In a minority of cases syntax updates may break apps running in very old browsers (such as Internet Explorer), or apps that build Docsify in a custom way with old build tools. To upgrade, build Docsify for older browsers in a custom way, or update existing build tools to handle newer syntax. DEPRECATED: `$docsify.themeColor` is deprecated and will be eventually removed, use a `--theme-color` CSS variable in your style sheet.
docsifyjs · Jul 3, 2023 · 4f2eaad · 4f2eaad
1 parent 9cb7602
commit 4f2eaad
Show file tree

Hide file tree

Showing 73 changed files with 514 additions and 592 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -62,4 +62,3 @@ If yes, please describe the impact and migration path for existing applications:
 - [ ] Firefox
 - [ ] Safari
 - [ ] Edge
-- [ ] IE
diff --git a/README.md b/README.md
@@ -46,7 +46,6 @@
 - Smart full-text search plugin
 - Multiple themes
 - Useful plugin API
-- Compatible with IE11
 - Support embedded files
 
 ## Quick start

diff --git a/build/build.js b/build/build.js
@@ -26,14 +26,15 @@ async function build(opts) {
   await rollup
     .rollup({
       input: opts.input,
-      plugins: (opts.plugins || []).concat([
+      plugins: [
+        ...(opts.plugins || []),
         commonjs(),
         nodeResolve(),
         replace({
           __VERSION__: version,
         })
-      ]),
-      onwarn: function (message) {
+      ],
+      onwarn(message) {
         if (message.code === 'UNRESOLVED_IMPORT') {
           throw new Error(
             `Could not resolve module ` +
@@ -44,8 +45,8 @@ async function build(opts) {
         }
       }
     })
-    .then(function (bundle) {
-      var dest = 'lib/' + (opts.output || opts.input)
+    .then(bundle => {
+      const dest = 'lib/' + (opts.output || opts.input)
 
       console.log(dest)
       return bundle.write({
@@ -77,7 +78,7 @@ async function buildCore() {
 }
 
 async function buildAllPlugin() {
-  var plugins = [
+  const plugins = [
     {name: 'search', input: 'search/index.js'},
     {name: 'ga', input: 'ga.js'},
     {name: 'gtag', input: 'gtag.js'},

diff --git a/build/cover.js b/build/cover.js
@@ -1,17 +1,17 @@
 import fs from 'fs';
 import { relative } from './util.js';
-var read = fs.readFileSync;
-var write = fs.writeFileSync;
+const read = fs.readFileSync;
+const write = fs.writeFileSync;
 const pkgPath = relative(import.meta, '..', 'package.json');
 const pkg = JSON.parse(read(pkgPath).toString());
-var version = process.env.VERSION || pkg.version;
+const version = process.env.VERSION || pkg.version;
 
-var file = relative(import.meta, '..', 'docs', '_coverpage.md');
-var cover = read(file, 'utf8').toString();
+const file = relative(import.meta, '..', 'docs', '_coverpage.md');
+let cover = read(file, 'utf8').toString();
 
 console.log('Replace version number in cover page...');
 cover = cover.replace(
   /<small>(\S+)?<\/small>/g,
-  '<small>' + version + '</small>'
+  /* html */ `<small>${version}</small>`
 );
 write(file, cover);
diff --git a/build/css.js b/build/css.js
@@ -11,17 +11,16 @@ fs.readdir(relative('../src/themes'), (err, files) => {
     }
     files.map(async (file) => {
         if (/\.styl/g.test(file)) {
-            var stylusCMD;
             const stylusBin = ['node_modules', 'stylus', 'bin', 'stylus'].join(path.sep)
-            var cmdargs = [
+            let cmdargs = [
                 stylusBin,
                 `src/themes/${file}`,
                 '-u',
                 'autoprefixer-stylus'
             ]
-            cmdargs = cmdargs.concat(args)
+            cmdargs = [...cmdargs, ...args]
 
-            stylusCMD = spawn('node', cmdargs, { shell: true })
+            const stylusCMD = spawn('node', cmdargs, { shell: true })
 
             stylusCMD.stdout.on('data', (data) => {
                 console.log(`[Stylus Build ] stdout: ${data}`);

diff --git a/build/emoji.js b/build/emoji.js
@@ -93,17 +93,15 @@ function writeEmojiJS(emojiData) {
   }
 }
 
-(async () => {
-  console.info('Build emoji');
-
-  try {
-    const emojiData = await getEmojiData();
-
-    if (emojiData) {
-      writeEmojiPage(emojiData);
-      writeEmojiJS(emojiData);
-    }
-  } catch (err) {
-    console.warn(`- Error: ${err.message}`);
+console.info('Build emoji');
+
+try {
+  const emojiData = await getEmojiData();
+
+  if (emojiData) {
+    writeEmojiPage(emojiData);
+    writeEmojiJS(emojiData);
   }
-})();
+} catch (err) {
+  console.warn(`- Error: ${err.message}`);
+}
diff --git a/docs/README.md b/docs/README.md
@@ -16,7 +16,6 @@ See the [Quick start](quickstart.md) guide for more details.
 - Multiple themes
 - Useful plugin API
 - Emoji support
-- Compatible with IE11
 
 ## Examples
 

diff --git a/docs/_media/example.js b/docs/_media/example.js
@@ -1,16 +1,16 @@
-import fetch from 'fetch'
+import fetch from 'fetch';
 
-const URL = 'https://example.com'
-const PORT = 8080
+const URL = 'https://example.com';
+const PORT = 8080;
 
 /// [demo]
 const result = fetch(`${URL}:${PORT}`)
-  .then(function (response) {
-    return response.json()
-  })
-  .then(function (myJson) {
-    console.log(JSON.stringify(myJson))
+  .then(response => {
+    return response.json();
   })
+  .then(myJson => {
+    console.log(JSON.stringify(myJson));
+  });
 /// [demo]
 
-result.then(console.log).catch(console.error)
+result.then(console.log).catch(console.error);
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -244,7 +244,7 @@ See https://github.com/lukeed/tinydate#patterns
 window.$docsify = {
   formatUpdated: '{MM}/{DD} {HH}:{mm}',
 
-  formatUpdated: function (time) {
+  formatUpdated(time) {
     // ...
 
     return time;
@@ -341,14 +341,14 @@ window.$docsify = {
   markdown: {
     smartypants: true,
     renderer: {
-      link: function () {
+      link() {
         // ...
       },
     },
   },
 
   // function
-  markdown: function (marked, renderer) {
+  markdown(marked, renderer) {
     // ...
     return marked;
   },
@@ -689,18 +689,17 @@ window.$docsify = {
     '/foo': '# Custom Markdown',
 
     // RegEx match w/ synchronous function
-    '/bar/(.*)': function (route, matched) {
+    '/bar/(.*)'(route, matched) {
       return '# Custom Markdown';
     },
 
     // RegEx match w/ asynchronous function
-    '/baz/(.*)': function (route, matched, next) {
-      // Requires `fetch` polyfill for legacy browsers (https://github.github.io/fetch/)
+    '/baz/(.*)'(route, matched, next) {
       fetch('/api/users?id=12345')
-        .then(function (response) {
+        .then(response => {
           next('# Custom Markdown');
         })
-        .catch(function (err) {
+        .catch(err => {
           // Handle error...
         });
     },
@@ -714,7 +713,7 @@ Other than strings, route functions can return a falsy value (`null` \ `undefine
 window.$docsify = {
   routes: {
     // accepts everything other than dogs (synchronous)
-    '/pets/(.+)': function(route, matched) {
+    '/pets/(.+)'(route, matched) {
       if (matched[0] === 'dogs') {
         return null;
       } else {
@@ -723,7 +722,7 @@ window.$docsify = {
     }
 
     // accepts everything other than cats (asynchronous)
-    '/pets/(.*)': function(route, matched, next) {
+    '/pets/(.*)'(route, matched, next) {
       if (matched[0] === 'cats') {
         next();
       } else {
@@ -741,12 +740,12 @@ Finally, if you have a specific path that has a real markdown file (and therefor
 window.$docsify = {
   routes: {
     // if you look up /pets/cats, docsify will skip all routes and look for "pets/cats.md"
-    '/pets/cats': function(route, matched) {
+    '/pets/cats'(route, matched) {
       return false;
     }
 
     // but any other pet should generate dynamic content right here
-    '/pets/(.+)': function(route, matched) {
+    '/pets/(.+)'(route, matched) {
       const pet = matched[0];
       return `your pet is ${pet} (but not a cat)`;
     }
@@ -777,11 +776,19 @@ If you have a link to the homepage in the sidebar and want it to be shown as act
 
 For more details, see [#1131](https://github.com/docsifyjs/docsify/issues/1131).
 
-## themeColor
+## themeColor (_deprecated_)
+
+> **Warning** Deprecated. Use the CSS var `--theme-color` in your `<style>` sheet. Example:
+>
+> <style>
+>   :root {
+>     --theme-color: deeppink;
+>   }
+> </style>
 
 - Type: `String`
 
-Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in older browsers.
+Customize the theme color.
 
 ```js
 window.$docsify = {

diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,6 @@
       name="google-site-verification"
       content="6t0LoIeFksrjF4c9sqUEsVXiQNxLp2hgoqo0KryT-sE"
     />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta
       name="keywords"
       content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages"
@@ -64,7 +63,7 @@
     <script src="//cdn.jsdelivr.net/npm/docsify-plugin-carbon@1"></script>
     <script>
       // Set html "lang" attribute based on URL
-      var lang = location.hash.match(/#\/(de-de|es|ru-ru|zh-cn)\//);
+      const lang = location.hash.match(/#\/(de-de|es|ru-ru|zh-cn)\//);
 
       if (lang) {
         document.documentElement.setAttribute('lang', lang[1]);
@@ -128,17 +127,16 @@
         },
         vueComponents: {
           'button-counter': {
-            template:
-              '<button @click="count += 1">You clicked me {{ count }} times</button>',
-            data: function () {
+            template: /* html */ `<button @click="count += 1">You clicked me {{ count }} times</button>`,
+            data() {
               return {
                 count: 0,
               };
             },
           },
         },
         vueGlobalOptions: {
-          data: function () {
+          data() {
             return {
               count: 0,
               message: 'Hello, World!',
@@ -151,7 +149,7 @@
             };
           },
           computed: {
-            timeOfDay: function () {
+            timeOfDay() {
               const date = new Date();
               const hours = date.getHours();
 
@@ -165,14 +163,14 @@
             },
           },
           methods: {
-            hello: function () {
+            hello() {
               alert(this.message);
             },
           },
         },
         vueMounts: {
           '#counter': {
-            data: function () {
+            data() {
               return {
                 count: 0,
               };
@@ -182,7 +180,7 @@
         plugins: [
           DocsifyCarbon.create('CEBI6KQE', 'docsifyjsorg'),
           function (hook, vm) {
-            hook.beforeEach(function (html) {
+            hook.beforeEach(html => {
               if (/githubusercontent\.com/.test(vm.route.file)) {
                 url = vm.route.file
                   .replace('raw.githubusercontent.com', 'github.com')
@@ -196,14 +194,14 @@
                   'https://github.com/docsifyjs/docsify/blob/develop/docs/' +
                   vm.route.file;
               }
-              var editHtml = '[:memo: Edit Document](' + url + ')\n';
+              const editHtml = '[:memo: Edit Document](' + url + ')\n';
               return (
                 editHtml +
                 html +
                 '\n\n----\n\n' +
                 '<a href="https://docsify.js.org" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by docsify</a>'
               );
-            })
+            });
           },
         ],
       };

diff --git a/docs/language-highlight.md b/docs/language-highlight.md
@@ -58,7 +58,7 @@ function getAdder(int $x): int
 Code blocks [dynamically created from javascript](https://docsify.js.org/#/configuration?id=executescript) can be highlighted using the method `Prism.highlightElement` like so:
 
 ```javascript
-var code = document.createElement("code");
+const code = document.createElement("code");
 code.innerHTML = "console.log('Hello World!')";
 code.setAttribute("class", "lang-javascript");
 Prism.highlightElement(code);