Upgrade to [email protected]

.github/workflows/deploy-reflect.yml

@@ -0,0 +1,35 @@
+name: Deploy Reflect to Production
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: [main]
+
+env:
+  NODE_VERSION: "18.x"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: npm install
+        run: |
+          npm install
+
+      - name: publish
+        env:
+          REFLECT_AUTH_KEY: ${{ secrets.REFLECT_AUTH_KEY }}
+        run: |
+          npx reflect publish --server-path="./reflect/orchestrator/server.ts" --reflect-channel=canary --app=loop-orchestrator-${GITHUB_HEAD_REF//[^a-zA-Z0-9]/-} --auth-key-from-env=REFLECT_AUTH_KEY
+          npx reflect publish --server-path="./reflect/share/server.ts" --reflect-channel=canary --app=loop-share-${GITHUB_HEAD_REF//[^a-zA-Z0-9]/-} --auth-key-from-env=REFLECT_AUTH_KEY
+          npx reflect publish --server-path="./reflect/play/server.ts" --reflect-channel=canary --app=loop-play-${GITHUB_HEAD_REF//[^a-zA-Z0-9]/-} --auth-key-from-env=REFLECT_AUTH_KEY

README.md

@@ -27,6 +27,5 @@ We will improve Reflect's APIs over time to not require separate apps for this t
 
 # Publish
 
-1. Remove the `apps` key from each of the `reflect.config.json` files
-2. Publish each app to reflect with `npx reflect publish`
-3. Publish the frontend to some host, i.e., Vercel and set `NEXT_PUBLIC_ORCHESTRATOR_SERVER`, `NEXT_PUBLIC_PLAY_SERVER`, and `NEXT_PUBLIC_SHARE_SERVER` accordingly.
+1. Publish each app to reflect with `npx reflect publish`
+2. Publish the frontend to some host, i.e., Vercel and set `NEXT_PUBLIC_ORCHESTRATOR_SERVER`, `NEXT_PUBLIC_PLAY_SERVER`, and `NEXT_PUBLIC_SHARE_SERVER` accordingly.

frontend/App.tsx

@@ -19,13 +19,13 @@ import ShareModal from "./ShareModal";
 import { useElementSize, useWindowSize } from "./sizeHooks";
 import { event } from "nextjs-google-analytics";
 import styles from "./App.module.css";
+import { getReflectServer } from "./host";
 
-const orchestratorServer =
-  process.env.NEXT_PUBLIC_ORCHESTRATOR_SERVER ?? "http://127.0.0.1:8080/";
-const playServer =
-  process.env.NEXT_PUBLIC_PLAY_SERVER ?? "http://127.0.0.1:8080/";
-const shareServer =
-  process.env.NEXT_PUBLIC_SHARE_SERVER ?? "http://127.0.0.1:8080/";
+const orchestratorServer = getReflectServer(
+  process.env.NEXT_PUBLIC_ORCHESTRATOR_SERVER
+);
+const playServer = getReflectServer(process.env.NEXT_PUBLIC_PLAY_SERVER);
+const shareServer = getReflectServer(process.env.NEXT_PUBLIC_SHARE_SERVER);
 
 type RoomAssignment = { roomID: string; color: string };
 
@@ -206,11 +206,11 @@ const animateMessage = (messageDiv: HTMLDivElement | null) => {
 const animateButton = (elementId: string) => {
   const element = document.getElementById(elementId);
   if (element) {
-      element.classList.add('animated-button');
+    element.classList.add("animated-button");
 
-      setTimeout(() => {
-          element.classList.remove('animated-button');
-      }, 600);
+    setTimeout(() => {
+      element.classList.remove("animated-button");
+    }, 600);
   }
 };
 

frontend/CursorField.tsx

@@ -60,7 +60,7 @@ export default function CursorField({
         <Cursor
           selfClientID={r.clientID}
           client={client}
-          key={client.id}
+          key={client.clientID}
           appRect={appRect}
           docRect={docRect}
         />
@@ -88,7 +88,7 @@ function Cursor({
   return (
     <div
       className={classNames(styles.cursor, {
-        [styles.cursorSelf]: client.id === selfClientID,
+        [styles.cursorSelf]: client.clientID === selfClientID,
         [styles.cursorTouch]: client.isTouch,
       })}
       style={{

frontend/PresenceBar.tsx

@@ -39,7 +39,7 @@ export default function PresenceAvatars({
               key={"overflow"}
             />
           ) : (
-            <PresenceAvatar client={client} key={client.id} />
+            <PresenceAvatar client={client} key={client.clientID} />
           )
         )}
     </div>

frontend/host.ts

@@ -0,0 +1,15 @@
+export function getReflectServer(template: string | undefined) {
+  if (!template) {
+    throw new Error("Environment variable is required");
+  }
+  return applyTemplate(template);
+}
+
+function applyTemplate(template: string) {
+  const f = new Function(
+    "NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF",
+    `return \`${template}\``
+  );
+  const branchName = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ?? "";
+  return f(branchName.replace(/[^a-zA-Z0-9]/g, "-"));
+}

package.json

@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@badrap/valita": "^0.3.0",
-    "@rocicorp/rails": "^0.7.1",
-    "@rocicorp/reflect": "^0.38.202312080119",
+    "@rocicorp/rails": "^0.10.0",
+    "@rocicorp/reflect": "^0.39.202402011004",
     "@vercel/og": "^0.5.20",
     "classnames": "^2.3.2",
     "nanoid": "^5.0.3",

reflect/model/cell.ts

@@ -59,7 +59,7 @@ async function setCellEnabled(
         await cellGenerated.delete(tx, id);
       }
     }
-    const client = await getClient(tx, tx.clientID);
+    const client = await getClient(tx);
     await cellGenerated.put(tx, {
       id,
       color: client?.color ?? colorIDFromID(tx.clientID),

reflect/model/client.ts

@@ -1,5 +1,5 @@
 import * as v from "@badrap/valita";
-import { Update, generate } from "@rocicorp/rails";
+import { Update, generatePresence } from "@rocicorp/rails";
 import { WriteTransaction } from "@rocicorp/reflect";
 
 const cursorSchema = v.object({ x: v.number(), y: v.number() });
@@ -8,7 +8,7 @@ const locationSchema = v.object({
   country: v.string(),
 });
 const clientModelSchema = v.object({
-  id: v.string(),
+  clientID: v.string(),
   color: v.string(),
   cursor: cursorSchema.optional(),
   location: locationSchema.optional(),
@@ -19,7 +19,7 @@ export type Cursor = v.Infer<typeof cursorSchema>;
 export type Location = v.Infer<typeof locationSchema>;
 export type Client = v.Infer<typeof clientModelSchema>;
 export type ClientUpdate = Update<Client>;
-const clientGenerated = generate(
+const clientGenerated = generatePresence(
   "client",
   clientModelSchema.parse.bind(clientModelSchema)
 );
@@ -30,21 +30,17 @@ const initClient = async (
   tx: WriteTransaction,
   { color }: { color: string }
 ) => {
-  const id = tx.clientID;
   const client = {
-    id,
     color,
   };
-  await clientGenerated.put(tx, client);
+  await clientGenerated.set(tx, client);
 };
 
 const updateLocation = async (tx: WriteTransaction, location: Location) => {
   if (!allowLocation(location)) {
     return;
   }
-  const id = tx.clientID;
   const client = {
-    id,
     location,
   };
   await clientGenerated.update(tx, client);
@@ -60,14 +56,12 @@ function allowLocation(location: Location): boolean {
 
 const updateCursor = async (tx: WriteTransaction, cursor: Cursor) => {
   await clientGenerated.update(tx, {
-    id: tx.clientID,
     cursor,
   });
 };
 
 const markAsTouchClient = async (tx: WriteTransaction) => {
   await clientGenerated.update(tx, {
-    id: tx.clientID,
     isTouch: true,
   });
 };

reflect/subscriptions.ts

@@ -5,11 +5,7 @@ import { PLAY_M } from "./play/mutators";
 import { SHARE_M } from "./share/mutators";
 
 export function useSelfColor(r: Reflect<PLAY_M | SHARE_M> | undefined) {
-  return useSubscribe(
-    r,
-    async (tx) => (await getClient(tx, tx.clientID))?.color,
-    null
-  );
+  return useSubscribe(r, async (tx) => (await getClient(tx))?.color, null);
 }
 
 export function usePresentClients(
@@ -21,7 +17,7 @@ export function usePresentClients(
     async (tx) => {
       const presentClients = [];
       for (const clientID of presentClientIDs) {
-        const client = await getClient(tx, clientID);
+        const client = await getClient(tx, { clientID });
         if (client) {
           presentClients.push(client);
         }