archive-gh-me/docsify
1
0
Fork 0
mirror of https://github.com/docsifyjs/docsify.git synced 2025-12-08 19:55:52 +00:00
Code Issues Projects Releases Wiki Activity

update: render Vue templates by default when import vue resources. (#2327)

Browse Source 
* update: render vue by default.

---------

Co-authored-by: John Hildenbiddle <jhildenbiddle@users.noreply.github.com>
This commit is contained in:
Koy Zhuang 2023-12-22 11:23:07 +08:00 committed by GitHub
parent 02e525c62e
commit 25e715b387
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 79 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/core/render/index.js
View File

@ -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]/;
// 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);
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 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];
})
);
return [elm, vueConfig];
})
);
// Not found mounts but import Vue resource
if (vueMountData.length === 0) {
return;
}
// Mount

35
test/e2e/vue.test.js
View File

@ -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,
}) => {