Adapt model serialization to work with the new Single Fetch data loading strategy and streaming format

.github/workflows/publish-snapshot.yml

@@ -9,7 +9,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
 
-      - run: corepack enable
+      - run: npm install -g corepack@latest && corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: 20

apps/site/.env.example

@@ -1,3 +1,4 @@
 DOCSEARCH_APP_ID=RETR9S9VHS
 DOCSEARCH_API_KEY=326c1723a310dfe29004b47608709907
 DOCSEARCH_INDEX_NAME=tailwindui-protocol
+GITHUB_TOKEN=foo

apps/site/app/root.tsx

@@ -1,5 +1,4 @@
 import {
-  json,
   type LinksFunction,
   type MetaFunction,
   type LoaderFunctionArgs,
@@ -46,13 +45,13 @@ export const links: LinksFunction = () => [
 ];
 
 export async function loader({ context: { cloudflare } }: LoaderFunctionArgs) {
-  return json({
+  return {
     ENV: {
       DOCSEARCH_APP_ID: cloudflare.env.DOCSEARCH_APP_ID,
       DOCSEARCH_API_KEY: cloudflare.env.DOCSEARCH_API_KEY,
       DOCSEARCH_INDEX_NAME: cloudflare.env.DOCSEARCH_INDEX_NAME,
     },
-  });
+  };
 }
 
 const themeScript = `

apps/site/app/routes/_index.tsx

@@ -1,5 +1,4 @@
 import {
-  json,
   type LoaderFunctionArgs,
   type MetaFunction,
 } from "@remix-run/cloudflare";
@@ -34,7 +33,7 @@ export async function loader({
   const { content, title, tableOfContents, description } =
     parseMarkdoc(markdown);
 
-  return json({ content, title, tableOfContents, manifest, description });
+  return { content, title, tableOfContents, manifest, description };
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => [

apps/site/vite.config.ts

@@ -5,6 +5,13 @@ import {
 } from "@remix-run/dev";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+declare module "@remix-run/cloudflare" {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Future {
+    v3_singleFetch: true;
+  }
+}
+
 export default defineConfig({
   plugins: [
     cloudflareDevProxyVitePlugin(),
@@ -13,6 +20,7 @@ export default defineConfig({
         v3_fetcherPersist: true,
         v3_lazyRouteDiscovery: true,
         v3_relativeSplatPath: true,
+        v3_singleFetch: true,
         v3_throwAbortReason: true,
       },
     }),

apps/site/worker-configuration.d.ts

@@ -4,4 +4,5 @@ interface Env {
 	DOCSEARCH_APP_ID: string;
 	DOCSEARCH_API_KEY: string;
 	DOCSEARCH_INDEX_NAME: string;
+	GITHUB_TOKEN: string;
 }

examples/remix-cms/app/models/Article.ts

@@ -2,7 +2,7 @@ import { Model } from "superflare";
 import { User } from "./User";
 
 export class Article extends Model {
-  user!: User | Promise<User>;
+  user!: User;
   $user() {
     return this.belongsTo(User);
   }

examples/remix-cms/app/models/User.ts

@@ -6,6 +6,7 @@ export class User extends Model {
     return rest;
   }
 }
+
 Model.register(User);
 
 export interface User extends UserRow {}

examples/remix-cms/app/routes/admin.tsx

@@ -14,7 +14,7 @@ import {
 import clsx from "clsx";
 import { Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
 import { Toast } from "~/components/Toast";
-import { json, type LoaderFunctionArgs, redirect } from "@remix-run/cloudflare";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/cloudflare";
 import { User } from "~/models/User";
 
 const navigation = [
@@ -33,10 +33,7 @@ export async function loader({
 
   const user = await auth.user(User);
 
-  return json({
-    flash,
-    user,
-  });
+  return { flash, user };
 }
 
 export default function AdminLayout() {

examples/remix-cms/app/routes/admin/articles.$slug.preview.tsx

@@ -19,10 +19,10 @@ export async function loader({ params }: LoaderFunctionArgs) {
     throw new Response("Not found", { status: 404 });
   }
 
-  return json({
+  return {
     article,
     html: await convertToHtml(article.content ?? ""),
-  });
+  };
 }
 
 export default function NewArticle() {

examples/remix-cms/app/routes/admin/articles.$slug.tsx

@@ -1,5 +1,5 @@
 import { EyeIcon } from "@heroicons/react/24/outline";
-import { json, type LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { type LoaderFunctionArgs } from "@remix-run/cloudflare";
 import { useLoaderData, useRevalidator } from "@remix-run/react";
 import invariant from "tiny-invariant";
 import { Button, SecondaryButton } from "~/components/admin/Button";
@@ -24,7 +24,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 
   SayHelloJob.dispatch(article);
 
-  return json({ article });
+  return { article };
 }
 
 export default function NewArticle() {

examples/remix-cms/app/routes/admin/articles.tsx

@@ -1,4 +1,3 @@
-import { json } from "@remix-run/cloudflare";
 import { Link, useLoaderData } from "@remix-run/react";
 import { Button } from "~/components/admin/Button";
 import { Page } from "~/components/admin/Page";
@@ -8,7 +7,7 @@ import { useChannel } from "~/utils/use-channel";
 export async function loader() {
   const articles = await Article.with("user").orderBy("createdAt", "desc");
 
-  return json({ articles });
+  return { articles };
 }
 
 export default function Articles() {

examples/remix-cms/app/routes/admin/components/article-form.tsx

@@ -1,9 +1,4 @@
-import {
-  json,
-  redirect,
-  type SerializeFrom,
-  type ActionFunctionArgs,
-} from "@remix-run/cloudflare";
+import { redirect, type ActionFunctionArgs } from "@remix-run/cloudflare";
 import { Form, useActionData } from "@remix-run/react";
 import { Article } from "~/models/Article";
 import invariant from "tiny-invariant";
@@ -29,7 +24,7 @@ const enum Intent {
   Update = "update",
 }
 
-const badResponse = (data: ActionData) => json(data, { status: 422 });
+const badResponse = (data: ActionData) => Response.json(data, { status: 422 });
 
 export async function action({
   request,
@@ -110,7 +105,7 @@ export function ArticleForm({
   article,
   id,
 }: {
-  article?: SerializeFrom<Article>;
+  article?: Article;
   id?: string;
 }) {
   const actionData = useActionData<ActionData>();

examples/remix-cms/app/routes/admin/upload.$.ts

@@ -1,4 +1,4 @@
-import { json, type ActionFunctionArgs } from "@remix-run/cloudflare";
+import { type ActionFunctionArgs } from "@remix-run/cloudflare";
 import { parseMultipartFormData, storage } from "superflare";
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -13,7 +13,5 @@ export async function action({ request }: ActionFunctionArgs) {
     }
   );
 
-  return json({
-    url: storage().url(formData.get("file") as string),
-  });
+  return { url: storage().url(formData.get("file") as string) };
 }

examples/remix-cms/app/routes/auth/login.tsx

@@ -1,5 +1,5 @@
+import { redirect, type ActionFunctionArgs } from "@remix-run/cloudflare";
 import { Form, Link, useActionData } from "@remix-run/react";
-import { json, redirect, type ActionFunctionArgs } from "@remix-run/cloudflare";
 import { Button } from "~/components/admin/Button";
 import { FormField } from "~/components/Form";
 import { User } from "~/models/User";
@@ -26,11 +26,11 @@ export async function action({
     return redirect("/admin");
   }
 
-  return json({ error: "Invalid credentials" }, { status: 400 });
+  return Response.json({ error: "Invalid credentials" }, { status: 400 });
 }
 
 export default function Login() {
-  const actionData = useActionData<typeof action>();
+  const actionData = useActionData<{ error: string }>();
 
   return (
     <>

examples/remix-cms/app/routes/auth/register.tsx

@@ -1,5 +1,5 @@
 import { Form, Link, useActionData } from "@remix-run/react";
-import { json, redirect, type ActionFunctionArgs } from "@remix-run/cloudflare";
+import { redirect, type ActionFunctionArgs } from "@remix-run/cloudflare";
 import { Button } from "~/components/admin/Button";
 import { FormField } from "~/components/Form";
 import { User } from "~/models/User";
@@ -19,7 +19,7 @@ export async function action({
   const name = formData.get("name") as string;
 
   if (await User.where("email", email).count()) {
-    return json({ error: "Email already exists" }, { status: 400 });
+    return Response.json({ error: "Email already exists" }, { status: 400 });
   }
 
   const user = await User.create({
@@ -34,7 +34,7 @@ export async function action({
 }
 
 export default function Register() {
-  const actionData = useActionData<typeof action>();
+  const actionData = useActionData<{ error: string }>();
 
   return (
     <Form method="post" className="grid grid-cols-6 gap-4">

examples/remix-cms/vite.config.ts

@@ -4,6 +4,13 @@ import { createRoutesFromFolders } from "@remix-run/v1-route-convention";
 import { superflareDevProxyVitePlugin } from "@superflare/remix/dev";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+declare module "@remix-run/cloudflare" {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Future {
+    v3_singleFetch: true;
+  }
+}
+
 export default defineConfig({
   plugins: [
     superflareDevProxyVitePlugin<Env>(),
@@ -12,6 +19,7 @@ export default defineConfig({
         v3_fetcherPersist: true,
         v3_lazyRouteDiscovery: true,
         v3_relativeSplatPath: true,
+        v3_singleFetch: true,
         v3_throwAbortReason: true,
       },
       // Tell Remix to ignore everything in the routes directory.

packages/superflare/docs/database/getting-started.md

@@ -58,7 +58,7 @@ However, we cannot simply send the entire data model over the wire from the serv
 
 Instead, modern frameworks will serialize the output sent (from "loaders" in Remix, or passed as props from server components to client components in Next.js).
 
-Superflare makes it obvious how to serialize your models as JSON by providing the standard `toJSON()` method by on new models.
+Superflare makes it obvious how to serialize your models as JSON by providing the standard `toJSON()` method on new models.
 
 By default, this method will return all of the model's attributes, in addition to any relations that are loaded on the instance either manually or by using eager-loading.
 

packages/superflare/docs/database/relationships.md

@@ -18,7 +18,7 @@ import { Model } from "superflare";
 import { Profile } from "./Profile";
 
 export class User extends Model {
-  profile!: Profile | Promise<Profile>;
+  profile!: Profile;
   $profile() {
     return this.hasOne(Profile);
   }
@@ -46,7 +46,7 @@ To define the inverse relationship, use the `belongsTo` method:
 import { Model } from "superflare";
 
 export class Profile extends Model {
-  user!: User | Promise<User>;
+  user!: User;
   $user() {
     return this.belongsTo(User);
   }
@@ -71,7 +71,7 @@ To define a one-to-many relationship, use the `hasMany` method:
 import { Model } from "superflare";
 
 export class User extends Model {
-  posts!: Post[] | Promise<Post[]>;
+  posts!: Post[];
   $posts() {
     return this.hasMany(Post);
   }
@@ -96,7 +96,7 @@ To define the inverse relationship, use the `belongsTo` method:
 import { Model } from "superflare";
 
 export class Post extends Model {
-  user!: User | Promise<User>;
+  user!: User;
   $user() {
     return this.belongsTo(User);
   }
@@ -144,7 +144,7 @@ To define a many-to-many relationship, use the `belongsToMany` method:
 import { Model } from "superflare";
 
 export class Post extends Model {
-  tags!: Tag[] | Promise<Tag[]>;
+  tags!: Tag[];
   $tags() {
     return this.belongsToMany(Tag);
   }
@@ -163,15 +163,15 @@ for (const tag of tags) {
 }
 ```
 
-When invoking the `$tags()` method or awaiting the `tags` property, Superflare will check an intermediate table, often referred to as a "join table," for rows which have a `postId` that matches the `id` of the `Post` model. It will return all `Tag` models which have a `id` that matches the `tagId` of the join table rows.
+When invoking the `$tags()` method or awaiting the `tags` property, Superflare will check an intermediate table, often referred to as a "join table", for rows which have a `postId` that matches the `id` of the `Post` model. It will return all `Tag` models which have a `id` that matches the `tagId` of the join table rows.
 
 To define the inverse relationship, use the `belongsToMany` method again:
 
 ```ts
 import { Model } from "superflare";
 
 export class Tag extends Model {
-  posts!: Post[] | Promise<Post[]>;
+  posts!: Post[];
   $posts() {
     return this.belongsToMany(Post);
   }
@@ -202,7 +202,6 @@ If you don't eager load the related models, the related data will not be availab
 
 ```tsx
 import { User } from "~/models/User";
-import { json } from "@remix-run/cloudflare";
 
 export async function loader() {
   // ❌ The profile relation will not be loaded
@@ -211,7 +210,7 @@ export async function loader() {
   // ✅ This will load the profile relation for the view
   const user = await User.with("profile").find(1);
 
-  return json({ user });
+  return { user };
 }
 
 export default function UserView() {

packages/superflare/docs/security/authentication.md

@@ -43,7 +43,7 @@ export async function loader({ context: { auth } }: LoaderFunctionArgs) {
   const user = await auth.user(User);
 
   // If the user is logged in, show them the secret page
-  return json({ message: `You're logged in, ${user.name}!` });
+  return { message: `You're logged in, ${user.name}!` };
 }
 ```