Vue 3.x Composition API use standard re-write

.gitignore

@@ -4,6 +4,10 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
@@ -16,11 +20,12 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+*.lcov
 
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)
@@ -39,12 +44,21 @@ jspm_packages/
 # TypeScript v1 declaration files
 typings/
 
+# TypeScript cache
+*.tsbuildinfo
+
 # Optional npm cache directory
 .npm
 
 # Optional eslint cache
 .eslintcache
 
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
 # Optional REPL history
 .node_repl_history
 
@@ -56,6 +70,35 @@ typings/
 
 # dotenv environment variables file
 .env
+.env.test
 
-# next.js build output
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
 .next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

README.md

@@ -1,24 +1,47 @@
-# Vue + Supabase
+# Vue.js + Supabase
 
-A supa simple wrapper around Supabase.js to enable usage within Vue.
+A supa simple wrapper around Supabase.js to enable usage within Vue.js.
 
 ## Usage
 
-```
+```shell
+npm install --save vue-supabase
+
+# OR
+
 yarn add vue-supabase
 ```
 
+### Using with Vue.js 2.x
 
-```js
-import VueSupabase from 'vue-supabase'
+This plugin is designed for Vue.js 3, but you can still use it with Vue.js 2. Please take a look at the v1.x.x tag [here](https://github.com/supabase/vue-supabase/tree/v1.x.x).
+
+### Using with Vue.js 3.x
 
-Vue.use(VueSupabase, {
-  supabaseUrl: "",
-  supabaseKey: "",
-  supabaseOptions: {},
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { createSupabase } from 'vue-supabase';
+
+import App from './App.vue';
+
+const supabase = createSupabase({
+  url: "https://xyzcompany.supabase.co",
+  key: "public-anon-key",
+  options: {
+    // ...
+  };
 });
+
+createApp(App)
+  .use(supabase)
+  .mount('#app');
 ```
 
 ```js
-const { data, error } = await this.$supabase.from("events").select("*");
+// App.vue
+import { useSupabase } from "vue-supabase";
+
+const supabase = useSupabase();
+const { data, error } = await supabase.from("events").select("*");
 ```

index.ts

@@ -0,0 +1,35 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { Plugin } from 'vue';
+
+import type { App } from 'vue';
+import type { SupabaseClientOptions } from '@supabase/supabase-js';
+
+let client_instance: SupabaseClient;
+
+export interface VueSupabaseOptions {
+  key: string;
+  options?: SupabaseClientOptions;
+  url: string;
+};
+
+export const createSupabase = (options: VueSupabaseOptions): Plugin => {
+  return {
+    install(app: App) {
+      const {
+        key,
+        options: supabaseOptions = <SupabaseClientOptions>{},
+        url,
+      } = options;
+
+      client_instance = createClient(url, key, supabaseOptions);
+      app.config.globalProperties.$supabase = client_instance;
+    }
+  }
+}
+
+export const useSupabase = (): SupabaseClient => client_instance;
+
+export default {
+  createSupabase,
+  useSupabase,
+}

package.json

@@ -1,41 +1,48 @@
 {
   "name": "vue-supabase",
-  "version": "1.0.4",
-  "description": "A small wrapper for integrating supabase to Vuejs",
-  "main": "index.js",
-  "engine": {
-    "node": ">= 1"
-  },
-  "scripts": {
-    "test": "npm run test"
-  },
+  "version": "2.0.0-beta.1",
+  "description": "A small wrapper for integrating supabase to Vue.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/scottrobertson/vue-supabase.git"
+    "url": "git+https://github.com/supabase/vue-supabase.git"
   },
+  "author": {
+    "name": "Scott Robertson"
+  },
+  "bugs": "https://github.com/supabase/vue-supabase/issues",
+  "homepage": "https://github.com/supabase/vue-supabase#readme",
   "keywords": [
     "vue",
     "custom",
     "supabase"
   ],
-  "author": "Scott Robertson",
-  "types": "index.d.ts",
   "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
-    "index.js",
-    "index.d.ts"
+    "dist"
   ],
-  "bugs": {
-    "url": "https://github.com/scottrobertson/vue-supabase/issues"
+  "engine": {
+    "node": ">= 1"
+  },
+  "scripts": {
+    "dev": "npm run build:base -- --watch",
+    "build": "npm run build:base -- --minify --sourcemap --env.NODE_ENV production",
+    "build:base": "rimraf dist && tsup index.ts --dts --format cjs,esm",
+    "publish": "npm run build && npm publish"
   },
-  "homepage": "https://github.com/scottrobertson/vue-supabase#readme",
   "dependencies": {
-    "@supabase/supabase-js": "^1.4.2"
+    "@supabase/supabase-js": "^1.5.1"
   },
   "peerDependencies": {
-    "vue": ">=1.x.x"
+    "vue": ">=3.x.x"
   },
   "devDependencies": {
-    "vue": "^2"
+    "bumpp": "^6.0.6",
+    "rimraf": "^3.0.2",
+    "tsup": "^4.6.1",
+    "typescript": "^4.1.5",
+    "vue": "^3"
   }
 }

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2019",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "baseUrl": "."
+  },
+  "include": [
+    "*.ts"
+  ]
+}