Form plugin for Alpine.js

form.js

document.addEventListener('alpine:init', () => {
    Alpine.magic('form', el => () => {
        return Alpine.reactive({
            processing: false,
            recentlySuccessful: false,
            errors: {},
            submit() {
                return axios.post(el.action, el).then(response => {
                    this.errors = {};
                    this.recentlySuccessful = true;
                    this.dispatch('success', response.data);

                    setTimeout(() => this.recentlySuccessful = false, 3000);

                    return Promise.resolve(response.data);
                }).catch(({ response }) => {
                    this.dispatch('error', response);
                    this.errors = response.data.errors ?? {};

                    return Promise.reject(response);
                }).finally(() => this.dispatch('finish'));
            },
            dispatch(event, data) {
                el.dispatchEvent(new CustomEvent(event, { detail: data, bubbles: true }));
            },
        });
    });
});