diff --git a/README.md b/README.md index 29e505f..406871b 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,16 @@ A supa simple wrapper around Supabase.js to enable usage within Vue. -## Usage - -``` +## Installation +```bash +# Vue 3.x yarn add vue-supabase +# Vue 2.x +yarn add @vue/composition-api vue-supabase ``` - - +Note: Currently `@vue/composition-api` is required for this package to work for projects using Vue 2.x even if the composition api is not used in that particular project +## Usage +### Vue 2.x ```js import VueSupabase from 'vue-supabase' @@ -19,6 +22,31 @@ Vue.use(VueSupabase, { }); ``` +### Vue 3.x +```js +import VueSupabase from 'vue-supabase' + +const app = createApp(...) + +app.use(VueSupabase, { + supabaseUrl: '', + supaaseKey: '', + supabaseOptions: {}, + }) + +app.mount(...) +``` + +### Options API ```js const { data, error } = await this.$supabase.from("events").select("*"); ``` + +### Composition API +```js +import { useSupabase } from 'vue-supabase'; + +const supabase = useSupabase() + +const { data, error } = await supabase.from("events").select("*"); +``` diff --git a/index.d.ts b/index.d.ts index 0880987..269a602 100644 --- a/index.d.ts +++ b/index.d.ts @@ -7,3 +7,15 @@ declare module 'vue/types/vue' { $supabase: SupabaseClient } } + +/** + * Used to get the injected instance of SupabaseClient. + * If using Vuejs 2.x, this function will be undefined, please use + * `this.$supabase` instead. + * @returns SupabaseClient + */ +export function useSupabase(key?: string): SupabaseClient; + +export default { + install(Vue: typeof Vue, options: any): void +} diff --git a/index.js b/index.js index 8cdbacd..9ea3e89 100644 --- a/index.js +++ b/index.js @@ -1,19 +1,31 @@ 'use strict'; +const { isVue3, inject } = require('vue-demi'); const { createClient } = require('@supabase/supabase-js') -module.exports = { - install: function (Vue, options) { - const supabase = createClient(options.supabaseUrl, options.supabaseKey, options.supabaseOptions) +const supabaseSymbol = Symbol('supabase'); - Object.defineProperties(Vue.prototype, { +function useSupabase() { + return inject(supabaseSymbol); +} + +function install(app, options) { + const supabase = createClient(options.supabaseUrl, options.supabaseKey, options.supabaseOptions) + + if (isVue3){ + app.config.globalProperties.$supabase = supabase; + app.provide(supabaseSymbol, supabase); + } else { + Object.defineProperties(app.prototype, { $supabase: { get: function() { return supabase; }, }, }); - - Vue.supabase = supabase; + app.supabase = supabase; } -} \ No newline at end of file +} + +exports.install = install; +exports.useSupabase = useSupabase; diff --git a/package.json b/package.json index 396a165..01d5ead 100644 --- a/package.json +++ b/package.json @@ -30,12 +30,11 @@ }, "homepage": "https://github.com/scottrobertson/vue-supabase#readme", "dependencies": { - "@supabase/supabase-js": "^1.4.2" + "@supabase/supabase-js": "^1.4.2", + "vue-demi": "^0.11.2" }, "peerDependencies": { - "vue": ">=1.x.x" - }, - "devDependencies": { - "vue": "^2" + "@vue/composition-api": "^1.0.4", + "vue": "^2.0.0 || >=3.0.0" } } diff --git a/yarn.lock b/yarn.lock index 6a7ed70..3367633 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,47 +2,54 @@ # yarn lockfile v1 -"@supabase/gotrue-js@^1.11.2": - version "1.11.2" - resolved "https://registry.yarnpkg.com/@supabase/gotrue-js/-/gotrue-js-1.11.2.tgz#51e20124b4740903aa5a33a7d8ade16ac9303d07" - integrity sha512-QYrA8wYTwofJcwQ5hWkg7HyDenykxSMUMImo7Um884EPHIhyZMJaCw9DK+p87f7HJ6rdYvCDF20LK1GcsMOB0A== +"@supabase/gotrue-js@^1.16.6": + version "1.16.6" + resolved "https://registry.yarnpkg.com/@supabase/gotrue-js/-/gotrue-js-1.16.6.tgz#d9d63740b11ad51d2f8d6c68e9ac16bb83439888" + integrity sha512-tLaG4G4sMW2P1hyq05Nr0jM/6AbdiWkjOPbM+QZsuVSsNbZ/z+BNxuE5q+6zHOnoP+YKEHup7x9xKR0zy2UqUQ== dependencies: cross-fetch "^3.0.6" -"@supabase/postgrest-js@^0.24.4": - version "0.24.5" - resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-0.24.5.tgz#bfad12442bd7eef2e44d7698c08f3cd72e63f712" - integrity sha512-DJWynRWLIVSnEHGWsPoLd7hjVO9MekPPWHwKUX/8uJnRS+SGj61EnvC5EIB2DkmSQSO0HJHXRt90nwvnTG/YVA== +"@supabase/postgrest-js@^0.33.0": + version "0.33.0" + resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-0.33.0.tgz#36e0bfd0f79a0fa01a4bb7c7881ee463fd7d60a8" + integrity sha512-og6Evdkan7Qp6+tOch7Pyq+ZWMnrCQtPHWwPpsN5A3iYQSro2yn21Yvazs9qAFoWAeTGNkuTOVpShT5Mbc9WcQ== dependencies: cross-fetch "^3.0.6" -"@supabase/realtime-js@^1.0.6": - version "1.0.6" - resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-1.0.6.tgz#d4cb1a9351cc8c836ee3f1392742a4466e0d7424" - integrity sha512-qzYYBzXteYsqQYlLzoYwee2OloWn3w8YzUFbDYFUPdkUwLs01OIqsm+lRCzKDivmyn2G0FJQjloWcF4BF5TyBg== +"@supabase/realtime-js@^1.0.11": + version "1.0.11" + resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-1.0.11.tgz#2b3a0b7822bcb8b2cf6201ec3c34220be23f40de" + integrity sha512-jE8/8I64VpEygEbrd9+RBZBIREo43Vacy8exef1QlyRegblG2VtqqK96BiQSaVG5ZwXumOs6Igl8kgyrDqUAPg== dependencies: "@types/websocket" "^1.0.1" - query-string "^6.12.1" - websocket "^1.0.31" + websocket "^1.0.34" + +"@supabase/storage-js@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-1.2.2.tgz#6eeef2d1365af2497b35ae6c6384f5dfbd75f5b6" + integrity sha512-EJ2BsfD7Mc+fXJqRef3YiWF8kg/GhBdxIil7EzmrAFBSJ3VCbN4sqzvCCUYK2dtNICUV3JOKh5SBX2RrgROIOA== + dependencies: + cross-fetch "^3.1.0" "@supabase/supabase-js@^1.4.2": - version "1.4.2" - resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-1.4.2.tgz#ebd6a7459b9c401def80cff9431d1cd445cccadd" - integrity sha512-qczdclPR85glzKjg0ed9bnKUt0HoxFq47MTsUN5MEQ5w5uk/dpnF2MYawLR7ATgoXCokxdWWB2pdzjbBTrTpUQ== + version "1.18.1" + resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-1.18.1.tgz#58fa3dfff3a1f86c169c83330282120195f6c5f1" + integrity sha512-YZhp867/HV9Az8icouAJ7S2j1SV4ZlshvQ1wTR0aV+Em+TTj9ZiS6GVykCjKn2SE2cUfG/wgmaXm9tiKecUhFg== dependencies: - "@supabase/gotrue-js" "^1.11.2" - "@supabase/postgrest-js" "^0.24.4" - "@supabase/realtime-js" "^1.0.6" + "@supabase/gotrue-js" "^1.16.6" + "@supabase/postgrest-js" "^0.33.0" + "@supabase/realtime-js" "^1.0.11" + "@supabase/storage-js" "^1.2.2" "@types/node@*": - version "14.14.31" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.31.tgz#72286bd33d137aa0d152d47ec7c1762563d34055" - integrity sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g== + version "16.3.2" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.2.tgz#655432817f83b51ac869c2d51dd8305fb8342e16" + integrity sha512-jJs9ErFLP403I+hMLGnqDRWT0RYKSvArxuBVh2veudHV7ifEC1WAmjJADacZ7mRbA2nWgHtn8xyECMAot0SkAw== "@types/websocket@^1.0.1": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.1.tgz#039272c196c2c0e4868a0d8a1a27bbb86e9e9138" - integrity sha512-f5WLMpezwVxCLm1xQe/kdPpQIOmL0TXYx2O15VYfYzc7hTIdxiOoOvez+McSIw3b7z/1zGovew9YSL7+h4h7/Q== + version "1.0.3" + resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.3.tgz#49e09f939afd0ccdee4f7108d4712ec9feb0f153" + integrity sha512-ZdoTSwmDsKR7l1I8fpfQtmTI/hUwlOvE3q0iyJsp4tXU0MkdrYowimDzwxjhQvxU4qjhHLd3a6ig0OXRbLgIdw== dependencies: "@types/node" "*" @@ -53,10 +60,10 @@ bufferutil@^4.0.1: dependencies: node-gyp-build "^4.2.0" -cross-fetch@^3.0.6: - version "3.0.6" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" - integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ== +cross-fetch@^3.0.6, cross-fetch@^3.1.0: + version "3.1.4" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39" + integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ== dependencies: node-fetch "2.6.1" @@ -75,11 +82,6 @@ debug@^2.2.0: dependencies: ms "2.0.0" -decode-uri-component@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" - integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU= - es5-ext@^0.10.35, es5-ext@^0.10.50: version "0.10.53" resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1" @@ -113,11 +115,6 @@ ext@^1.1.2: dependencies: type "^2.0.0" -filter-obj@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b" - integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs= - is-typedarray@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" @@ -143,35 +140,15 @@ node-gyp-build@^4.2.0: resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.2.3.tgz#ce6277f853835f718829efb47db20f3e4d9c4739" integrity sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg== -query-string@^6.12.1: - version "6.14.1" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a" - integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw== - dependencies: - decode-uri-component "^0.2.0" - filter-obj "^1.1.0" - split-on-first "^1.0.0" - strict-uri-encode "^2.0.0" - -split-on-first@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f" - integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw== - -strict-uri-encode@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" - integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= - type@^1.0.1: version "1.2.0" resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0" integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg== type@^2.0.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/type/-/type-2.3.0.tgz#ada7c045f07ead08abf9e2edd29be1a0c0661132" - integrity sha512-rgPIqOdfK/4J9FhiVrZ3cveAjRRo5rsQBAIhnylX874y1DX/kEKSVdLsnuHB6l1KTjHyU01VjiMBHgU2adejyg== + version "2.5.0" + resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d" + integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw== typedarray-to-buffer@^3.1.5: version "3.1.5" @@ -181,21 +158,21 @@ typedarray-to-buffer@^3.1.5: is-typedarray "^1.0.0" utf-8-validate@^5.0.2: - version "5.0.4" - resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.4.tgz#72a1735983ddf7a05a43a9c6b67c5ce1c910f9b8" - integrity sha512-MEF05cPSq3AwJ2C7B7sHAA6i53vONoZbMGX8My5auEVm6W+dJ2Jd/TZPyGJ5CH42V2XtbI5FD28HeHeqlPzZ3Q== + version "5.0.5" + resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.5.tgz#dd32c2e82c72002dc9f02eb67ba6761f43456ca1" + integrity sha512-+pnxRYsS/axEpkrrEpzYfNZGXp0IjC/9RIxwM5gntY4Koi8SHmUGSfxfWqxZdRxrtaoVstuOzUp/rbs3JSPELQ== dependencies: node-gyp-build "^4.2.0" -vue@^2: - version "2.6.12" - resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123" - integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== +vue-demi@^0.11.2: + version "0.11.2" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.2.tgz#faa06da53887c493a695b997f4fcb4784a667990" + integrity sha512-J+X8Au6BhQdcej6LY4O986634hZLu55L0ewU2j8my7WIKlu8cK0dqmdUxqVHHMd/cMrKKZ9SywB/id6aLhwCtA== -websocket@^1.0.31: - version "1.0.33" - resolved "https://registry.yarnpkg.com/websocket/-/websocket-1.0.33.tgz#407f763fc58e74a3fa41ca3ae5d78d3f5e3b82a5" - integrity sha512-XwNqM2rN5eh3G2CUQE3OHZj+0xfdH42+OFK6LdC2yqiC0YU8e5UK0nYre220T0IyyN031V/XOvtHvXozvJYFWA== +websocket@^1.0.34: + version "1.0.34" + resolved "https://registry.yarnpkg.com/websocket/-/websocket-1.0.34.tgz#2bdc2602c08bf2c82253b730655c0ef7dcab3111" + integrity sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ== dependencies: bufferutil "^4.0.1" debug "^2.2.0"