refactor: move some functions and module-level state into classes as private methods and properties to start to encapsulate Docsify

index.html

@@ -84,6 +84,58 @@
           },
           pathNamespaces: ['/es', '/de-de', '/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) {
@@ -121,5 +173,7 @@
     <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-nginx.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
+
+    <script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
   </body>
 </html>

src/core/Docsify.js

@@ -3,7 +3,6 @@ import { Render } from './render/index.js';
 import { Fetch } from './fetch/index.js';
 import { Events } from './event/index.js';
 import { VirtualRoutes } from './virtual-routes/index.js';
-import initGlobalAPI from './global-api.js';
 
 import config from './config.js';
 import { isFn } from './util/core.js';
@@ -16,11 +15,11 @@ export class Docsify extends Fetch(
   // eslint-disable-next-line new-cap
   Events(Render(VirtualRoutes(Router(Lifecycle(Object)))))
 ) {
+  config = config(this);
+
   constructor() {
     super();
 
-    this.config = config(this);
-
     this.initLifecycle(); // Init hooks
     this.initPlugin(); // Install plugins
     this.callHook('init');
@@ -46,8 +45,3 @@ export class Docsify extends Fetch(
     });
   }
 }
-
-/**
- * Global API
- */
-initGlobalAPI();

src/core/config.js

@@ -3,7 +3,7 @@ import { hyphenate, isPrimitive } from './util/core.js';
 
 const currentScript = document.currentScript;
 
-/** @param {import('./Docsify').Docsify} vm */
+/** @param {import('./Docsify.js').Docsify} vm */
 export default function (vm) {
   const config = Object.assign(
     {