mirror of
https://github.com/docsifyjs/docsify.git
synced 2026-10-16 20:21:38 +08:00
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:
@@ -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
@@ -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,
|
||||
}) => {
|
||||
|
||||
Reference in New Issue
Block a user