From c20f8e7d0c6e8da628b9e8cae39e8c792a6c28b0 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Fri, 17 Jan 2025 07:44:13 -0700
Subject: [PATCH] Add SSR support to the Remix example

---
 examples/remix/app/root.tsx          |  2 ++
 examples/remix/app/routes/_index.tsx | 19 ++++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx
index ed0729a533..c5ee721096 100644
--- a/examples/remix/app/root.tsx
+++ b/examples/remix/app/root.tsx
@@ -1,5 +1,6 @@
 import "./style.css"
 import "./App.css"
+import { ElectricScripts } from "@electric-sql/react"
 import {
   Links,
   Meta,
@@ -21,6 +22,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         {children}
         <ScrollRestoration />
         <Scripts />
+        <ElectricScripts />
       </body>
     </html>
   )
diff --git a/examples/remix/app/routes/_index.tsx b/examples/remix/app/routes/_index.tsx
index 6bc1be99c7..1fa080dcd9 100644
--- a/examples/remix/app/routes/_index.tsx
+++ b/examples/remix/app/routes/_index.tsx
@@ -1,13 +1,14 @@
 import { useShape, preloadShape, getShapeStream } from "@electric-sql/react"
 import { useFetchers, Form } from "@remix-run/react"
-import { v4 as uuidv4 } from "uuid"
 import type { ClientActionFunctionArgs } from "@remix-run/react"
+import type { LoaderFunction } from "@remix-run/node"
+import { v4 as uuidv4 } from "uuid"
 import "../Example.css"
 import { matchStream } from "../match-stream"
 
 const itemShape = () => {
   return {
-    url: new URL(`/shape-proxy`, window.location.origin).href,
+    url: import.meta.env.ELECTRIC_URL || `http://localhost:5173/shape-proxy`,
     params: {
       table: `items`,
     },
@@ -16,6 +17,10 @@ const itemShape = () => {
 
 type Item = { id: string }
 
+export const loader: LoaderFunction = async () => {
+  return await preloadShape(itemShape())
+}
+
 export const clientLoader = async () => {
   return await preloadShape(itemShape())
 }
@@ -91,14 +96,14 @@ export default function Example() {
       {isClearing
         ? ``
         : [...itemsMap.values()].map((item: Item, index: number) => (
-            <p key={index} className="item">
-              <code>{item.id}</code>
-            </p>
-          ))}
+          <p key={index} className="item">
+            <code>{item.id}</code>
+          </p>
+        ))}
     </div>
   )
 }
 
 export function HydrateFallback() {
-  return ``
+  return <div>Loading...</div>
 }