Add modifier defer to control deferring storage

[hirasso]

The persist plugin right now stores the value immediately on initialization. This prevents me from being able to use it in quite a few cases, where nothing should be stored in the browser before user interaction (GDPR compliance).

This PR attempts to solve this problem by adding a new modifier $persist('my-value').defer() that will wait for the first mutation of the data before storing it in the browser.

In my (manual) tests, it's already working fine for primitives, but for arrays and objects there seems to be something I'm missing (cypress tests are failing for arrays/objects right now).

If anyone from the maintainers thinks this could be a useful feature, I would be very grateful if they could have a look at why this fails with arrays. (Something inside Alpine.effect(), I guess...)

Actually, I'll add a failing test for arrays, so that it's easier for you guys.

[hirasso]

Maybe a pointer to a solution with the failing array test: It passes if I use concat instead of push.

This fails:

test.only('can defer persisting an array',
    [html`
        <div x-data="{ things: $persist(['foo', 'bar']).defer() }">
            <button @click="things.push('baz')"></button>

            <span x-text="things.join('-')"></span>
        </div>
    `],
    ({ get }, reload) => {
        get('span').should(haveText('foo-bar'))
        get('button').click()
        get('span').should(haveText('foo-bar-baz'))
        reload()
        get('span').should(haveText('foo-bar-baz'))
    },
)

This passses:

test.only('can defer persisting an array',
    [html`
        <div x-data="{ things: $persist(['foo', 'bar']).defer() }">
            <button @click="things = things.concat(['baz'])"></button>

            <span x-text="things.join('-')"></span>
        </div>
    `],
    ({ get }, reload) => {
        get('span').should(haveText('foo-bar'))
        get('button').click()
        get('span').should(haveText('foo-bar-baz'))
        reload()
        get('span').should(haveText('foo-bar-baz'))
    },
)

Maybe this is somehow related to #383 ? The confusing part is that it works just fine with arrays and no .defer() modifier...

[ekwoka]

I think it should really just be the base behavior honestly.

Im curious how you're preventing the changes before getting GDPR approval?

Also, GDPR doesn't prevent storing data that is necessary for the application to work.

[hirasso]

That's exactly the thing. Strictly speaking, storing the data before mutating it is not technically necessary.

In my opionion, the behavior introduced here should be the default behavior. I only added the modifier to make it opt-in and prevent breaking changes (consumers might already rely on the local storage entry being present from the beginning...)

What do you think?

[hirasso]

You are right - it wouldn't be possible to get the user's permission before persisting the value right now. I'll close this. Anyways, nice little exercise for the history plugin :)