@ponder/react 0.9.0-next.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Cantrip, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { Client } from '@ponder/client';
+import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+declare function usePonderQuery<result>(params: {
+    queryFn: (db: Client["db"]) => Promise<result>;
+} & Omit<UseQueryOptions<result>, "queryFn" | "queryKey">): UseQueryResult<result>;
+
+type PonderProviderProps = {
+    client: Client;
+};
+declare function PonderProvider(params: React.PropsWithChildren<PonderProviderProps>): React.JSX.Element;
+
+export { PonderProvider, usePonderQuery };

package/dist/index.js

@@ -0,0 +1,45 @@
+// src/usePonderQuery.ts
+import { status } from "@ponder/client";
+import { compileQuery } from "@ponder/client";
+import {
+  useQuery,
+  useQueryClient
+} from "@tanstack/react-query";
+import { useContext, useEffect, useMemo } from "react";
+
+// src/context.tsx
+import React, { createContext } from "react";
+var PonderContext = createContext(void 0);
+function PonderProvider(params) {
+  const { children, client } = params;
+  return /* @__PURE__ */ React.createElement(PonderContext.Provider, { value: client }, children);
+}
+
+// src/usePonderQuery.ts
+function usePonderQuery(params) {
+  const queryClient = useQueryClient();
+  const client = useContext(PonderContext);
+  if (client === void 0) {
+    throw new Error("PonderProvider not found");
+  }
+  const queryPromise = params.queryFn(client.db);
+  const query = compileQuery(queryPromise);
+  const queryKey = useMemo(() => [query.sql, ...query.params], [query]);
+  useEffect(() => {
+    const { unsubscribe } = client.live(
+      (db) => db.select().from(status),
+      () => queryClient.invalidateQueries({ queryKey })
+    );
+    return unsubscribe;
+  }, [queryClient, client, queryKey]);
+  return useQuery({
+    ...params,
+    queryKey,
+    queryFn: () => queryPromise
+  });
+}
+export {
+  PonderProvider,
+  usePonderQuery
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/usePonderQuery.ts","../src/context.tsx"],"sourcesContent":["\"use client\";\n\nimport { type Client, status } from \"@ponder/client\";\nimport { compileQuery } from \"@ponder/client\";\nimport {\n  type UseQueryOptions,\n  type UseQueryResult,\n  useQuery,\n  useQueryClient,\n} from \"@tanstack/react-query\";\nimport { useContext, useEffect, useMemo } from \"react\";\nimport { PonderContext } from \"./context.js\";\n\nexport function usePonderQuery<result>(\n  params: {\n    queryFn: (db: Client[\"db\"]) => Promise<result>;\n  } & Omit<UseQueryOptions<result>, \"queryFn\" | \"queryKey\">,\n): UseQueryResult<result> {\n  const queryClient = useQueryClient();\n\n  const client = useContext(PonderContext);\n  if (client === undefined) {\n    throw new Error(\"PonderProvider not found\");\n  }\n\n  const queryPromise = params.queryFn(client.db);\n  // @ts-ignore\n  const query = compileQuery(queryPromise);\n  const queryKey = useMemo(() => [query.sql, ...query.params], [query]);\n\n  useEffect(() => {\n    const { unsubscribe } = client.live(\n      (db) => db.select().from(status),\n      () => queryClient.invalidateQueries({ queryKey }),\n    );\n    return unsubscribe;\n  }, [queryClient, client, queryKey]);\n\n  return useQuery({\n    ...params,\n    queryKey,\n    queryFn: () => queryPromise,\n  });\n}\n","\"use client\";\n\nimport type { Client } from \"@ponder/client\";\n// biome-ignore lint/style/useImportType: \"React\" is needed\nimport React, { createContext } from \"react\";\n\nexport const PonderContext = createContext<Client | undefined>(undefined);\n\ntype PonderProviderProps = {\n  client: Client;\n};\n\nexport function PonderProvider(\n  params: React.PropsWithChildren<PonderProviderProps>,\n) {\n  const { children, client } = params;\n\n  return (\n    <PonderContext.Provider value={client}>{children}</PonderContext.Provider>\n  );\n}\n"],"mappings":";AAEA,SAAsB,cAAc;AACpC,SAAS,oBAAoB;AAC7B;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,WAAW,eAAe;;;ACN/C,OAAO,SAAS,qBAAqB;AAE9B,IAAM,gBAAgB,cAAkC,MAAS;AAMjE,SAAS,eACd,QACA;AACA,QAAM,EAAE,UAAU,OAAO,IAAI;AAE7B,SACE,oCAAC,cAAc,UAAd,EAAuB,OAAO,UAAS,QAAS;AAErD;;;ADPO,SAAS,eACd,QAGwB;AACxB,QAAM,cAAc,eAAe;AAEnC,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,WAAW,QAAW;AACxB,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AAEA,QAAM,eAAe,OAAO,QAAQ,OAAO,EAAE;AAE7C,QAAM,QAAQ,aAAa,YAAY;AACvC,QAAM,WAAW,QAAQ,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC;AAEpE,YAAU,MAAM;AACd,UAAM,EAAE,YAAY,IAAI,OAAO;AAAA,MAC7B,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,MAAM;AAAA,MAC/B,MAAM,YAAY,kBAAkB,EAAE,SAAS,CAAC;AAAA,IAClD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,QAAQ,QAAQ,CAAC;AAElC,SAAO,SAAS;AAAA,IACd,GAAG;AAAA,IACH;AAAA,IACA,SAAS,MAAM;AAAA,EACjB,CAAC;AACH;","names":[]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ponder/react",
+  "version": "0.9.0-next.4",
+  "description": "React hooks for Ponder",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ponder-sh/ponder",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist",
+    "src/**/*.ts",
+    "!src/**/*.test.ts",
+    "!src/**/*.test-d.ts",
+    "!src/_test/**/*"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@ponder/client": ">=0.9.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "react": ">=18",
+    "typescript": ">=5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.12.2",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1"
+  },
+  "imports": {
+    "@ponder/client": "../client/index.ts"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest",
+    "test:typecheck": "vitest --typecheck.only",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { usePonderQuery } from "./usePonderQuery.js";
+export { PonderProvider } from "./context.js";

package/src/usePonderQuery.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { type Client, status } from "@ponder/client";
+import { compileQuery } from "@ponder/client";
+import {
+  type UseQueryOptions,
+  type UseQueryResult,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { useContext, useEffect, useMemo } from "react";
+import { PonderContext } from "./context.js";
+
+export function usePonderQuery<result>(
+  params: {
+    queryFn: (db: Client["db"]) => Promise<result>;
+  } & Omit<UseQueryOptions<result>, "queryFn" | "queryKey">,
+): UseQueryResult<result> {
+  const queryClient = useQueryClient();
+
+  const client = useContext(PonderContext);
+  if (client === undefined) {
+    throw new Error("PonderProvider not found");
+  }
+
+  const queryPromise = params.queryFn(client.db);
+  // @ts-ignore
+  const query = compileQuery(queryPromise);
+  const queryKey = useMemo(() => [query.sql, ...query.params], [query]);
+
+  useEffect(() => {
+    const { unsubscribe } = client.live(
+      (db) => db.select().from(status),
+      () => queryClient.invalidateQueries({ queryKey }),
+    );
+    return unsubscribe;
+  }, [queryClient, client, queryKey]);
+
+  return useQuery({
+    ...params,
+    queryKey,
+    queryFn: () => queryPromise,
+  });
+}