From 45665b52a475ddc26573ca00108ce834d44cbbd9 Mon Sep 17 00:00:00 2001 From: WenRenHai <70972819+People-Sea@users.noreply.github.com> Date: Fri, 3 Oct 2025 16:39:16 +0800 Subject: [PATCH] fix: perform comparison before invoking `afterStateUpdatedJs` (#18001) * fix: perform comparison before invoking `afterStateUpdatedJs` * Update index.js --------- Co-authored-by: Dan Harrin --- .../views/components/repeater/table.blade.php | 2 +- packages/schemas/dist/index.js | 2 +- packages/schemas/resources/js/index.js | 12 ++++++++++++ .../resources/views/components/flex.blade.php | 2 +- packages/schemas/src/Components/Component.php | 2 +- 5 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/forms/resources/views/components/repeater/table.blade.php b/packages/forms/resources/views/components/repeater/table.blade.php index 880f88a319..680866a48c 100644 --- a/packages/forms/resources/views/components/repeater/table.blade.php +++ b/packages/forms/resources/views/components/repeater/table.blade.php @@ -171,7 +171,7 @@ })" @if ($afterStateUpdatedJs = $schemaComponent->getAfterStateUpdatedJs()) x-init="{{ implode(';', array_map( - fn (string $js): string => '$wire.watch(' . Js::from($schemaComponentStatePath) . ', ($state, $old) => ($state !== undefined) && eval(' . Js::from($js) . '))', + fn (string $js): string => '$wire.watch(' . Js::from($schemaComponentStatePath) . ', ($state, $old) => isStateChanged($state, $old) && eval(' . Js::from($js) . '))', $afterStateUpdatedJs, )) }}" @endif diff --git a/packages/schemas/dist/index.js b/packages/schemas/dist/index.js index 9f9e29b2b5..6b45ebbd4e 100644 --- a/packages/schemas/dist/index.js +++ b/packages/schemas/dist/index.js @@ -1 +1 @@ -(()=>{var d=()=>({isSticky:!1,enableSticky(){this.isSticky=this.$el.getBoundingClientRect().top>0},disableSticky(){this.isSticky=!1}});var m=function(n,e,i){let t=n;if(e.startsWith("/")&&(i=!0,e=e.slice(1)),i)return e;for(;e.startsWith("../");)t=t.includes(".")?t.slice(0,t.lastIndexOf(".")):null,e=e.slice(3);return["",null,void 0].includes(t)?e:["",null,void 0].includes(e)?t:`${t}.${e}`},u=n=>{let e=Alpine.findClosest(n,i=>i.__livewire);if(!e)throw"Could not find Livewire component in DOM tree.";return e.__livewire};document.addEventListener("alpine:init",()=>{window.Alpine.data("filamentSchema",({livewireId:n})=>({handleFormValidationError(e){e.detail.livewireId===n&&this.$nextTick(()=>{let i=this.$el.querySelector("[data-validation-error]");if(!i)return;let t=i;for(;t;)t.dispatchEvent(new CustomEvent("expand")),t=t.parentNode;setTimeout(()=>i.closest("[data-field-wrapper]").scrollIntoView({behavior:"smooth",block:"start",inline:"start"}),200)})}})),window.Alpine.data("filamentSchemaComponent",({path:n,containerPath:e,isLive:i,$wire:t})=>({$statePath:n,$get:(r,l)=>t.$get(m(e,r,l)),$set:(r,l,a,o=null)=>(o??(o=i),t.$set(m(e,r,a),l,o)),get $state(){return t.$get(n)}})),window.Alpine.data("filamentActionsSchemaComponent",d),Livewire.hook("commit",({component:n,commit:e,respond:i,succeed:t,fail:r})=>{t(({snapshot:l,effects:a})=>{a.dispatches?.forEach(o=>{if(!o.params?.awaitSchemaComponent)return;let s=Array.from(n.el.querySelectorAll(`[wire\\:partial="schema-component::${o.params.awaitSchemaComponent}"]`)).filter(c=>u(c)===n);if(s.length!==1){if(s.length>1)throw`Multiple schema components found with key [${o.params.awaitSchemaComponent}].`;window.addEventListener(`schema-component-${n.id}-${o.params.awaitSchemaComponent}-loaded`,()=>{window.dispatchEvent(new CustomEvent(o.name,{detail:o.params}))},{once:!0})}})})})});})(); +(()=>{var d=()=>({isSticky:!1,enableSticky(){this.isSticky=this.$el.getBoundingClientRect().top>0},disableSticky(){this.isSticky=!1}});var m=function(i,e,n){let t=i;if(e.startsWith("/")&&(n=!0,e=e.slice(1)),n)return e;for(;e.startsWith("../");)t=t.includes(".")?t.slice(0,t.lastIndexOf(".")):null,e=e.slice(3);return["",null,void 0].includes(t)?e:["",null,void 0].includes(e)?t:`${t}.${e}`},u=i=>{let e=Alpine.findClosest(i,n=>n.__livewire);if(!e)throw"Could not find Livewire component in DOM tree.";return e.__livewire};document.addEventListener("alpine:init",()=>{window.Alpine.data("filamentSchema",({livewireId:i})=>({handleFormValidationError(e){e.detail.livewireId===i&&this.$nextTick(()=>{let n=this.$el.querySelector("[data-validation-error]");if(!n)return;let t=n;for(;t;)t.dispatchEvent(new CustomEvent("expand")),t=t.parentNode;setTimeout(()=>n.closest("[data-field-wrapper]").scrollIntoView({behavior:"smooth",block:"start",inline:"start"}),200)})},isStateChanged(e,n){if(e===void 0)return!1;try{return JSON.stringify(e)!==JSON.stringify(n)}catch{return e!==n}}})),window.Alpine.data("filamentSchemaComponent",({path:i,containerPath:e,isLive:n,$wire:t})=>({$statePath:i,$get:(o,l)=>t.$get(m(e,o,l)),$set:(o,l,a,r=null)=>(r??(r=n),t.$set(m(e,o,a),l,r)),get $state(){return t.$get(i)}})),window.Alpine.data("filamentActionsSchemaComponent",d),Livewire.hook("commit",({component:i,commit:e,respond:n,succeed:t,fail:o})=>{t(({snapshot:l,effects:a})=>{a.dispatches?.forEach(r=>{if(!r.params?.awaitSchemaComponent)return;let s=Array.from(i.el.querySelectorAll(`[wire\\:partial="schema-component::${r.params.awaitSchemaComponent}"]`)).filter(c=>u(c)===i);if(s.length!==1){if(s.length>1)throw`Multiple schema components found with key [${r.params.awaitSchemaComponent}].`;window.addEventListener(`schema-component-${i.id}-${r.params.awaitSchemaComponent}-loaded`,()=>{window.dispatchEvent(new CustomEvent(r.name,{detail:r.params}))},{once:!0})}})})})});})(); diff --git a/packages/schemas/resources/js/index.js b/packages/schemas/resources/js/index.js index dda25b3ded..5c351a35c4 100644 --- a/packages/schemas/resources/js/index.js +++ b/packages/schemas/resources/js/index.js @@ -74,6 +74,18 @@ document.addEventListener('alpine:init', () => { ) }) }, + + isStateChanged(state, old) { + if (state === undefined) { + return false + } + + try { + return JSON.stringify(state) !== JSON.stringify(old) + } catch { + return state !== old + } + }, })) window.Alpine.data( diff --git a/packages/schemas/resources/views/components/flex.blade.php b/packages/schemas/resources/views/components/flex.blade.php index 91f6c15051..5a7d36619e 100644 --- a/packages/schemas/resources/views/components/flex.blade.php +++ b/packages/schemas/resources/views/components/flex.blade.php @@ -48,7 +48,7 @@ })" @if ($afterStateUpdatedJs = $schemaComponent->getAfterStateUpdatedJs()) x-init="{!! implode(';', array_map( - fn (string $js): string => '$wire.watch(' . Js::from($componentStatePath) . ', ($state, $old) => ($state !== undefined) && eval(' . Js::from($js) . '))', + fn (string $js): string => '$wire.watch(' . Js::from($componentStatePath) . ', ($state, $old) => isStateChanged($state, $old) && eval(' . Js::from($js) . '))', $afterStateUpdatedJs, )) !!}" @endif diff --git a/packages/schemas/src/Components/Component.php b/packages/schemas/src/Components/Component.php index d357ce3328..3b42f946e3 100644 --- a/packages/schemas/src/Components/Component.php +++ b/packages/schemas/src/Components/Component.php @@ -195,7 +195,7 @@ class Component extends ViewComponent })" getAfterStateUpdatedJs()) { ?> x-init=" '$wire.watch(' . Js::from($statePath) . ', ($state, $old) => ($state !== undefined) && eval(' . Js::from($js) . '))', + fn (string $js): string => '$wire.watch(' . Js::from($statePath) . ', ($state, $old) => isStateChanged($state, $old) && eval(' . Js::from($js) . '))', $afterStateUpdatedJs, )) ?>"