87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
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");
|
|
}
|