Vue 3.x Composition API use standard re-write

[scottrobertson]

Building off #1

[scottrobertson]

@NuroDev i have not used Vue 3.0 yet. Could you help me understand what the .use(supabase) line is actually doing, as it seems like to actually use it, we still have to use import { useSupabase } from "vue-supabase";. So in this case, I don't really understand the interaction between the plugin, and Vue.

If possible, I would like to keep the this.$supabase so what we don't have to do the import every single time we use it, as it kinda defeats the point of the plugin. Vuex 4.x does this still too, so it must be possible. I will have a look at some point this weekend if you don't get to it first.

[NuroDev]

Could you help me understand what the .use(supabase) line is actually doing, as it seems like to actually use it, we still have to use import { useSupabase } from "vue-supabase";

I am by no means an expert at Vue 3.x by any means, but I have been using it a fair bit the past few weeks and I know that a common practice for plugins now (For example: vue-router, vuex, or some community plugins such as vueuse) to create a new plugin instance, either in the main.js / main.ts file and then pass the new plugin instance to Vue via the .use() method.
From this the idea is that you then can import a use method from that package to actually get the plugin instance. EG: vuex:

// main.ts
import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const store = createStore({
	state () {
		return {
			count: 0,
		}
	},
	mutations: {
		increment (state) {
			state.count++;
	  	}
	}
});

createApp(App)
	.use(store)
	.mount('#app');

<script lang="ts">
import { useStore } from 'vuex';

export default {
	setup () {
		const store = useStore();
		console.log(store.count);
	}
}
</script>

From what I understand right now, though I could be wrong, one of the reason for the push to change to this "import a 'use' function" syntax is that it greatly aids in TypeScript support. Though there may of course be other, better reasons.

If possible, I would like to keep the this.$supabase so what we don't have to do the import every single time we use it

In theory this should still be the case. I sadly did not get a chance to test it yet, but in theory this line I added to index.ts should apply $supabase globally such that this.$supabase still works:

app.config.globalProperties.$supabase = client_instance;

[scottrobertson]

@NuroDev I gave this a go today on a fresh Vue 3 project. Can't seem to get it running in JS (no typescript):

Can't import the named export 'createClient' from non EcmaScript module (only default export is available)

[NuroDev]

Very odd. I have tested this myself (And even just tried creating a new Vue 3.x project, one in JS & another in TS, using vitejs and worked fine).

My first guess seeing a EcmaScript module failure would be that probably the tsconfig.json config as it is currently set the compile target to ES2019. Could be worth trying to change that target from ES2019 to something more widely available, such as ES6 or something similar.
(Targets is listed under the --lib listing: typescriptlang.org)

[scottrobertson]

My test was with Webpack, so maybe that is the difference?

[scottrobertson]

Switching to ES6 didn't seem to help.

Do you have any examples of libraries doing it the way you have setup? VueX etc all seem to be just written in JS, not TS.

[NuroDev]

Unsure if this may be overkill for this library or not, but the popular Vue 3.x library vue-use has created a framework for creating cross-version compatible plugins called: vue-demi. They even offer an example that shows how to create an example use plugin that works on both Vue 2.x AND 3.x: vueuse/vue-demi.

Might be worth looking into that library a bit more then as it might mean we can publish a single version that is compatible with both versions.

[scottrobertson]

It would be amazing to be able to support both versions, as it simplifies the release process a lot. If you want to play around with that, feel free, and if not, hopefully, I can find some time over the next few days.

[scottrobertson]

Closing for #5

We still need to do the Typescript rewrite sometime.