statamic-cp-alpine-helpers.js

Statamic.booting(() => {

    Alpine.magic('useField', (el) => {
        return () => {
            const vm = closestVm(el);
            if (!vm) {
                return;
            }
            const data = Alpine.reactive({
                value: vm.value,
                fieldPathPrefix: vm.fieldPathPrefix,
                update: vm.update,
                updateDebounced: vm.updateDebounced,
                updateMeta: vm.updateMeta, 
            });
            vm.$watch('value', () => {
                data.value = vm.value;
            });
            vm.$watch('fieldPathPrefix', () => {
                data.fieldPathPrefix = vm.fieldPathPrefix;
            });
            return data;
        }
    });
    
    Alpine.magic('useStore', (el, { Alpine }) => {
        return () => {
            const vm = closestVm(el, 'publish-container');
            if (!vm) {
                return;
            }
            const state = vm.$store.state.publish[vm.name] || [];
            const data = Alpine.reactive({
                values: state.values,
                meta: state.meta,
                errors: state.errors,
                setFieldValue: vm.setFieldValue,
                setFieldMeta: vm.setFieldMeta,
            });
            vm.$store.subscribe((mutation) => {
                if (mutation.type === `publish/${vm.name}/setFieldValue`) {
                    data.values = { ...state.values };
                }
                if (mutation.type === `publish/${vm.name}/setFieldMeta`) {
                    data.meta = { ...state.meta };
                }
                if (mutation.type === `publish/${vm.name}/setErrors`) {
                    data.errors = { ...state.errors };
                }
            });
            return data;
        };
    });

});