@electric-sql/pglite-vue 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# PGlite Vue Bindings
|
|
2
2
|
|
|
3
|
-
This package implements Vue hooks for [PGLite](https://pglite.dev/) on top of the [live query plugin](https://pglite.dev/docs/live-queries). Full documentation is available at [pglite.dev/docs/framework-hooks](https://pglite.dev/docs/framework-hooks
|
|
3
|
+
This package implements Vue hooks for [PGLite](https://pglite.dev/) on top of the [live query plugin](https://pglite.dev/docs/live-queries). Full documentation is available at [pglite.dev/docs/framework-hooks/vue](https://pglite.dev/docs/framework-hooks/vue).
|
|
4
4
|
|
|
5
5
|
To install:
|
|
6
6
|
|
|
@@ -10,8 +10,8 @@ npm install @electric-sql/pglite-vue
|
|
|
10
10
|
|
|
11
11
|
The hooks this package provides are:
|
|
12
12
|
|
|
13
|
-
- [providePGlite](https://pglite.dev/docs/framework-
|
|
13
|
+
- [providePGlite](https://pglite.dev/docs/framework-hooks/vue#providepglite): Provide a PGlite instance to all child components.
|
|
14
14
|
- [injectPGlite](https://pglite.dev/docs/framework-hooks/vue#injectpglite): Retrieve the provided PGlite instance.
|
|
15
15
|
- [makePGliteDependencyInjector](https://pglite.dev/docs/framework-hooks/vue#makepglitedependencyinjector): Utility to create a typed version of `providePGlite` and `injectPGlite`.
|
|
16
|
-
- [useLiveQuery](https://pglite.dev/docs/framework-hooks#uselivequery): Reactively receive results of a live query change
|
|
17
|
-
- [useLiveIncrementalQuery](https://pglite.dev/docs/framework-hooks#useliveincrementalquery): Reactively receive results of a live query change by offloading the diff to PGlite
|
|
16
|
+
- [useLiveQuery](https://pglite.dev/docs/framework-hooks/vue#uselivequery): Reactively receive results of a live query change
|
|
17
|
+
- [useLiveIncrementalQuery](https://pglite.dev/docs/framework-hooks/vue#useliveincrementalquery): Reactively receive results of a live query change by offloading the diff to PGlite
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var l=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var i in e)l(t,i,{get:e[i],enumerable:!0})},L=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!W.call(t,r)&&r!==i&&l(t,r,{get:()=>e[r],enumerable:!(o=S(e,r))||o.enumerable});return t};var j=t=>L(l({},"__esModule",{value:!0}),t);var
|
|
1
|
+
"use strict";var l=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var i in e)l(t,i,{get:e[i],enumerable:!0})},L=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!W.call(t,r)&&r!==i&&l(t,r,{get:()=>e[r],enumerable:!(o=S(e,r))||o.enumerable});return t};var j=t=>L(l({},"__esModule",{value:!0}),t);var A={};k(A,{injectPGlite:()=>f,makePGliteDependencyInjector:()=>h,providePGlite:()=>x,useLiveIncrementalQuery:()=>D,useLiveQuery:()=>w});module.exports=j(A);var s=require("vue-demi"),b=Symbol("PGliteProvider");function h(){return{providePGlite:i=>(0,s.provide)(b,i),injectPGlite:()=>{let i=(0,s.inject)(b);return(0,s.unref)(i)}}}var{injectPGlite:f,providePGlite:x}=h();var n=require("vue-demi"),Q=require("@electric-sql/pglite/template");function y(t,e,i){let o=f(),r=(0,n.shallowReactive)({rows:void 0,fields:void 0,blob:void 0}),a=(0,n.shallowRef)(),c=typeof t=="string"?(0,n.ref)(t):t,T=e?Array.isArray(e)?e.map(n.ref):[e]:[(0,n.ref)(e)],d=typeof i=="string"?(0,n.ref)(i):i;return(0,n.watch)(i!==void 0?[c,d,...T]:[c,...T],()=>{let v=!1,p=u=>{v||(r.rows=u.rows,r.fields=u.fields,u.blob!==void 0&&(r.blob=u.blob))},P=(0,n.isRef)(c)?(0,n.unref)(c):c(),m=(0,n.isRef)(e)?(0,n.unref)(e):typeof e=="function"?e():Array.isArray(e)?e.map(n.unref):[e],R=(0,n.isRef)(d)?d.value:d?.(),G=R!==void 0?o.live.incrementalQuery(P,m,R,p):o.live.query(P,m,p);a.value=()=>(v=!0,G.then(({unsubscribe:u})=>u()))},{immediate:!0}),(0,n.onScopeDispose)(()=>a.value?.()),(0,n.toRefs)((0,n.readonly)(r))}function w(t,e){return y(t,e)}w.sql=function(t,...e){let{query:i,params:o}=(0,Q.query)(t,...e);return y(i,o)};function D(t,e,i){return y(t,e,i)}0&&(module.exports={injectPGlite,makePGliteDependencyInjector,providePGlite,useLiveIncrementalQuery,useLiveQuery});
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/dependency-injection.ts","../src/hooks.ts"],"sourcesContent":["export
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/dependency-injection.ts","../src/hooks.ts"],"sourcesContent":["export * from './dependency-injection'\nexport * from './hooks'\n","import { provide, inject, unref, Ref } from 'vue-demi'\nimport { PGliteWithLive } from '@electric-sql/pglite/live'\n\ninterface PGliteDependencyInjection<T extends PGliteWithLive> {\n providePGlite: (db: Ref<T | undefined> | (T | undefined)) => void\n injectPGlite: () => T | undefined\n}\n\nconst PGliteKey = Symbol('PGliteProvider')\n\n/**\n * Call this function to get a PGlite provider and injector for your Vue application.\n * We can't provide a predefined provider and injector because that would lose type information\n * as the PGlite interface depends on the extensions provided to PGlite.\n *\n * @example\n * This example loses type information about the PGlite extensions:\n * ```\n * provide<typeof db>(PGliteKey, db)\n *\n * // generic PGlite instance type, no extension types\n * const { db } = inject(PGliteKey)\n * ```\n *\n * @returns An object with two functions: `providePGlite` and `injectPGlite`.\n *\n */\nfunction makePGliteDependencyInjector<\n T extends PGliteWithLive,\n>(): PGliteDependencyInjection<T> {\n const providePGlite = (db: Ref<T | undefined> | (T | undefined)): void =>\n provide(PGliteKey, db)\n\n const injectPGlite = (): T | undefined => {\n const db = inject<Ref<T> | T>(PGliteKey)\n return unref(db)\n }\n\n return {\n providePGlite,\n injectPGlite,\n }\n}\n\nconst { injectPGlite, providePGlite } =\n makePGliteDependencyInjector<PGliteWithLive>()\n\nexport { makePGliteDependencyInjector, injectPGlite, providePGlite }\n","import {\n watch,\n WatchSource,\n readonly,\n DeepReadonly,\n shallowReactive,\n toRefs,\n ToRefs,\n shallowRef,\n onScopeDispose,\n ref,\n isRef,\n unref,\n} from 'vue-demi'\nimport { Results } from '@electric-sql/pglite'\nimport { query as buildQuery } from '@electric-sql/pglite/template'\nimport { injectPGlite } from './dependency-injection'\n\ntype UnsubscribeFn = () => Promise<void>\ntype QueryParams = unknown[] | undefined | null\ntype QueryResult<T> =\n | Omit<Results<T>, 'affectedRows'>\n | { rows: undefined; fields: undefined; blob: undefined }\ntype LiveQueryResults<T> = ToRefs<DeepReadonly<QueryResult<T>>>\n\nfunction useLiveQueryImpl<T = { [key: string]: unknown }>(\n query: string | WatchSource<string>,\n params?: QueryParams | WatchSource<QueryParams> | WatchSource<unknown>[],\n key?: string | WatchSource<string>,\n): LiveQueryResults<T> {\n const db = injectPGlite()!\n\n const liveUpdate = shallowReactive<\n | Omit<Results<T>, 'affectedRows'>\n | { rows: undefined; fields: undefined; blob: undefined }\n >({\n rows: undefined,\n fields: undefined,\n blob: undefined,\n })\n\n // keep track of live query subscriptions to unsubscribe when scope is disposed\n const unsubscribeRef = shallowRef<UnsubscribeFn>()\n\n const querySource = typeof query === 'string' ? ref(query) : query\n const paramsSources = !params\n ? [ref(params)]\n : Array.isArray(params)\n ? params.map(ref)\n : [params]\n\n const keySource = typeof key === 'string' ? ref(key) : key\n\n watch(\n key !== undefined\n ? [querySource, keySource, ...paramsSources]\n : [querySource, ...paramsSources],\n () => {\n let cancelled = false\n const cb = (results: Results<T>) => {\n if (cancelled) return\n liveUpdate.rows = results.rows\n liveUpdate.fields = results.fields\n if (results.blob !== undefined) {\n liveUpdate.blob = results.blob\n }\n }\n\n const query = isRef(querySource) ? unref(querySource) : querySource()\n\n const paramVals = isRef(params)\n ? unref(params)\n : typeof params === 'function'\n ? params()\n : Array.isArray(params)\n ? params.map(unref)\n : [params]\n\n const key = isRef(keySource) ? keySource.value : keySource?.()\n\n const ret =\n key !== undefined\n ? db.live.incrementalQuery<T>(query, paramVals, key, cb)\n : db.live.query<T>(query, paramVals, cb)\n\n unsubscribeRef.value = () => {\n cancelled = true\n return ret.then(({ unsubscribe }) => unsubscribe())\n }\n },\n { immediate: true },\n )\n\n onScopeDispose(() => unsubscribeRef.value?.())\n\n // @ts-ignore vue v2 has issues with DeepReadonly mapping\n return toRefs(readonly(liveUpdate))\n}\n\nexport function useLiveQuery<T = { [key: string]: unknown }>(\n query: string | WatchSource<string>,\n params?: QueryParams | WatchSource<QueryParams> | WatchSource<unknown>[],\n): LiveQueryResults<T> {\n return useLiveQueryImpl<T>(query, params)\n}\n\nuseLiveQuery.sql = function <T = { [key: string]: unknown }>(\n strings: TemplateStringsArray,\n ...values: any[]\n): LiveQueryResults<T> {\n const { query, params } = buildQuery(strings, ...values)\n return useLiveQueryImpl<T>(query, params)\n}\n\nexport function useLiveIncrementalQuery<T = { [key: string]: unknown }>(\n query: string | WatchSource<string>,\n params: QueryParams | WatchSource<QueryParams> | WatchSource<unknown>[],\n key: string | WatchSource<string>,\n): LiveQueryResults<T> {\n return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,iCAAAC,EAAA,kBAAAC,EAAA,4BAAAC,EAAA,iBAAAC,IAAA,eAAAC,EAAAP,GCAA,IAAAQ,EAA4C,oBAQtCC,EAAY,OAAO,gBAAgB,EAmBzC,SAASC,GAEyB,CAShC,MAAO,CACL,cATqBC,MACrB,WAAQF,EAAWE,CAAE,EASrB,aAPmB,IAAqB,CACxC,IAAMA,KAAK,UAAmBF,CAAS,EACvC,SAAO,SAAME,CAAE,CACjB,CAKA,CACF,CAEA,GAAM,CAAE,aAAAC,EAAc,cAAAC,CAAc,EAClCH,EAA6C,EC7C/C,IAAAI,EAaO,oBAEPC,EAAoC,yCAUpC,SAASC,EACPC,EACAC,EACAC,EACqB,CACrB,IAAMC,EAAKC,EAAa,EAElBC,KAAa,mBAGjB,CACA,KAAM,OACN,OAAQ,OACR,KAAM,MACR,CAAC,EAGKC,KAAiB,cAA0B,EAE3CC,EAAc,OAAOP,GAAU,YAAW,OAAIA,CAAK,EAAIA,EACvDQ,EAAiBP,EAEnB,MAAM,QAAQA,CAAM,EAClBA,EAAO,IAAI,KAAG,EACd,CAACA,CAAM,EAHT,IAAC,OAAIA,CAAM,CAAC,EAKVQ,EAAY,OAAOP,GAAQ,YAAW,OAAIA,CAAG,EAAIA,EAEvD,kBACEA,IAAQ,OACJ,CAACK,EAAaE,EAAW,GAAGD,CAAa,EACzC,CAACD,EAAa,GAAGC,CAAa,EAClC,IAAM,CACJ,IAAIE,EAAY,GACVC,EAAMC,GAAwB,CAC9BF,IACJL,EAAW,KAAOO,EAAQ,KAC1BP,EAAW,OAASO,EAAQ,OACxBA,EAAQ,OAAS,SACnBP,EAAW,KAAOO,EAAQ,MAE9B,EAEMZ,KAAQ,SAAMO,CAAW,KAAI,SAAMA,CAAW,EAAIA,EAAY,EAE9DM,KAAY,SAAMZ,CAAM,KAC1B,SAAMA,CAAM,EACZ,OAAOA,GAAW,WAChBA,EAAO,EACP,MAAM,QAAQA,CAAM,EAClBA,EAAO,IAAI,OAAK,EAChB,CAACA,CAAM,EAETC,KAAM,SAAMO,CAAS,EAAIA,EAAU,MAAQA,IAAY,EAEvDK,EACJZ,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOa,EAAWX,EAAKS,CAAE,EACrDR,EAAG,KAAK,MAASH,EAAOa,EAAWF,CAAE,EAE3CL,EAAe,MAAQ,KACrBI,EAAY,GACLI,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,EAEtD,EACA,CAAE,UAAW,EAAK,CACpB,KAEA,kBAAe,IAAMT,EAAe,QAAQ,CAAC,KAGtC,aAAO,YAASD,CAAU,CAAC,CACpC,CAEO,SAASW,EACdhB,EACAC,EACqB,CACrB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEAe,EAAa,IAAM,SACjBC,KACGC,EACkB,CACrB,GAAM,CAAE,MAAAlB,EAAO,OAAAC,CAAO,KAAI,EAAAkB,OAAWF,EAAS,GAAGC,CAAM,EACvD,OAAOnB,EAAoBC,EAAOC,CAAM,CAC1C,EAEO,SAASmB,EACdpB,EACAC,EACAC,EACqB,CACrB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["src_exports","__export","injectPGlite","makePGliteDependencyInjector","providePGlite","useLiveIncrementalQuery","useLiveQuery","__toCommonJS","import_vue_demi","PGliteKey","makePGliteDependencyInjector","db","injectPGlite","providePGlite","import_vue_demi","import_template","useLiveQueryImpl","query","params","key","db","injectPGlite","liveUpdate","unsubscribeRef","querySource","paramsSources","keySource","cancelled","cb","results","paramVals","ret","unsubscribe","useLiveQuery","strings","values","buildQuery","useLiveIncrementalQuery"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -24,6 +24,8 @@ interface PGliteDependencyInjection<T extends PGliteWithLive> {
|
|
|
24
24
|
*
|
|
25
25
|
*/
|
|
26
26
|
declare function makePGliteDependencyInjector<T extends PGliteWithLive>(): PGliteDependencyInjection<T>;
|
|
27
|
+
declare const injectPGlite: () => PGliteWithLive | undefined;
|
|
28
|
+
declare const providePGlite: (db: PGliteWithLive | Ref<PGliteWithLive | undefined> | undefined) => void;
|
|
27
29
|
|
|
28
30
|
type QueryParams = unknown[] | undefined | null;
|
|
29
31
|
type QueryResult<T> = Omit<Results<T>, 'affectedRows'> | {
|
|
@@ -44,4 +46,4 @@ declare function useLiveIncrementalQuery<T = {
|
|
|
44
46
|
[key: string]: unknown;
|
|
45
47
|
}>(query: string | WatchSource<string>, params: QueryParams | WatchSource<QueryParams> | WatchSource<unknown>[], key: string | WatchSource<string>): LiveQueryResults<T>;
|
|
46
48
|
|
|
47
|
-
export { makePGliteDependencyInjector, useLiveIncrementalQuery, useLiveQuery };
|
|
49
|
+
export { injectPGlite, makePGliteDependencyInjector, providePGlite, useLiveIncrementalQuery, useLiveQuery };
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ interface PGliteDependencyInjection<T extends PGliteWithLive> {
|
|
|
24
24
|
*
|
|
25
25
|
*/
|
|
26
26
|
declare function makePGliteDependencyInjector<T extends PGliteWithLive>(): PGliteDependencyInjection<T>;
|
|
27
|
+
declare const injectPGlite: () => PGliteWithLive | undefined;
|
|
28
|
+
declare const providePGlite: (db: PGliteWithLive | Ref<PGliteWithLive | undefined> | undefined) => void;
|
|
27
29
|
|
|
28
30
|
type QueryParams = unknown[] | undefined | null;
|
|
29
31
|
type QueryResult<T> = Omit<Results<T>, 'affectedRows'> | {
|
|
@@ -44,4 +46,4 @@ declare function useLiveIncrementalQuery<T = {
|
|
|
44
46
|
[key: string]: unknown;
|
|
45
47
|
}>(query: string | WatchSource<string>, params: QueryParams | WatchSource<QueryParams> | WatchSource<unknown>[], key: string | WatchSource<string>): LiveQueryResults<T>;
|
|
46
48
|
|
|
47
|
-
export { makePGliteDependencyInjector, useLiveIncrementalQuery, useLiveQuery };
|
|
49
|
+
export { injectPGlite, makePGliteDependencyInjector, providePGlite, useLiveIncrementalQuery, useLiveQuery };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{provide as Q,inject as w,unref as
|
|
1
|
+
import{provide as Q,inject as w,unref as G}from"vue-demi";var R=Symbol("PGliteProvider");function S(){return{providePGlite:n=>Q(R,n),injectPGlite:()=>{let n=w(R);return G(n)}}}var{injectPGlite:b,providePGlite:U}=S();import{watch as g,readonly as W,shallowReactive as k,toRefs as L,shallowRef as j,onScopeDispose as x,ref as c,isRef as d,unref as l}from"vue-demi";import{query as D}from"@electric-sql/pglite/template";function f(t,e,n){let o=b(),u=k({rows:void 0,fields:void 0,blob:void 0}),y=j(),r=typeof t=="string"?c(t):t,a=e?Array.isArray(e)?e.map(c):[e]:[c(e)],s=typeof n=="string"?c(n):n;return g(n!==void 0?[r,s,...a]:[r,...a],()=>{let T=!1,v=i=>{T||(u.rows=i.rows,u.fields=i.fields,i.blob!==void 0&&(u.blob=i.blob))},p=d(r)?l(r):r(),P=d(e)?l(e):typeof e=="function"?e():Array.isArray(e)?e.map(l):[e],m=d(s)?s.value:s?.(),h=m!==void 0?o.live.incrementalQuery(p,P,m,v):o.live.query(p,P,v);y.value=()=>(T=!0,h.then(({unsubscribe:i})=>i()))},{immediate:!0}),x(()=>y.value?.()),L(W(u))}function A(t,e){return f(t,e)}A.sql=function(t,...e){let{query:n,params:o}=D(t,...e);return f(n,o)};function E(t,e,n){return f(t,e,n)}export{b as injectPGlite,S as makePGliteDependencyInjector,U as providePGlite,E as useLiveIncrementalQuery,A as useLiveQuery};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@electric-sql/pglite-vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"description": "Vue hooks for using PGlite",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -50,12 +50,12 @@
|
|
|
50
50
|
"vue": "^3.4.27",
|
|
51
51
|
"vue2": "npm:vue@2.6",
|
|
52
52
|
"vue2.7": "npm:vue@2.7",
|
|
53
|
-
"@electric-sql/pglite": "0.2.
|
|
53
|
+
"@electric-sql/pglite": "0.2.8"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@vue/composition-api": "^1.1.2",
|
|
57
57
|
"vue": "^2.6.0 || ^3.3.0",
|
|
58
|
-
"@electric-sql/pglite": "^0.2.
|
|
58
|
+
"@electric-sql/pglite": "^0.2.8"
|
|
59
59
|
},
|
|
60
60
|
"peerDependenciesMeta": {
|
|
61
61
|
"@vue/composition-api": {
|