Alpine $persist returns [object] instead of storage value in Alpine.store

[arthurshlain]

I'm trying to use the Alpine.$persist global, but got object instead of string:

The value with specified key accessibility_fontSizeClassName is not present in Local storage.

accessibility.js

import Alpine from "alpinejs"

import persist from "@alpinejs/persist"

Alpine.plugin(persist)

Alpine.store('accessibility', {

    activeFontSizeClassName: Alpine.$persist('text-[16px]').as('accessibility_fontSizeClassName'),

    init() {

        console.log(this.activeFontSizeClassName);
        // Proxy(Object) {initialValue: 'text-[16px]', _x_interceptor: true, …}

        document.documentElement.classList.add(this.activeFontSizeClassName);
        // ↑ (string expected)
        // Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': 
        // The token provided ('[object Object]') contains HTML space characters, 
        // which are not valid in tokens.
    },

});

app.js

import Alpine from 'alpinejs'

// … import other Alpine plugins

import './store/accessibility'

// … import data objects

window.Alpine = Alpine

Alpine.start()

"@alpinejs/anchor": "^3.14.0",
"@alpinejs/collapse": "^3.14.0",
"@alpinejs/focus": "^3.14.0",
"@alpinejs/intersect": "^3.14.0",
"@alpinejs/persist": "^3.14.0",
"@tailwindcss/forms": "^0.5.7",
"alpinejs": "^3.14.0",
"axios": "^1.6.8",
"cross-env": "^7.0.3",
"fast-glob": "^3.3.2",
"js-cookie": "^3.0.5",
"laravel-mix": "^6.0.49",
"swiper": "^11.1.4",
"tailwindcss": "^3.4.1"

[SimoTod]

init runs too early when persist is not the persisted value yet. You need to use nextTick

init() {
  Alpine.nextTick(() => {
    console.log(this.activeFontSizeClassName); 
    document.documentElement.classList.add(this.activeFontSizeClassName);
  })
}

[ekwoka]

feels like interceptors should be handled before init is called...

[SimoTod]

feels like interceptors should be handled before init is called...

They do for x-data, they don't for stores. Probably an oversight, it should be just a matter of moving one line further up, to be fair

[bashunaimiroy]

Hi @SimoTod. Hope you're well.

I'm experiencing the same issue posted by OP. Could you explain what you mean by the 'moving one line further up'? Which line? And is this is a proposed fix in our code, or something that you're suggesting could be fixed in a PR to Alpine source?

Thanks

[SimoTod]

That comment was about how to address the bug in the Alpine source code. The fix in userland is to use nextTick

[ekwoka]

I'll just make that PR today 🥱

[ekwoka]

#4278