Fix vue docs with type

electric-sql · Aug 14, 2024 · 737f99a · 737f99a
1 parent 6d55dd5
commit 737f99a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/docs/docs/framework-hooks/vue.md b/docs/docs/framework-hooks/vue.md
@@ -51,16 +51,17 @@ const insertItem = () => {
 The `makePGliteDependencyInjector` function returns typed versions of `providePGlite` and `injectPGlite`, which enables you to provide a PGlite instance with all added extensions and retain then namespaces and types added to it.
 
 ```ts
-import { PGlite } from '@electric-sql/pglite'
+import { PGlite, PGliteInterfaceExtensions } from '@electric-sql/pglite'
 import { live } from '@electric-sql/pglite/live'
 import { vector } from '@electric-sql/pglite/vector'
 import { makePGliteDependencyInjector } from '@electric-sql/pglite-vue'
 
 const { providePGlite, injectPGlite } = makePGliteDependencyInjector<
-  PGlite & {
-    live: LiveNamespace
-    vector: VectorNamespace
-  }
+  PGlite &
+    PGliteInterfaceExtensions<{
+      live: typeof live
+      vector: typeof vector
+    }>
 >()
 
 export { providePGlite, injectPGlite }

diff --git a/packages/pglite-react/test/provider.test-d.tsx b/packages/pglite-react/test/provider.test-d.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expectTypeOf } from 'vitest'
-import { PGlite } from '@electric-sql/pglite'
+import { PGlite, PGliteInterfaceExtensions } from '@electric-sql/pglite'
 import { live } from '@electric-sql/pglite/live'
 import { vector } from '@electric-sql/pglite/vector'
 import { makePGliteProvider } from '../src/provider.js'
@@ -18,8 +18,13 @@ describe('provider', () => {
       },
     })
 
-    const { PGliteProvider, usePGlite } =
-      makePGliteProvider<typeof dbLiveVector>()
+    const { PGliteProvider, usePGlite } = makePGliteProvider<
+      PGlite &
+        PGliteInterfaceExtensions<{
+          live: typeof live
+          vector: typeof vector
+        }>
+    >()
 
     // @ts-expect-error cannot pass db with just live extension
     ;() => <PGliteProvider db={dbLive}></PGliteProvider>

diff --git a/packages/pglite-vue/test/injection.test-d.ts b/packages/pglite-vue/test/injection.test-d.ts
@@ -2,7 +2,7 @@
  * @vitest-environment node
  */
 import { describe, it, expectTypeOf } from 'vitest'
-import { PGlite } from '@electric-sql/pglite'
+import { PGlite, PGliteInterfaceExtensions } from '@electric-sql/pglite'
 import { live } from '@electric-sql/pglite/live'
 import { makePGliteDependencyInjector } from '../src'
 import { vector } from '@electric-sql/pglite/vector'
@@ -21,8 +21,13 @@ describe('dependency injection', () => {
         vector,
       },
     })
-    const { providePGlite, injectPGlite } =
-      makePGliteDependencyInjector<typeof dbLiveVector>()
+    const { providePGlite, injectPGlite } = makePGliteDependencyInjector<
+      PGlite &
+        PGliteInterfaceExtensions<{
+          live: typeof live
+          vector: typeof vector
+        }>
+    >()
 
     // @ts-expect-error name is a string
     providePGlite(dbLive)