hydrogen-web/scripts/build-plugins/legacy-build.js

138 lines
4.5 KiB
JavaScript

const { build } = require("vite");
const path = require("path");
let babel; // big import, only do so when used below
const VIRTUAL_ENTRY = "hydrogen:legacy-entry";
module.exports = function legacyBuild(entryModuleId, entryImportReplacements, chunkName, extraImports) {
let parentRoot;
let code;
let legacyBundleFileName;
return {
name: "hydrogen:legacyBuild",
apply: "build",
configResolved: config => {
parentRoot = config.root;
},
async moduleParsed(info) {
if (info.id === entryModuleId) {
code = info.code;
}
},
async buildEnd() {
if (!code) {
throw new Error("couldnt find entry");
}
for (const [importSource, newImportSource] of Object.entries(entryImportReplacements)) {
code = replaceImport(this, code, importSource, newImportSource);
}
code = addExtraImports(code, extraImports);
const mainChunk = await buildLegacyChunk(parentRoot, chunkName, code);
this.emitFile({
type: "asset",
source: mainChunk.code,
fileName: mainChunk.fileName,
name: mainChunk.name
});
legacyBundleFileName = mainChunk.fileName;
},
transformIndexHtml: {
transform(html) {
if (!legacyBundleFileName) {
throw new Error("no bundle");
}
return [{
tag: "script",
attrs: {type: "text/javascript", nomodule: true, src: legacyBundleFileName},
injectTo: "head"
}];
},
},
}
}
function replaceImport(pluginCtx, code, importSource, newImportSource) {
const ast = pluginCtx.parse(code);
for (const node of ast.body) {
if (node.type === "ImportDeclaration") {
const sourceNode = node.source;
if (sourceNode.value === importSource) {
code = code.substr(0, sourceNode.start) + JSON.stringify(newImportSource) + code.substr(sourceNode.end);
return code;
}
}
}
throw new Error(`Could not find import ${JSON.stringify(importSource)} to replace`);
}
function addExtraImports(code, extraImports) {
return extraImports.map(i => `import ${JSON.stringify(i)};`).join("\n") + code;
}
async function buildLegacyChunk(root, chunkName, code) {
if (!babel) {
babel = require('@rollup/plugin-babel');
}
// compile down to whatever IE 11 needs
const babelPlugin = babel.babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs: "3.4",
targets: "IE 11",
// we provide our own promise polyfill (es6-promise)
// with support for synchronous flushing of
// the queue for idb where needed
exclude: ["es.promise", "es.promise.all-settled", "es.promise.finally"]
}
]
]
});
babelPlugin.enforce = "post";
const bundle = await build({
root,
configFile: false,
logLevel: 'error',
build: {
write: false,
target: false,
minify: true,
assetsInlineLimit: 0,
polyfillModulePreload: false,
rollupOptions: {
input: {
[chunkName]: VIRTUAL_ENTRY
},
output: {
format: "iife",
manualChunks: undefined
}
},
},
plugins: [
{
name: "hydrogen:resolve-legacy-entry",
resolveId(id, importer) {
if (id === VIRTUAL_ENTRY) {
return id;
} else if (importer === VIRTUAL_ENTRY && id.startsWith("./")) {
return this.resolve(path.join(root, id));
}
},
load(id) {
if (id === VIRTUAL_ENTRY) {
return code;
}
}
},
babelPlugin
]
});
const assets = Array.isArray(bundle.output) ? bundle.output : [bundle.output];
const mainChunk = assets.find(a => a.name === chunkName);
return mainChunk;
}