util.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. const { compileTemplate } = require('@vue/component-compiler-utils');
  2. const compiler = require('vue-template-compiler');
  3. function stripScript(content) {
  4. const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
  5. return result && result[2] ? result[2].trim() : '';
  6. }
  7. function stripStyle(content) {
  8. const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
  9. return result && result[2] ? result[2].trim() : '';
  10. }
  11. // 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
  12. function stripTemplate(content) {
  13. content = content.trim();
  14. if (!content) {
  15. return content;
  16. }
  17. return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
  18. }
  19. function pad(source) {
  20. return source
  21. .split(/\r?\n/)
  22. .map(line => ` ${line}`)
  23. .join('\n');
  24. }
  25. function genInlineComponentText(template, script) {
  26. // https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
  27. const finalOptions = {
  28. source: `<div>${template}</div>`,
  29. filename: 'inline-component', // TODO:这里有待调整
  30. compiler
  31. };
  32. const compiled = compileTemplate(finalOptions);
  33. // tips
  34. if (compiled.tips && compiled.tips.length) {
  35. compiled.tips.forEach(tip => {
  36. console.warn(tip);
  37. });
  38. }
  39. // errors
  40. if (compiled.errors && compiled.errors.length) {
  41. console.error(
  42. `\n Error compiling template:\n${pad(compiled.source)}\n` +
  43. compiled.errors.map(e => ` - ${e}`).join('\n') +
  44. '\n'
  45. );
  46. }
  47. let demoComponentContent = `
  48. ${compiled.code}
  49. `;
  50. // todo: 这里采用了硬编码有待改进
  51. script = script.trim();
  52. if (script) {
  53. script = script.replace(/export\s+default/, 'const democomponentExport =');
  54. } else {
  55. script = 'const democomponentExport = {}';
  56. }
  57. demoComponentContent = `(function() {
  58. ${demoComponentContent}
  59. ${script}
  60. return {
  61. render,
  62. staticRenderFns,
  63. ...democomponentExport
  64. }
  65. })()`;
  66. return demoComponentContent;
  67. }
  68. module.exports = {
  69. stripScript,
  70. stripStyle,
  71. stripTemplate,
  72. genInlineComponentText
  73. };