@gasboost/react 0.1.0

package/dist/AppsScriptRouter.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from "react";
+export declare function AppsScriptRouter({ children }: PropsWithChildren): import("react").ReactNode;

package/dist/AppsScriptRouter.js

@@ -0,0 +1,19 @@
+import { AppsScriptHistoryPipeline } from "@gasboost/client";
+import { useEffect, useState } from "react";
+export function AppsScriptRouter({ children }) {
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        let dispose;
+        AppsScriptHistoryPipeline.create((pipeline) => {
+            dispose = pipeline.sync();
+            setReady(true);
+        });
+        return () => {
+            dispose?.();
+        };
+    }, []);
+    if (!ready) {
+        return null;
+    }
+    return children;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { AppsScriptRouter } from "./AppsScriptRouter";
+export { useAppsScriptJob } from "./useAppsScriptJob";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { AppsScriptRouter } from "./AppsScriptRouter";
+export { useAppsScriptJob } from "./useAppsScriptJob";

package/dist/useAppsScriptJob.d.ts

@@ -0,0 +1,2 @@
+import { AppsScriptJobStore } from "@gasboost/client";
+export declare function useAppsScriptJob(jobStore: AppsScriptJobStore): import("@gasboost/client").AppsScriptJob<any>[];

package/dist/useAppsScriptJob.js

@@ -0,0 +1,4 @@
+import { useSyncExternalStore } from "react";
+export function useAppsScriptJob(jobStore) {
+    return useSyncExternalStore(jobStore.subscribe.bind(jobStore), jobStore.getSnapshot.bind(jobStore));
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@gasboost/react",
+  "version": "0.1.0",
+  "description": "React integration for Google Apps Script web applications.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gasboost/app.git",
+    "directory": "packages/react"
+  },
+  "license": "MIT",
+  "author": "tiger-oshima",
+  "keywords": [
+    "google-apps-script",
+    "gas",
+    "react",
+    "router",
+    "web-app",
+    "gasboost"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@gasboost/client": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.2.18"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --config vitest.config.mts",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json"
+  }
+}

package/src/AppsScriptRouter.tsx

@@ -0,0 +1,26 @@
+import { AppsScriptHistoryPipeline } from "@gasboost/client";
+import type { PropsWithChildren } from "react";
+import { useEffect, useState } from "react";
+
+export function AppsScriptRouter({ children }: PropsWithChildren) {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let dispose: (() => void) | undefined;
+
+    AppsScriptHistoryPipeline.create((pipeline) => {
+      dispose = pipeline.sync();
+      setReady(true);
+    });
+
+    return () => {
+      dispose?.();
+    };
+  }, []);
+
+  if (!ready) {
+    return null;
+  }
+
+  return children;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { AppsScriptRouter } from "./AppsScriptRouter";
+export { useAppsScriptJob } from "./useAppsScriptJob";

package/src/useAppsScriptJob.tsx

@@ -0,0 +1,9 @@
+import { AppsScriptJobStore } from "@gasboost/client";
+import { useSyncExternalStore } from "react";
+
+export function useAppsScriptJob(jobStore: AppsScriptJobStore) {
+  return useSyncExternalStore(
+    jobStore.subscribe.bind(jobStore),
+    jobStore.getSnapshot.bind(jobStore),
+  );
+}

package/tests/AppsScriptRouter.spec.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { AppsScriptHistoryPipeline } from "@gasboost/client";
+import { AppsScriptRouter } from "../src/AppsScriptRouter";
+vi.mock("@gasboost/client", () => ({
+    AppsScriptHistoryPipeline: {
+        create: vi.fn(),
+    },
+}));
+describe("AppsScriptRouter", () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        cleanup();
+    });
+    it("pipeline の生成が完了するまでは children を描画しない", () => {
+        vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation(() => { });
+        render(_jsx(AppsScriptRouter, { children: _jsx("div", { children: "app" }) }));
+        expect(screen.queryByText("app")).toBeNull();
+    });
+    it("pipeline 生成後に同期を開始する", async () => {
+        const sync = vi.fn(() => vi.fn());
+        const pipeline = {
+            sync,
+        };
+        vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation((callback) => {
+            callback(pipeline);
+        });
+        render(_jsx(AppsScriptRouter, { children: _jsx("div", { children: "app" }) }));
+        await waitFor(() => {
+            expect(sync).toHaveBeenCalledOnce();
+        });
+        expect(AppsScriptHistoryPipeline.create).toHaveBeenCalledOnce();
+    });
+    it("同期開始後に children を描画する", async () => {
+        const pipeline = {
+            sync: vi.fn(() => vi.fn()),
+        };
+        vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation((callback) => {
+            callback(pipeline);
+        });
+        render(_jsx(AppsScriptRouter, { children: _jsx("div", { children: "app" }) }));
+        expect(await screen.findByText("app")).toBeTruthy();
+    });
+    it("アンマウント時に pipeline の監視を解除する", async () => {
+        const dispose = vi.fn();
+        const pipeline = {
+            sync: vi.fn(() => dispose),
+        };
+        vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation((callback) => {
+            callback(pipeline);
+        });
+        const { unmount } = render(_jsx(AppsScriptRouter, { children: _jsx("div", { children: "app" }) }));
+        await waitFor(() => {
+            expect(pipeline.sync).toHaveBeenCalledOnce();
+        });
+        unmount();
+        expect(dispose).toHaveBeenCalledOnce();
+    });
+});

package/tests/AppsScriptRouter.spec.tsx

@@ -0,0 +1,104 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AppsScriptHistoryPipeline } from "@gasboost/client";
+import { AppsScriptRouter } from "../src/AppsScriptRouter";
+
+vi.mock("@gasboost/client", () => ({
+  AppsScriptHistoryPipeline: {
+    create: vi.fn(),
+  },
+}));
+
+describe("AppsScriptRouter", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    cleanup();
+  });
+
+  it("pipeline の生成が完了するまでは children を描画しない", () => {
+    vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation(() => {});
+
+    render(
+      <AppsScriptRouter>
+        <div>app</div>
+      </AppsScriptRouter>,
+    );
+
+    expect(screen.queryByText("app")).toBeNull();
+  });
+
+  it("pipeline 生成後に同期を開始する", async () => {
+    const sync = vi.fn(() => vi.fn());
+
+    const pipeline = {
+      sync,
+    } as unknown as AppsScriptHistoryPipeline;
+
+    vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation(
+      (callback) => {
+        callback(pipeline);
+      },
+    );
+
+    render(
+      <AppsScriptRouter>
+        <div>app</div>
+      </AppsScriptRouter>,
+    );
+
+    await waitFor(() => {
+      expect(sync).toHaveBeenCalledOnce();
+    });
+
+    expect(AppsScriptHistoryPipeline.create).toHaveBeenCalledOnce();
+  });
+
+  it("同期開始後に children を描画する", async () => {
+    const pipeline = {
+      sync: vi.fn(() => vi.fn()),
+    } as unknown as AppsScriptHistoryPipeline;
+
+    vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation(
+      (callback) => {
+        callback(pipeline);
+      },
+    );
+
+    render(
+      <AppsScriptRouter>
+        <div>app</div>
+      </AppsScriptRouter>,
+    );
+
+    expect(await screen.findByText("app")).toBeTruthy();
+  });
+
+  it("アンマウント時に pipeline の監視を解除する", async () => {
+    const dispose = vi.fn();
+
+    const pipeline = {
+      sync: vi.fn(() => dispose),
+    } as unknown as AppsScriptHistoryPipeline;
+
+    vi.mocked(AppsScriptHistoryPipeline.create).mockImplementation(
+      (callback) => {
+        callback(pipeline);
+      },
+    );
+
+    const { unmount } = render(
+      <AppsScriptRouter>
+        <div>app</div>
+      </AppsScriptRouter>,
+    );
+
+    await waitFor(() => {
+      expect(pipeline.sync).toHaveBeenCalledOnce();
+    });
+
+    unmount();
+
+    expect(dispose).toHaveBeenCalledOnce();
+  });
+});

package/tests/useAppsScriptJob.spec.js

@@ -0,0 +1,104 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useAppsScriptJob } from "../src/useAppsScriptJob";
+describe("useAppsScriptJob", () => {
+    it("jobStore の現在の snapshot を返す", () => {
+        const snapshot = {
+            status: "pending",
+        };
+        const jobStore = {
+            subscribe: vi.fn(() => vi.fn()),
+            getSnapshot: vi.fn(() => snapshot),
+        };
+        const { result } = renderHook(() => useAppsScriptJob(jobStore));
+        expect(result.current).toBe(snapshot);
+    });
+    it("jobStore の変更を subscribe する", async () => {
+        const snapshot = {
+            status: "pending",
+        };
+        const subscribe = vi.fn(() => vi.fn());
+        const jobStore = {
+            subscribe,
+            getSnapshot: vi.fn(() => snapshot),
+        };
+        renderHook(() => useAppsScriptJob(jobStore));
+        await waitFor(() => {
+            expect(subscribe).toHaveBeenCalledOnce();
+        });
+    });
+    it("jobStore の変更通知を受けると最新の snapshot を返す", async () => {
+        let listener;
+        let snapshot = {
+            status: "pending",
+        };
+        const jobStore = {
+            subscribe: vi.fn((handler) => {
+                listener = handler;
+                return vi.fn();
+            }),
+            getSnapshot: vi.fn(() => snapshot),
+        };
+        const { result } = renderHook(() => useAppsScriptJob(jobStore));
+        await waitFor(() => {
+            expect(listener).toBeDefined();
+        });
+        snapshot = {
+            status: "completed",
+        };
+        act(() => {
+            listener?.();
+        });
+        expect(result.current).toEqual({
+            status: "completed",
+        });
+    });
+    it("アンマウント時に subscribe の解除関数を呼ぶ", async () => {
+        const snapshot = {
+            status: "pending",
+        };
+        const unsubscribe = vi.fn();
+        const jobStore = {
+            subscribe: vi.fn(() => unsubscribe),
+            getSnapshot: vi.fn(() => snapshot),
+        };
+        const { unmount } = renderHook(() => useAppsScriptJob(jobStore));
+        await waitFor(() => {
+            expect(jobStore.subscribe).toHaveBeenCalledOnce();
+        });
+        unmount();
+        expect(unsubscribe).toHaveBeenCalledOnce();
+    });
+    it("jobStore が変更された場合は新しい store を subscribe する", async () => {
+        const firstSnapshot = {
+            status: "first",
+        };
+        const secondSnapshot = {
+            status: "second",
+        };
+        const firstUnsubscribe = vi.fn();
+        const firstStore = {
+            subscribe: vi.fn(() => firstUnsubscribe),
+            getSnapshot: vi.fn(() => firstSnapshot),
+        };
+        const secondStore = {
+            subscribe: vi.fn(() => vi.fn()),
+            getSnapshot: vi.fn(() => secondSnapshot),
+        };
+        const { rerender } = renderHook(({ store }) => useAppsScriptJob(store), {
+            initialProps: {
+                store: firstStore,
+            },
+        });
+        await waitFor(() => {
+            expect(firstStore.subscribe).toHaveBeenCalledOnce();
+        });
+        rerender({
+            store: secondStore,
+        });
+        await waitFor(() => {
+            expect(secondStore.subscribe).toHaveBeenCalledOnce();
+        });
+        expect(firstUnsubscribe).toHaveBeenCalledOnce();
+    });
+});

package/tests/useAppsScriptJob.spec.tsx

@@ -0,0 +1,139 @@
+import type { AppsScriptJobStore } from "@gasboost/client";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useAppsScriptJob } from "../src/useAppsScriptJob";
+
+describe("useAppsScriptJob", () => {
+  it("jobStore の現在の snapshot を返す", () => {
+    const snapshot = {
+      status: "pending",
+    };
+
+    const jobStore = {
+      subscribe: vi.fn(() => vi.fn()),
+      getSnapshot: vi.fn(() => snapshot),
+    } as unknown as AppsScriptJobStore;
+
+    const { result } = renderHook(() => useAppsScriptJob(jobStore));
+
+    expect(result.current).toBe(snapshot);
+  });
+
+  it("jobStore の変更を subscribe する", async () => {
+    const snapshot = {
+      status: "pending",
+    };
+
+    const subscribe = vi.fn(() => vi.fn());
+
+    const jobStore = {
+      subscribe,
+      getSnapshot: vi.fn(() => snapshot),
+    } as unknown as AppsScriptJobStore;
+
+    renderHook(() => useAppsScriptJob(jobStore));
+
+    await waitFor(() => {
+      expect(subscribe).toHaveBeenCalledOnce();
+    });
+  });
+
+  it("jobStore の変更通知を受けると最新の snapshot を返す", async () => {
+    let listener: (() => void) | undefined;
+
+    let snapshot = {
+      status: "pending",
+    };
+
+    const jobStore = {
+      subscribe: vi.fn((handler: () => void) => {
+        listener = handler;
+        return vi.fn();
+      }),
+      getSnapshot: vi.fn(() => snapshot),
+    } as unknown as AppsScriptJobStore;
+
+    const { result } = renderHook(() => useAppsScriptJob(jobStore));
+
+    await waitFor(() => {
+      expect(listener).toBeDefined();
+    });
+
+    snapshot = {
+      status: "completed",
+    };
+
+    act(() => {
+      listener?.();
+    });
+
+    expect(result.current).toEqual({
+      status: "completed",
+    });
+  });
+
+  it("アンマウント時に subscribe の解除関数を呼ぶ", async () => {
+    const snapshot = {
+      status: "pending",
+    };
+
+    const unsubscribe = vi.fn();
+
+    const jobStore = {
+      subscribe: vi.fn(() => unsubscribe),
+      getSnapshot: vi.fn(() => snapshot),
+    } as unknown as AppsScriptJobStore;
+
+    const { unmount } = renderHook(() => useAppsScriptJob(jobStore));
+
+    await waitFor(() => {
+      expect(jobStore.subscribe).toHaveBeenCalledOnce();
+    });
+
+    unmount();
+
+    expect(unsubscribe).toHaveBeenCalledOnce();
+  });
+
+  it("jobStore が変更された場合は新しい store を subscribe する", async () => {
+    const firstSnapshot = {
+      status: "first",
+    };
+
+    const secondSnapshot = {
+      status: "second",
+    };
+
+    const firstUnsubscribe = vi.fn();
+
+    const firstStore = {
+      subscribe: vi.fn(() => firstUnsubscribe),
+      getSnapshot: vi.fn(() => firstSnapshot),
+    } as unknown as AppsScriptJobStore;
+
+    const secondStore = {
+      subscribe: vi.fn(() => vi.fn()),
+      getSnapshot: vi.fn(() => secondSnapshot),
+    } as unknown as AppsScriptJobStore;
+
+    const { rerender } = renderHook(({ store }) => useAppsScriptJob(store), {
+      initialProps: {
+        store: firstStore,
+      },
+    });
+
+    await waitFor(() => {
+      expect(firstStore.subscribe).toHaveBeenCalledOnce();
+    });
+
+    rerender({
+      store: secondStore,
+    });
+
+    await waitFor(() => {
+      expect(secondStore.subscribe).toHaveBeenCalledOnce();
+    });
+
+    expect(firstUnsubscribe).toHaveBeenCalledOnce();
+  });
+});

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": false,
+    "sourceMap": false,
+    "noEmit": false
+  },
+  "include": ["src"],
+  "exclude": ["tests", "dist"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "tests"]
+}

package/vitest.config.mts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+  },
+});