forked from zendesk/copenhagen_theme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
generate-import-map.mjs
86 lines (74 loc) · 3.13 KB
/
generate-import-map.mjs
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
import path from "path";
import fs from "fs";
/**
* When assets are deployed to Theming Center, their file name is changed and this
* breaks the rollup bundles, where bundled files are referencing each other with
* relative paths (e.g. file a.js has an `import something from "./b.js"`)
*
* This plugin solves the issue by creating an importmap to be used in the browser,
* specifically:
* - it replaces relative imports with bare imports (`import something from "./b.js"`
* is replaced with `import something from "b"`)
* - it creates an importmap that maps each bare import to the asset file, using the
* Curlybars asset helper. This import map is then injected into the document_head.hbs
* template and used by the browser to resolve the bare imports.
*
* Note: you need to have an importmap in the document_head that gets replaced
* after each build. The first time you can just put an empty importmap:
* <script type="importmap"></script>
* @returns {import("rollup").Plugin}
*/
export function generateImportMap() {
return {
name: "rollup-plugin-generate-import-map",
writeBundle({ dir }, bundle) {
const outputAssets = Object.values(bundle);
const importMap = { imports: {} };
for (const { name, fileName } of outputAssets) {
replaceImports(fileName, outputAssets, dir);
importMap.imports[name] = `{{asset '${fileName}'}}`;
}
injectImportMap(importMap);
},
};
}
/**
* Replace relative imports with bare imports
* @param {string} fileName Name of the current output asset
* @param {import("rollup").OutputAsset} outputAssets Array of all output assets generated during the build
* @param {string} outputPath Path of the output directory
*/
function replaceImports(fileName, outputAssets, outputPath) {
const filePath = path.resolve(outputPath, fileName);
let content = fs.readFileSync(filePath, "utf-8");
for (const { name, fileName } of outputAssets) {
// Takes into account both single and double quotes
const regex = new RegExp(`(['"])./${fileName}\\1`, "g");
content = content.replaceAll(regex, `$1${name}$1`);
}
fs.writeFileSync(filePath, content, "utf-8");
}
/**
* Injects the importmap in the document_head.hbs template, replacing the existing one
* @param {object} importMap
*/
function injectImportMap(importMap) {
const headTemplatePath = path.resolve("templates", "document_head.hbs");
const content = fs.readFileSync(headTemplatePath, "utf-8");
const importMapStart = content.indexOf(`<script type="importmap">`);
const importMapEnd = content.indexOf(`</script>`, importMapStart);
if (importMapStart === -1 || importMapEnd === -1) {
throw new Error(
`Cannot inject importmap in templates/document_head.hbs. Please provide an empty importmap like <script type="importmap"></script>`
);
}
const existingImportMap = content.substring(
importMapStart,
importMapEnd + `</script>`.length
);
const newImportMap = `<script type="importmap">
${JSON.stringify(importMap, null, 2)}
</script>`;
const newContent = content.replace(existingImportMap, newImportMap);
fs.writeFileSync(headTemplatePath, newContent, "utf-8");
}