refactor: minor code movement

Author: NamesMT

lib/ModernCropper.vue

@@ -102,7 +102,7 @@ onMounted(async () => {
   hooksList = []
 })
 
-// process top-level props
+// process top-level props (i.e: src, crossorigin)
 onCropperMounted(({ image }) => {
   image.$image.crossOrigin = crossorigin
 
@@ -120,35 +120,13 @@ onCropperMounted(({ image }) => {
   }, { immediate: true })
 })
 
-function setElementAttributes(element: HTMLElement, attributes: Record<any, any>) {
-  let doReset = false
-
-  Object.entries(attributes).forEach(([attribute, value]) => {
-    if (value === undefined)
-      return
-
-    if (attribute.includes('initial') && resetOnInitialAttributes)
-      doReset = true
-
-    if (value === false || value === null)
-      return element.removeAttribute(attribute)
-
-    element.setAttribute(attribute.replaceAll(/([a-z])([A-Z])/g, (_match, p1: string, p2: string) => `${p1}-${p2.toLowerCase()}`), value)
-  })
-
-  if (doReset) {
-    console.warn(`[ModernCropper]: "initial"-type attribute detected, will call $reset(), but the selection may disappear due to https://github.com/fengyuanchen/cropperjs/issues/1157`)
-    // @ts-expect-error $reset don't exist on HTMLElement
-    element.$reset()
-  }
-}
 // process passThrough options
 onCropperMounted(({ image, canvas, selection, selections }) => {
   watch(
     () => passThrough?.image,
     (newImagePassThrough) => {
       if (newImagePassThrough?.attributes)
-        setElementAttributes(image, newImagePassThrough.attributes)
+        _setElementAttributes(image, newImagePassThrough.attributes)
     },
     { deep: true, immediate: true },
   )
@@ -157,7 +135,7 @@ onCropperMounted(({ image, canvas, selection, selections }) => {
     () => passThrough?.canvas,
     (newCanvasPassThrough) => {
       if (newCanvasPassThrough?.attributes)
-        setElementAttributes(canvas, newCanvasPassThrough.attributes)
+        _setElementAttributes(canvas, newCanvasPassThrough.attributes)
     },
     { deep: true, immediate: true },
   )
@@ -166,7 +144,7 @@ onCropperMounted(({ image, canvas, selection, selections }) => {
     () => passThrough?.selection,
     (newSelectionPassThrough) => {
       if (newSelectionPassThrough?.attributes)
-        setElementAttributes(selection, newSelectionPassThrough.attributes)
+        _setElementAttributes(selection, newSelectionPassThrough.attributes)
     },
     { deep: true, immediate: true },
   )
@@ -175,7 +153,7 @@ onCropperMounted(({ image, canvas, selection, selections }) => {
     () => passThrough?.selections,
     (newSelectionsPassThrough) => {
       if (newSelectionsPassThrough?.attributes)
-        selections.forEach(selection => setElementAttributes(selection, newSelectionsPassThrough.attributes!))
+        selections.forEach(selection => _setElementAttributes(selection, newSelectionsPassThrough.attributes!))
     },
     { deep: true, immediate: true },
   )
@@ -193,6 +171,29 @@ defineExpose(reactive({
   cropperMounted,
   onCropperMounted,
 }) as DiscriminatedExpose)
+
+function _setElementAttributes(element: HTMLElement, attributes: Record<any, any>) {
+  let doReset = false
+
+  Object.entries(attributes).forEach(([attribute, value]) => {
+    if (value === undefined)
+      return
+
+    if (attribute.includes('initial') && resetOnInitialAttributes)
+      doReset = true
+
+    if (value === false || value === null)
+      return element.removeAttribute(attribute)
+
+    element.setAttribute(attribute.replaceAll(/([a-z])([A-Z])/g, (_match, p1: string, p2: string) => `${p1}-${p2.toLowerCase()}`), value)
+  })
+
+  if (doReset) {
+    console.warn(`[ModernCropper]: "initial"-type attribute detected, will call $reset(), but the selection may disappear due to https://github.com/fengyuanchen/cropperjs/issues/1157`)
+    // @ts-expect-error $reset don't exist on HTMLElement
+    element.$reset()
+  }
+}
 </script>
 
 <template>