streaver / vue-preferences Goto Github PK

As an example build see https://circleci.com/gh/streaver/vue-preferences/83?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

For now we removed the node-latest job from the build, but this needs to be fixed in the near future.

Investigate the possibility of adding a synchronize option to allow synching of the preferences when other tabs write to the storage.

Use the StorageEvent for synchronization when using localStorage or sessionStorage

Investigate and implement a simple (but efficient) compression algorithm to save space on the used storage

Describe the bug
It seems like when a string value is stored, it's being stored with additional quotes around the string.

To Reproduce
Steps to reproduce the behavior:

1. Create the computed variable:

computed: {
    applicationTheme: preference('applicationTheme', { defaultValue: 'default' }),
}

2. Set it to something:

methods: {
    toggleDarkTheme() {
        this.applicationTheme = this.applicationTheme === 'default' ? 'dark' : 'default';
    }
}

3. Get the value from local storage (not using Vue/Vue-Preferences):

const applicationTheme = localStorage.getItem("applicationTheme");
// Value is equal to "default" or "dark", not default or dark

Expected behavior
The value shouldn't be surrounded by quotes.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version latest

The sample app UI could be better. Since the one we have is kind of bad almost anything that is better would be accepted as a PR 🙄

Describe the bug
When updating a reactive preference, the change is not reflected. The console contains warning containing the above error.

To Reproduce
Steps to reproduce the behavior:

1. Setup a vue3 project (I am using vite-cli -> vue + typescript)
2. Install vue-preferences then create a reactive preference
3. Update the preference.
4. See console

Expected behavior
The value should have reactively updated without requiring a refresh.

Error

runtime-core.esm-bundler.js:38 [Vue warn]: Property "_isVue" was accessed during render but is not defined on instance. 
  at <Content> 
  at <App>
warn @ runtime-core.esm-bundler.js:38
get @ runtime-core.esm-bundler.js:6877
s.J @ preference-object.js:58
s.get @ preference-object.js:36
get @ preference.js:12
reactiveEffect @ reactivity.esm-bundler.js:42
get value @ reactivity.esm-bundler.js:876
get @ runtime-core.esm-bundler.js:3090
_sfc_render @ Content.vue:2

Desktop (please complete the following information):

• OS: Windows 11
• Browser Webview2 [edge]

• "vue": "^3.0.5",
  "vue-preferences": "^3.0.0"
  

Additional context
Here is what my code approx looks like, but I get the error on almost all instances of updating preference. To reflect the changes elsewhere. I need a full reload.

<button round @click="theme = theme == 'dark' ? 'light' : 'dark'">

<script>
computed: {
  theme: preference('activeTheme', { defaultValue: 'dark' })
}
</script>

I also tried the programmatic approach but the value doesnt update.

When using false as defaultValue, the default value is null instead of false.
I have another preference which is of type string and it works properly for that preference.
Using: localStorage