Skip to content

Commit 25e715b

Browse files
Koooooo-7jhildenbiddle
Koooooo-7
and
jhildenbiddle
authored
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>
1 parent 02e525c commit 25e715b

File tree

2 files changed

+82
-79
lines changed

2 files changed

+82
-79
lines changed

‎src/core/render/index.js‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export function Render(Base) {
9090

9191
// Handle Vue content not mounted by markdown <script>
9292
if ('Vue' in window) {
93+
const vueGlobalOptions = docsifyConfig.vueGlobalOptions || {};
9394
const vueMountData = [];
9495
const vueComponentNames = Object.keys(
9596
docsifyConfig.vueComponents || {}
@@ -109,10 +110,10 @@ export function Render(Base) {
109110
// Store global data() return value as shared data object
110111
if (
111112
!this.#vueGlobalData &&
112-
docsifyConfig.vueGlobalOptions &&
113-
typeof docsifyConfig.vueGlobalOptions.data === 'function'
113+
vueGlobalOptions.data &&
114+
typeof vueGlobalOptions.data === 'function'
114115
) {
115-
this.#vueGlobalData = docsifyConfig.vueGlobalOptions.data();
116+
this.#vueGlobalData = vueGlobalOptions.data();
116117
}
117118

118119
// vueMounts
@@ -125,64 +126,67 @@ export function Render(Base) {
125126
.filter(([elm, vueConfig]) => elm)
126127
);
127128

128-
// Template syntax, vueComponents, vueGlobalOptions
129-
if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
130-
const reHasBraces = /{{2}[^{}]*}{2}/;
131-
// Matches Vue full and shorthand syntax as attributes in HTML tags.
132-
//
133-
// Full syntax examples:
134-
// v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
135-
//
136-
// Shorthand syntax examples:
137-
// @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
138-
//
139-
// Markup examples:
140-
// <div v-html>{{ html }}</div>
141-
// <div v-text="msg"></div>
142-
// <div v-bind:text-content.prop="text">
143-
// <button v-on:click="doThis"></button>
144-
// <button v-on:click.once="doThis"></button>
145-
// <button v-on:[event]="doThis"></button>
146-
// <button @click.stop.prevent="doThis">
147-
// <a :href="url">
148-
// <a :[key]="url">
149-
const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
150-
151-
vueMountData.push(
152-
...dom
153-
.findAll('.markdown-section > *')
154-
// Remove duplicates
155-
.filter(elm => !vueMountData.some(([e, c]) => e === elm))
156-
// Detect Vue content
157-
.filter(elm => {
158-
const isVueMount =
159-
// is a component
160-
elm.tagName.toLowerCase() in
161-
(docsifyConfig.vueComponents || {}) ||
162-
// has a component(s)
163-
elm.querySelector(vueComponentNames.join(',') || null) ||
164-
// has curly braces
165-
reHasBraces.test(elm.outerHTML) ||
166-
// has content directive
167-
reHasDirective.test(elm.outerHTML);
168-
169-
return isVueMount;
170-
})
171-
.map(elm => {
172-
// Clone global configuration
173-
const vueConfig = {
174-
...docsifyConfig.vueGlobalOptions,
175-
};
176-
// Replace vueGlobalOptions data() return value with shared data object.
177-
// This provides a global store for all Vue instances that receive
178-
// vueGlobalOptions as their configuration.
179-
if (this.#vueGlobalData) {
180-
vueConfig.data = () => this.#vueGlobalData;
181-
}
182-
183-
return [elm, vueConfig];
184-
})
185-
);
129+
// Template syntax, vueComponents, vueGlobalOptions ...
130+
const reHasBraces = /{{2}[^{}]*}{2}/;
131+
// Matches Vue full and shorthand syntax as attributes in HTML tags.
132+
//
133+
// Full syntax examples:
134+
// v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
135+
//
136+
// Shorthand syntax examples:
137+
// @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
138+
//
139+
// Markup examples:
140+
// <div v-html>{{ html }}</div>
141+
// <div v-text="msg"></div>
142+
// <div v-bind:text-content.prop="text">
143+
// <button v-on:click="doThis"></button>
144+
// <button v-on:click.once="doThis"></button>
145+
// <button v-on:[event]="doThis"></button>
146+
// <button @click.stop.prevent="doThis">
147+
// <a :href="url">
148+
// <a :[key]="url">
149+
const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
150+
151+
vueMountData.push(
152+
...dom
153+
.findAll('.markdown-section > *')
154+
// Remove duplicates
155+
.filter(elm => !vueMountData.some(([e, c]) => e === elm))
156+
// Detect Vue content
157+
.filter(elm => {
158+
const isVueMount =
159+
// is a component
160+
elm.tagName.toLowerCase() in
161+
(docsifyConfig.vueComponents || {}) ||
162+
// has a component(s)
163+
elm.querySelector(vueComponentNames.join(',') || null) ||
164+
// has curly braces
165+
reHasBraces.test(elm.outerHTML) ||
166+
// has content directive
167+
reHasDirective.test(elm.outerHTML);
168+
169+
return isVueMount;
170+
})
171+
.map(elm => {
172+
// Clone global configuration
173+
const vueConfig = {
174+
...vueGlobalOptions,
175+
};
176+
// Replace vueGlobalOptions data() return value with shared data object.
177+
// This provides a global store for all Vue instances that receive
178+
// vueGlobalOptions as their configuration.
179+
if (this.#vueGlobalData) {
180+
vueConfig.data = () => this.#vueGlobalData;
181+
}
182+
183+
return [elm, vueConfig];
184+
})
185+
);
186+
187+
// Not found mounts but import Vue resource
188+
if (vueMountData.length === 0) {
189+
return;
186190
}
187191

188192
// Mount

‎test/e2e/vue.test.js‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,23 @@ test.describe('Vue.js Compatibility', () => {
9696
const vueVersion = Number(vueURL.match(/vue(\d+)/)[1]); // 2|3
9797

9898
test.describe(`Vue v${vueVersion}`, () => {
99+
test(`Parse templates and render content when import Vue v${vueVersion} resources`, async ({
100+
page,
101+
}) => {
102+
const docsifyInitConfig = {
103+
config: {},
104+
markdown: {
105+
homepage: stripIndent`
106+
<div id="vuefor"><span v-for="i in 5">{{ i }}</span></div>
107+
`,
108+
},
109+
};
110+
111+
docsifyInitConfig.scriptURLs = vueURL;
112+
113+
await docsifyInit(docsifyInitConfig);
114+
await expect(page.locator('#vuefor')).toHaveText('12345');
115+
});
99116
for (const executeScript of [true, undefined]) {
100117
test(`renders content when executeScript is ${executeScript}`, async ({
101118
page,
@@ -147,24 +164,6 @@ test.describe('Vue.js Compatibility', () => {
147164
await expect(page.locator('#vuescript p')).toHaveText('---');
148165
});
149166

150-
test(`ignores content when vueComponents, vueMounts, and vueGlobalOptions are undefined`, async ({
151-
page,
152-
}) => {
153-
const docsifyInitConfig = getSharedConfig();
154-
155-
docsifyInitConfig.config.vueComponents = undefined;
156-
docsifyInitConfig.config.vueGlobalOptions = undefined;
157-
docsifyInitConfig.config.vueMounts = undefined;
158-
docsifyInitConfig.scriptURLs = vueURL;
159-
160-
await docsifyInit(docsifyInitConfig);
161-
await expect(page.locator('#vuefor')).toHaveText('{{ i }}');
162-
await expect(page.locator('#vuecomponent')).toHaveText('---');
163-
await expect(page.locator('#vueglobaloptions p')).toHaveText('---');
164-
await expect(page.locator('#vuemounts p')).toHaveText('---');
165-
await expect(page.locator('#vuescript p')).toHaveText('vuescript');
166-
});
167-
168167
test(`ignores content when vueGlobalOptions is undefined`, async ({
169168
page,
170169
}) => {

0 commit comments

Comments
 (0)