From e97c9c37eb4cacc1076ef756fe103f3f4c09436f Mon Sep 17 00:00:00 2001 From: atridadl Date: Fri, 24 Nov 2023 22:44:10 -0700 Subject: [PATCH 1/2] Client/server separation --- app/routes/dashboard.tsx | 2 +- app/routes/room.$roomId.tsx | 10 +++++++--- app/services/{consts.ts => consts.server.ts} | 0 app/services/{helpers.ts => helpers.client.ts} | 0 app/services/{types.ts => types.client.ts} | 9 +-------- 5 files changed, 9 insertions(+), 12 deletions(-) rename app/services/{consts.ts => consts.server.ts} (100%) rename app/services/{helpers.ts => helpers.client.ts} (100%) rename app/services/{types.ts => types.client.ts} (83%) diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx index 78b38e8..1020e78 100644 --- a/app/routes/dashboard.tsx +++ b/app/routes/dashboard.tsx @@ -6,7 +6,7 @@ import { useState } from "react"; import LoadingIndicator from "~/components/LoadingIndicator"; import { useEventSource } from "remix-utils/sse/react"; import { useUser } from "@clerk/remix"; -import { isAdmin, isVIP } from "~/services/helpers"; +import { isAdmin, isVIP } from "~/services/helpers.client"; export const loader: LoaderFunction = async (args) => { const { userId } = await getAuth(args); diff --git a/app/routes/room.$roomId.tsx b/app/routes/room.$roomId.tsx index 1d405d8..a1510ad 100644 --- a/app/routes/room.$roomId.tsx +++ b/app/routes/room.$roomId.tsx @@ -17,13 +17,17 @@ import { import { useEffect, useState } from "react"; import LoadingIndicator from "~/components/LoadingIndicator"; import { useEventSource } from "remix-utils/sse/react"; -import { PresenceItem, RoomResponse, VoteResponse } from "~/services/types"; -import { isAdmin, jsonToCsv } from "~/services/helpers"; +import { + PresenceItem, + RoomResponse, + VoteResponse, +} from "~/services/types.client"; +import { isAdmin, jsonToCsv } from "~/services/helpers.client"; import { useUser } from "@clerk/remix"; import { db } from "~/services/db.server"; import { rooms } from "~/services/schema"; import { eq } from "drizzle-orm"; -import { shitList } from "~/services/consts"; +import { shitList } from "~/services/consts.server"; // Loader export const loader: LoaderFunction = async (args) => { diff --git a/app/services/consts.ts b/app/services/consts.server.ts similarity index 100% rename from app/services/consts.ts rename to app/services/consts.server.ts diff --git a/app/services/helpers.ts b/app/services/helpers.client.ts similarity index 100% rename from app/services/helpers.ts rename to app/services/helpers.client.ts diff --git a/app/services/types.ts b/app/services/types.client.ts similarity index 83% rename from app/services/types.ts rename to app/services/types.client.ts index 3c6c2d7..28ed460 100644 --- a/app/services/types.ts +++ b/app/services/types.client.ts @@ -1,11 +1,4 @@ -type BetterEnum = T[keyof T]; - -export const EventTypes = { - ROOM_LIST_UPDATE: "room.list.update", - ROOM_UPDATE: "room.update", - VOTE_UPDATE: "vote.update", -} as const; -export type EventType = BetterEnum; +// type BetterEnum = T[keyof T]; export interface PresenceItem { id: string; From c4f163dee0d31d3e1c636cd4221cf77e8d5fbc22 Mon Sep 17 00:00:00 2001 From: atridadl Date: Fri, 24 Nov 2023 22:57:29 -0700 Subject: [PATCH 2/2] Removed these weird files --- app/entry.client.tsx | 18 ------ app/entry.server.tsx | 137 ------------------------------------------- 2 files changed, 155 deletions(-) delete mode 100644 app/entry.client.tsx delete mode 100644 app/entry.server.tsx diff --git a/app/entry.client.tsx b/app/entry.client.tsx deleted file mode 100644 index 94d5dc0..0000000 --- a/app/entry.client.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/** - * By default, Remix will handle hydrating your app on the client for you. - * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ - * For more information, see https://remix.run/file-conventions/entry.client - */ - -import { RemixBrowser } from "@remix-run/react"; -import { startTransition, StrictMode } from "react"; -import { hydrateRoot } from "react-dom/client"; - -startTransition(() => { - hydrateRoot( - document, - - - - ); -}); diff --git a/app/entry.server.tsx b/app/entry.server.tsx deleted file mode 100644 index 0c7712b..0000000 --- a/app/entry.server.tsx +++ /dev/null @@ -1,137 +0,0 @@ -/** - * By default, Remix will handle generating the HTTP Response for you. - * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ - * For more information, see https://remix.run/file-conventions/entry.server - */ - -import { PassThrough } from "node:stream"; - -import type { AppLoadContext, EntryContext } from "@remix-run/node"; -import { createReadableStreamFromReadable } from "@remix-run/node"; -import { RemixServer } from "@remix-run/react"; -import isbot from "isbot"; -import { renderToPipeableStream } from "react-dom/server"; - -const ABORT_DELAY = 5_000; - -export default function handleRequest( - request: Request, - responseStatusCode: number, - responseHeaders: Headers, - remixContext: EntryContext, - loadContext: AppLoadContext -) { - 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 shellRendered = false; - const { pipe, abort } = renderToPipeableStream( - , - { - onAllReady() { - shellRendered = true; - const body = new PassThrough(); - const stream = createReadableStreamFromReadable(body); - - responseHeaders.set("Content-Type", "text/html"); - - resolve( - new Response(stream, { - headers: responseHeaders, - status: responseStatusCode, - }) - ); - - pipe(body); - }, - onShellError(error: unknown) { - reject(error); - }, - onError(error: unknown) { - responseStatusCode = 500; - // Log streaming rendering errors from inside the shell. Don't log - // errors encountered during initial shell rendering since they'll - // reject and get logged in handleDocumentRequest. - if (shellRendered) { - console.error(error); - } - }, - } - ); - - setTimeout(abort, ABORT_DELAY); - }); -} - -function handleBrowserRequest( - request: Request, - responseStatusCode: number, - responseHeaders: Headers, - remixContext: EntryContext -) { - return new Promise((resolve, reject) => { - let shellRendered = false; - const { pipe, abort } = renderToPipeableStream( - , - { - onShellReady() { - shellRendered = true; - const body = new PassThrough(); - const stream = createReadableStreamFromReadable(body); - - responseHeaders.set("Content-Type", "text/html"); - - resolve( - new Response(stream, { - headers: responseHeaders, - status: responseStatusCode, - }) - ); - - pipe(body); - }, - onShellError(error: unknown) { - reject(error); - }, - onError(error: unknown) { - responseStatusCode = 500; - // Log streaming rendering errors from inside the shell. Don't log - // errors encountered during initial shell rendering since they'll - // reject and get logged in handleDocumentRequest. - if (shellRendered) { - console.error(error); - } - }, - } - ); - - setTimeout(abort, ABORT_DELAY); - }); -}