Skip to content

Enable Nuxt Bridge integration and add composables #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 18, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v14.17.3
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick question, what impact does this file have for anyone who does not have this version on node installed, given they have nvm anyways?

Copy link
Contributor Author

@Strift Strift Jan 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you have NVM installed, you still need to run nvm use to use the version in .nvmrc. Unless you have your shell configured to auto-run the command, but that would still happen behind the scenes.

Now, if you don't have the correct version installed, this is the error message you would get:

Found '/home/strift/Code/OpenSource/vue-supabase/.nvmrc' with version <v14.17.3>
N/A: version "v14.17.3 -> N/A" is not yet installed.

You need to run "nvm install v14.17.3" to install it before using it.

42 changes: 21 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -47,4 +47,4 @@
"prettier": "^2.4.1",
"typescript": "^4.4.4"
}
}
}
5 changes: 5 additions & 0 deletions src/VueSupabaseClient.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
44 changes: 41 additions & 3 deletions src/composables.ts
Original file line number Diff line number Diff line change
@@ -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"] {
Expand All @@ -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();
});
}
30 changes: 10 additions & 20 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -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" {
Expand All @@ -40,7 +28,9 @@ export function install(
supabase.install(app);
}

export { useSupabase, useSupabaseAuth, useSupabaseStorage, createVueSupabase };
const VueSupabasePlugin: PluginObject<SupabasePluginOptions> | Plugin = {
install,
};

export {
SupabaseClient,
Expand All @@ -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;