Move to RSC

.github/workflows/e2e.yaml

@@ -19,7 +19,7 @@ jobs:
           node-version: "23.x"
           registry-url: "https://registry.npmjs.org"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm -r build
+      - run: pnpm recursive run --sort --workspace-concurrency=1 build
 
       - name: Install Playwright
         run: pnpm exec playwright install

.github/workflows/prerelease.yaml

@@ -22,32 +22,38 @@ jobs:
           node-version: "23.x"
           registry-url: "https://registry.npmjs.org"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm -r build
+      - run: pnpm recursive run --sort --workspace-concurrency=1 build
       - name: Write dev versions
         env:
           PR_SHA: ${{ github.event.pull_request.head.sha }}
         run: node scripts/version-for-prerelease.ts
 
       - name: Publish core
-        run: pnpm publish --no-git-checks --tag dev
+        run: pnpm publish --no-git-checks --tag dev --access public
         working-directory: packages/core
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: Publish actors
+        run: pnpm publish --no-git-checks --tag dev --access public
+        working-directory: packages/actors
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
       - name: Publish vite
-        run: pnpm publish --no-git-checks --tag dev
+        run: pnpm publish --no-git-checks --tag dev --access public
         working-directory: packages/vite
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish create-orange
-        run: pnpm publish --no-git-checks --tag dev
+        run: pnpm publish --no-git-checks --tag dev --access public
         working-directory: packages/create-orange
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish cli
-        run: pnpm publish --no-git-checks --tag dev
+        run: pnpm publish --no-git-checks --tag dev --access public
         working-directory: packages/cli
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -63,10 +69,10 @@ jobs:
 
             Install the prerelease packages with:
             \`\`\`bash
-            npm install @orange-js/orange@0.0.0-${sha} && npm install -D @orange-js/vite@0.0.0-${sha} && npm install -D @orange-js/cli@0.0.0-${sha}
-            pnpm add @orange-js/orange@0.0.0-${sha} && pnpm add -D @orange-js/vite@0.0.0-${sha} && pnpm add -D @orange-js/cli@0.0.0-${sha}
-            yarn add @orange-js/orange@0.0.0-${sha} && yarn add -D @orange-js/vite@0.0.0-${sha} && yarn add -D @orange-js/cli@0.0.0-${sha}
-            bun add @orange-js/orange@0.0.0-${sha} && bun add -D @orange-js/vite@0.0.0-${sha} && bun add -D @orange-js/cli@0.0.0-${sha}
+            npm install @orange-js/orange@0.0.0-${sha} @orange-js/actors@0.0.0-${sha} && npm install -D @orange-js/vite@0.0.0-${sha} @orange-js/cli@0.0.0-${sha}
+            pnpm add @orange-js/orange@0.0.0-${sha} @orange-js/actors@0.0.0-${sha} && pnpm add -D @orange-js/vite@0.0.0-${sha} @orange-js/cli@0.0.0-${sha}
+            yarn add @orange-js/orange@0.0.0-${sha} @orange-js/actors@0.0.0-${sha} && yarn add -D @orange-js/vite@0.0.0-${sha} @orange-js/cli@0.0.0-${sha}
+            bun add @orange-js/orange@0.0.0-${sha} @orange-js/actors@0.0.0-${sha} && bun add -D @orange-js/vite@0.0.0-${sha} @orange-js/cli@0.0.0-${sha}
             \`\`\``;
 
             github.rest.issues.createComment({

.github/workflows/release.yaml

@@ -18,14 +18,20 @@ jobs:
           node-version: "23.x"
           registry-url: "https://registry.npmjs.org"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm -r build
+      - run: pnpm recursive run --sort --workspace-concurrency=1 build
 
       - name: Publish core
         run: pnpm publish
         working-directory: packages/core
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: Publish actors
+        run: pnpm publish
+        working-directory: packages/actors
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
       - name: Publish vite
         run: pnpm publish
         working-directory: packages/vite

e2e/actors.spec.ts

@@ -0,0 +1,193 @@
+import { test, expect, wranglerJson } from "./fixture/index";
+
+const baseFiles = {
+  "wrangler.jsonc": wranglerJson({
+    durable_objects: {
+      bindings: [
+        {
+          name: "Test",
+          class_name: "Test",
+        },
+      ],
+    },
+    migrations: [
+      {
+        tag: "v1",
+        new_sqlite_classes: ["Test"],
+      },
+    ],
+  }),
+  "app/entry.server.tsx": `
+    import { app } from "@orange-js/orange/server";
+    import { Root } from "./root";
+
+    export { Test } from "./routes/index.tsx";
+
+    export default app(Root);
+  `,
+};
+
+test.multi(
+  "can call actor method",
+  async ({ page, port }) => {
+    await page.goto(`http://localhost:${port}`);
+    await expect(page.getByText("Hello from Actor")).toBeVisible();
+  },
+  {
+    ...baseFiles,
+    "app/routes/index.tsx": `
+    import { Actor, getActor } from "@orange-js/actors";
+
+    export class Test extends Actor<Env> {
+      async load() {
+        return {
+          message: "Hello from Actor",
+        };
+      }
+    }
+
+    export default async function Home() {
+      const stub = getActor(Test, "foo");
+      const { message } = await stub.load();
+      return <div>{message}</div>;
+    }
+    `,
+  }
+);
+
+test.multi(
+  "using actor component",
+  async ({ page, port }) => {
+    await page.goto(`http://localhost:${port}`);
+    await expect(page.getByText("Hello from Actor")).toBeVisible();
+    await expect(page.getByText("id: foo")).toBeVisible();
+  },
+  {
+    ...baseFiles,
+    "app/routes/index.tsx": `
+    import { Actor, getActor } from "@orange-js/actors";
+
+    export class Test extends Actor<Env> {
+      async Component() {
+        return (
+          <div>
+            Hello from Actor
+            id: {this.identifier}
+          </div>
+        );
+      }
+    }
+
+    export default async function Home() {
+      return <Test.Component actor={Test} name="foo" />;
+    }
+    `,
+  }
+);
+
+test.multi(
+  "actor as component",
+  async ({ page, port }) => {
+    await page.goto(`http://localhost:${port}/?id=foo`);
+    await expect(page.getByText("Hello from Actor")).toBeVisible();
+    await expect(page.getByText("id: foo")).toBeVisible();
+  },
+  {
+    ...baseFiles,
+    "app/routes/index.tsx": `
+    import { Actor, getActor } from "@orange-js/actors";
+
+    export default class Test extends Actor<Env> {
+      static nameFromRequest(request: Request) {
+        const url = new URL(request.url);
+        return url.searchParams.get("id") ?? "default";
+      }
+
+      async Component() {
+        return (
+          <div>
+            Hello from Actor
+            id: {this.identifier}
+          </div>
+        );
+      }
+    }
+    `,
+    "app/entry.server.tsx": `
+    import { app } from "@orange-js/orange/server";
+    import { Root } from "./root";
+
+    export { default as Test } from "./routes/index.tsx";
+
+    export default app(Root);
+    `,
+  }
+);
+
+test.multi(
+  "multiplayer",
+  async ({ page, port, browser }) => {
+    const secondTab = await browser.newPage();
+    await secondTab.goto(`http://localhost:${port}/`);
+    await expect(secondTab.getByText("count: 0")).toBeVisible();
+
+    await page.goto(`http://localhost:${port}/`);
+    await expect(page.getByText("count: 0")).toBeVisible();
+
+    // Increment and ensure both tabs update
+    await page.click("button");
+
+    await expect(secondTab.getByText("count: 1")).toBeVisible({
+      timeout: 1000,
+    });
+    await expect(page.getByText("count: 1")).toBeVisible({
+      timeout: 1000,
+    });
+  },
+  {
+    ...baseFiles,
+    "app/routes/index.tsx": `
+    import { Actor, getActor, Observed, Persist } from "@orange-js/actors";
+
+    export class Test extends Actor<Env> {
+      @Persist
+      count = 0;
+
+      async increment() {
+        this.count++;
+      }
+
+      @Observed("count")
+      async Component() {
+        return (
+          <div>
+            count: {this.count}
+          </div>
+        );
+      }
+    }
+
+    async function increment() {
+      "use server";
+      Test.get("foo")!.increment();
+    }
+
+    export default function Home() {
+      return (
+        <div>
+          <Test.Component actor={Test} name="foo" />
+          <button onClick={increment}>Increment</button>
+        </div>
+      );
+    }
+    `,
+    "app/entry.server.tsx": `
+    import { app } from "@orange-js/orange/server";
+    import { Root } from "./root";
+
+    export { Test } from "./routes/index.tsx";
+
+    export default app(Root);
+    `,
+  }
+);

e2e/basic.spec.ts

@@ -4,3 +4,18 @@ test.multi("hello world", async ({ page, port }) => {
   await page.goto(`http://localhost:${port}`);
   await expect(page.getByText("Hello World")).toBeVisible();
 });
+
+test.multi(
+  ".browser files arent treated as routes",
+  async ({ page, port }) => {
+    await page.goto(`http://localhost:${port}/index.browser`);
+    await expect(page.getByText("Not found")).toBeVisible();
+  },
+  {
+    "app/routes/index.browser.tsx": `
+      export default function Index() {
+        return <div>Hello World</div>;
+      }
+    `,
+  }
+);