deprecate globals and global script data-* attributes, and set up the…

… package for people to start importing `Docsify` and passing in non-global configs
docsifyjs · trusktr · Mar 28, 2024 · Mar 28, 2024 · Apr 1, 2024 · Apr 2, 2024
commit 1a352afa205342698aee91c3fc07a42c2f01a13a
diff --git a/build/build.js b/build/build.js
@@ -17,6 +17,7 @@ const version = process.env.VERSION || pkg.version;
 /**
  * @param {{
  *   input: string,
+ *   format: 'iife' | 'module',
  *   output?: string,
  *   globalName?: string,
  *   plugins?: Array<import('rollup').Plugin>
@@ -46,11 +47,11 @@ async function build(opts) {
       },
     })
     .then(bundle => {
-      const dest = 'lib/' + (opts.output || opts.input);
+      const dest = opts.output || opts.input;
 
       console.log(dest);
       return bundle.write({
-        format: 'iife',
+        format: opts.format,
         output: opts.globalName ? { name: opts.globalName } : {},
         file: dest,
         strict: false,
@@ -64,15 +65,28 @@ async function buildCore() {
   promises.push(
     build({
       input: 'src/core/index.js',
-      output: 'docsify.js',
+      output: 'lib/docsify.js',
+      format: 'iife',
+    }),
+    build({
+      input: 'src/core/module.js',
+      output: 'dist/core/module.js',
+      format: 'module',
     })
   );
 
   if (isProd) {
     promises.push(
       build({
         input: 'src/core/index.js',
-        output: 'docsify.min.js',
+        output: 'lib/docsify.min.js',
+        format: 'iife',
+        plugins: [uglify()],
+      }),
+      build({
+        input: 'src/core/module.js',
+        output: 'dist/core/module.min.js',
+        format: 'module',
         plugins: [uglify()],
       })
     );
@@ -98,7 +112,7 @@ async function buildAllPlugin() {
   const promises = plugins.map(item => {
     return build({
       input: 'src/plugins/' + item.input,
-      output: 'plugins/' + item.name + '.js',
+      output: 'lib/plugins/' + item.name + '.js',
     });
   });
 
@@ -107,7 +121,7 @@ async function buildAllPlugin() {
       promises.push(
         build({
           input: 'src/plugins/' + item.input,
-          output: 'plugins/' + item.name + '.min.js',
+          output: 'lib/plugins/' + item.name + '.min.js',
           plugins: [uglify()],
         })
       );
@@ -140,7 +154,7 @@ async function main() {
 
           build({
             input,
-            output: 'plugins/' + name + '.js',
+            output: 'lib/plugins/' + name + '.js',
           });
         }
       })

diff --git a/docs/index.html b/docs/index.html
@@ -71,7 +71,7 @@
   <body>
     <div id="app">Loading ...</div>
     <script src="//cdn.jsdelivr.net/npm/docsify-plugin-carbon@1"></script>
-    <script>
+    <!-- <script>
       // Docsify configuration
       window.$docsify = {
         alias: {
@@ -214,8 +214,12 @@
           },
         ],
       };
-    </script>
-    <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
+    </script> -->
+
+    <!-- <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script> -->
+
+    <!-- TODO this all relied on globals, currently disabled -->
+    <!--
     <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/front-matter.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
@@ -225,6 +229,163 @@
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-nginx.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
-    <!-- <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> -->
+    <script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    -->
+
+    <script type="module">
+      import { Docsify } from '/lib/module.js';
+
+      new Docsify({
+        alias: {
+          '.*?/awesome':
+            'https://raw.githubusercontent.com/docsifyjs/awesome-docsify/master/README.md',
+          '.*?/changelog':
+            'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG.md',
+          '/.*/_navbar.md': '/_navbar.md',
+          '/es/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1',
+          '/de-de/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
+          '/ru-ru/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
+          '/zh-cn/(.*)':
+            'https://cdn.jsdelivr.net/gh/docsifyjs/docs-zh@master/$1',
+        },
+        auto2top: true,
+        coverpage: true,
+        executeScript: true,
+        loadSidebar: true,
+        loadNavbar: true,
+        mergeNavbar: true,
+        maxLevel: 4,
+        subMaxLevel: 2,
+        ga: 'UA-106147152-1',
+        matomo: {
+          host: '//matomo.thunderwave.de',
+          id: 6,
+        },
+        name: 'docsify',
+        nameLink: {
+          '/es/': '#/es/',
+          '/de-de/': '#/de-de/',
+          '/ru-ru/': '#/ru-ru/',
+          '/zh-cn/': '#/zh-cn/',
+          '/': '#/',
+        },
+        search: {
+          noData: {
+            '/es/': '¡No hay resultados!',
+            '/de-de/': 'Keine Ergebnisse!',
+            '/ru-ru/': 'Никаких результатов!',
+            '/zh-cn/': '没有结果!',
+            '/': 'No results!',
+          },
+          paths: 'auto',
+          placeholder: {
+            '/es/': 'Buscar',
+            '/de-de/': 'Suche',
+            '/ru-ru/': 'Поиск',
+            '/zh-cn/': '搜索',
+            '/': 'Search',
+          },
+          pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn'],
+        },
+        skipLink: {
+          '/es/': 'Saltar al contenido principal',
+          '/de-de/': 'Ga naar de hoofdinhoud',
+          '/ru-ru/': 'Перейти к основному содержанию',
+          '/zh-cn/': '跳到主要内容',
+        },
+        vueComponents: {
+          'button-counter': {
+            template: /* html */ `<button @click="count += 1">You clicked me {{ count }} times</button>`,
+            data() {
+              return {
+                count: 0,
+              };
+            },
+          },
+        },
+        vueGlobalOptions: {
+          data() {
+            return {
+              count: 0,
+              message: 'Hello, World!',
+              // Fake API response
+              images: [
+                {
+                  title: 'Image 1',
+                  url: 'https://picsum.photos/150?random=1',
+                },
+                {
+                  title: 'Image 2',
+                  url: 'https://picsum.photos/150?random=2',
+                },
+                {
+                  title: 'Image 3',
+                  url: 'https://picsum.photos/150?random=3',
+                },
+              ],
+            };
+          },
+          computed: {
+            timeOfDay() {
+              const date = new Date();
+              const hours = date.getHours();
+
+              if (hours < 12) {
+                return 'morning';
+              } else if (hours < 18) {
+                return 'afternoon';
+              } else {
+                return 'evening';
+              }
+            },
+          },
+          methods: {
+            hello() {
+              alert(this.message);
+            },
+          },
+        },
+        vueMounts: {
+          '#counter': {
+            data() {
+              return {
+                count: 0,
+              };
+            },
+          },
+        },
+        plugins: [
+          DocsifyCarbon.create('CEBI6KQE', 'docsifyjsorg'),
+          function (hook, vm) {
+            hook.beforeEach(html => {
+              let url;
+              if (/githubusercontent\.com/.test(vm.route.file)) {
+                url = vm.route.file
+                  .replace('raw.githubusercontent.com', 'github.com')
+                  .replace(/\/master/, '/blob/master');
+              } else if (/jsdelivr\.net/.test(vm.route.file)) {
+                url = vm.route.file
+                  .replace('cdn.jsdelivr.net/gh', 'github.com')
+                  .replace('@master', '/blob/master');
+              } else {
+                url =
+                  'https://github.com/docsifyjs/docsify/blob/develop/docs/' +
+                  vm.route.file;
+              }
+              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>'
+              );
+            });
+          },
+        ],
+      });
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -18,13 +18,16 @@
   "// These exports require moduleResolution:NodeNext to be enabled in the consumer.": "",
   "// TODO native ESM (in browsers) does not work yet because prismjs is not ESM and Docsify source imports it as CommonJS": "",
   "exports": {
-    "./*": "./*",
+    "./src/*": "./src/*",
+    "./dist/core/module.js": "./dist/core/module.js",
+    "./dist/core/module.min.js": "./dist/core/module.min.js",
     ".": {
       "types": "./dist/core/Docsify.d.ts",
-      "default": "./src/core/Docsify.js"
+      "default": "./dist/core/module.min.js"
     }
   },
   "files": [
+    "src",
     "lib",
     "themes"
   ],

diff --git a/src/core/Docsify.js b/src/core/Docsify.js
@@ -1,3 +1,4 @@
+import prism from 'prismjs';
 import { Router } from './router/index.js';
 import { Render } from './render/index.js';
 import { Fetch } from './fetch/index.js';
@@ -8,18 +9,31 @@ import config from './config.js';
 import { isFn } from './util/core.js';
 import { Lifecycle } from './init/lifecycle.js';
 
+export { prism };
+export { marked } from 'marked';
+export * as util from './util/index.js';
+export * as dom from './util/dom.js';
+export { Compiler } from './render/compiler.js';
+export { slugify } from './render/slugify.js';
+export { get } from './util/ajax.js';
+
 /** @typedef {new (...args: any[]) => any} Constructor */
+/** @typedef {import('./config.js').DocsifyConfig} DocsifyConfig */
 
 // eslint-disable-next-line new-cap
 export class Docsify extends Fetch(
   // eslint-disable-next-line new-cap
   Events(Render(VirtualRoutes(Router(Lifecycle(Object)))))
 ) {
-  config = config(this);
+  /** @type {DocsifyConfig} */
+  config;
 
-  constructor() {
+  /** @param {Partial<DocsifyConfig>} conf */
+  constructor(conf = {}) {
     super();
 
+    this.config = config(this, conf);
+
     this.initLifecycle(); // Init hooks
     this.initPlugin(); // Install plugins
     this.callHook('init');
@@ -45,3 +59,5 @@ export class Docsify extends Fetch(
     });
   }
 }
+
+export const version = '__VERSION__';