refactor: update to remix vite

.github/workflows/ci.yml

@@ -62,7 +62,9 @@ jobs:
       - if: steps.cache-playwright.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
       - run: make docker/up db/reset/test db/seed-download
-      - run: pnpm test-e2e-coverage --retries=3
+      # TODO: fix coverage
+      # - run: pnpm test-e2e-coverage --retries=3
+      - run: pnpm test-e2e --retries=3
       - run: rm -rf coverage/e2e-client/tmp coverage/e2e-server/tmp
       - uses: actions/upload-artifact@v3
         with:

.gitignore

@@ -10,3 +10,4 @@
 /.env.production.sh
 /coverage
 /test-results
+dist

.prettierignore

@@ -8,3 +8,4 @@
 /misc/ytsub-v2/data-v2.json
 /coverage
 .vercel
+dist

app/db/drizzle-client.server.ts

@@ -322,8 +322,7 @@ export async function dbGetMigrationStatus() {
   const rows = await db.select().from(T.knex_migrations);
 
   const fs = await import("fs");
-  const config = knexfile();
-  let files = await fs.promises.readdir(config.migrations.directory);
+  let files = await fs.promises.readdir("app/db/migrations");
   files = files.filter((f) => f.match(/\.(js|ts)$/));
   files.sort();
 

app/db/knexfile.server.ts

@@ -1,4 +1,3 @@
-import path from "node:path";
 import type { Knex } from "knex";
 import { initializeConfigServer, serverConfig } from "../utils/config";
 
@@ -18,8 +17,8 @@ export default function knexfile() {
       timezone: "+00:00", // planetscale and development mysql image have UTC localtime
     },
     migrations: {
-      directory: path.join(__dirname, "migrations"),
-      stub: path.join(__dirname, "__migration-stub.ts"),
+      directory: "migrations",
+      stub: "__migration-stub.ts",
     },
   } satisfies Knex.Config;
 }

app/e2e/auth.test.ts

@@ -3,7 +3,7 @@ import { Page, expect } from "@playwright/test";
 import { E, T, db } from "../db/drizzle-client.server";
 import type { Email } from "../utils/email-utils";
 import { test } from "./coverage";
-import { useUserE2E } from "./helper";
+import { useUserE2E, waitForHydration } from "./helper";
 
 test("/users/register success", async ({ page }) => {
   await page.goto("/");
@@ -15,6 +15,7 @@ test("/users/register success", async ({ page }) => {
   // navigate to register
   await page.locator("data-test=signin-form >> text=Register").click();
   await expect(page).toHaveURL("/users/register");
+  await waitForHydration(page);
 
   // submit form
   // prettier-ignore
@@ -33,6 +34,8 @@ test("/users/register success", async ({ page }) => {
 
 test("/users/register error", async ({ page }) => {
   await page.goto("/users/register");
+  await waitForHydration(page);
+
   await page.getByLabel("Username").fill("hello");
   await page.getByLabel("Password", { exact: true }).fill("hi");
   await page.getByLabel("Password confirmation").fill("hi");
@@ -57,6 +60,7 @@ test.describe("/users/signin", () => {
     // navigate to signin
     await page.locator("header >> data-test=login-icon").click();
     await expect(page).toHaveURL("/users/signin");
+    await waitForHydration(page);
 
     // submit form
     await page.locator('input[name="username"]').fill(user.data.username);
@@ -79,6 +83,8 @@ test.describe("/users/signin", () => {
 
   test("invalid credentials", async ({ page }) => {
     await page.goto("/users/signin");
+    await waitForHydration(page);
+
     await page.getByLabel("Username").fill(user.data.username);
     await page.getByLabel("Password").fill("asdfjkl;asdf-wrong");
     await page.getByRole("button", { name: "Sign in" }).click();
@@ -94,6 +100,7 @@ test.describe("/users/me", () => {
   test("with-session", async ({ page }) => {
     await user.signin(page);
     await page.goto("/users/me");
+    await waitForHydration(page);
 
     // check user data is loaded
     await expect(page.locator("data-test=me-username")).toHaveValue(
@@ -143,6 +150,7 @@ test.describe("/users/signout", () => {
   test("basic", async ({ page }) => {
     await signin(page);
     await page.goto("/");
+    await waitForHydration(page);
 
     // Signout from top menu
     await page.locator('[data-test="user-menu"]').click();
@@ -159,6 +167,7 @@ test.describe("change email", () => {
   test("basic", async ({ page }) => {
     await user.signin(page);
     await page.goto("/users/me");
+    await waitForHydration(page);
 
     const newEmail = "[email protected]";
     await page.getByRole("button", { name: "Change email" }).click();
@@ -226,6 +235,8 @@ test.describe("reset password", () => {
     // trigger reset password from account
     await user.signin(page);
     await page.goto("/users/me");
+    await waitForHydration(page);
+
     await page.getByRole("button", { name: "Reset password" }).click();
     await page
       .getByText("Please check your email to reset your password")
@@ -237,13 +248,17 @@ test.describe("reset password", () => {
     // submit new password
     const newPassword = "asdfjkl;";
     await page.goto(url);
+    await waitForHydration(page);
+
     await page.getByLabel("Password", { exact: true }).fill(newPassword);
     await page.getByLabel("Password confirmation").fill(newPassword);
     await page.getByRole("button", { name: "Submit" }).click();
     await page.getByText("Successfully reset your password").click();
 
     // cannot use a same link
     await page.goto(url);
+    await waitForHydration(page);
+
     await page.getByLabel("Password", { exact: true }).fill(newPassword);
     await page.getByLabel("Password confirmation").fill(newPassword);
     await page.getByRole("button", { name: "Submit" }).click();
@@ -253,6 +268,7 @@ test.describe("reset password", () => {
   test("forgot password", async ({ page }) => {
     // submit email from "forgot password" page
     await page.goto("/users/signin");
+    await waitForHydration(page);
     await page.getByRole("link", { name: "Forgot your password?" }).click();
     await page.getByLabel("Email").fill(userEmail);
     await page.getByRole("button", { name: "Submit" }).click();
@@ -266,13 +282,15 @@ test.describe("reset password", () => {
     // submit new password
     const newPassword = "12345678";
     await page.goto(url);
+    await waitForHydration(page);
     await page.getByLabel("Password", { exact: true }).fill(newPassword);
     await page.getByLabel("Password confirmation").fill(newPassword);
     await page.getByRole("button", { name: "Submit" }).click();
     await page.getByText("Successfully reset your password").click();
 
     // login with new password
     await page.locator('[data-test="login-icon"]').click();
+    await waitForHydration(page);
     await page.getByLabel("Username").fill(user.data.username);
     await page.getByLabel("Password").fill(newPassword);
     await page.getByRole("button", { name: "Sign in" }).click();

app/e2e/helper.ts

@@ -47,3 +47,7 @@ export function useUserE2E(
     },
   };
 }
+
+export async function waitForHydration(page: Page) {
+  await page.locator("#root.hydrated").waitFor({ state: "attached" });
+}

app/entry.client.tsx

@@ -10,6 +10,7 @@ function main() {
   const el = document.getElementById("root");
   tinyassert(el);
   hydrateRoot(el, <RemixBrowser />);
+  el.classList.add("hydrated");
 }
 
 main();

app/entry.server.tsx

@@ -1,10 +1,12 @@
+import { tinyassert } from "@hiogawa/utils";
+import { viteDevServer } from "@hiogawa/vite-import-dev-server/runtime";
 import { RemixServer } from "@remix-run/react";
 import type { HandleDocumentRequestFunction } from "@remix-run/server-runtime";
 import { renderToString } from "react-dom/server";
 import { renderToDocument } from "./server/document";
 import { wrapTraceAsyncSimple } from "./utils/opentelemetry-utils";
 
-const handleDocumentRequest: HandleDocumentRequestFunction = (
+const handleDocumentRequest: HandleDocumentRequestFunction = async (
   request,
   responseStatusCode,
   responseHeaders,
@@ -14,7 +16,24 @@ const handleDocumentRequest: HandleDocumentRequestFunction = (
   const ssrHtml = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
-  const documentHtml = renderToDocument(ssrHtml);
+
+  let style: string;
+  if (import.meta.env.DEV) {
+    // inject CSS to quickly workaround FOUC during dev
+    // since vite/unocss will inject css on client via javascript later.
+    // this would essentially create a duplicate style,
+    // but that's not usually a problem for utility-class based styling.
+    tinyassert(viteDevServer);
+    const unocss = await viteDevServer.ssrLoadModule("virtual:uno.css");
+    style = `<style>${unocss["default"]}</style>`;
+  } else {
+    // since we don't use <Links />, we have to inject unocss output manually.
+    const root = remixContext.manifest.routes["root"];
+    tinyassert(root && root.css && root.css[0]);
+    style = `<link rel="stylesheet" href="${root.css[0]}">`;
+  }
+
+  const documentHtml = await renderToDocument(ssrHtml, style);
   responseHeaders.set("content-type", "text/html");
   return new Response(documentHtml, {
     status: responseStatusCode,

app/misc/entry-hattip.ts

@@ -3,14 +3,17 @@ import { once } from "@hiogawa/utils";
 import { createLoggerHandler } from "@hiogawa/utils-hattip";
 import { SpanKind } from "@opentelemetry/api";
 import { SemanticAttributes } from "@opentelemetry/semantic-conventions";
-import * as build from "@remix-run/dev/server-build";
 import { createRequestHandler } from "@remix-run/server-runtime";
 import { requestContextHandler } from "../server/request-context";
 import { rpcHandler } from "../trpc/server";
 import { pathToRegExp } from "../utils/misc";
 import { traceAsync } from "../utils/opentelemetry-utils";
 import { initializeServer } from "./initialize-server";
 
+// @ts-ignore isort-ignore
+import * as remixViteBuild from "virtual:server-entry";
+const build = remixViteBuild as typeof import("@remix-run/dev/server-build");
+
 // based on https://github.com/hi-ogawa/vite-fullstack-example/blob/92649f99b041820ec86650c99cfcd49a72e79f71/src/server/hattip.ts#L16-L28
 
 export function createHattipEntry() {
@@ -29,8 +32,7 @@ export function createHattipEntry() {
 //
 
 function createRemixHandler(): RequestHandler {
-  const mode =
-    process.env.NODE_ENV === "production" ? "production" : "development";
+  const mode = import.meta.env.DEV ? "development" : "production";
   const remixHandler = createRequestHandler(build, mode);
   return (ctx) => remixHandler(ctx.request);
 }

app/root.tsx

@@ -1,3 +1,4 @@
+import "virtual:uno.css";
 import { FloatingTree } from "@floating-ui/react";
 import { useTinyForm } from "@hiogawa/tiny-form/dist/react";
 import { useTinyProgress } from "@hiogawa/tiny-progress/dist/react";

app/server/document.tsx

@@ -4,7 +4,7 @@ import { injectPublicConfigScript, publicConfig } from "../utils/config-public";
 // since we don't currently use remix's <Meta /> or <Links /> convention,
 // we can render static document html only on server, which is probably common ssr practice.
 
-export function renderToDocument(ssrHtml: string) {
+export async function renderToDocument(ssrHtml: string, style: string) {
   // syntax highlight by https://github.com/mjbvz/vscode-comment-tagged-templates/
   return /* html */ `
 <!DOCTYPE html>
@@ -19,7 +19,6 @@ export function renderToDocument(ssrHtml: string) {
       content="width=device-width, height=device-height, initial-scale=1.0"
     />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href=${require("../../build/css/index.css")} />
     <link
         rel="icon"
         type="image/svg+xml"
@@ -32,6 +31,7 @@ export function renderToDocument(ssrHtml: string) {
         height: 100%;
       }
     </style>
+    ${style}
     ${generateThemeScript({ storageKey: "ytsub:theme" })}
     ${injectPublicConfigScript()}
   </head>

app/utils/loader-utils.server.ts

@@ -1,4 +1,4 @@
-import { LoaderArgs, json, redirect } from "@remix-run/server-runtime";
+import { LoaderFunctionArgs, json, redirect } from "@remix-run/server-runtime";
 import { $R } from "../misc/routes";
 import { ctx_currentUser } from "../server/request-context/session";
 import { ctx_get } from "../server/request-context/storage";
@@ -9,7 +9,7 @@ import { JSON_EXTRA } from "./json-extra";
 // - custom json serializer by default
 export function wrapLoader(loader: () => unknown) {
   // make it partial for slight convenience of unit test
-  return async (args?: Partial<LoaderArgs>) => {
+  return async (args?: Partial<LoaderFunctionArgs>) => {
     ctx_get().params = args?.params ?? {};
     const res = await loader();
     return res instanceof Response ? res : json(JSON_EXTRA.serialize(res));

misc/vercel/build.sh

@@ -17,29 +17,30 @@ set -eu -o pipefail
 #         index.js           = (remix-outdir)/server/index.js
 #
 
+this_dir="$(dirname "${BASH_SOURCE[0]}")"
+
 # cleanup
-rm -rf build/remix/production
-rm -rf build/css
 rm -rf .vercel/output
-mkdir -p .vercel/output/functions/index.func
+mkdir -p .vercel/output
 
-# css
-pnpm build:css
+mkdir -p .vercel/output/functions/index.func
 
-# remix build with custom server entry
-NODE_ENV=production BUILD_VERCEL=1 npx remix build
+# serverless
+mkdir -p .vercel/output/functions/index.func
+cp "$this_dir/.vc-config.json" .vercel/output/functions/index.func/.vc-config.json
+npx esbuild dist/server/index.js \
+  --outfile=.vercel/output/functions/index.func/index.js \
+  --metafile=dist/server/esbuild-metafile.json \
+  --bundle --format=cjs --platform=node \
+  --external:node:async_hooks
 
 # config.json
-cp misc/vercel/config.json .vercel/output/config.json
+cp "$this_dir/config.json" .vercel/output/config.json
 
 # static
-cp -r ./build/remix/production/public .vercel/output/static
+cp -r dist/client .vercel/output/static
 cp ./public/* .vercel/output/static
 
-# serverless
-cp build/remix/production/server/index.js .vercel/output/functions/index.func
-cp misc/vercel/.vc-config.json .vercel/output/functions/index.func/.vc-config.json
-
 # output server size
 echo "* Serverless files"
 ls -lhA .vercel/output/functions/index.func