Repository: remix-run/remix
Pull request #6965 (2023-07-26 15:18:15)

refactor!(dev,react): remove deprecated REMIX_DEV_SERVER_WS_PORT env var
<!--

👋 Hey, thanks for your interest in contributing to Remix!

If this is a simple docs change, go ahead and delete all this.

**Please ask first before starting work on any significant new features.**

It's never a fun experience to have your pull request declined after investing a
lot of time and effort into a new feature. To avoid this from happening, we
request that contributors create a
[Feature Request discussion](https://github.com/remix-run/remix/discussions/new?category=ideas)
to first discuss any significant new features.

https://github.com/remix-run/remix/blob/main/CONTRIBUTING.md

Please fill in or delete each item below:

-->

Closes: #

- [ ] Docs
- [ ] Tests

Testing Strategy:

<!--
Please explain how you tested this. For example:

> This test covers this code: <link to test>

Or

> I opened up my windows machine and ran this script:
>
> ```
> npx create-remix@0.0.0-experimental-7e420ee3 --template remix my-test
> cd my-test
> npm run dev
> ```
-->


changeset-bot[bot]: ###  🦋  Changeset detected

Latest commit: 73745d9e954de779110c9b81bd28fa96bc31a1f1

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 18 packages</summary>

  | Name                          | Type  |
| ----------------------------- | ----- |
| @remix-run/dev                | Major |
| @remix-run/react              | Major |
| @remix-run/testing            | Major |
| create-remix                  | Major |
| remix                         | Major |
| @remix-run/architect          | Major |
| @remix-run/cloudflare         | Major |
| @remix-run/cloudflare-pages   | Major |
| @remix-run/cloudflare-workers | Major |
| @remix-run/css-bundle         | Major |
| @remix-run/deno               | Major |
| @remix-run/eslint-config      | Major |
| @remix-run/express            | Major |
| @remix-run/netlify            | Major |
| @remix-run/node               | Major |
| @remix-run/serve              | Major |
| @remix-run/server-runtime     | Major |
| @remix-run/vercel             | Major |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/remix-run/remix/new/pedro/v2-remove-REMIX_DEV_SERVER_WS_PORT?filename=.changeset/moody-rockets-explode.md&value=---%0A%22remix%22%3A%20patch%0A%22%40remix-run%2Fdev%22%3A%20patch%0A%22%40remix-run%2Freact%22%3A%20patch%0A---%0A%0Arefactor!(dev%2Creact)%3A%20remove%20deprecated%20REMIX_DEV_SERVER_WS_PORT%20env%20var%0A)



Patch:
diff --git a/.changeset/moody-pants-laugh.md b/.changeset/moody-pants-laugh.md
new file mode 100644
index 000000000..640ba1b9a
--- /dev/null
+++ b/.changeset/moody-pants-laugh.md
@@ -0,0 +1,8 @@
+---
+"@remix-run/dev": major
+"@remix-run/react": major
+---
+
+remove deprecated REMIX_DEV_SERVER_WS_PORT env var
+
+use `remix dev`'s '`--port`/`port` option instead
diff --git a/packages/remix-dev/compiler/js/compiler.ts b/packages/remix-dev/compiler/js/compiler.ts
index 96ce26d6b..569a60ecb 100644
--- a/packages/remix-dev/compiler/js/compiler.ts
+++ b/packages/remix-dev/compiler/js/compiler.ts
@@ -138,10 +138,6 @@ const createEsbuildConfig = (
       "process.env.REMIX_DEV_ORIGIN": JSON.stringify(
         ctx.options.REMIX_DEV_ORIGIN ?? ""
       ),
-      // TODO: remove in v2
-      "process.env.REMIX_DEV_SERVER_WS_PORT": JSON.stringify(
-        ctx.config.devServerPort
-      ),
       ...(ctx.options.mode === "production"
         ? {
             "import.meta.hot": "undefined",
diff --git a/packages/remix-dev/compiler/server/compiler.ts b/packages/remix-dev/compiler/server/compiler.ts
index 0d8832823..651a70645 100644
--- a/packages/remix-dev/compiler/server/compiler.ts
+++ b/packages/remix-dev/compiler/server/compiler.ts
@@ -108,10 +108,6 @@ const createEsbuildConfig = (
     publicPath: ctx.config.publicPath,
     define: {
       "process.env.NODE_ENV": JSON.stringify(ctx.options.mode),
-      // TODO: remove in v2
-      "process.env.REMIX_DEV_SERVER_WS_PORT": JSON.stringify(
-        ctx.config.devServerPort
-      ),
       "process.env.REMIX_DEV_ORIGIN": JSON.stringify(
         ctx.options.REMIX_DEV_ORIGIN ?? ""
       ),
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index f4c6945a0..8cf476356 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -1308,10 +1308,6 @@ export const LiveReload =
                   url.port =
                     ${port} ||
                     REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port :
-                    Number(${
-                      // TODO: remove in v2
-                      process.env.REMIX_DEV_SERVER_WS_PORT
-                    }) ||
                     8002;
 
                   let ws = new WebSocket(url.href);


Test patch:
diff --git a/packages/remix-react/__tests__/components-test.tsx b/packages/remix-react/__tests__/components-test.tsx
index 616a7de3c..2f8435156 100644
--- a/packages/remix-react/__tests__/components-test.tsx
+++ b/packages/remix-react/__tests__/components-test.tsx
@@ -47,22 +47,14 @@ describe("<LiveReload />", () => {
       LiveReload = require("../components").LiveReload;
       let { container } = render(<LiveReload />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "url.port = undefined || REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port : Number(undefined) || 8002;"
+        "url.port = undefined || REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port : 8002;"
       );
     });
 
     it("can set the port explicitly", () => {
       let { container } = render(<LiveReload port={4321} />);
       expect(container.querySelector("script")).toHaveTextContent(
-        "url.port = 4321 || REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port : Number(undefined) || 8002;"
-      );
-    });
-
-    it("determines the right port based on REMIX_DEV_SERVER_WS_PORT env variable", () => {
-      process.env.REMIX_DEV_SERVER_WS_PORT = "1234";
-      let { container } = render(<LiveReload />);
-      expect(container.querySelector("script")).toHaveTextContent(
-        "url.port = undefined || REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port : Number(1234) || 8002;"
+        "url.port = 4321 || REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port : 8002;"
       );
     });