docsifyjs · trusktr · Mar 28, 2024 · Mar 28, 2024 · Apr 1, 2024 · Apr 2, 2024
diff --git a/.eslintignore b/.eslintignore
@@ -6,3 +6,4 @@ lib
 node_modules
 server.js
 themes
+dist
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /_playwright-report
 /_playwright-results
 /lib
+/dist
 /node_modules
 /.husky/_
 

diff --git a/.prettierignore b/.prettierignore
@@ -4,3 +4,6 @@ lib/
 themes/
 _playwright-*/
 emoji-data.*
+
+# for some reason this is needed in CI, although locally Prettier ignored dist/ already.
+dist/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "cSpell.words": ["coverpage"]
+  "cSpell.words": ["coverpage"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
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 '/dist/core/module.min.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
@@ -12,22 +12,40 @@
   "type": "module",
   "// The 'main' and 'unpkg' fields will remain as legacy for backwards compatibility 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",
+  "types": "dist/core/Docsify.d.ts",
   "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.": "",
+  "// 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/Docsify.js",
-    "./*": "./*"
+    "./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": "./dist/core/module.min.js"
+    }
   },
   "files": [
+    "src",
     "lib",
     "themes"
   ],
+  "// Using 'typesVersions' here is the only way we could figure out how to get types working for imports of any subpath without any of the problems other approaches have when not using modeResolution:NodeNext (listed in https://stackoverflow.com/questions/77856692/how-to-publish-plain-jsjsdoc-library-for-typescript-consumers)": "",
+  "typesVersions": {
+    "*": {
+      "src/*": [
+        "dist/*"
+      ]
+    }
+  },
   "scripts": {
     "build:cover": "node build/cover.js",
     "build:css:min": "node build/mincss.js",
     "build:css": "mkdirp lib/themes && node build/css -o lib/themes",
     "build:emoji": "node ./build/emoji.js",
-    "build:js": "cross-env NODE_ENV=production node build/build.js",
+    "build:js": "npm run build:types && cross-env NODE_ENV=production node build/build.js",
+    "build:types": "tsc -p tsconfig.json || true",
     "build:test": "npm run build && npm test",
     "build": "rimraf lib themes && run-s build:js build:css build:css:min build:cover build:emoji",
     "dev": "run-p serve:dev watch:*",

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__';