compileTemplate.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. "use strict";
  2. var __importDefault = (this && this.__importDefault) || function (mod) {
  3. return (mod && mod.__esModule) ? mod : { "default": mod };
  4. };
  5. Object.defineProperty(exports, "__esModule", { value: true });
  6. exports.compileTemplate = void 0;
  7. const assetUrl_1 = __importDefault(require("./templateCompilerModules/assetUrl"));
  8. const srcset_1 = __importDefault(require("./templateCompilerModules/srcset"));
  9. const consolidate = require('consolidate');
  10. const transpile = require('vue-template-es2015-compiler');
  11. function compileTemplate(options) {
  12. const { preprocessLang } = options;
  13. const preprocessor = preprocessLang && consolidate[preprocessLang];
  14. if (preprocessor) {
  15. return actuallyCompile(Object.assign({}, options, {
  16. source: preprocess(options, preprocessor)
  17. }));
  18. }
  19. else if (preprocessLang) {
  20. return {
  21. ast: {},
  22. code: `var render = function () {}\n` + `var staticRenderFns = []\n`,
  23. source: options.source,
  24. tips: [
  25. `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`
  26. ],
  27. errors: [
  28. `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`
  29. ]
  30. };
  31. }
  32. else {
  33. return actuallyCompile(options);
  34. }
  35. }
  36. exports.compileTemplate = compileTemplate;
  37. function preprocess(options, preprocessor) {
  38. const { source, filename, preprocessOptions } = options;
  39. const finalPreprocessOptions = Object.assign({
  40. filename
  41. }, preprocessOptions);
  42. // Consolidate exposes a callback based API, but the callback is in fact
  43. // called synchronously for most templating engines. In our case, we have to
  44. // expose a synchronous API so that it is usable in Jest transforms (which
  45. // have to be sync because they are applied via Node.js require hooks)
  46. let res, err;
  47. preprocessor.render(source, finalPreprocessOptions, (_err, _res) => {
  48. if (_err)
  49. err = _err;
  50. res = _res;
  51. });
  52. if (err)
  53. throw err;
  54. return res;
  55. }
  56. function actuallyCompile(options) {
  57. const { source, compiler, compilerOptions = {}, transpileOptions = {}, transformAssetUrls, transformAssetUrlsOptions, isProduction = process.env.NODE_ENV === 'production', isFunctional = false, optimizeSSR = false, prettify = true } = options;
  58. const compile = optimizeSSR && compiler.ssrCompile ? compiler.ssrCompile : compiler.compile;
  59. let finalCompilerOptions = compilerOptions;
  60. if (transformAssetUrls) {
  61. const builtInModules = [
  62. transformAssetUrls === true
  63. ? assetUrl_1.default(undefined, transformAssetUrlsOptions)
  64. : assetUrl_1.default(transformAssetUrls, transformAssetUrlsOptions),
  65. srcset_1.default(transformAssetUrlsOptions)
  66. ];
  67. finalCompilerOptions = Object.assign({}, compilerOptions, {
  68. modules: [...builtInModules, ...(compilerOptions.modules || [])],
  69. filename: options.filename
  70. });
  71. }
  72. const { ast, render, staticRenderFns, tips, errors } = compile(source, finalCompilerOptions);
  73. if (errors && errors.length) {
  74. return {
  75. ast,
  76. code: `var render = function () {}\n` + `var staticRenderFns = []\n`,
  77. source,
  78. tips,
  79. errors
  80. };
  81. }
  82. else {
  83. const finalTranspileOptions = Object.assign({}, transpileOptions, {
  84. transforms: Object.assign({}, transpileOptions.transforms, {
  85. stripWithFunctional: isFunctional
  86. })
  87. });
  88. const toFunction = (code) => {
  89. return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`;
  90. };
  91. // transpile code with vue-template-es2015-compiler, which is a forked
  92. // version of Buble that applies ES2015 transforms + stripping `with` usage
  93. let code = transpile(`var __render__ = ${toFunction(render)}\n` +
  94. `var __staticRenderFns__ = [${staticRenderFns.map(toFunction)}]`, finalTranspileOptions) + `\n`;
  95. // #23 we use __render__ to avoid `render` not being prefixed by the
  96. // transpiler when stripping with, but revert it back to `render` to
  97. // maintain backwards compat
  98. code = code.replace(/\s__(render|staticRenderFns)__\s/g, ' $1 ');
  99. if (!isProduction) {
  100. // mark with stripped (this enables Vue to use correct runtime proxy
  101. // detection)
  102. code += `render._withStripped = true`;
  103. if (prettify) {
  104. try {
  105. code = require('prettier').format(code, {
  106. semi: false,
  107. parser: 'babel'
  108. });
  109. }
  110. catch (e) {
  111. if (e.code === 'MODULE_NOT_FOUND') {
  112. tips.push('The `prettify` option is on, but the dependency `prettier` is not found.\n' +
  113. 'Please either turn off `prettify` or manually install `prettier`.');
  114. }
  115. tips.push(`Failed to prettify component ${options.filename} template source after compilation.`);
  116. }
  117. }
  118. }
  119. return {
  120. ast,
  121. code,
  122. source,
  123. tips,
  124. errors
  125. };
  126. }
  127. }