Convert template to Javascript

Shopify · Dec 4, 2024 · a387da6 · a387da6
1 parent d6eaa93
commit a387da6
Show file tree

Hide file tree

Showing 22 changed files with 24 additions and 890 deletions.
diff --git a/.graphqlrc.ts b/.graphqlrc.ts
diff --git a/app/db.server.ts b/app/db.server.ts
diff --git a/app/entry.server.jsx b/app/entry.server.jsx
@@ -5,7 +5,7 @@ import { createReadableStreamFromReadable } from "@remix-run/node";
 import { isbot } from "isbot";
 import { addDocumentResponseHeaders } from "./shopify.server";
 
-const ABORT_DELAY = 5000;
+export const streamTimeout = 5000;
 
 export default async function handleRequest(
   request,
@@ -19,11 +19,7 @@ export default async function handleRequest(
 
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <RemixServer context={remixContext} url={request.url} />,
       {
         [callbackName]: () => {
           const body = new PassThrough();
@@ -48,6 +44,8 @@ export default async function handleRequest(
       },
     );
 
-    setTimeout(abort, ABORT_DELAY);
+    // Automatically timeout the React renderer after 6 seconds, which ensures
+    // React has enough time to flush down the rejected boundary contents
+    setTimeout(abort, streamTimeout + 1000);
   });
 }
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
diff --git a/app/globals.d.ts b/app/globals.d.ts
diff --git a/app/root.tsx b/app/root.tsx
diff --git a/app/routes.ts → app/routes.js b/app/routes.ts → app/routes.js
diff --git a/app/routes/_index/route.jsx b/app/routes/_index/route.jsx
@@ -1,4 +1,4 @@
-import { json, redirect } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
 import { login } from "../../shopify.server";
 import styles from "./styles.module.css";
@@ -10,7 +10,7 @@ export const loader = async ({ request }) => {
     throw redirect(`/app?${url.searchParams.toString()}`);
   }
 
-  return json({ showForm: Boolean(login) });
+  return { showForm: Boolean(login) };
 };
 
 export default function App() {

diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
diff --git a/app/routes/app._index.jsx b/app/routes/app._index.jsx
@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { json } from "@remix-run/node";
 import { useFetcher } from "@remix-run/react";
 import {
   Page,
@@ -81,10 +80,10 @@ export const action = async ({ request }) => {
   );
   const variantResponseJson = await variantResponse.json();
 
-  return json({
+  return {
     product: responseJson.data.productCreate.product,
     variant: variantResponseJson.data.productVariantsBulkUpdate.productVariants,
-  });
+  };
 };
 
 export default function Index() {