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

feat: allow to configure more client options via resource URL #4274

Merged
merged 20 commits into from Jul 25, 2022
Merged

feat: allow to configure more client options via resource URL #4274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f20f2ab
feat: allow to configure more `client` options via resource URL
snitin315 Feb 11, 2022
384431f
test: update snapshots
snitin315 Feb 11, 2022
388a4db
test: update snapshots
snitin315 Mar 3, 2022
fed7aa8
test: pudate snapshots
snitin315 Mar 6, 2022
d1009ac
test: update snapshots
snitin315 Apr 17, 2022
05bf122
test: update snapshots
snitin315 Apr 17, 2022
6a47e3e
test: enable skipped tests
snitin315 Apr 17, 2022
0211cf7
test: update snaps
snitin315 Apr 17, 2022
3ae5469
test: update webpack 4 snapshot
snitin315 Apr 17, 2022
696a8ce
fix: update log message
snitin315 May 14, 2022
815120d
fix: update log message
snitin315 May 14, 2022
4b83092
test: update snaps
snitin315 May 15, 2022
27223d8
test: fix
snitin315 May 15, 2022
d9ca58f
fix: lint
snitin315 May 15, 2022
3e56eff
fix: ci
snitin315 May 15, 2022
37201f9
test: update snpas webpack 4
snitin315 May 15, 2022
782d815
refactor: client logging
snitin315 Jul 24, 2022
985748b
fix: ci
snitin315 Jul 24, 2022
ac090d3
fix: test
snitin315 Jul 24, 2022
f6ea02a
test: update webpack 4 snaps
snitin315 Jul 24, 2022
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
42 changes: 34 additions & 8 deletions client-src/index.js
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ import stripAnsi from "./utils/stripAnsi.js";
import parseURL from "./utils/parseURL.js";
import socket from "./socket.js";
import { formatProblem, show, hide } from "./overlay.js";
import { log, setLogLevel } from "./utils/log.js";
import { log, logEnabledFeatures, setLogLevel } from "./utils/log.js";
import sendMessage from "./utils/sendMessage.js";
import reloadApp from "./utils/reloadApp.js";
import createSocketURL from "./utils/createSocketURL.js";
Expand Down Expand Up @@ -46,16 +46,44 @@ const options = {
};
const parsedResourceQuery = parseURL(__resourceQuery);

const enabledFeatures = {
"Hot Module Replacement": false,
"Live Reloading": false,
Progress: false,
Overlay: false,
};

if (parsedResourceQuery.hot === "true") {
options.hot = true;

log.info("Hot Module Replacement enabled.");
enabledFeatures["Hot Module Replacement"] = true;
}

if (parsedResourceQuery["live-reload"] === "true") {
options.liveReload = true;
enabledFeatures["Live Reloading"] = true;
}

log.info("Live Reloading enabled.");
if (parsedResourceQuery.progress === "true") {
options.progress = true;
enabledFeatures.Progress = true;
}

if (parsedResourceQuery.overlay) {
try {
options.overlay = JSON.parse(parsedResourceQuery.overlay);
} catch (e) {
log.error("Error parsing overlay options from resource query:", e);
}

// Fill in default "true" params for partially-specified objects.
if (typeof options.overlay === "object") {
options.overlay = {
errors: true,
warnings: true,
...options.overlay,
};
}
enabledFeatures.Overlay = true;
}

if (parsedResourceQuery.logging) {
Expand All @@ -66,6 +94,8 @@ if (typeof parsedResourceQuery.reconnect !== "undefined") {
options.reconnect = Number(parsedResourceQuery.reconnect);
}

logEnabledFeatures(enabledFeatures);

/**
* @param {string} level
*/
Expand All @@ -92,17 +122,13 @@ const onSocketMessage = {
}

options.hot = true;

log.info("Hot Module Replacement enabled.");
},
liveReload() {
if (parsedResourceQuery["live-reload"] === "false") {
return;
}

options.liveReload = true;

log.info("Live Reloading enabled.");
},
invalid() {
log.info("App updated. Recompiling...");
Expand Down
20 changes: 19 additions & 1 deletion client-src/utils/log.js
View file
Open in desktop
Expand Up @@ -18,4 +18,22 @@ setLogLevel(defaultLevel);

const log = logger.getLogger(name);

export { log, setLogLevel };
const logEnabledFeatures = (features) => {
const enabledFeatures = Object.entries(features);
if (!features || enabledFeatures.length === 0) {
return;
}

let logString = "Server started:";

// Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
for (const [key, value] of Object.entries(features)) {
logString += ` ${key} ${value ? "enabled" : "disabled"},`;
}
// replace last comma with a period
logString = logString.slice(0, -1).concat(".");

log.info(logString);
};

export { log, logEnabledFeatures, setLogLevel };
21 changes: 21 additions & 0 deletions lib/Server.js
View file
Open in desktop
Expand Up @@ -597,6 +597,19 @@ class Server {
searchParams.set("logging", client.logging);
}

if (typeof client.progress !== "undefined") {
searchParams.set("progress", String(client.progress));
}

if (typeof client.overlay !== "undefined") {
searchParams.set(
"overlay",
typeof client.overlay === "boolean"
? String(client.overlay)
: JSON.stringify(client.overlay)
);
}

if (typeof client.reconnect !== "undefined") {
searchParams.set(
"reconnect",
Expand All @@ -606,6 +619,14 @@ class Server {
);
}

if (typeof this.options.hot !== "undefined") {
searchParams.set("hot", String(this.options.hot));
}

if (typeof this.options.liveReload !== "undefined") {
searchParams.set("live-reload", String(this.options.liveReload));
}

webSocketURLStr = searchParams.toString();
}

Expand Down
4 changes: 0 additions & 4 deletions test/client/__snapshots__/index.test.js.snap.webpack4
View file
Open in desktop
Expand Up @@ -14,10 +14,6 @@ exports[`index should run onSocketMessage.close 2`] = `"Close"`;

exports[`index should run onSocketMessage.error 1`] = `"error!!"`;

exports[`index should run onSocketMessage.hot 1`] = `"Hot Module Replacement enabled."`;

exports[`index should run onSocketMessage.liveReload 1`] = `"Live Reloading enabled."`;

exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;

exports[`index should run onSocketMessage.ok 2`] = `
Expand Down
4 changes: 0 additions & 4 deletions test/client/__snapshots__/index.test.js.snap.webpack5
View file
Open in desktop
Expand Up @@ -14,10 +14,6 @@ exports[`index should run onSocketMessage.close 2`] = `"Close"`;

exports[`index should run onSocketMessage.error 1`] = `"error!!"`;

exports[`index should run onSocketMessage.hot 1`] = `"Hot Module Replacement enabled."`;

exports[`index should run onSocketMessage.liveReload 1`] = `"Live Reloading enabled."`;

exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;

exports[`index should run onSocketMessage.ok 2`] = `
Expand Down
71 changes: 57 additions & 14 deletions test/client/index.test.js
View file
Open in desktop
Expand Up @@ -25,6 +25,7 @@ describe("index", () => {
warn: jest.fn(),
error: jest.fn(),
},
logEnabledFeatures: jest.fn(),
setLogLevel: jest.fn(),
});

Expand Down Expand Up @@ -83,18 +84,6 @@ describe("index", () => {
expect(socket.mock.calls[0]).toMatchSnapshot();
});

test("should run onSocketMessage.hot", () => {
onSocketMessage.hot();

expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we removed these logs from onSocketMessage.hot() because otherwise, we would have duplicate logs spamming the console.

});

test("should run onSocketMessage.liveReload", () => {
onSocketMessage.liveReload();

expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
});

test("should run onSocketMessage['still-ok']", () => {
onSocketMessage["still-ok"]();

Expand Down Expand Up @@ -207,6 +196,60 @@ describe("index", () => {
expect(overlay.show).toBeCalled();
});

test("should parse overlay options from resource query", () => {
jest.isolateModules(() => {
// Pass JSON config with warnings disabled
global.__resourceQuery = `?overlay=${encodeURIComponent(
`{"warnings": false}`
)}`;
overlay.show.mockReset();
socket.mockReset();
jest.unmock("../../client-src/utils/parseURL.js");
require("../../client-src");
onSocketMessage = socket.mock.calls[0][1];

onSocketMessage.warnings(["warn1"]);
expect(overlay.show).not.toBeCalled();

onSocketMessage.errors(["error1"]);
expect(overlay.show).toBeCalledTimes(1);
});

jest.isolateModules(() => {
// Pass JSON config with errors disabled
global.__resourceQuery = `?overlay=${encodeURIComponent(
`{"errors": false}`
)}`;
overlay.show.mockReset();
socket.mockReset();
jest.unmock("../../client-src/utils/parseURL.js");
require("../../client-src");
onSocketMessage = socket.mock.calls[0][1];

onSocketMessage.errors(["error1"]);
expect(overlay.show).not.toBeCalled();

onSocketMessage.warnings(["warn1"]);
expect(overlay.show).toBeCalledTimes(1);
});

jest.isolateModules(() => {
// Use simple boolean
global.__resourceQuery = "?overlay=true";
jest.unmock("../../client-src/utils/parseURL.js");
socket.mockReset();
overlay.show.mockReset();
require("../../client-src");
onSocketMessage = socket.mock.calls[0][1];

onSocketMessage.warnings(["warn2"]);
expect(overlay.show).toBeCalledTimes(1);

onSocketMessage.errors(["error2"]);
expect(overlay.show).toBeCalledTimes(2);
});
});

test("should run onSocketMessage.error", () => {
onSocketMessage.error("error!!");

Expand All @@ -225,7 +268,7 @@ describe("index", () => {
onSocketMessage.hot();
onSocketMessage.close();

expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
});

Expand All @@ -234,7 +277,7 @@ describe("index", () => {
onSocketMessage.liveReload();
onSocketMessage.close();

expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
});

Expand Down