fix: force update with vite.config's option

popup/src/App.vue

@@ -21,35 +21,53 @@
         :is-draggable="state.isDraggable"
         :image-url="state.layoutPreview.imageUrl"
         :opacity="state.layoutPreview.opacity"
+        :user-style="state.layoutPreview.style"
       />
     </Teleport>
   </main>
 </template>
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
+import { onMounted } from 'vue'
 
 import IconEye from '@/components/icons/IconEye.vue'
 import IconDraggable from '@/components/icons/IconDraggable.vue'
 import IconImageUpload from '@/components/icons/IconImageUpload.vue'
 import IconOpacity from '@/components/icons/IconOpacity.vue'
-
 import LayoutPreview from '@/components/LayoutPreview.vue'
 
+import { deepEqual } from '@/utils'
+
+const getDefaultLayoutPreview = () => {
+  return {
+    style: window._unpluginOverlayLayout.layoutPreview?.style || '',
+    imageUrl: window._unpluginOverlayLayout.layoutPreview?.imageUrl || '',
+    opacity: window._unpluginOverlayLayout.layoutPreview?.opacity || 50
+  }
+}
+
 const state = useStorage(
   'unplugin-overlay-layout',
   {
+    cache: window._unpluginOverlayLayout,
     isOpen: true,
     isDraggable: false,
-    layoutPreview: {
-      style: '',
-      imageUrl: window._unpluginOverlayLayout.layoutPreview?.imageUrl || '',
-      opacity: window._unpluginOverlayLayout.layoutPreview?.opacity || 50
-    }
+    layoutPreview: getDefaultLayoutPreview()
   },
-  sessionStorage
+  sessionStorage,
+  { mergeDefaults: true }
 )
 
+onMounted(() => {
+  const isEqual = deepEqual(state.value.cache, window._unpluginOverlayLayout)
+  if (isEqual) return
+
+  // force update
+  state.value.cache = window._unpluginOverlayLayout
+  state.value.layoutPreview = getDefaultLayoutPreview()
+})
+
 const handleClickOperation = (offset: number) => {
   if (offset > 0) {
     state.value.layoutPreview.opacity = Math.min(100, state.value.layoutPreview.opacity + offset)
@@ -58,3 +76,4 @@ const handleClickOperation = (offset: number) => {
   }
 }
 </script>
+./utils

popup/src/components/LayoutPreview.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   isDraggable: boolean
   imageUrl: string
   opacity: number
+  userStyle: StyleValue
 }>()
 
 const defaultStyle = computed<StyleValue>(() => {
@@ -20,8 +21,6 @@ const defaultStyle = computed<StyleValue>(() => {
   }
 })
 
-const userStyle = window._unpluginOverlayLayout?.layoutPreview?.style || {}
-
 const el = ref<HTMLElement | null>(null)
 const { style: dragStyle } = useDraggable(el)
 
@@ -45,6 +44,6 @@ const controlStyle = computed<StyleValue[]>(() => {
 })
 
 const mergedStyle = computed<StyleValue>(() => {
-  return [defaultStyle.value, userStyle, ...controlStyle.value]
+  return [defaultStyle.value, props.userStyle, ...controlStyle.value]
 })
 </script>

popup/src/utils.ts

@@ -0,0 +1,35 @@
+export function deepEqual(obj1: any, obj2: any, excludeProps: string[] = []): boolean {
+  // Check if both objects are of the same type
+  if (typeof obj1 !== typeof obj2) {
+    return false
+  }
+
+  // Check if both objects are primitive types or null
+  if (obj1 == null || obj2 == null || typeof obj1 !== 'object') {
+    return obj1 === obj2
+  }
+
+  // Get the keys of the objects
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  // Check if the number of keys is the same
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // Iterate through the keys and recursively compare the values
+  for (const key of keys1) {
+    // Check if the current key should be excluded
+    if (excludeProps.includes(key)) {
+      continue
+    }
+
+    if (!deepEqual(obj1[key], obj2[key], excludeProps)) {
+      return false
+    }
+  }
+
+  // If all comparisons passed, the objects are deep equal
+  return true
+}