-
-
Notifications
You must be signed in to change notification settings - Fork 420
/
transform-index-html.js
109 lines (95 loc) · 3.29 KB
/
transform-index-html.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { extractResources, createIndexHTML } from '@open-wc/building-utils/index-html/index.js';
import systemJsLegacyResolveScript from '../browser-scripts/system-js-legacy-resolve.js';
import { polyfillsPresets } from './polyfills-presets.js';
import { addPolyfilledImportMaps } from './import-maps.js';
import { compatibilityModes, polyfillsModes } from '../constants.js';
const regexpSystemJs = /(<script src=["|']polyfills\/system.*?><\/script>)/g;
/**
* @typedef {object} TransformIndexHTMLConfig
* @property {string} indexUrl
* @property {string} indexHTMLString
* @property {string} compatibilityMode
* @property {string} polyfillsMode
* @property {import('./user-agent-compat').UserAgentCompat} uaCompat
*/
/**
* @param {TransformIndexHTMLConfig} cfg
*/
function getPolyfills(cfg) {
if (cfg.polyfillsMode === polyfillsModes.NONE) {
return {};
}
switch (cfg.compatibilityMode) {
case compatibilityModes.MAX:
return polyfillsPresets.max;
case compatibilityModes.MIN:
return polyfillsPresets.all;
case compatibilityModes.AUTO:
case compatibilityModes.ALWAYS:
if (cfg.compatibilityMode === compatibilityModes.AUTO && cfg.uaCompat.modern) {
return {};
}
if (cfg.uaCompat.supportsEsm) {
return polyfillsPresets.all;
}
return polyfillsPresets.allWithSystemjs;
default:
return {};
}
}
/**
* transforms index.html, extracting any modules and import maps and adds them back
* with the appropriate polyfills, shims and a script loader so that they can be loaded
* at the right time
*
* @param {TransformIndexHTMLConfig} cfg
*/
export function getTransformedIndexHTML(cfg) {
const polyfillModules =
([compatibilityModes.AUTO, compatibilityModes.ALWAYS].includes(cfg.compatibilityMode) &&
!cfg.uaCompat.supportsEsm) ||
cfg.compatibilityMode === compatibilityModes.MAX;
// extract input files from index.html
const resources = extractResources(cfg.indexHTMLString, { removeImportMaps: false });
/** @type {Map<string, string>} */
const inlineModules = new Map();
resources.inlineModules.forEach((content, i) => {
inlineModules.set(`inline-module-${i}.js`, content);
});
const files = [
...resources.jsModules,
...[...inlineModules.keys()].map(e => `${e}?source=${encodeURIComponent(cfg.indexUrl)}`),
];
if (files.length === 0) {
return {
indexHTML: cfg.indexHTMLString,
inlineModules: new Map(),
polyfills: [],
};
}
// create a new index.html with injected polyfills and loader script
const createResult = createIndexHTML(resources.indexHTML, {
entries: {
type: polyfillModules ? 'system' : 'module',
polyfillDynamicImport: false,
files,
},
polyfills: getPolyfills(cfg),
minify: false,
preload: false,
});
let { indexHTML } = createResult;
if (polyfillModules) {
indexHTML = addPolyfilledImportMaps(indexHTML, resources);
}
// inject systemjs resolver which appends a query param to trigger es5 compilation
if (polyfillModules) {
// inject resolver right after system js script, to make sure it's loaded before and systemjs imports
indexHTML = indexHTML.replace(regexpSystemJs, `$1 \n${systemJsLegacyResolveScript}`);
}
return {
indexHTML,
inlineModules,
polyfills: createResult.files,
};
}