feat: support SSR

.circleci/config.yml

@@ -29,7 +29,7 @@ jobs:
           name: Run Tests
           command: |
             npx nx run-many --target=build
-            npx nx run-many --target=test
+≈
       - run:
           name: Publish All
           command: |

package.json

@@ -26,6 +26,6 @@
     "tsup": "^7.2.0",
     "tsx": "^3.12.10",
     "typescript": "^4.9.5",
-    "vitest": "^0.30.1"
+    "vitest": "^1.4.0"
   }
 }

packages/example-remix/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env

packages/example-remix/README.md

@@ -0,0 +1,36 @@
+# Welcome to Remix + Vite!
+
+📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+
+## Development
+
+Run the Vite dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`

packages/example-remix/app/entry.client.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 { startTransition, StrictMode } from "react";
+
+import { extendZodWithMobxZodForm } from "@monoid-dev/mobx-zod-form";
+import { RemixBrowser } from "@remix-run/react";
+import { hydrateRoot } from "react-dom/client";
+import { z } from "zod";
+
+extendZodWithMobxZodForm(z);
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

packages/example-remix/app/entry.server.tsx

@@ -0,0 +1,145 @@
+/**
+ * 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 { createMobxZodFormLocalStorage } from "@monoid-dev/mobx-zod-form";
+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";
+
+import { asyncLocalStorage } from "./mobx-zod-form";
+
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  // This is ignored so we can keep it in the template for visibility.  Feel
+  // free to delete this parameter in your app if you're not using it!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loadContext: AppLoadContext,
+) {
+  return asyncLocalStorage.run(createMobxZodFormLocalStorage(), async () =>
+    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(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        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(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        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);
+  });
+}

packages/example-remix/app/mobx-zod-form.ts

@@ -0,0 +1,15 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+
+import {
+  setAsyncLocalStorage,
+  MobxZodFormLocalStorage,
+  extendZodWithMobxZodForm,
+} from "@monoid-dev/mobx-zod-form";
+import { z } from "zod";
+
+export const asyncLocalStorage =
+  new AsyncLocalStorage<MobxZodFormLocalStorage>();
+
+setAsyncLocalStorage(asyncLocalStorage);
+
+extendZodWithMobxZodForm(z);

packages/example-remix/app/root.tsx

@@ -0,0 +1,31 @@
+import { HydrateMobxZodForm } from "@monoid-dev/mobx-zod-form-react";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        <HydrateMobxZodForm />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}