blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

perf(vant-markdown-loader): 优化性能,对于没有 demo-code 的 md 文件,直接绑定 HTML

Browse Source
This commit is contained in:
HaoChuan9421 2021-03-16 21:34:09 +08:00 committed by neverland
parent 7c139f98ec
commit 76e44b39fc
1 changed files with 48 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/vant-markdown-loader/src/index.js
View File

@ -8,32 +8,10 @@ const extractDemo = require('./extract-demo');
const sideEffectTags = require('./side-effect-tags'); const sideEffectTags = require('./side-effect-tags');
function camelize(str) { function camelize(str) {
return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : '')); return `-${str}`.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
} }
function wrapper(content) { const sharedVueOptions = `mounted() {
let demoLinks;
let styles;
[content, demoLinks] = extractDemo.call(this, content);
[content, styles] = sideEffectTags(content);
content = cardWrapper(content);
return `
<template>
<section v-once>
${content}
</section>
</template>
<script>
${demoLinks
.map((link) => {
return `import DemoCode${camelize(path.basename(link, '.vue'))} from '${link}';`;
})
.join('\n')}
export default {
components: {
${demoLinks.map((link) => `DemoCode${camelize(path.basename(link, '.vue'))}`).join(',')}
},
mounted() {
const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5')); const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));
anchors.forEach(anchor => { anchors.forEach(anchor => {
anchor.addEventListener('click', this.scrollToAnchor); anchor.addEventListener('click', this.scrollToAnchor);
@ -49,6 +27,52 @@ export default {
} }
} }
}, },
`;
function wrapper(content) {
let demoLinks;
[content, demoLinks] = extractDemo.call(this, content);
content = cardWrapper(content);
if (demoLinks.length === 0) {
content = escape(content);
return `
<template>
<section v-html="content" v-once />
</template>
<script>
export default {
created() {
this.content = unescape(\`${content}\`);
},
${sharedVueOptions}
};
</script>
`;
}
let styles;
[content, styles] = sideEffectTags(content);
return `
<template>
<section v-once>
${content}
</section>
</template>
<script>
${demoLinks
.map((link) => {
return `import DemoCode${camelize(
path.basename(link, '.vue')
)} from '${link}';`;
})
.join('\n')}
export default {
components: {
${demoLinks
.map((link) => `DemoCode${camelize(path.basename(link, '.vue'))}`)
.join(',')}
},
${sharedVueOptions}
}; };
</script> </script>
${styles.join('\n')} ${styles.join('\n')}