@electric-sql/pglite-vue 0.2.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
-# PGlite Vue.js Bindings
+# PGlite Vue Bindings
 
-This package implements Vue.js 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#react).
+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#react).
 
 To install:
 
@@ -10,7 +10,8 @@ npm install @electric-sql/pglite-vue
 
 The hooks this package provides are:
 
-- [proidePGlite](https://pglite.dev/docs/framework-hooks#providepglite): Provide a PGlite instance to all child components.
-- [injectPGlite](https://pglite.dev/docs/framework-hooks#injectpglite): Retrieve the provided PGlite instance.
+- [providePGlite](https://pglite.dev/docs/framework-hook/vuevye#providepglite): Provide a PGlite instance to all child components.
+- [injectPGlite](https://pglite.dev/docs/framework-hooks/vue#injectpglite): Retrieve the provided PGlite instance.
+- [makePGliteDependencyInjector](https://pglite.dev/docs/framework-hooks/vue#makepglitedependencyinjector): Utility to create a typed version of `providePGlite` and `injectPGlite`.
 - [useLiveQuery](https://pglite.dev/docs/framework-hooks#uselivequery): Reactively receive results of a live query change
 - [useLiveIncrementalQuery](https://pglite.dev/docs/framework-hooks#useliveincrementalquery): Reactively receive 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 h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var S=(t,n)=>{for(var i in n)l(t,i,{get:n[i],enumerable:!0})},W=(t,n,i,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of g(n))!w.call(t,r)&&r!==i&&l(t,r,{get:()=>n[r],enumerable:!(s=h(n,r))||s.enumerable});return t};var j=t=>W(l({},"__esModule",{value:!0}),t);var x={};S(x,{makePGliteDependencyInjector:()=>a,useLiveIncrementalQuery:()=>k,useLiveQuery:()=>L});module.exports=j(x);var u=require("vue-demi"),R=Symbol("PGliteProvider");function a(){return{providePGlite:i=>(0,u.provide)(R,i),injectPGlite:()=>{let i=(0,u.inject)(R);return(0,u.unref)(i)}}}var{injectPGlite:b}=a();var e=require("vue-demi");function G(t,n,i){let s=b(),r=(0,e.shallowReactive)({rows:void 0,fields:void 0,blob:void 0}),y=(0,e.shallowRef)(),d=typeof t=="string"?(0,e.ref)(t):t,c=!(0,e.isRef)(n)&&typeof n!="function"?(0,e.ref)(n):n,f=typeof i=="string"?(0,e.ref)(i):i;return(0,e.watch)(i!==void 0?[d,c,f]:[d,c],()=>{let p=!1,m=o=>{p||(r.rows=o.rows,r.fields=o.fields,o.blob!==void 0&&(r.blob=o.blob))},T=(0,e.isRef)(d)?d.value:d(),v=(0,e.isRef)(c)?c.value:c(),P=(0,e.isRef)(f)?f.value:f?.(),Q=P!==void 0?s.live.incrementalQuery(T,v,P,m):s.live.query(T,v,m);y.value=()=>(p=!0,Q.then(({unsubscribe:o})=>o()))},{immediate:!0}),(0,e.onScopeDispose)(()=>y.value?.()),(0,e.toRefs)((0,e.readonly)(r))}function L(t,n){return G(t,n)}function k(t,n,i){return G(t,n,i)}0&&(module.exports={makePGliteDependencyInjector,useLiveIncrementalQuery,useLiveQuery});
+"use strict";var f=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var S=(t,n)=>{for(var i in n)f(t,i,{get:n[i],enumerable:!0})},W=(t,n,i,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of g(n))!w.call(t,r)&&r!==i&&f(t,r,{get:()=>n[r],enumerable:!(s=Q(n,r))||s.enumerable});return t};var L=t=>W(f({},"__esModule",{value:!0}),t);var x={};S(x,{makePGliteDependencyInjector:()=>a,useLiveIncrementalQuery:()=>k,useLiveQuery:()=>j});module.exports=L(x);var u=require("vue-demi"),R=Symbol("PGliteProvider");function a(){return{providePGlite:i=>(0,u.provide)(R,i),injectPGlite:()=>{let i=(0,u.inject)(R);return(0,u.unref)(i)}}}var{injectPGlite:b,providePGlite:U}=a();var e=require("vue-demi");function G(t,n,i){let s=b(),r=(0,e.shallowReactive)({rows:void 0,fields:void 0,blob:void 0}),y=(0,e.shallowRef)(),c=typeof t=="string"?(0,e.ref)(t):t,d=!(0,e.isRef)(n)&&typeof n!="function"?(0,e.ref)(n):n,l=typeof i=="string"?(0,e.ref)(i):i;return(0,e.watch)(i!==void 0?[c,d,l]:[c,d],()=>{let p=!1,m=o=>{p||(r.rows=o.rows,r.fields=o.fields,o.blob!==void 0&&(r.blob=o.blob))},v=(0,e.isRef)(c)?c.value:c(),T=(0,e.isRef)(d)?d.value:d(),P=(0,e.isRef)(l)?l.value:l?.(),h=P!==void 0?s.live.incrementalQuery(v,T,P,m):s.live.query(v,T,m);y.value=()=>(p=!0,h.then(({unsubscribe:o})=>o()))},{immediate:!0}),(0,e.onScopeDispose)(()=>y.value?.()),(0,e.toRefs)((0,e.readonly)(r))}function j(t,n){return G(t,n)}function k(t,n,i){return G(t,n,i)}0&&(module.exports={makePGliteDependencyInjector,useLiveIncrementalQuery,useLiveQuery});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/dependency-injection.ts","../src/hooks.ts"],"sourcesContent":["export { makePGliteDependencyInjector } 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 */\nexport function 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\n/**\n * This \"static\" injector is used internally by our reactive methods\n * to get access to the provided PGlite instance.\n * It loses information about the extensions present on PGlite,\n * but we only need the `live` extension information for our methods.\n * However, users preferably don't lose extension type information,\n * therefore, they can use {@link makePGliteDependencyInjector}.\n */\nconst { injectPGlite: injectPGliteUntyped } = makePGliteDependencyInjector()\n\nexport { injectPGliteUntyped }\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} from 'vue-demi'\nimport { Results } from '@electric-sql/pglite'\nimport { injectPGliteUntyped } 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>,\n  key?: string | WatchSource<string>,\n): LiveQueryResults<T> | undefined {\n  const db = injectPGliteUntyped()!\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 paramsSource =\n    !isRef(params) && typeof params !== 'function' ? ref(params) : params\n  const keySource = typeof key === 'string' ? ref(key) : key\n\n  watch(\n    key !== undefined\n      ? [querySource, paramsSource, keySource]\n      : [querySource, paramsSource],\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) ? querySource.value : querySource()\n      const params = isRef(paramsSource) ? paramsSource.value : paramsSource()\n      const key = isRef(keySource) ? keySource.value : keySource?.()\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      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>,\n): LiveQueryResults<T> | undefined {\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>,\n  key: string | WatchSource<string>,\n): LiveQueryResults<T> | undefined {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kCAAAE,EAAA,4BAAAC,EAAA,iBAAAC,IAAA,eAAAC,EAAAL,GCAA,IAAAM,EAA4C,oBAQtCC,EAAY,OAAO,gBAAgB,EAmBlC,SAASC,GAEkB,CAShC,MAAO,CACL,cATqBC,MACrB,WAAQF,EAAWE,CAAE,EASrB,aAPmB,IAAqB,CACxC,IAAMA,KAAK,UAAmBF,CAAS,EACvC,SAAO,SAAME,CAAE,CACjB,CAKA,CACF,CAUA,GAAM,CAAE,aAAcC,CAAoB,EAAIF,EAA6B,ECpD3E,IAAAG,EAYO,oBAWP,SAASC,EACPC,EACAC,EACAC,EACiC,CACjC,IAAMC,EAAKC,EAAoB,EAEzBC,KAAa,mBAGjB,CACA,KAAM,OACN,OAAQ,OACR,KAAM,MACR,CAAC,EAGKC,KAAiB,cAA0B,EAE3CC,EAAc,OAAOP,GAAU,YAAW,OAAIA,CAAK,EAAIA,EACvDQ,EACJ,IAAC,SAAMP,CAAM,GAAK,OAAOA,GAAW,cAAa,OAAIA,CAAM,EAAIA,EAC3DQ,EAAY,OAAOP,GAAQ,YAAW,OAAIA,CAAG,EAAIA,EAEvD,kBACEA,IAAQ,OACJ,CAACK,EAAaC,EAAcC,CAAS,EACrC,CAACF,EAAaC,CAAY,EAC9B,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,EAAIA,EAAY,MAAQA,EAAY,EAC7DN,KAAS,SAAMO,CAAY,EAAIA,EAAa,MAAQA,EAAa,EACjEN,KAAM,SAAMO,CAAS,EAAIA,EAAU,MAAQA,IAAY,EAEvDI,EACJX,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKS,CAAE,EAClDR,EAAG,KAAK,MAASH,EAAOC,EAAQU,CAAE,EAExCL,EAAe,MAAQ,KACrBI,EAAY,GACLG,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,EAEtD,EACA,CAAE,UAAW,EAAK,CACpB,KAEA,kBAAe,IAAMR,EAAe,QAAQ,CAAC,KAGtC,aAAO,YAASD,CAAU,CAAC,CACpC,CAEO,SAASU,EACdf,EACAC,EACiC,CACjC,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASe,EACdhB,EACAC,EACAC,EACiC,CACjC,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["src_exports","__export","makePGliteDependencyInjector","useLiveIncrementalQuery","useLiveQuery","__toCommonJS","import_vue_demi","PGliteKey","makePGliteDependencyInjector","db","injectPGliteUntyped","import_vue_demi","useLiveQueryImpl","query","params","key","db","injectPGliteUntyped","liveUpdate","unsubscribeRef","querySource","paramsSource","keySource","cancelled","cb","results","ret","unsubscribe","useLiveQuery","useLiveIncrementalQuery"]}
+{"version":3,"sources":["../src/index.ts","../src/dependency-injection.ts","../src/hooks.ts"],"sourcesContent":["export { makePGliteDependencyInjector } 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} from 'vue-demi'\nimport { Results } from '@electric-sql/pglite'\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>,\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 paramsSource =\n    !isRef(params) && typeof params !== 'function' ? ref(params) : params\n  const keySource = typeof key === 'string' ? ref(key) : key\n\n  watch(\n    key !== undefined\n      ? [querySource, paramsSource, keySource]\n      : [querySource, paramsSource],\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) ? querySource.value : querySource()\n      const params = isRef(paramsSource) ? paramsSource.value : paramsSource()\n      const key = isRef(keySource) ? keySource.value : keySource?.()\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      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>,\n): LiveQueryResults<T> {\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>,\n  key: string | WatchSource<string>,\n): LiveQueryResults<T> {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kCAAAE,EAAA,4BAAAC,EAAA,iBAAAC,IAAA,eAAAC,EAAAL,GCAA,IAAAM,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,EAYO,oBAWP,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,EACJ,IAAC,SAAMP,CAAM,GAAK,OAAOA,GAAW,cAAa,OAAIA,CAAM,EAAIA,EAC3DQ,EAAY,OAAOP,GAAQ,YAAW,OAAIA,CAAG,EAAIA,EAEvD,kBACEA,IAAQ,OACJ,CAACK,EAAaC,EAAcC,CAAS,EACrC,CAACF,EAAaC,CAAY,EAC9B,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,EAAIA,EAAY,MAAQA,EAAY,EAC7DN,KAAS,SAAMO,CAAY,EAAIA,EAAa,MAAQA,EAAa,EACjEN,KAAM,SAAMO,CAAS,EAAIA,EAAU,MAAQA,IAAY,EAEvDI,EACJX,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKS,CAAE,EAClDR,EAAG,KAAK,MAASH,EAAOC,EAAQU,CAAE,EAExCL,EAAe,MAAQ,KACrBI,EAAY,GACLG,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,EAEtD,EACA,CAAE,UAAW,EAAK,CACpB,KAEA,kBAAe,IAAMR,EAAe,QAAQ,CAAC,KAGtC,aAAO,YAASD,CAAU,CAAC,CACpC,CAEO,SAASU,EACdf,EACAC,EACqB,CACrB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASe,EACdhB,EACAC,EACAC,EACqB,CACrB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["src_exports","__export","makePGliteDependencyInjector","useLiveIncrementalQuery","useLiveQuery","__toCommonJS","import_vue_demi","PGliteKey","makePGliteDependencyInjector","db","injectPGlite","providePGlite","import_vue_demi","useLiveQueryImpl","query","params","key","db","injectPGlite","liveUpdate","unsubscribeRef","querySource","paramsSource","keySource","cancelled","cb","results","ret","unsubscribe","useLiveQuery","useLiveIncrementalQuery"]}

package/dist/index.d.cts

@@ -34,9 +34,9 @@ type QueryResult<T> = Omit<Results<T>, 'affectedRows'> | {
 type LiveQueryResults<T> = ToRefs<DeepReadonly<QueryResult<T>>>;
 declare function useLiveQuery<T = {
     [key: string]: unknown;
-}>(query: string | WatchSource<string>, params?: QueryParams | WatchSource<QueryParams>): LiveQueryResults<T> | undefined;
+}>(query: string | WatchSource<string>, params?: QueryParams | WatchSource<QueryParams>): LiveQueryResults<T>;
 declare function useLiveIncrementalQuery<T = {
     [key: string]: unknown;
-}>(query: string | WatchSource<string>, params: QueryParams | WatchSource<QueryParams>, key: string | WatchSource<string>): LiveQueryResults<T> | undefined;
+}>(query: string | WatchSource<string>, params: QueryParams | WatchSource<QueryParams>, key: string | WatchSource<string>): LiveQueryResults<T>;
 
 export { makePGliteDependencyInjector, useLiveIncrementalQuery, useLiveQuery };

package/dist/index.d.ts

@@ -34,9 +34,9 @@ type QueryResult<T> = Omit<Results<T>, 'affectedRows'> | {
 type LiveQueryResults<T> = ToRefs<DeepReadonly<QueryResult<T>>>;
 declare function useLiveQuery<T = {
     [key: string]: unknown;
-}>(query: string | WatchSource<string>, params?: QueryParams | WatchSource<QueryParams>): LiveQueryResults<T> | undefined;
+}>(query: string | WatchSource<string>, params?: QueryParams | WatchSource<QueryParams>): LiveQueryResults<T>;
 declare function useLiveIncrementalQuery<T = {
     [key: string]: unknown;
-}>(query: string | WatchSource<string>, params: QueryParams | WatchSource<QueryParams>, key: string | WatchSource<string>): LiveQueryResults<T> | undefined;
+}>(query: string | WatchSource<string>, params: QueryParams | WatchSource<QueryParams>, key: string | WatchSource<string>): LiveQueryResults<T>;
 
 export { makePGliteDependencyInjector, useLiveIncrementalQuery, useLiveQuery };

package/dist/index.js

@@ -1,2 +1,2 @@
-import{provide as Q,inject as h,unref as g}from"vue-demi";var v=Symbol("PGliteProvider");function P(){return{providePGlite:e=>Q(v,e),injectPGlite:()=>{let e=h(v);return g(e)}}}var{injectPGlite:R}=P();import{watch as w,readonly as S,shallowReactive as W,toRefs as j,shallowRef as L,onScopeDispose as k,ref as c,isRef as d}from"vue-demi";function b(t,n,e){let f=R(),u=W({rows:void 0,fields:void 0,blob:void 0}),l=L(),r=typeof t=="string"?c(t):t,o=!d(n)&&typeof n!="function"?c(n):n,s=typeof e=="string"?c(e):e;return w(e!==void 0?[r,o,s]:[r,o],()=>{let a=!1,y=i=>{a||(u.rows=i.rows,u.fields=i.fields,i.blob!==void 0&&(u.blob=i.blob))},p=d(r)?r.value:r(),m=d(o)?o.value:o(),T=d(s)?s.value:s?.(),G=T!==void 0?f.live.incrementalQuery(p,m,T,y):f.live.query(p,m,y);l.value=()=>(a=!0,G.then(({unsubscribe:i})=>i()))},{immediate:!0}),k(()=>l.value?.()),j(S(u))}function z(t,n){return b(t,n)}function A(t,n,e){return b(t,n,e)}export{P as makePGliteDependencyInjector,A as useLiveIncrementalQuery,z as useLiveQuery};
+import{provide as h,inject as Q,unref as g}from"vue-demi";var T=Symbol("PGliteProvider");function P(){return{providePGlite:e=>h(T,e),injectPGlite:()=>{let e=Q(T);return g(e)}}}var{injectPGlite:R,providePGlite:I}=P();import{watch as w,readonly as S,shallowReactive as W,toRefs as L,shallowRef as j,onScopeDispose as k,ref as d,isRef as c}from"vue-demi";function b(t,n,e){let l=R(),u=W({rows:void 0,fields:void 0,blob:void 0}),f=j(),r=typeof t=="string"?d(t):t,o=!c(n)&&typeof n!="function"?d(n):n,s=typeof e=="string"?d(e):e;return w(e!==void 0?[r,o,s]:[r,o],()=>{let a=!1,y=i=>{a||(u.rows=i.rows,u.fields=i.fields,i.blob!==void 0&&(u.blob=i.blob))},p=c(r)?r.value:r(),m=c(o)?o.value:o(),v=c(s)?s.value:s?.(),G=v!==void 0?l.live.incrementalQuery(p,m,v,y):l.live.query(p,m,y);f.value=()=>(a=!0,G.then(({unsubscribe:i})=>i()))},{immediate:!0}),k(()=>f.value?.()),L(S(u))}function A(t,n){return b(t,n)}function B(t,n,e){return b(t,n,e)}export{P as makePGliteDependencyInjector,B as useLiveIncrementalQuery,A as useLiveQuery};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dependency-injection.ts","../src/hooks.ts"],"sourcesContent":["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 */\nexport function 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\n/**\n * This \"static\" injector is used internally by our reactive methods\n * to get access to the provided PGlite instance.\n * It loses information about the extensions present on PGlite,\n * but we only need the `live` extension information for our methods.\n * However, users preferably don't lose extension type information,\n * therefore, they can use {@link makePGliteDependencyInjector}.\n */\nconst { injectPGlite: injectPGliteUntyped } = makePGliteDependencyInjector()\n\nexport { injectPGliteUntyped }\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} from 'vue-demi'\nimport { Results } from '@electric-sql/pglite'\nimport { injectPGliteUntyped } 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>,\n  key?: string | WatchSource<string>,\n): LiveQueryResults<T> | undefined {\n  const db = injectPGliteUntyped()!\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 paramsSource =\n    !isRef(params) && typeof params !== 'function' ? ref(params) : params\n  const keySource = typeof key === 'string' ? ref(key) : key\n\n  watch(\n    key !== undefined\n      ? [querySource, paramsSource, keySource]\n      : [querySource, paramsSource],\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) ? querySource.value : querySource()\n      const params = isRef(paramsSource) ? paramsSource.value : paramsSource()\n      const key = isRef(keySource) ? keySource.value : keySource?.()\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      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>,\n): LiveQueryResults<T> | undefined {\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>,\n  key: string | WatchSource<string>,\n): LiveQueryResults<T> | undefined {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"AAAA,OAAS,WAAAA,EAAS,UAAAC,EAAQ,SAAAC,MAAkB,WAQ5C,IAAMC,EAAY,OAAO,gBAAgB,EAmBlC,SAASC,GAEkB,CAShC,MAAO,CACL,cATqBC,GACrBL,EAAQG,EAAWE,CAAE,EASrB,aAPmB,IAAqB,CACxC,IAAMA,EAAKJ,EAAmBE,CAAS,EACvC,OAAOD,EAAMG,CAAE,CACjB,CAKA,CACF,CAUA,GAAM,CAAE,aAAcC,CAAoB,EAAIF,EAA6B,ECpD3E,OACE,SAAAG,EAEA,YAAAC,EAEA,mBAAAC,EACA,UAAAC,EAEA,cAAAC,EACA,kBAAAC,EACA,OAAAC,EACA,SAAAC,MACK,WAWP,SAASC,EACPC,EACAC,EACAC,EACiC,CACjC,IAAMC,EAAKC,EAAoB,EAEzBC,EAAaC,EAGjB,CACA,KAAM,OACN,OAAQ,OACR,KAAM,MACR,CAAC,EAGKC,EAAiBC,EAA0B,EAE3CC,EAAc,OAAOT,GAAU,SAAWU,EAAIV,CAAK,EAAIA,EACvDW,EACJ,CAACC,EAAMX,CAAM,GAAK,OAAOA,GAAW,WAAaS,EAAIT,CAAM,EAAIA,EAC3DY,EAAY,OAAOX,GAAQ,SAAWQ,EAAIR,CAAG,EAAIA,EAEvD,OAAAY,EACEZ,IAAQ,OACJ,CAACO,EAAaE,EAAcE,CAAS,EACrC,CAACJ,EAAaE,CAAY,EAC9B,IAAM,CACJ,IAAII,EAAY,GACVC,EAAMC,GAAwB,CAC9BF,IACJV,EAAW,KAAOY,EAAQ,KAC1BZ,EAAW,OAASY,EAAQ,OACxBA,EAAQ,OAAS,SACnBZ,EAAW,KAAOY,EAAQ,MAE9B,EAEMjB,EAAQY,EAAMH,CAAW,EAAIA,EAAY,MAAQA,EAAY,EAC7DR,EAASW,EAAMD,CAAY,EAAIA,EAAa,MAAQA,EAAa,EACjET,EAAMU,EAAMC,CAAS,EAAIA,EAAU,MAAQA,IAAY,EAEvDK,EACJhB,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKc,CAAE,EAClDb,EAAG,KAAK,MAASH,EAAOC,EAAQe,CAAE,EAExCT,EAAe,MAAQ,KACrBQ,EAAY,GACLG,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,EAEtD,EACA,CAAE,UAAW,EAAK,CACpB,EAEAC,EAAe,IAAMb,EAAe,QAAQ,CAAC,EAGtCc,EAAOC,EAASjB,CAAU,CAAC,CACpC,CAEO,SAASkB,EACdvB,EACAC,EACiC,CACjC,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASuB,EACdxB,EACAC,EACAC,EACiC,CACjC,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["provide","inject","unref","PGliteKey","makePGliteDependencyInjector","db","injectPGliteUntyped","watch","readonly","shallowReactive","toRefs","shallowRef","onScopeDispose","ref","isRef","useLiveQueryImpl","query","params","key","db","injectPGliteUntyped","liveUpdate","shallowReactive","unsubscribeRef","shallowRef","querySource","ref","paramsSource","isRef","keySource","watch","cancelled","cb","results","ret","unsubscribe","onScopeDispose","toRefs","readonly","useLiveQuery","useLiveIncrementalQuery"]}
+{"version":3,"sources":["../src/dependency-injection.ts","../src/hooks.ts"],"sourcesContent":["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} from 'vue-demi'\nimport { Results } from '@electric-sql/pglite'\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>,\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 paramsSource =\n    !isRef(params) && typeof params !== 'function' ? ref(params) : params\n  const keySource = typeof key === 'string' ? ref(key) : key\n\n  watch(\n    key !== undefined\n      ? [querySource, paramsSource, keySource]\n      : [querySource, paramsSource],\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) ? querySource.value : querySource()\n      const params = isRef(paramsSource) ? paramsSource.value : paramsSource()\n      const key = isRef(keySource) ? keySource.value : keySource?.()\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      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>,\n): LiveQueryResults<T> {\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>,\n  key: string | WatchSource<string>,\n): LiveQueryResults<T> {\n  return useLiveQueryImpl<T>(query, params, key)\n}\n"],"mappings":"AAAA,OAAS,WAAAA,EAAS,UAAAC,EAAQ,SAAAC,MAAkB,WAQ5C,IAAMC,EAAY,OAAO,gBAAgB,EAmBzC,SAASC,GAEyB,CAShC,MAAO,CACL,cATqBC,GACrBL,EAAQG,EAAWE,CAAE,EASrB,aAPmB,IAAqB,CACxC,IAAMA,EAAKJ,EAAmBE,CAAS,EACvC,OAAOD,EAAMG,CAAE,CACjB,CAKA,CACF,CAEA,GAAM,CAAE,aAAAC,EAAc,cAAAC,CAAc,EAClCH,EAA6C,EC7C/C,OACE,SAAAI,EAEA,YAAAC,EAEA,mBAAAC,EACA,UAAAC,EAEA,cAAAC,EACA,kBAAAC,EACA,OAAAC,EACA,SAAAC,MACK,WAWP,SAASC,EACPC,EACAC,EACAC,EACqB,CACrB,IAAMC,EAAKC,EAAa,EAElBC,EAAaC,EAGjB,CACA,KAAM,OACN,OAAQ,OACR,KAAM,MACR,CAAC,EAGKC,EAAiBC,EAA0B,EAE3CC,EAAc,OAAOT,GAAU,SAAWU,EAAIV,CAAK,EAAIA,EACvDW,EACJ,CAACC,EAAMX,CAAM,GAAK,OAAOA,GAAW,WAAaS,EAAIT,CAAM,EAAIA,EAC3DY,EAAY,OAAOX,GAAQ,SAAWQ,EAAIR,CAAG,EAAIA,EAEvD,OAAAY,EACEZ,IAAQ,OACJ,CAACO,EAAaE,EAAcE,CAAS,EACrC,CAACJ,EAAaE,CAAY,EAC9B,IAAM,CACJ,IAAII,EAAY,GACVC,EAAMC,GAAwB,CAC9BF,IACJV,EAAW,KAAOY,EAAQ,KAC1BZ,EAAW,OAASY,EAAQ,OACxBA,EAAQ,OAAS,SACnBZ,EAAW,KAAOY,EAAQ,MAE9B,EAEMjB,EAAQY,EAAMH,CAAW,EAAIA,EAAY,MAAQA,EAAY,EAC7DR,EAASW,EAAMD,CAAY,EAAIA,EAAa,MAAQA,EAAa,EACjET,EAAMU,EAAMC,CAAS,EAAIA,EAAU,MAAQA,IAAY,EAEvDK,EACJhB,IAAQ,OACJC,EAAG,KAAK,iBAAoBH,EAAOC,EAAQC,EAAKc,CAAE,EAClDb,EAAG,KAAK,MAASH,EAAOC,EAAQe,CAAE,EAExCT,EAAe,MAAQ,KACrBQ,EAAY,GACLG,EAAI,KAAK,CAAC,CAAE,YAAAC,CAAY,IAAMA,EAAY,CAAC,EAEtD,EACA,CAAE,UAAW,EAAK,CACpB,EAEAC,EAAe,IAAMb,EAAe,QAAQ,CAAC,EAGtCc,EAAOC,EAASjB,CAAU,CAAC,CACpC,CAEO,SAASkB,EACdvB,EACAC,EACqB,CACrB,OAAOF,EAAoBC,EAAOC,CAAM,CAC1C,CAEO,SAASuB,EACdxB,EACAC,EACAC,EACqB,CACrB,OAAOH,EAAoBC,EAAOC,EAAQC,CAAG,CAC/C","names":["provide","inject","unref","PGliteKey","makePGliteDependencyInjector","db","injectPGlite","providePGlite","watch","readonly","shallowReactive","toRefs","shallowRef","onScopeDispose","ref","isRef","useLiveQueryImpl","query","params","key","db","injectPGlite","liveUpdate","shallowReactive","unsubscribeRef","shallowRef","querySource","ref","paramsSource","isRef","keySource","watch","cancelled","cb","results","ret","unsubscribe","onScopeDispose","toRefs","readonly","useLiveQuery","useLiveIncrementalQuery"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@electric-sql/pglite-vue",
-  "version": "0.2.0",
-  "description": "Vue.js hooks for using PGlite",
+  "version": "0.2.1",
+  "description": "Vue hooks for using PGlite",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -49,12 +49,12 @@
     "vue": "^3.4.27",
     "vue2": "npm:vue@2.6",
     "vue2.7": "npm:vue@2.7",
-    "@electric-sql/pglite": "0.2.0"
+    "@electric-sql/pglite": "0.2.1"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.1.2",
     "vue": "^2.6.0 || ^3.3.0",
-    "@electric-sql/pglite": "^0.2.0"
+    "@electric-sql/pglite": "^0.2.1"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {