Some refactoring

resources/js/app.js

@@ -30,6 +30,7 @@ import './bootstrap/components';
 import './bootstrap/fieldtypes';
 import './bootstrap/directives';
 import './bootstrap/tooltips';
+import './bootstrap/alpine';
 
 import axios from 'axios';
 import PortalVue from "portal-vue";
@@ -59,49 +60,6 @@ Statamic.booting(Statamic => {
     axios.defaults.headers.common['X-CSRF-TOKEN'] = Statamic.$config.get('csrfToken');
 });
 
-Alpine.start()
-
-Alpine.magic('field', (el, { Alpine }) => {
-    const vm = el.closest('.html-fieldtype-wrapper')?.__vue__;
-    if (!vm) {
-        return;
-    }
-    const { $store, storeName } = vm;
-    const storeState = $store.state.publish[storeName] || [];
-    const storeAlpine = Alpine.reactive({
-        values: { ...storeState.values },
-        meta: { ...storeState.meta },
-    });
-    $store.subscribe((mutation) => {
-        if ([
-            `publish/${storeName}/setFieldValue`,
-            `publish/${storeName}/setFieldMeta`,
-        ].includes(mutation.type)) {
-            storeAlpine.values = { ...storeState.values };
-            storeAlpine.meta = { ...storeState.meta };
-        }
-    });
-    return {
-        value: vm.value,
-        update: vm.update,
-        updateDebounced: vm.updateDebounced,
-        updateMeta: vm.updateMeta,
-        store: {
-            state: storeAlpine,
-            setFieldValue(handle, value) {
-                $store.dispatch(`publish/${storeName}/setFieldValue`, {
-                    handle, value, user: Statamic.user.id
-                });
-            },
-            setFieldMeta(handle, value) {
-                $store.dispatch(`publish/${storeName}/setFieldMeta`, {
-                    handle, value, user: Statamic.user.id
-                });
-            },
-        },
-    };
-});
-
 Vue.prototype.$axios = axios;
 Vue.prototype.$events = new Vue();
 Vue.prototype.$echo = Statamic.$echo;

resources/js/bootstrap/alpine.js

@@ -0,0 +1,72 @@
+import Alpine from 'alpinejs'
+
+const nearestVm = (el, callback = vm => true) => {
+    let node = el;
+    while (node) {
+        if (node.__vue__) break;
+        node = node.parentNode;
+    }
+    let vm = node.__vue__;
+    if (!vm) {
+        return;
+    }
+    const root = vm.$root;
+    while (vm !== root) {
+        if (callback(vm)) return vm;
+        vm = vm.$parent;
+    }
+};
+
+Alpine.magic('useField', (el) => {
+    return () => {
+        const vm = nearestVm(el, vm => vm.$options.name.match(/-fieldtype$/));
+        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 = nearestVm(el, vm => vm.$options.name === '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;
+    };
+});
+
+Alpine.start();

resources/js/components/fieldtypes/HtmlFieldtype.vue

@@ -1,13 +1,9 @@
 <template>
-    <div class="html-fieldtype-wrapper" v-html="config.html" />
+    <div v-html="config.html" />
 </template>
 
 <script>
 export default {
-
-    mixins: [Fieldtype],
-
-    inject: ['storeName'],
-  
+    mixins: [Fieldtype]
 };
-</script>
+</script>