Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: enable magic HTML routes for module output #3773

Closed
wants to merge 18 commits into from
Closed

fix: enable magic HTML routes for module output #3773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4015b8c
fix: magic HTML routes with `.mjs` output
snitin315 Sep 1, 2021
1f6cd95
test: add case for .mjs output
snitin315 Sep 1, 2021
f53dfd7
fix: improve logic and cover more cases
snitin315 Sep 2, 2021
8bd552b
fix: improve logic and cover more cases
snitin315 Sep 2, 2021
ffef6c9
test: add more cases
snitin315 Sep 2, 2021
0257c20
refactor: code
snitin315 Sep 2, 2021
1393517
test: webpack-4
snitin315 Sep 2, 2021
16c89ad
refactor: code
snitin315 Sep 2, 2021
4e172a6
refactor: code
snitin315 Sep 2, 2021
f86be39
refactor: code
snitin315 Sep 2, 2021
b122f60
fix: typo
snitin315 Sep 2, 2021
beb009e
refactor: code
snitin315 Sep 4, 2021
128a537
test: multi compiler mode
snitin315 Sep 5, 2021
8ad1800
test: update snaps
snitin315 Sep 13, 2021
cb016a9
fix: import
snitin315 Sep 15, 2021
2581cb3
fix: compatibility with multicompiler mode
snitin315 Sep 21, 2021
ac6888f
refactor: remove console.log
snitin315 Sep 22, 2021
512a3d7
refactor: code
snitin315 Sep 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 34 additions & 2 deletions lib/Server.js
View file
Open in desktop
Expand Up @@ -1983,7 +1983,39 @@ class Server {
const _path = req.path;

try {
const filename = this.middleware.getFilenameFromUrl(`${_path}.js`);
let filename;
let extension;
let scriptType;

// _path = "/main" -> outputFilename = "main"
// _path = "/main.other" -> outputFilename = "main.other"
const outputFilename = _path.slice(1);

let isOutputModule = false;

const stats = this.stats.stats ? this.stats.stats : [this.stats];

for (const item of stats) {
for (const [key, value] of item.compilation.assetsInfo) {
const assetExtension = path.extname(key);
const assetBasename = path.basename(key, assetExtension);

if (assetBasename === outputFilename) {
extension = assetExtension;
isOutputModule = value.javascriptModule;
}
}
}

if (isOutputModule) {
filename = this.middleware.getFilenameFromUrl(`${_path}${extension}`);
scriptType = "module";
} else {
extension = ".js";
filename = this.middleware.getFilenameFromUrl(`${_path}${extension}`);
scriptType = "text/javascript";
}

const isFile = this.middleware.context.outputFileSystem
.statSync(filename)
.isFile();
Expand All @@ -1994,7 +2026,7 @@ class Server {

// Serve a page that executes the javascript
const queries = req._parsedUrl.search || "";
const responsePage = `<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="text/javascript" charset="utf-8" src="${_path}.js${queries}"></script></body></html>`;
const responsePage = `<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="${scriptType}" charset="utf-8" src="${_path}${extension}${queries}"></script></body></html>`;

res.send(responsePage);
} catch (error) {
Expand Down
198 changes: 182 additions & 16 deletions test/e2e/__snapshots__/magic-html.test.js.snap.webpack4
View file
Open in desktop
@@ -1,30 +1,192 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`magicHtml option disabled should not handle GET request to magic async html: console messages 1`] = `
exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): console messages 1`] = `
Array [
"Failed to load resource: the server responded with a status of 404 (Not Found)",
]
`;

exports[`magicHtml option disabled should not handle GET request to magic async html: page errors 1`] = `Array []`;
exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): page errors 1`] = `Array []`;

exports[`magicHtml option disabled should not handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option disabled should not handle GET request to magic async html: response status 1`] = `404`;
exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response status 1`] = `404`;

exports[`magicHtml option disabled should not handle HEAD request to magic async html: console messages 1`] = `
exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response text 1`] = `
"<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta charset=\\"utf-8\\">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /bundle</pre>
</body>
</html>
"
`;

exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): console messages 1`] = `
Array [
"Failed to load resource: the server responded with a status of 404 (Not Found)",
]
`;

exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`;

exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response status 1`] = `404`;

exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response text 1`] = `""`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = `
Array [
"Failed to load resource: the server responded with a status of 404 (Not Found)",
]
`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = `
"<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta charset=\\"utf-8\\">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /bundle</pre>
</body>
</html>
"
`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = `
Array [
"Failed to load resource: the server responded with a status of 404 (Not Found)",
]
`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`;

exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = `
"<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta charset=\\"utf-8\\">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /bundle.other</pre>
</body>
</html>
"
`;

exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): console messages 1`] = `
Array [
"Failed to load resource: the server responded with a status of 404 (Not Found)",
]
`;

exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`;

exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response status 1`] = `404`;

exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`;

exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = `
Array [
"[HMR] Waiting for update signal from WDS...",
"Hey.",
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
]
`;

exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`;

exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `200`;

exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = `"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/bundle.js\\"></script></body></html>"`;

exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`;

exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`;

exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `200`;

exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`;

exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = `
Array [
"[HMR] Waiting for update signal from WDS...",
"Hey.",
"[webpack-dev-server] Hot Module Replacement enabled.",
"[webpack-dev-server] Live Reloading enabled.",
]
`;

exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`;

exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `200`;

exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = `"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/bundle.other.js\\"></script></body></html>"`;

exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): console messages 1`] = `Array []`;

exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`;

exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response status 1`] = `200`;

exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`;

exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = `
Array [
"Failed to load resource: the server responded with a status of 404 (Not Found)",
]
`;

exports[`magicHtml option disabled should not handle HEAD request to magic async html: page errors 1`] = `Array []`;
exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`;

exports[`magicHtml option disabled should not handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option disabled should not handle HEAD request to magic async html: response status 1`] = `404`;
exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`;

exports[`magicHtml option enabled should handle GET request to magic async html: console messages 1`] = `
exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = `
"<!DOCTYPE html>
<html lang=\\"en\\">
<head>
<meta charset=\\"utf-8\\">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /bundle</pre>
</body>
</html>
"
`;

exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = `
Array [
"[HMR] Waiting for update signal from WDS...",
"Hey.",
Expand All @@ -33,16 +195,20 @@ Array [
]
`;

exports[`magicHtml option enabled should handle GET request to magic async html: page errors 1`] = `Array []`;
exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`;

exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`;

exports[`magicHtml option enabled should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script></body></html>"`;

exports[`magicHtml option enabled should handle GET request to magic async html: response status 1`] = `200`;
exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`;

exports[`magicHtml option enabled should handle HEAD request to magic async html: console messages 1`] = `Array []`;
exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`;

exports[`magicHtml option enabled should handle HEAD request to magic async html: page errors 1`] = `Array []`;
exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`;

exports[`magicHtml option enabled should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`;

exports[`magicHtml option enabled should handle HEAD request to magic async html: response status 1`] = `200`;
exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`;