remix-run · kentcdodds · Apr 12, 2022 · Apr 5, 2022 · Apr 5, 2022 · Apr 5, 2022
diff --git a/.eslintignore b/.eslintignore
@@ -5,3 +5,4 @@
 templates/deno
 .tmp
 /playground
+**/__tests__/fixtures
diff --git a/packages/remix-dev/__tests__/cli-test.ts b/packages/remix-dev/__tests__/cli-test.ts
@@ -89,6 +89,7 @@ describe("remix CLI", () => {
           \`routes\` Options:
             --json              Print the routes as JSON
           \`migrate\` Options:
+            --debug             Show debugging logs
             --dry               Dry run (no changes are made to files)
             --force             Bypass Git safety checks and forcibly run migration
             --migration, -m     Name of the migration to run

diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/db.server.ts b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/db.server.ts
@@ -0,0 +1,22 @@
+import { PrismaClient } from "@prisma/client";
+
+let prisma: PrismaClient;
+
+declare global {
+  var __db__: PrismaClient;
+}
+
+// this is needed because in development we don't want to restart
+// the server with every change, but we want to make sure we don't
+// create a new connection to the DB with every change either.
+// in production we'll have a single connection to the DB.
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient();
+} else {
+  if (!global.__db__) {
+    global.__db__ = new PrismaClient();
+  }
+  prisma = global.__db__;
+}
+
+export { prisma };
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/entry.client.tsx b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/entry.server.tsx b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/models/note.server.ts b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/models/note.server.ts
@@ -0,0 +1,53 @@
+import type { User, Note } from "@prisma/client";
+
+import { prisma } from "~/db.server";
+
+export type { Note } from "@prisma/client";
+
+export function getNote({
+  id,
+  userId,
+}: Pick<Note, "id"> & {
+  userId: User["id"];
+}) {
+  return prisma.note.findFirst({
+    where: { id, userId },
+  });
+}
+
+export function getNoteListItems({ userId }: { userId: User["id"] }) {
+  return prisma.note.findMany({
+    where: { userId },
+    select: { id: true, title: true },
+    orderBy: { updatedAt: "desc" },
+  });
+}
+
+export function createNote({
+  body,
+  title,
+  userId,
+}: Pick<Note, "body" | "title"> & {
+  userId: User["id"];
+}) {
+  return prisma.note.create({
+    data: {
+      title,
+      body,
+      user: {
+        connect: {
+          id: userId,
+        },
+      },
+    },
+  });
+}
+
+export function deleteNote({
+  id,
+  userId,
+}: Pick<Note, "id"> & { userId: User["id"] }) {
+  return prisma.note.deleteMany({
+    where: { id, userId },
+  });
+}
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/models/post.server.ts b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/models/post.server.ts
@@ -0,0 +1,17 @@
+import { prisma } from "~/db.server";
+import type { Post } from "@prisma/client";
+export type { Post };
+
+export async function getPosts() {
+  return prisma.post.findMany();
+}
+
+export async function getPost(slug: string) {
+  return prisma.post.findUnique({ where: { slug } });
+}
+
+export async function createPost(
+  post: Pick<Post, "slug" | "title" | "markdown">
+) {
+  return prisma.post.create({ data: post });
+}
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/models/user.server.ts b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/models/user.server.ts
@@ -0,0 +1,59 @@
+import type { Password, User } from "@prisma/client";
+import bcrypt from "@node-rs/bcrypt";
+
+import { prisma } from "~/db.server";
+
+export type { User } from "@prisma/client";
+
+export async function getUserById(id: User["id"]) {
+  return prisma.user.findUnique({ where: { id } });
+}
+
+export async function getUserByEmail(email: User["email"]) {
+  return prisma.user.findUnique({ where: { email } });
+}
+
+export async function createUser(email: User["email"], password: string) {
+  const hashedPassword = await bcrypt.hash(password, 10);
+
+  return prisma.user.create({
+    data: {
+      email,
+      password: {
+        create: {
+          hash: hashedPassword,
+        },
+      },
+    },
+  });
+}
+
+export async function deleteUserByEmail(email: User["email"]) {
+  return prisma.user.delete({ where: { email } });
+}
+
+export async function verifyLogin(
+  email: User["email"],
+  password: Password["hash"]
+) {
+  const userWithPassword = await prisma.user.findUnique({
+    where: { email },
+    include: {
+      password: true,
+    },
+  });
+
+  if (!userWithPassword || !userWithPassword.password) {
+    return null;
+  }
+
+  const isValid = await bcrypt.verify(password, userWithPassword.password.hash);
+
+  if (!isValid) {
+    return null;
+  }
+
+  const { password: _password, ...userWithoutPassword } = userWithPassword;
+
+  return userWithoutPassword;
+}
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/root.tsx b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/root.tsx
@@ -0,0 +1,50 @@
+import {
+  json,
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "remix";
+import type { LinksFunction, MetaFunction, LoaderFunction } from "remix";
+
+import tailwindStylesheetUrl from "./styles/tailwind.css";
+import { getUser } from "./session.server";
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
+};
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "Remix Notes",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+type LoaderData = {
+  user: Awaited<ReturnType<typeof getUser>>;
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+  return json<LoaderData>({
+    user: await getUser(request),
+  });
+};
+
+export default function App() {
+  return (
+    <html lang="en" className="h-full">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body className="h-full">
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/routes/healthcheck.tsx b/packages/remix-dev/__tests__/fixtures/replace-remix-imports/app/routes/healthcheck.tsx
@@ -0,0 +1,23 @@
+// learn more: https://fly.io/docs/reference/configuration/#services-http_checks
+import type { LoaderFunction } from "remix";
+import { prisma } from "~/db.server";
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const host =
+    request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
+
+  try {
+    // if we can connect to the database and make a simple query
+    // and make a HEAD request to ourselves, then we're good.
+    await Promise.all([
+      prisma.user.count(),
+      fetch(`http://${host}`, { method: "HEAD" }).then((r) => {
+        if (!r.ok) return Promise.reject(r);
+      }),
+    ]);
+    return new Response("OK");
+  } catch (error: unknown) {
+    console.log("healthcheck ❌", { error });
+    return new Response("ERROR", { status: 500 });
+  }
+};