serverPluginHtml.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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.htmlRewritePlugin = void 0;
  7. const index_1 = require("./index");
  8. const serverPluginHmr_1 = require("./serverPluginHmr");
  9. const serverPluginClient_1 = require("./serverPluginClient");
  10. const es_module_lexer_1 = require("es-module-lexer");
  11. const utils_1 = require("../utils");
  12. const lru_cache_1 = __importDefault(require("lru-cache"));
  13. const path_1 = __importDefault(require("path"));
  14. const chalk_1 = __importDefault(require("chalk"));
  15. const debug = require('debug')('vite:rewrite');
  16. const rewriteHtmlPluginCache = new lru_cache_1.default({ max: 20 });
  17. exports.htmlRewritePlugin = ({ root, app, watcher, resolver, config }) => {
  18. const devInjectionCode = `\n<script type="module">import "${serverPluginClient_1.clientPublicPath}"</script>\n`;
  19. const scriptRE = /(<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>)([\s\S]*?)<\/script>/gm;
  20. const srcRE = /\bsrc=(?:"([^"]+)"|'([^']+)'|([^'"\s]+)\b)/;
  21. async function rewriteHtml(importer, html) {
  22. await es_module_lexer_1.init;
  23. html = await utils_1.transformIndexHtml(html, config.indexHtmlTransforms, 'pre', false);
  24. html = html.replace(scriptRE, (matched, openTag, script) => {
  25. if (script) {
  26. return `${openTag}${index_1.rewriteImports(root, script, importer, resolver)}</script>`;
  27. }
  28. else {
  29. const srcAttr = openTag.match(srcRE);
  30. if (srcAttr) {
  31. // register script as a import dep for hmr
  32. const importee = resolver.normalizePublicPath(utils_1.cleanUrl(path_1.default.posix.resolve('/', srcAttr[1] || srcAttr[2])));
  33. serverPluginHmr_1.debugHmr(` ${importer} imports ${importee}`);
  34. serverPluginHmr_1.ensureMapEntry(serverPluginHmr_1.importerMap, importee).add(importer);
  35. }
  36. return matched;
  37. }
  38. });
  39. const processedHtml = utils_1.injectScriptToHtml(html, devInjectionCode);
  40. return await utils_1.transformIndexHtml(processedHtml, config.indexHtmlTransforms, 'post', false);
  41. }
  42. app.use(async (ctx, next) => {
  43. await next();
  44. if (ctx.status === 304) {
  45. return;
  46. }
  47. if (ctx.response.is('html') && ctx.body) {
  48. const importer = ctx.path;
  49. const html = await utils_1.readBody(ctx.body);
  50. if (rewriteHtmlPluginCache.has(html)) {
  51. debug(`${ctx.path}: serving from cache`);
  52. ctx.body = rewriteHtmlPluginCache.get(html);
  53. }
  54. else {
  55. if (!html)
  56. return;
  57. ctx.body = await rewriteHtml(importer, html);
  58. rewriteHtmlPluginCache.set(html, ctx.body);
  59. }
  60. return;
  61. }
  62. });
  63. watcher.on('change', (file) => {
  64. const path = resolver.fileToRequest(file);
  65. if (path.endsWith('.html')) {
  66. debug(`${path}: cache busted`);
  67. watcher.send({
  68. type: 'full-reload',
  69. path
  70. });
  71. console.log(chalk_1.default.green(`[vite] `) + ` ${path} page reloaded.`);
  72. }
  73. });
  74. };
  75. //# sourceMappingURL=serverPluginHtml.js.map