Make publish container reference and site reactive

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: jasonvarga

resources/js/components/entries/PublishForm.vue

@@ -73,7 +73,7 @@
             v-if="fieldset"
             ref="container"
             :name="publishContainer"
-            :reference="initialReference"
+            :reference="reference"
             :blueprint="fieldset"
             v-model="values"
             :extra-values="extraValues"
@@ -370,6 +370,7 @@ export default {
             originValues: this.initialOriginValues,
             originMeta: this.initialOriginMeta,
             site: this.initialSite,
+            reference: this.initialReference,
             selectingOrigin: false,
             selectedOrigin: null,
             isWorkingCopy: this.initialIsWorkingCopy,
@@ -687,6 +688,7 @@ export default {
                 this.fieldset = data.blueprint;
                 this.permalink = data.permalink;
                 this.site = localization.handle;
+                this.reference = data.reference;
                 this.localizing = false;
                 this.initialPublished = data.values.published;
                 this.readOnly = data.readOnly;

resources/js/components/globals/PublishForm.vue

@@ -72,7 +72,7 @@
             v-if="fieldset && !fieldset.empty"
             ref="container"
             :name="publishContainer"
-            :reference="initialReference"
+            :reference="reference"
             :blueprint="fieldset"
             v-model="values"
             :meta="meta"
@@ -164,6 +164,7 @@ export default {
             originValues: this.initialOriginValues || {},
             originMeta: this.initialOriginMeta || {},
             site: this.initialSite,
+            reference: this.initialReference,
             readOnly: this.initialReadOnly,
             syncFieldConfirmationText: __('messages.sync_entry_field_confirmation_text'),
             pendingLocalization: null,
@@ -301,6 +302,7 @@ export default {
                 this.actions = data.actions;
                 this.fieldset = data.blueprint;
                 this.site = localization.handle;
+                this.reference = data.reference;
                 this.localizing = false;
                 this.afterActionSuccessfullyCompleted(data);
                 this.$nextTick(() => this.$refs.container.clearDirtyState());

resources/js/components/terms/PublishForm.vue

@@ -56,7 +56,7 @@
             v-if="fieldset"
             ref="container"
             :name="publishContainer"
-            :reference="initialReference"
+            :reference="reference"
             :blueprint="fieldset"
             v-model="values"
             :meta="meta"
@@ -215,6 +215,7 @@ export default {
             originValues: this.initialOriginValues || {},
             originMeta: this.initialOriginMeta || {},
             site: this.initialSite,
+            reference: this.initialReference,
             isPreviewing: false,
             state: 'new',
             published: this.initialPublished,
@@ -440,6 +441,7 @@ export default {
                 this.actions = data.actions;
                 this.fieldset = data.blueprint;
                 this.site = localization.handle;
+                this.reference = data.reference;
                 this.localizing = false;
                 this.$nextTick(() => this.$refs.container.clearDirtyState());
             });

resources/js/components/ui/Publish/Components.vue

@@ -5,5 +5,5 @@ const { components } = injectContainerContext();
 </script>
 
 <template>
-    <component v-for="component in components" :key="component.name" :is="component.name" v-bind="component.props" v-on="component.events" />
+    <component v-for="component in components" :key="component.id" :is="component.name" v-bind="component.props" v-on="component.events" />
 </template>

resources/js/components/ui/Publish/Container.vue

@@ -273,6 +273,12 @@ function blurField(handle, user = Statamic.user) {
 function pushComponent(name, { props }) {
     const component = new Component(uniqid(), name, props);
     components.value.push(component);
+    const originalDestroy = component.destroy.bind(component);
+    component.destroy = () => {
+        const index = components.value.indexOf(component);
+        if (index !== -1) components.value.splice(index, 1);
+        originalDestroy();
+    };
     return component;
 }
 
@@ -336,8 +342,8 @@ provideContainerContext({ ...provided, container: provided });
 onMounted(() => {
     Statamic.$events.$emit('publish-container-created', {
         name: props.name,
-        reference: props.reference,
-        site: props.site,
+        reference: toRef(() => props.reference),
+        site: toRef(() => props.site),
         values,
         setFieldValue,
         setValues,