Vue 3.x Composition API use standard re-write

.gitignore

@@ -1,61 +1,104 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# next.js build output
-.next
+# Logs
+logs
+*.log
+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
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+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
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# 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,42 @@
-# Vue + Supabase
-
-A supa simple wrapper around Supabase.js to enable usage within Vue.
-
-## Usage
-
-```
-yarn add vue-supabase
-```
-
-
-```js
-import VueSupabase from 'vue-supabase'
-
-Vue.use(VueSupabase, {
-  supabaseUrl: "",
-  supabaseKey: "",
-  supabaseOptions: {},
-});
-```
-
-```js
-const { data, error } = await this.$supabase.from("events").select("*");
-```
+# Vue + Supabase
+
+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
+```
+
+
+```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
+// 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,47 @@
-{
-  "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"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/scottrobertson/vue-supabase.git"
-  },
-  "keywords": [
-    "vue",
-    "custom",
-    "supabase"
-  ],
-  "author": "Scott Robertson",
-  "types": "index.d.ts",
-  "license": "MIT",
-  "files": [
-    "index.js",
-    "index.d.ts"
-  ],
-  "bugs": {
-    "url": "https://github.com/scottrobertson/vue-supabase/issues"
-  },
-  "homepage": "https://github.com/scottrobertson/vue-supabase#readme",
-  "dependencies": {
-    "@supabase/supabase-js": "^1.4.2"
-  },
-  "peerDependencies": {
-    "vue": ">=1.x.x"
-  },
-  "devDependencies": {
-    "vue": "^2"
-  }
-}
+{
+  "name": "vue-supabase",
+  "version": "2.1.1",
+  "description": "A small wrapper for integrating supabase to Vue.js",
+  "repository": {
+    "type": "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"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "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",
+    "release": "npx bumpp --commit --tag --push && npm run build && npm publish"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^1.5.1"
+  },
+  "peerDependencies": {
+    "vue": ">=1.x.x"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "tsup": "^4.6.1",
+    "typescript": "^4.1.5",
+    "vue": "^3"
+  }
+}