@electric-sql/pglite-react 0.2.0 → 0.2.1

package/README.md

@@ -10,7 +10,8 @@ npm install @electric-sql/pglite-react
 
 The hooks this package provides are:
 
-- [PGliteProvider](https://pglite.dev/docs/framework-hooks#pgliteprovider): A Provider component to pass a PGlite instance to all child components for use with the other hooks.
-- [usePGlite](https://pglite.dev/docs/framework-hooks#usepglite): Retrieve the provided PGlite instance.
-- [useLiveQuery](https://pglite.dev/docs/framework-hooks#uselivequery): Reactively re-render your component whenever the results of a live query change
-- [useLiveIncrementalQuery](https://pglite.dev/docs/framework-hooks#useliveincrementalquery): Reactively re-render your component whenever the results of a live query change by offloading the diff to PGlite
+- [PGliteProvider](https://pglite.dev/docs/framework-hooks/react#pgliteprovider): A Provider component to pass a PGlite instance to all child components for use with the other hooks.
+- [usePGlite](https://pglite.dev/docs/framework-hooks/react#usepglite): Retrieve the provided PGlite instance.
+- [makePGliteProvider](https://pglite.dev/docs/framework-hooks/react#makepgliteprovider): Create typed instances of `PGliteProvider` and `usePGlite`.
+- [useLiveQuery](https://pglite.dev/docs/framework-hooks/react#uselivequery): Reactively re-render your component whenever the results of a live query change
+- [useLiveIncrementalQuery](https://pglite.dev/docs/framework-hooks/react#useliveincrementalquery): Reactively re-render your component whenever the results of a live query change by offloading the diff to PGlite

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var n in e)l(t,n,{get:e[n],enumerable:!0})},g=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of x(e))!a.call(t,i)&&i!==n&&l(t,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return t};var G=t=>g(l({},"__esModule",{value:!0}),t);var W={};w(W,{PGliteProvider:()=>L,useLiveIncrementalQuery:()=>k,useLiveQuery:()=>h,usePGlite:()=>d});module.exports=G(W);var u=require("react"),m=require("react/jsx-runtime"),T=(0,u.createContext)(void 0);function L({children:t,db:e}){return(0,m.jsx)(T.Provider,{value:e,children:t})}function d(){return(0,u.useContext)(T)}var o=require("react");function v(t,e,n){let r=d(),[i,P]=(0,o.useState)();return(0,o.useEffect)(()=>{let f=!1,c=s=>{f||P(s)},R=n!==void 0?r.live.incrementalQuery(t,e,n,c):r.live.query(t,e,c);return()=>{f=!0,R.then(({unsubscribe:s})=>s())}},[r,n,t,...e??[]]),i&&{rows:i.rows,fields:i.fields}}function h(t,e){return v(t,e)}function k(t,e,n){return v(t,e,n)}0&&(module.exports={PGliteProvider,useLiveIncrementalQuery,useLiveQuery,usePGlite});
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var R=(t,e)=>{for(var n in e)l(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of x(e))!w.call(t,i)&&i!==n&&l(t,i,{get:()=>e[i],enumerable:!(r=m(e,i))||r.enumerable});return t};var h=t=>a(l({},"__esModule",{value:!0}),t);var W={};R(W,{PGliteProvider:()=>L,makePGliteProvider:()=>c,useLiveIncrementalQuery:()=>k,useLiveQuery:()=>g,usePGlite:()=>d});module.exports=h(W);var o=require("react"),T=require("react/jsx-runtime");function c(){let t=(0,o.createContext)(void 0);return{usePGlite:e=>{let n=(0,o.useContext)(t);if(e)return e;if(!n)throw new Error("No PGlite instance found, use PGliteProvider to provide one");return n},PGliteProvider:({children:e,db:n})=>(0,T.jsx)(t.Provider,{value:n,children:e})}}var{PGliteProvider:L,usePGlite:d}=c();var s=require("react");function v(t,e,n){let r=d(),[i,G]=(0,s.useState)();return(0,s.useEffect)(()=>{let P=!1,f=u=>{P||G(u)},p=n!==void 0?r.live.incrementalQuery(t,e,n,f):r.live.query(t,e,f);return()=>{P=!0,p.then(({unsubscribe:u})=>u())}},[r,n,t,...e??[]]),i&&{rows:i.rows,fields:i.fields}}function g(t,e){return v(t,e)}function k(t,e,n){return v(t,e,n)}0&&(module.exports={PGliteProvider,makePGliteProvider,useLiveIncrementalQuery,useLiveQuery,usePGlite});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["export * from './provider'\nexport * from './hooks'\n","import React, { createContext, useContext } from 'react'\nimport { PGliteWithLive } from '@electric-sql/pglite/live'\n\ninterface Props<T extends PGliteWithLive> {\n  children?: React.ReactNode\n  db?: T\n}\n\nconst ctx = createContext<PGliteWithLive | undefined>(undefined)\n\nexport function PGliteProvider<T extends PGliteWithLive>({\n  children,\n  db,\n}: Props<T>): React.ReactElement {\n  return <ctx.Provider value={db}>{children}</ctx.Provider>\n}\n\nexport function usePGlite(): PGliteWithLive {\n  return useContext(ctx)!\n}\n","import { useEffect, useState } from 'react'\nimport { Results } from '@electric-sql/pglite'\nimport { usePGlite } from './provider'\n\nfunction useLiveQueryImpl<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key?: string,\n): Omit<Results<T>, 'affectedRows'> | undefined {\n  const db = usePGlite()\n  const [results, setResults] = useState<Results<T>>()\n  useEffect(() => {\n    let cancelled = false\n    const cb = (results: Results<T>) => {\n      if (cancelled) return\n      setResults(results)\n    }\n    const ret =\n      key !== undefined\n        ? db.live.incrementalQuery<T>(query, params, key, cb)\n        : db.live.query<T>(query, params, cb)\n\n    return () => {\n      cancelled = true\n      ret.then(({ unsubscribe }) => unsubscribe())\n    }\n\n    // Using spread operator for params to avoid serializing it to JSON\n    // or performing more complicated array equality checks\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [db, key, query, ...(params ?? [])])\n  return (\n    results && {\n      rows: results.rows,\n      fields: results.fields,\n    }\n  )\n}\n\nexport function useLiveQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params)\n}\n\nexport function useLiveIncrementalQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key: string,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,4BAAAC,EAAA,iBAAAC,EAAA,cAAAC,IAAA,eAAAC,EAAAN,GCAA,IAAAO,EAAiD,iBAcxCC,EAAA,6BANHC,KAAM,iBAA0C,MAAS,EAExD,SAASC,EAAyC,CACvD,SAAAC,EACA,GAAAC,CACF,EAAiC,CAC/B,SAAO,OAACH,EAAI,SAAJ,CAAa,MAAOG,EAAK,SAAAD,EAAS,CAC5C,CAEO,SAASE,GAA4B,CAC1C,SAAO,cAAWJ,CAAG,CACvB,CCnBA,IAAAK,EAAoC,iBAIpC,SAASC,EACPC,EACAC,EACAC,EAC8C,CAC9C,IAAMC,EAAKC,EAAU,EACf,CAACC,EAASC,CAAU,KAAI,YAAqB,EACnD,sBAAU,IAAM,CACd,IAAIC,EAAY,GACVC,EAAMH,GAAwB,CAC9BE,GACJD,EAAWD,CAAO,CACpB,EACMI,EACJP,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKM,CAAE,EAClDL,EAAG,KAAK,MAASH,EAAOC,EAAQO,CAAE,EAExC,MAAO,IAAM,CACXD,EAAY,GACZE,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,CAC7C,CAMF,EAAG,CAACP,EAAID,EAAKF,EAAO,GAAIC,GAAU,CAAC,CAAE,CAAC,EAEpCI,GAAW,CACT,KAAMA,EAAQ,KACd,OAAQA,EAAQ,MAClB,CAEJ,CAEO,SAASM,EACdX,EACAC,EACwB,CACxB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASW,EACdZ,EACAC,EACAC,EACwB,CACxB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["src_exports","__export","PGliteProvider","useLiveIncrementalQuery","useLiveQuery","usePGlite","__toCommonJS","import_react","import_jsx_runtime","ctx","PGliteProvider","children","db","usePGlite","import_react","useLiveQueryImpl","query","params","key","db","usePGlite","results","setResults","cancelled","cb","ret","unsubscribe","useLiveQuery","useLiveIncrementalQuery"]}
+{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["export * from './provider'\nexport * from './hooks'\n","import React, { createContext, useContext } from 'react'\nimport { PGliteWithLive } from '@electric-sql/pglite/live'\n\ninterface Props<T extends PGliteWithLive> {\n  children?: React.ReactNode\n  db?: T\n}\n\ntype PGliteProvider<T extends PGliteWithLive> = (props: Props<T>) => JSX.Element\ntype UsePGlite<T extends PGliteWithLive> = (db?: T) => T\n\ninterface PGliteProviderSet<T extends PGliteWithLive> {\n  PGliteProvider: PGliteProvider<T>\n  usePGlite: UsePGlite<T>\n}\n\n/**\n * Create a typed set of {@link PGliteProvider} and {@link usePGlite}.\n */\nfunction makePGliteProvider<T extends PGliteWithLive>(): PGliteProviderSet<T> {\n  const ctx = createContext<T | undefined>(undefined)\n  return {\n    usePGlite: (db?: T) => {\n      const dbProvided = useContext(ctx)\n\n      // allow providing a db explicitly\n      if (db) return db\n\n      if (!dbProvided)\n        throw new Error(\n          'No PGlite instance found, use PGliteProvider to provide one',\n        )\n\n      return dbProvided\n    },\n    PGliteProvider: ({ children, db }: Props<T>) => {\n      return <ctx.Provider value={db}>{children}</ctx.Provider>\n    },\n  }\n}\n\nconst { PGliteProvider, usePGlite } = makePGliteProvider<PGliteWithLive>()\n\nexport { makePGliteProvider, PGliteProvider, usePGlite }\n","import { useEffect, useState } from 'react'\nimport { Results } from '@electric-sql/pglite'\nimport { usePGlite } from './provider'\n\nfunction useLiveQueryImpl<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key?: string,\n): Omit<Results<T>, 'affectedRows'> | undefined {\n  const db = usePGlite()\n  const [results, setResults] = useState<Results<T>>()\n  useEffect(() => {\n    let cancelled = false\n    const cb = (results: Results<T>) => {\n      if (cancelled) return\n      setResults(results)\n    }\n    const ret =\n      key !== undefined\n        ? db.live.incrementalQuery<T>(query, params, key, cb)\n        : db.live.query<T>(query, params, cb)\n\n    return () => {\n      cancelled = true\n      ret.then(({ unsubscribe }) => unsubscribe())\n    }\n\n    // Using spread operator for params to avoid serializing it to JSON\n    // or performing more complicated array equality checks\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [db, key, query, ...(params ?? [])])\n  return (\n    results && {\n      rows: results.rows,\n      fields: results.fields,\n    }\n  )\n}\n\nexport function useLiveQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params)\n}\n\nexport function useLiveIncrementalQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key: string,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,uBAAAC,EAAA,4BAAAC,EAAA,iBAAAC,EAAA,cAAAC,IAAA,eAAAC,EAAAP,GCAA,IAAAQ,EAAiD,iBAoCpCC,EAAA,6BAjBb,SAASC,GAAqE,CAC5E,IAAMC,KAAM,iBAA6B,MAAS,EAClD,MAAO,CACL,UAAYC,GAAW,CACrB,IAAMC,KAAa,cAAWF,CAAG,EAGjC,GAAIC,EAAI,OAAOA,EAEf,GAAI,CAACC,EACH,MAAM,IAAI,MACR,6DACF,EAEF,OAAOA,CACT,EACA,eAAgB,CAAC,CAAE,SAAAC,EAAU,GAAAF,CAAG,OACvB,OAACD,EAAI,SAAJ,CAAa,MAAOC,EAAK,SAAAE,EAAS,CAE9C,CACF,CAEA,GAAM,CAAE,eAAAC,EAAgB,UAAAC,CAAU,EAAIN,EAAmC,ECzCzE,IAAAO,EAAoC,iBAIpC,SAASC,EACPC,EACAC,EACAC,EAC8C,CAC9C,IAAMC,EAAKC,EAAU,EACf,CAACC,EAASC,CAAU,KAAI,YAAqB,EACnD,sBAAU,IAAM,CACd,IAAIC,EAAY,GACVC,EAAMH,GAAwB,CAC9BE,GACJD,EAAWD,CAAO,CACpB,EACMI,EACJP,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKM,CAAE,EAClDL,EAAG,KAAK,MAASH,EAAOC,EAAQO,CAAE,EAExC,MAAO,IAAM,CACXD,EAAY,GACZE,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,CAC7C,CAMF,EAAG,CAACP,EAAID,EAAKF,EAAO,GAAIC,GAAU,CAAC,CAAE,CAAC,EAEpCI,GAAW,CACT,KAAMA,EAAQ,KACd,OAAQA,EAAQ,MAClB,CAEJ,CAEO,SAASM,EACdX,EACAC,EACwB,CACxB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASW,EACdZ,EACAC,EACAC,EACwB,CACxB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["src_exports","__export","PGliteProvider","makePGliteProvider","useLiveIncrementalQuery","useLiveQuery","usePGlite","__toCommonJS","import_react","import_jsx_runtime","makePGliteProvider","ctx","db","dbProvided","children","PGliteProvider","usePGlite","import_react","useLiveQueryImpl","query","params","key","db","usePGlite","results","setResults","cancelled","cb","ret","unsubscribe","useLiveQuery","useLiveIncrementalQuery"]}

package/dist/index.d.cts

@@ -6,8 +6,18 @@ interface Props<T extends PGliteWithLive> {
     children?: React.ReactNode;
     db?: T;
 }
-declare function PGliteProvider<T extends PGliteWithLive>({ children, db, }: Props<T>): React.ReactElement;
-declare function usePGlite(): PGliteWithLive;
+type UsePGlite<T extends PGliteWithLive> = (db?: T) => T;
+interface PGliteProviderSet<T extends PGliteWithLive> {
+    PGliteProvider: PGliteProvider<T>;
+    usePGlite: UsePGlite<T>;
+}
+/**
+ * Create a typed set of {@link PGliteProvider} and {@link usePGlite}.
+ */
+declare function makePGliteProvider<T extends PGliteWithLive>(): PGliteProviderSet<T>;
+type PGliteProvider<T extends PGliteWithLive> = (props: Props<T>) => JSX.Element;
+declare const PGliteProvider: PGliteProvider<PGliteWithLive>;
+declare const usePGlite: UsePGlite<PGliteWithLive>;
 
 declare function useLiveQuery<T = {
     [key: string]: unknown;
@@ -16,4 +26,4 @@ declare function useLiveIncrementalQuery<T = {
     [key: string]: unknown;
 }>(query: string, params: unknown[] | undefined | null, key: string): Results<T> | undefined;
 
-export { PGliteProvider, useLiveIncrementalQuery, useLiveQuery, usePGlite };
+export { PGliteProvider, makePGliteProvider, useLiveIncrementalQuery, useLiveQuery, usePGlite };

package/dist/index.d.ts

@@ -6,8 +6,18 @@ interface Props<T extends PGliteWithLive> {
     children?: React.ReactNode;
     db?: T;
 }
-declare function PGliteProvider<T extends PGliteWithLive>({ children, db, }: Props<T>): React.ReactElement;
-declare function usePGlite(): PGliteWithLive;
+type UsePGlite<T extends PGliteWithLive> = (db?: T) => T;
+interface PGliteProviderSet<T extends PGliteWithLive> {
+    PGliteProvider: PGliteProvider<T>;
+    usePGlite: UsePGlite<T>;
+}
+/**
+ * Create a typed set of {@link PGliteProvider} and {@link usePGlite}.
+ */
+declare function makePGliteProvider<T extends PGliteWithLive>(): PGliteProviderSet<T>;
+type PGliteProvider<T extends PGliteWithLive> = (props: Props<T>) => JSX.Element;
+declare const PGliteProvider: PGliteProvider<PGliteWithLive>;
+declare const usePGlite: UsePGlite<PGliteWithLive>;
 
 declare function useLiveQuery<T = {
     [key: string]: unknown;
@@ -16,4 +26,4 @@ declare function useLiveIncrementalQuery<T = {
     [key: string]: unknown;
 }>(query: string, params: unknown[] | undefined | null, key: string): Results<T> | undefined;
 
-export { PGliteProvider, useLiveIncrementalQuery, useLiveQuery, usePGlite };
+export { PGliteProvider, makePGliteProvider, useLiveIncrementalQuery, useLiveQuery, usePGlite };

package/dist/index.js

@@ -1,2 +1,2 @@
-import{createContext as m,useContext as v}from"react";import{jsx as P}from"react/jsx-runtime";var l=m(void 0);function w({children:e,db:t}){return P(l.Provider,{value:t,children:e})}function d(){return v(l)}import{useEffect as R,useState as p}from"react";function f(e,t,n){let i=d(),[r,c]=p();return R(()=>{let o=!1,s=u=>{o||c(u)},T=n!==void 0?i.live.incrementalQuery(e,t,n,s):i.live.query(e,t,s);return()=>{o=!0,T.then(({unsubscribe:u})=>u())}},[i,n,e,...t??[]]),r&&{rows:r.rows,fields:r.fields}}function k(e,t){return f(e,t)}function W(e,t,n){return f(e,t,n)}export{w as PGliteProvider,W as useLiveIncrementalQuery,k as useLiveQuery,d as usePGlite};
+import{createContext as c,useContext as T}from"react";import{jsx as G}from"react/jsx-runtime";function v(){let t=c(void 0);return{usePGlite:e=>{let n=T(t);if(e)return e;if(!n)throw new Error("No PGlite instance found, use PGliteProvider to provide one");return n},PGliteProvider:({children:e,db:n})=>G(t.Provider,{value:n,children:e})}}var{PGliteProvider:R,usePGlite:l}=v();import{useEffect as p,useState as m}from"react";function d(t,e,n){let i=l(),[r,P]=m();return p(()=>{let s=!1,u=o=>{s||P(o)},f=n!==void 0?i.live.incrementalQuery(t,e,n,u):i.live.query(t,e,u);return()=>{s=!0,f.then(({unsubscribe:o})=>o())}},[i,n,t,...e??[]]),r&&{rows:r.rows,fields:r.fields}}function k(t,e){return d(t,e)}function W(t,e,n){return d(t,e,n)}export{R as PGliteProvider,v as makePGliteProvider,W as useLiveIncrementalQuery,k as useLiveQuery,l as usePGlite};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import React, { createContext, useContext } from 'react'\nimport { PGliteWithLive } from '@electric-sql/pglite/live'\n\ninterface Props<T extends PGliteWithLive> {\n  children?: React.ReactNode\n  db?: T\n}\n\nconst ctx = createContext<PGliteWithLive | undefined>(undefined)\n\nexport function PGliteProvider<T extends PGliteWithLive>({\n  children,\n  db,\n}: Props<T>): React.ReactElement {\n  return <ctx.Provider value={db}>{children}</ctx.Provider>\n}\n\nexport function usePGlite(): PGliteWithLive {\n  return useContext(ctx)!\n}\n","import { useEffect, useState } from 'react'\nimport { Results } from '@electric-sql/pglite'\nimport { usePGlite } from './provider'\n\nfunction useLiveQueryImpl<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key?: string,\n): Omit<Results<T>, 'affectedRows'> | undefined {\n  const db = usePGlite()\n  const [results, setResults] = useState<Results<T>>()\n  useEffect(() => {\n    let cancelled = false\n    const cb = (results: Results<T>) => {\n      if (cancelled) return\n      setResults(results)\n    }\n    const ret =\n      key !== undefined\n        ? db.live.incrementalQuery<T>(query, params, key, cb)\n        : db.live.query<T>(query, params, cb)\n\n    return () => {\n      cancelled = true\n      ret.then(({ unsubscribe }) => unsubscribe())\n    }\n\n    // Using spread operator for params to avoid serializing it to JSON\n    // or performing more complicated array equality checks\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [db, key, query, ...(params ?? [])])\n  return (\n    results && {\n      rows: results.rows,\n      fields: results.fields,\n    }\n  )\n}\n\nexport function useLiveQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params)\n}\n\nexport function useLiveIncrementalQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key: string,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"AAAA,OAAgB,iBAAAA,EAAe,cAAAC,MAAkB,QAcxC,cAAAC,MAAA,oBANT,IAAMC,EAAMH,EAA0C,MAAS,EAExD,SAASI,EAAyC,CACvD,SAAAC,EACA,GAAAC,CACF,EAAiC,CAC/B,OAAOJ,EAACC,EAAI,SAAJ,CAAa,MAAOG,EAAK,SAAAD,EAAS,CAC5C,CAEO,SAASE,GAA4B,CAC1C,OAAON,EAAWE,CAAG,CACvB,CCnBA,OAAS,aAAAK,EAAW,YAAAC,MAAgB,QAIpC,SAASC,EACPC,EACAC,EACAC,EAC8C,CAC9C,IAAMC,EAAKC,EAAU,EACf,CAACC,EAASC,CAAU,EAAIC,EAAqB,EACnD,OAAAC,EAAU,IAAM,CACd,IAAIC,EAAY,GACVC,EAAML,GAAwB,CAC9BI,GACJH,EAAWD,CAAO,CACpB,EACMM,EACJT,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKQ,CAAE,EAClDP,EAAG,KAAK,MAASH,EAAOC,EAAQS,CAAE,EAExC,MAAO,IAAM,CACXD,EAAY,GACZE,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,CAC7C,CAMF,EAAG,CAACT,EAAID,EAAKF,EAAO,GAAIC,GAAU,CAAC,CAAE,CAAC,EAEpCI,GAAW,CACT,KAAMA,EAAQ,KACd,OAAQA,EAAQ,MAClB,CAEJ,CAEO,SAASQ,EACdb,EACAC,EACwB,CACxB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASa,EACdd,EACAC,EACAC,EACwB,CACxB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["createContext","useContext","jsx","ctx","PGliteProvider","children","db","usePGlite","useEffect","useState","useLiveQueryImpl","query","params","key","db","usePGlite","results","setResults","useState","useEffect","cancelled","cb","ret","unsubscribe","useLiveQuery","useLiveIncrementalQuery"]}
+{"version":3,"sources":["../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import React, { createContext, useContext } from 'react'\nimport { PGliteWithLive } from '@electric-sql/pglite/live'\n\ninterface Props<T extends PGliteWithLive> {\n  children?: React.ReactNode\n  db?: T\n}\n\ntype PGliteProvider<T extends PGliteWithLive> = (props: Props<T>) => JSX.Element\ntype UsePGlite<T extends PGliteWithLive> = (db?: T) => T\n\ninterface PGliteProviderSet<T extends PGliteWithLive> {\n  PGliteProvider: PGliteProvider<T>\n  usePGlite: UsePGlite<T>\n}\n\n/**\n * Create a typed set of {@link PGliteProvider} and {@link usePGlite}.\n */\nfunction makePGliteProvider<T extends PGliteWithLive>(): PGliteProviderSet<T> {\n  const ctx = createContext<T | undefined>(undefined)\n  return {\n    usePGlite: (db?: T) => {\n      const dbProvided = useContext(ctx)\n\n      // allow providing a db explicitly\n      if (db) return db\n\n      if (!dbProvided)\n        throw new Error(\n          'No PGlite instance found, use PGliteProvider to provide one',\n        )\n\n      return dbProvided\n    },\n    PGliteProvider: ({ children, db }: Props<T>) => {\n      return <ctx.Provider value={db}>{children}</ctx.Provider>\n    },\n  }\n}\n\nconst { PGliteProvider, usePGlite } = makePGliteProvider<PGliteWithLive>()\n\nexport { makePGliteProvider, PGliteProvider, usePGlite }\n","import { useEffect, useState } from 'react'\nimport { Results } from '@electric-sql/pglite'\nimport { usePGlite } from './provider'\n\nfunction useLiveQueryImpl<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key?: string,\n): Omit<Results<T>, 'affectedRows'> | undefined {\n  const db = usePGlite()\n  const [results, setResults] = useState<Results<T>>()\n  useEffect(() => {\n    let cancelled = false\n    const cb = (results: Results<T>) => {\n      if (cancelled) return\n      setResults(results)\n    }\n    const ret =\n      key !== undefined\n        ? db.live.incrementalQuery<T>(query, params, key, cb)\n        : db.live.query<T>(query, params, cb)\n\n    return () => {\n      cancelled = true\n      ret.then(({ unsubscribe }) => unsubscribe())\n    }\n\n    // Using spread operator for params to avoid serializing it to JSON\n    // or performing more complicated array equality checks\n    // eslint-disable-next-line react-compiler/react-compiler\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [db, key, query, ...(params ?? [])])\n  return (\n    results && {\n      rows: results.rows,\n      fields: results.fields,\n    }\n  )\n}\n\nexport function useLiveQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params)\n}\n\nexport function useLiveIncrementalQuery<T = { [key: string]: unknown }>(\n  query: string,\n  params: unknown[] | undefined | null,\n  key: string,\n): Results<T> | undefined {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"AAAA,OAAgB,iBAAAA,EAAe,cAAAC,MAAkB,QAoCpC,cAAAC,MAAA,oBAjBb,SAASC,GAAqE,CAC5E,IAAMC,EAAMJ,EAA6B,MAAS,EAClD,MAAO,CACL,UAAYK,GAAW,CACrB,IAAMC,EAAaL,EAAWG,CAAG,EAGjC,GAAIC,EAAI,OAAOA,EAEf,GAAI,CAACC,EACH,MAAM,IAAI,MACR,6DACF,EAEF,OAAOA,CACT,EACA,eAAgB,CAAC,CAAE,SAAAC,EAAU,GAAAF,CAAG,IACvBH,EAACE,EAAI,SAAJ,CAAa,MAAOC,EAAK,SAAAE,EAAS,CAE9C,CACF,CAEA,GAAM,CAAE,eAAAC,EAAgB,UAAAC,CAAU,EAAIN,EAAmC,ECzCzE,OAAS,aAAAO,EAAW,YAAAC,MAAgB,QAIpC,SAASC,EACPC,EACAC,EACAC,EAC8C,CAC9C,IAAMC,EAAKC,EAAU,EACf,CAACC,EAASC,CAAU,EAAIC,EAAqB,EACnD,OAAAC,EAAU,IAAM,CACd,IAAIC,EAAY,GACVC,EAAML,GAAwB,CAC9BI,GACJH,EAAWD,CAAO,CACpB,EACMM,EACJT,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKQ,CAAE,EAClDP,EAAG,KAAK,MAASH,EAAOC,EAAQS,CAAE,EAExC,MAAO,IAAM,CACXD,EAAY,GACZE,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,CAC7C,CAMF,EAAG,CAACT,EAAID,EAAKF,EAAO,GAAIC,GAAU,CAAC,CAAE,CAAC,EAEpCI,GAAW,CACT,KAAMA,EAAQ,KACd,OAAQA,EAAQ,MAClB,CAEJ,CAEO,SAASQ,EACdb,EACAC,EACwB,CACxB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASa,EACdd,EACAC,EACAC,EACwB,CACxB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["createContext","useContext","jsx","makePGliteProvider","ctx","db","dbProvided","children","PGliteProvider","usePGlite","useEffect","useState","useLiveQueryImpl","query","params","key","db","usePGlite","results","setResults","useState","useEffect","cancelled","cb","ret","unsubscribe","useLiveQuery","useLiveIncrementalQuery"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electric-sql/pglite-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Hooks for using PGlite",
   "type": "module",
   "private": false,
@@ -26,9 +26,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
@@ -47,11 +47,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vitest": "^2.0.5",
-    "@electric-sql/pglite": "0.2.0"
+    "@electric-sql/pglite": "0.2.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "@electric-sql/pglite": "^0.2.0"
+    "@electric-sql/pglite": "^0.2.1"
   },
   "scripts": {
     "build": "tsup",