From ec3f3aa7729ec77f11fbb0f67def8130afa54c57 Mon Sep 17 00:00:00 2001 From: Jozsef Lazar <jozsef.gabor.lazar@gmail.com> Date: Mon, 23 Jan 2023 22:21:00 +0100 Subject: [PATCH] feat(remix-react): add `timeout` prop to `LiveReload` component (#4036) Co-authored-by: Pedro Cattori <pcattori@gmail.com> --- .changeset/wild-foxes-wait.md | 6 ++++++ packages/remix-react/__tests__/components-test.tsx | 8 ++++++++ packages/remix-react/components.tsx | 4 +++- 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 .changeset/wild-foxes-wait.md diff --git a/.changeset/wild-foxes-wait.md b/.changeset/wild-foxes-wait.md new file mode 100644 index 00000000000..df75c737988 --- /dev/null +++ b/.changeset/wild-foxes-wait.md @@ -0,0 +1,6 @@ +--- +"remix": patch +"@remix-run/react": patch +--- + +Configure the browser-side live reload socket timeout via the new `timeoutMs` prop on `<LiveReload />` diff --git a/packages/remix-react/__tests__/components-test.tsx b/packages/remix-react/__tests__/components-test.tsx index d3d76b99a5d..f9dcb330992 100644 --- a/packages/remix-react/__tests__/components-test.tsx +++ b/packages/remix-react/__tests__/components-test.tsx @@ -65,6 +65,14 @@ describe("<LiveReload />", () => { "let port = (window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 1234;" ); }); + + it("timeout of reload is set to 200ms", () => { + LiveReload = require("../components").LiveReload; + let { container } = render(<LiveReload timeoutMs={200} />); + expect(container.querySelector("script")).toHaveTextContent( + "setTimeout( () => remixLiveReloadConnect({ onOpen: () => window.location.reload(), }), 200 );" + ); + }); }); }); diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx index 31df2f30b9b..8075d402fdc 100644 --- a/packages/remix-react/components.tsx +++ b/packages/remix-react/components.tsx @@ -1536,9 +1536,11 @@ export const LiveReload = ? () => null : function LiveReload({ port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002), + timeoutMs = 1000, nonce = undefined, }: { port?: number; + timeoutMs?: number; /** * @deprecated this property is no longer relevant. */ @@ -1582,7 +1584,7 @@ export const LiveReload = remixLiveReloadConnect({ onOpen: () => window.location.reload(), }), - 1000 + ${String(timeoutMs)} ); } };