From 25e715b387f9363b8312ab4bfe603b73f1ed39c9 Mon Sep 17 00:00:00 2001
From: Koy Zhuang <koy@ko8e24.top>
Date: Fri, 22 Dec 2023 11:23:07 +0800
Subject: [PATCH] update: render Vue templates by default when import vue
 resources. (#2327)

* update: render vue by default.

---------

Co-authored-by: John Hildenbiddle <jhildenbiddle@users.noreply.github.com>
---
 src/core/render/index.js | 126 ++++++++++++++++++++-------------------
 test/e2e/vue.test.js     |  35 ++++++-----
 2 files changed, 82 insertions(+), 79 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index f4c71ee9c..0dcd0ed1d 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -90,6 +90,7 @@ export function Render(Base) {
 
       // Handle Vue content not mounted by markdown <script>
       if ('Vue' in window) {
+        const vueGlobalOptions = docsifyConfig.vueGlobalOptions || {};
         const vueMountData = [];
         const vueComponentNames = Object.keys(
           docsifyConfig.vueComponents || {}
@@ -109,10 +110,10 @@ export function Render(Base) {
         // Store global data() return value as shared data object
         if (
           !this.#vueGlobalData &&
-          docsifyConfig.vueGlobalOptions &&
-          typeof docsifyConfig.vueGlobalOptions.data === 'function'
+          vueGlobalOptions.data &&
+          typeof vueGlobalOptions.data === 'function'
         ) {
-          this.#vueGlobalData = docsifyConfig.vueGlobalOptions.data();
+          this.#vueGlobalData = vueGlobalOptions.data();
         }
 
         // vueMounts
@@ -125,64 +126,67 @@ export function Render(Base) {
             .filter(([elm, vueConfig]) => elm)
         );
 
-        // Template syntax, vueComponents, vueGlobalOptions
-        if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
-          const reHasBraces = /{{2}[^{}]*}{2}/;
-          // Matches Vue full and shorthand syntax as attributes in HTML tags.
-          //
-          // Full syntax examples:
-          // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
-          //
-          // Shorthand syntax examples:
-          // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
-          //
-          // Markup examples:
-          // <div v-html>{{ html }}</div>
-          // <div v-text="msg"></div>
-          // <div v-bind:text-content.prop="text">
-          // <button v-on:click="doThis"></button>
-          // <button v-on:click.once="doThis"></button>
-          // <button v-on:[event]="doThis"></button>
-          // <button @click.stop.prevent="doThis">
-          // <a :href="url">
-          // <a :[key]="url">
-          const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
-
-          vueMountData.push(
-            ...dom
-              .findAll('.markdown-section > *')
-              // Remove duplicates
-              .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-              // Detect Vue content
-              .filter(elm => {
-                const isVueMount =
-                  // is a component
-                  elm.tagName.toLowerCase() in
-                    (docsifyConfig.vueComponents || {}) ||
-                  // has a component(s)
-                  elm.querySelector(vueComponentNames.join(',') || null) ||
-                  // has curly braces
-                  reHasBraces.test(elm.outerHTML) ||
-                  // has content directive
-                  reHasDirective.test(elm.outerHTML);
-
-                return isVueMount;
-              })
-              .map(elm => {
-                // Clone global configuration
-                const vueConfig = {
-                  ...docsifyConfig.vueGlobalOptions,
-                };
-                // Replace vueGlobalOptions data() return value with shared data object.
-                // This provides a global store for all Vue instances that receive
-                // vueGlobalOptions as their configuration.
-                if (this.#vueGlobalData) {
-                  vueConfig.data = () => this.#vueGlobalData;
-                }
-
-                return [elm, vueConfig];
-              })
-          );
+        // Template syntax, vueComponents, vueGlobalOptions ...
+        const reHasBraces = /{{2}[^{}]*}{2}/;
+        // Matches Vue full and shorthand syntax as attributes in HTML tags.
+        //
+        // Full syntax examples:
+        // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
+        //
+        // Shorthand syntax examples:
+        // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
+        //
+        // Markup examples:
+        // <div v-html>{{ html }}</div>
+        // <div v-text="msg"></div>
+        // <div v-bind:text-content.prop="text">
+        // <button v-on:click="doThis"></button>
+        // <button v-on:click.once="doThis"></button>
+        // <button v-on:[event]="doThis"></button>
+        // <button @click.stop.prevent="doThis">
+        // <a :href="url">
+        // <a :[key]="url">
+        const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
+
+        vueMountData.push(
+          ...dom
+            .findAll('.markdown-section > *')
+            // Remove duplicates
+            .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+            // Detect Vue content
+            .filter(elm => {
+              const isVueMount =
+                // is a component
+                elm.tagName.toLowerCase() in
+                  (docsifyConfig.vueComponents || {}) ||
+                // has a component(s)
+                elm.querySelector(vueComponentNames.join(',') || null) ||
+                // has curly braces
+                reHasBraces.test(elm.outerHTML) ||
+                // has content directive
+                reHasDirective.test(elm.outerHTML);
+
+              return isVueMount;
+            })
+            .map(elm => {
+              // Clone global configuration
+              const vueConfig = {
+                ...vueGlobalOptions,
+              };
+              // Replace vueGlobalOptions data() return value with shared data object.
+              // This provides a global store for all Vue instances that receive
+              // vueGlobalOptions as their configuration.
+              if (this.#vueGlobalData) {
+                vueConfig.data = () => this.#vueGlobalData;
+              }
+
+              return [elm, vueConfig];
+            })
+        );
+
+        // Not found mounts but import Vue resource
+        if (vueMountData.length === 0) {
+          return;
         }
 
         // Mount
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 0edbb43d5..6997c7281 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -96,6 +96,23 @@ test.describe('Vue.js Compatibility', () => {
     const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3
 
     test.describe(`Vue v${vueVersion}`, () => {
+      test(`Parse templates and render content when import Vue v${vueVersion} resources`, async ({
+        page,
+      }) => {
+        const docsifyInitConfig = {
+          config: {},
+          markdown: {
+            homepage: stripIndent`
+            <div id="vuefor"><span v-for="i in 5">{{ i }}</span></div>
+          `,
+          },
+        };
+
+        docsifyInitConfig.scriptURLs = vueURL;
+
+        await docsifyInit(docsifyInitConfig);
+        await expect(page.locator('#vuefor')).toHaveText('12345');
+      });
       for (const executeScript of [true, undefined]) {
         test(`renders content when executeScript is ${executeScript}`, async ({
           page,
@@ -147,24 +164,6 @@ test.describe('Vue.js Compatibility', () => {
         await expect(page.locator('#vuescript p')).toHaveText('---');
       });
 
-      test(`ignores content when vueComponents, vueMounts, and vueGlobalOptions are undefined`, async ({
-        page,
-      }) => {
-        const docsifyInitConfig = getSharedConfig();
-
-        docsifyInitConfig.config.vueComponents = undefined;
-        docsifyInitConfig.config.vueGlobalOptions = undefined;
-        docsifyInitConfig.config.vueMounts = undefined;
-        docsifyInitConfig.scriptURLs = vueURL;
-
-        await docsifyInit(docsifyInitConfig);
-        await expect(page.locator('#vuefor')).toHaveText('{{ i }}');
-        await expect(page.locator('#vuecomponent')).toHaveText('---');
-        await expect(page.locator('#vueglobaloptions p')).toHaveText('---');
-        await expect(page.locator('#vuemounts p')).toHaveText('---');
-        await expect(page.locator('#vuescript p')).toHaveText('vuescript');
-      });
-
       test(`ignores content when vueGlobalOptions is undefined`, async ({
         page,
       }) => {