mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-29 18:57:36 +08:00
80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
const { compileTemplate } = require('@vue/component-compiler-utils');
|
||
const compiler = require('vue-template-compiler');
|
||
|
||
function stripScript(content) {
|
||
const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
|
||
return result && result[2] ? result[2].trim() : '';
|
||
}
|
||
|
||
function stripStyle(content) {
|
||
const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
|
||
return result && result[2] ? result[2].trim() : '';
|
||
}
|
||
|
||
// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
|
||
function stripTemplate(content) {
|
||
content = content.trim();
|
||
if (!content) {
|
||
return content;
|
||
}
|
||
return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
|
||
}
|
||
|
||
function pad(source) {
|
||
return source
|
||
.split(/\r?\n/)
|
||
.map(line => ` ${line}`)
|
||
.join('\n');
|
||
}
|
||
|
||
function genInlineComponentText(template, script) {
|
||
// https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
|
||
const finalOptions = {
|
||
source: `<div>${template}</div>`,
|
||
filename: 'inline-component', // TODO：这里有待调整
|
||
compiler
|
||
};
|
||
const compiled = compileTemplate(finalOptions);
|
||
// tips
|
||
if (compiled.tips && compiled.tips.length) {
|
||
compiled.tips.forEach(tip => {
|
||
console.warn(tip);
|
||
});
|
||
}
|
||
// errors
|
||
if (compiled.errors && compiled.errors.length) {
|
||
console.error(
|
||
`\n Error compiling template:\n${pad(compiled.source)}\n` +
|
||
compiled.errors.map(e => ` - ${e}`).join('\n') +
|
||
'\n'
|
||
);
|
||
}
|
||
let demoComponentContent = `
|
||
${compiled.code}
|
||
`;
|
||
// todo: 这里采用了硬编码有待改进
|
||
script = script.trim();
|
||
if (script) {
|
||
script = script.replace(/export\s+default/, 'const democomponentExport =');
|
||
} else {
|
||
script = 'const democomponentExport = {}';
|
||
}
|
||
demoComponentContent = `(function() {
|
||
${demoComponentContent}
|
||
${script}
|
||
return {
|
||
render,
|
||
staticRenderFns,
|
||
...democomponentExport
|
||
}
|
||
})()`;
|
||
return demoComponentContent;
|
||
}
|
||
|
||
module.exports = {
|
||
stripScript,
|
||
stripStyle,
|
||
stripTemplate,
|
||
genInlineComponentText
|
||
};
|