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>
This commit is contained in:
Koy Zhuang
2023-12-22 11:23:07 +08:00
committed by GitHub
parent 02e525c62e
commit 25e715b387
2 changed files with 79 additions and 76 deletions
+10 -6
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,8 +126,7 @@ export function Render(Base) {
.filter(([elm, vueConfig]) => elm)
);
// Template syntax, vueComponents, vueGlobalOptions
if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
// Template syntax, vueComponents, vueGlobalOptions ...
const reHasBraces = /{{2}[^{}]*}{2}/;
// Matches Vue full and shorthand syntax as attributes in HTML tags.
//
@@ -171,7 +171,7 @@ export function Render(Base) {
.map(elm => {
// Clone global configuration
const vueConfig = {
...docsifyConfig.vueGlobalOptions,
...vueGlobalOptions,
};
// Replace vueGlobalOptions data() return value with shared data object.
// This provides a global store for all Vue instances that receive
@@ -183,6 +183,10 @@ export function Render(Base) {
return [elm, vueConfig];
})
);
// Not found mounts but import Vue resource
if (vueMountData.length === 0) {
return;
}
// Mount
+17 -18
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,
}) => {