is $queryString plugin available on npm?

[janhendrik-rust]

I'd love to try out the $queryString magic method after watching the Alpine days 2021 videos.

It seems the $queryString magic method is part of the history plugin, but I can't find the @alpinejs/history plugin on npm. Has it been released yet or will I have to build it from source? Is it as simple as npm install & npm run build from this repo?

[MaximVanhove]

It should be possible to copy over packages/history/src folder to a local './history' folder for testing.

import Alpine from 'alpinejs'
import history from './history'
 
Alpine.plugin(history)

[MaximVanhove]

I am using it as CDN, so I placed this script in:

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(history);
});

function history (Alpine) {
    Alpine.magic('queryString', (el, { interceptor }) => {
        let alias;

        return interceptor((initialValue, getter, setter, path, key) => {
            let pause = false;
            const queryKey = alias || path;

            let value = initialValue;
            const url = new URL(window.location.href);

            if (url.searchParams.has(queryKey)) {
                value = url.searchParams.get(queryKey);
            }

            setter(value);

            const object = { value };

            url.searchParams.set(queryKey, value);

            replace(url.toString(), path, object);

            window.addEventListener('popstate', (e) => {
                if (!e.state) return;
                if (!e.state.alpine) return;

                Object.entries(e.state.alpine).forEach(([newKey, { value }]) => {
                    if (newKey !== key) return;

                    pause = true;

                    Alpine.disableEffectScheduling(() => {
                        setter(value);
                    });

                    pause = false;
                });
            });

            Alpine.effect(() => {
                const value = getter();

                if (pause) return;

                const object = { value };

                const url = new URL(window.location.href);

                url.searchParams.set(queryKey, value);

                push(url.toString(), path, object);
            });

            return value;
        }, func => {
            func.as = key => { alias = key; return func; };
        });
    });

    function replace (url, key, object) {
        const state = window.history.state || {};

        if (!state.alpine) state.alpine = {};

        state.alpine[key] = object;

        window.history.replaceState(state, '', url);
    }

    function push (url, key, object) {
        const state = { alpine: { ...window.history.state.alpine, ...{ [key]: object } } };

        window.history.pushState(state, '', url);
    }
}

[Zaffer]

Thanks, what is the url.js file inside src/ folder? do we need it too?