Merge branch 'dev' into allow-private-github-repos-latest-release

.changeset/many-gorillas-mix.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+Add proxy support to `create-remix` cli

contributors.yml

@@ -126,6 +126,7 @@
 - fgiuliani
 - fishel-feng
 - francisudeji
+- freeman
 - frontsideair
 - fx109138
 - gabimor

integration/helpers/node-template/app/entry.client.tsx

@@ -1,4 +1,22 @@
 import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1);
+}

integration/helpers/node-template/app/entry.server.tsx

@@ -2,6 +2,7 @@ import { PassThrough } from "stream";
 import type { EntryContext } from "@remix-run/node";
 import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
+import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
 const ABORT_DELAY = 5000;
@@ -11,14 +12,76 @@ export default function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
+) {
+  return isbot(request.headers.get("user-agent"))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    let { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onAllReady() {
+          let body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let didError = false;
 
     let { pipe, abort } = renderToPipeableStream(
       <RemixServer context={remixContext} url={request.url} />,
       {
-        onShellReady: () => {
+        onShellReady() {
           let body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
@@ -32,10 +95,10 @@ export default function handleRequest(
 
           pipe(body);
         },
-        onShellError: (err) => {
+        onShellError(err: unknown) {
           reject(err);
         },
-        onError: (error) => {
+        onError(error: unknown) {
           didError = true;
 
           console.error(error);

integration/helpers/node-template/package.json

@@ -11,6 +11,7 @@
     "@remix-run/node": "0.0.0-local-version",
     "@remix-run/react": "0.0.0-local-version",
     "@remix-run/serve": "0.0.0-local-version",
+    "isbot": "0.0.0-local-version",
     "react": "0.0.0-local-version",
     "react-dom": "0.0.0-local-version"
   },

package.json

@@ -97,6 +97,7 @@
     "eslint-plugin-prefer-let": "^3.0.1",
     "express": "^4.17.1",
     "glob": "8.0.3",
+    "isbot": "^3.5.1",
     "jest": "^27.5.1",
     "jest-watch-select-projects": "^2.0.0",
     "jest-watch-typeahead": "^0.6.5",

packages/remix-dev/__tests__/create-test.ts

@@ -812,6 +812,36 @@ describe("the create command", () => {
       process.chdir(cwd);
     });
   });
+
+  describe("supports proxy usage", () => {
+    beforeAll(() => {
+      server.close();
+    });
+    afterAll(() => {
+      server.listen({ onUnhandledRequest: "error" });
+    });
+    it("uses the proxy from env var", async () => {
+      let projectDir = await getProjectDir("template");
+      let err: Error | undefined;
+      let prevProxy = process.env.HTTPS_PROXY;
+      try {
+        process.env.HTTPS_PROXY = "http://127.0.0.1:33128";
+        await run([
+          "create",
+          projectDir,
+          "--template",
+          "grunge-stack",
+          "--no-install",
+          "--typescript",
+        ]);
+      } catch (e) {
+        err = e;
+      } finally {
+        process.env.HTTPS_PROXY = prevProxy;
+      }
+      expect(err?.message).toMatch("127.0.0.1:33");
+    });
+  });
 });
 
 function getSuccessMessage(projectDirectory: string) {

packages/remix-dev/cli/create.ts

@@ -7,6 +7,7 @@ import fse from "fs-extra";
 import gunzip from "gunzip-maybe";
 import fetch from "node-fetch";
 import ora from "ora";
+import ProxyAgent from "proxy-agent";
 import * as semver from "semver";
 import sortPackageJSON from "sort-package-json";
 import tar from "tar-fs";
@@ -18,6 +19,12 @@ import { getPreferredPackageManager } from "./getPreferredPackageManager";
 import { convertToJavaScript } from "./migrate/migrations/convert-to-javascript";
 
 const remixDevPackageVersion = packageJson.version;
+const defaultAgent = new ProxyAgent();
+const httpsAgent = new ProxyAgent();
+httpsAgent.protocol = "https:";
+function agent(url: string) {
+  return new URL(url).protocol === "https:" ? httpsAgent : defaultAgent;
+}
 
 interface CreateAppArgs {
   appTemplate: string;
@@ -306,7 +313,10 @@ async function downloadAndExtractTarball(
         ? `https://api.github.com/repos/${info.owner}/${info.name}/releases/latest`
         : `https://api.github.com/repos/${info.owner}/${info.name}/releases/tags/${info.tag}`;
 
-    let response = await fetch(releaseUrl, { headers });
+    let response = await fetch(releaseUrl, {
+      agent: agent("https://api.github.com"),
+      headers,
+    });
 
     if (response.status !== 200) {
       throw Error(
@@ -331,7 +341,10 @@ async function downloadAndExtractTarball(
     resourceUrl = `https://api.github.com/repos/${info.owner}/${info.name}/releases/assets/${assetId}`;
     headers.Accept = "application/octet-stream";
   }
-  let response = await fetch(resourceUrl, { headers });
+  let response = await fetch(resourceUrl, {
+    agent: agent(resourceUrl),
+    headers,
+  });
 
   if (response.status !== 200) {
     if (token) {
@@ -613,7 +626,11 @@ export async function validateTemplate(
       }
       let response;
       try {
-        response = await fetch(apiUrl, { method, headers });
+        response = await fetch(apiUrl, {
+          agent: agent(apiUrl),
+          method,
+          headers,
+        });
       } catch (_) {
         throw Error(
           "🚨 There was a problem verifying the template file. Please ensure " +
@@ -683,7 +700,11 @@ export async function validateTemplate(
             Authorization: `token ${options.githubToken}`,
           };
         }
-        response = await fetch(apiUrl, { method, headers });
+        response = await fetch(apiUrl, {
+          agent: agent(apiUrl),
+          method,
+          headers,
+        });
       } catch (_) {
         throw Error(
           "🚨 There was a problem fetching the template. Please ensure you " +
@@ -756,7 +777,10 @@ export async function validateTemplate(
       let templateUrl = `${repoBaseUrl}/${name}`;
       let response;
       try {
-        response = await fetch(templateUrl, { method: "HEAD" });
+        response = await fetch(templateUrl, {
+          agent: agent(templateUrl),
+          method: "HEAD",
+        });
       } catch (_) {
         throw Error(
           "🚨 There was a problem verifying the template. Please ensure you are " +

packages/remix-dev/package.json

@@ -49,6 +49,7 @@
     "ora": "^5.4.1",
     "prettier": "2.7.1",
     "pretty-ms": "^7.0.1",
+    "proxy-agent": "^5.0.0",
     "remark-frontmatter": "4.0.1",
     "remark-mdx-frontmatter": "^1.0.1",
     "semver": "^7.3.7",

packages/remix-react/components.tsx

@@ -865,6 +865,11 @@ import(${JSON.stringify(manifest.entry.module)});`;
 
   return (
     <>
+      <link
+        rel="modulepreload"
+        href={manifest.url}
+        crossOrigin={props.crossOrigin}
+      />
       <link
         rel="modulepreload"
         href={manifest.entry.module}