Skip to content

Commit

Permalink
[#264] Adapt fixWebpackChunksIssue for CRAv2
Browse files Browse the repository at this point in the history
  • Loading branch information
stereobooster committed Nov 19, 2018
1 parent b2549ae commit 1025bda
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 9 deletions.
94 changes: 89 additions & 5 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ const defaultOptions = {
},
sourceMaps: true,
//# workarounds
fixWebpackChunksIssue: true,
// using CRA1 for compatibility with previous version will be changed to false in v2
fixWebpackChunksIssue: "CRA1",
removeBlobs: true,
fixInsertRule: true,
skipThirdPartyRequests: false,
Expand Down Expand Up @@ -107,6 +108,12 @@ const defaults = userOptions => {
console.log("🔥 asyncJs option renamed to asyncScriptTags");
options.asyncScriptTags = options.asyncJs;
}
if (options.fixWebpackChunksIssue === true) {
console.log(
"🔥 fixWebpackChunksIssue - behaviour changed, valid options are CRA1, CRA2, false"
);
options.fixWebpackChunksIssue = "CRA1";
}
if (
options.saveAs !== "html" &&
options.saveAs !== "png" &&
Expand Down Expand Up @@ -366,7 +373,7 @@ const asyncScriptTags = ({ page }) => {
});
};

const fixWebpackChunksIssue = ({
const fixWebpackChunksIssue1 = ({
page,
basePath,
http2PushManifest,
Expand All @@ -377,7 +384,7 @@ const fixWebpackChunksIssue = ({
const localScripts = Array.from(document.scripts).filter(
x => x.src && x.src.startsWith(basePath)
);
// CRA v1|v2
// CRA v1|v2.alpha
const mainRegexp = /main\.[\w]{8}.js|main\.[\w]{8}\.chunk\.js/;
const mainScript = localScripts.find(x => mainRegexp.test(x.src));
const firstStyle = document.querySelector("style");
Expand Down Expand Up @@ -427,6 +434,76 @@ const fixWebpackChunksIssue = ({
);
};

const fixWebpackChunksIssue2 = ({
page,
basePath,
http2PushManifest,
inlineCss
}) => {
return page.evaluate(
(basePath, http2PushManifest, inlineCss) => {
const localScripts = Array.from(document.scripts).filter(
x => x.src && x.src.startsWith(basePath)
);
// CRA v2
const mainRegexp = /main\.[\w]{8}\.chunk\.js/;
const mainScript = localScripts.find(x => mainRegexp.test(x.src));
const firstStyle = document.querySelector("style");

if (!mainScript) return;

const chunkRegexp = /(\w+)\.[\w]{8}\.chunk\.js/g;

const headScripts = Array.from(document.querySelectorAll("head script"))
.filter(x => x.src && x.src.startsWith(basePath))
.filter(x => {
const matched = chunkRegexp.exec(x.src);
// we need to reset state of RegExp https://stackoverflow.com/a/11477448
chunkRegexp.lastIndex = 0;
return matched;
});

const chunkScripts = localScripts.filter(x => {
const matched = chunkRegexp.exec(x.src);
// we need to reset state of RegExp https://stackoverflow.com/a/11477448
chunkRegexp.lastIndex = 0;
return matched;
});

const createLink = x => {
if (http2PushManifest) return;
const linkTag = document.createElement("link");
linkTag.setAttribute("rel", "preload");
linkTag.setAttribute("as", "script");
linkTag.setAttribute("href", x.src.replace(basePath, ""));
if (inlineCss) {
firstStyle.parentNode.insertBefore(linkTag, firstStyle);
} else {
document.head.appendChild(linkTag);
}
};

for (let i = headScripts.length; i <= chunkScripts.length - 1; i++) {
const x = chunkScripts[i];
if (x.parentElement && mainScript.parentNode) {
createLink(x);
}
}

for (let i = headScripts.length - 1; i >= 0; --i) {
const x = headScripts[i];
if (x.parentElement && mainScript.parentNode) {
x.parentElement.removeChild(x);
createLink(x);
}
}
},
basePath,
http2PushManifest,
inlineCss
);
};

const fixInsertRule = ({ page }) => {
return page.evaluate(() => {
Array.from(document.querySelectorAll("style")).forEach(style => {
Expand Down Expand Up @@ -626,8 +703,15 @@ const run = async (userOptions, { fs } = { fs: nativeFs }) => {
}
}
}
if (options.fixWebpackChunksIssue) {
await fixWebpackChunksIssue({
if (options.fixWebpackChunksIssue === "CRA2") {
await fixWebpackChunksIssue2({
page,
basePath,
http2PushManifest,
inlineCss: options.inlineCss
});
} else if (options.fixWebpackChunksIssue === "CRA1") {
await fixWebpackChunksIssue1({
page,
basePath,
http2PushManifest,
Expand Down
25 changes: 22 additions & 3 deletions run.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,33 @@

const url = require("url");
const { run } = require("./index.js");
const { reactSnap, homepage } = require(`${process.cwd()}/package.json`);
const {
reactSnap,
homepage,
devDependencies,
dependencies
} = require(`${process.cwd()}/package.json`);

const publicUrl = process.env.PUBLIC_URL || homepage;

const reactScriptsVersion = parseInt(
devDependencies["react-scripts"] || dependencies["react-scripts"]
);
let fixWebpackChunksIssue;
switch (reactScriptsVersion) {
case 1:
fixWebpackChunksIssue = "CRA1";
break;
case 2:
fixWebpackChunksIssue = "CRA2";
break;
}

run({
publicPath: publicUrl ? url.parse(publicUrl).pathname : "/",
fixWebpackChunksIssue,
...reactSnap
}).catch((error) => {
console.error(error)
}).catch(error => {
console.error(error);
process.exit(1);
});
2 changes: 1 addition & 1 deletion tests/__snapshots__/defaultOptions.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Object {
"destination": null,
"externalServer": false,
"fixInsertRule": true,
"fixWebpackChunksIssue": true,
"fixWebpackChunksIssue": "CRA1",
"headless": true,
"http2PushManifest": false,
"ignoreForPreload": Array [
Expand Down

0 comments on commit 1025bda

Please sign in to comment.