Merge pull request #17 from Strift/develop

Enable Nuxt Bridge integration and add composables

Author: sduduzog

.nvmrc

@@ -0,0 +1 @@
+v14.17.3

package.json

@@ -1,35 +1,35 @@
 {
   "name": "vue-supabase",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "A small wrapper for integrating supabase to Vuejs",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "engine": {
-    "node": ">= 1"
-  },
-  "scripts": {
-    "prepare": "npm run build",
-    "test": "echo 'no tests to run'",
-    "lint": "eslint . --ext .ts",
-    "build": "tsc -p config/tsconfig.cjs.json && tsc -p config/tsconfig.esm.json && tsc -p config/tsconfig.types.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/scottrobertson/vue-supabase.git"
-  },
   "keywords": [
     "vue",
     "custom",
     "supabase",
     "vue-supabase"
   ],
-  "author": "Scott Robertson",
+  "author": "Supabase Community",
   "license": "MIT",
+  "homepage": "https://github.com/supabase-community/vue-supabase#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/supabase-community/vue-supabase.git"
+  },
   "bugs": {
-    "url": "https://github.com/scottrobertson/vue-supabase/issues"
+    "url": "https://github.com/supabase-community/vue-supabase/issues"
+  },
+  "engine": {
+    "node": ">= 1"
   },
-  "homepage": "https://github.com/scottrobertson/vue-supabase#readme",
+  "scripts": {
+    "prepare": "npm run build",
+    "test": "echo 'no tests to run'",
+    "lint": "eslint . --ext .ts",
+    "build": "tsc -p config/tsconfig.cjs.json && tsc -p config/tsconfig.esm.json && tsc -p config/tsconfig.types.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "dependencies": {
     "@supabase/supabase-js": "^1.25.2",
     "vue-demi": "^0.11.2"
@@ -47,4 +47,4 @@
     "prettier": "^2.4.1",
     "typescript": "^4.4.4"
   }
-}
+}

src/VueSupabaseClient.ts

@@ -20,6 +20,11 @@ export class VueSupabaseClient extends SupabaseClient {
         configurable: true,
       });
     } else {
+      app.mixin({
+        provide: () => ({
+          [supabaseSymbol]: self,
+        }),
+      });
       Object.defineProperty(app.prototype, "$supabase", {
         get: () => self,
         configurable: true,

src/composables.ts

@@ -1,10 +1,18 @@
 // @ts-ignore
-import { inject } from "vue-demi";
-import { SupabaseClient } from "@supabase/supabase-js";
+import { inject, onMounted, onUnmounted } from "vue-demi";
+import {
+  SupabaseClient,
+  AuthChangeEvent,
+  Session,
+} from "@supabase/supabase-js";
 import supabaseSymbol from "./symbol";
 
 export function useSupabase(): SupabaseClient {
-  return inject(supabaseSymbol);
+  const supabase = inject<SupabaseClient>(supabaseSymbol);
+  if (!supabase) {
+    throw new Error("Supabase provider not found");
+  }
+  return supabase;
 }
 
 export function useSupabaseAuth(): SupabaseClient["auth"] {
@@ -16,3 +24,33 @@ export function useSupabaseStorage(): SupabaseClient["storage"] {
   const supabase = useSupabase();
   return supabase.storage;
 }
+
+export function useSupabaseFrom(): SupabaseClient["from"] {
+  const supabase = useSupabase();
+  return supabase.from;
+}
+
+type AuthChangeHandler = (
+  event: AuthChangeEvent,
+  session: Session | null
+) => void;
+
+export function useOnAuthStateChange(callback: AuthChangeHandler): void {
+  const client = useSupabase();
+
+  onMounted(() => {
+    if (client.auth.session()) {
+      callback("SIGNED_IN", client.auth.session());
+    }
+  });
+
+  const { data: authListener } = client.auth.onAuthStateChange(
+    (event, session) => {
+      callback(event, session);
+    }
+  );
+
+  onUnmounted(() => {
+    authListener?.unsubscribe();
+  });
+}

src/index.ts

@@ -1,19 +1,7 @@
 /** @ts-ignore , vue-demi seems to be not strongly typed so typescript freaks out. */
 import { App, Vue2, Plugin, PluginObject } from "vue-demi";
-import {
-  SupabaseClient,
-  SupabaseClientOptions,
-  SupabaseRealtimePayload,
-  AuthUser,
-  AuthSession,
-  Subscription,
-} from "@supabase/supabase-js";
-import { VueSupabaseClient, createVueSupabase } from "./VueSupabaseClient";
-import {
-  useSupabase,
-  useSupabaseAuth,
-  useSupabaseStorage,
-} from "./composables";
+import { SupabaseClient, SupabaseClientOptions } from "@supabase/supabase-js";
+import { VueSupabaseClient } from "./VueSupabaseClient";
 
 // @ts-expect-error: Module vue/types/vue cannot be found.
 declare module "vue/types/vue" {
@@ -40,7 +28,9 @@ export function install(
   supabase.install(app);
 }
 
-export { useSupabase, useSupabaseAuth, useSupabaseStorage, createVueSupabase };
+const VueSupabasePlugin: PluginObject<SupabasePluginOptions> | Plugin = {
+  install,
+};
 
 export {
   SupabaseClient,
@@ -51,10 +41,10 @@ export {
   AuthSession,
   AuthSession as Session,
   Subscription,
-};
+} from "@supabase/supabase-js";
 
-const VueSupabase: PluginObject<SupabasePluginOptions> | Plugin = {
-  install,
-};
+export * from "./composables";
+
+export { createVueSupabase } from "./VueSupabaseClient";
 
-export default VueSupabase;
+export default VueSupabasePlugin;