Optimize bundle size 🚀 (#230)

willnguyen1312 · Oct 10, 2023 · 58e1912 · 58e1912
1 parent c071440
commit 58e1912
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 55 deletions.
diff --git a/.changeset/good-bulldogs-talk.md b/.changeset/good-bulldogs-talk.md
@@ -0,0 +1,5 @@
+---
+"@zoom-image/core": minor
+---
+
+Optimize bundle size 🚀
diff --git a/packages/core/src/createZoomImageClick.ts b/packages/core/src/createZoomImageClick.ts
@@ -19,14 +19,16 @@ export function createZoomImageClick(container: HTMLElement, options: ZoomImageC
     zoomImageSource: options.zoomImageSource ?? sourceImgElement.src,
   }
 
+  const { zoomFactor, zoomImageSource } = finalOptions
+
   let isOnMove = false
 
   const store = createStore<ZoomImageClickState>({
     zoomedImgStatus: "idle",
   })
 
-  const zoomedImgWidth = sourceImgElement.clientWidth * finalOptions.zoomFactor
-  const zoomedImgHeight = sourceImgElement.clientHeight * finalOptions.zoomFactor
+  const zoomedImgWidth = sourceImgElement.clientWidth * zoomFactor
+  const zoomedImgHeight = sourceImgElement.clientHeight * zoomFactor
   const zoomedImg = container.appendChild(document.createElement("img"))
   zoomedImg.style.maxWidth = "none"
   zoomedImg.style.width = `${zoomedImgWidth}px`
@@ -46,31 +48,27 @@ export function createZoomImageClick(container: HTMLElement, options: ZoomImageC
   const calculatePositionX = (newPositionX: number) => {
     const width = container.clientWidth
     if (newPositionX > 0) return 0
-    if (newPositionX + width * finalOptions.zoomFactor < width) return -width * (finalOptions.zoomFactor - 1)
+    if (newPositionX + width * zoomFactor < width) return -width * (zoomFactor - 1)
     return newPositionX
   }
 
   const calculatePositionY = (newPositionY: number) => {
     const height = container.clientHeight
     if (newPositionY > 0) return 0
-    if (newPositionY + height * finalOptions.zoomFactor < height) return -height * (finalOptions.zoomFactor - 1)
+    if (newPositionY + height * zoomFactor < height) return -height * (zoomFactor - 1)
     return newPositionY
   }
 
   function processZoom(event: PointerEvent) {
     zoomedImg.style.display = "block"
-    imageLoader.createZoomImage({
-      img: zoomedImg,
-      src: finalOptions.zoomImageSource,
-      store,
-    })
+    imageLoader.createZoomImage(zoomedImg, zoomImageSource, store)
 
     const containerRect = container.getBoundingClientRect()
     const zoomPointX = event.clientX - containerRect.left
     const zoomPointY = event.clientY - containerRect.top
 
-    const currentPositionX = calculatePositionX(-zoomPointX * finalOptions.zoomFactor + zoomPointX)
-    const currentPositionY = calculatePositionY(-zoomPointY * finalOptions.zoomFactor + zoomPointY)
+    const currentPositionX = calculatePositionX(-zoomPointX * zoomFactor + zoomPointX)
+    const currentPositionY = calculatePositionY(-zoomPointY * zoomFactor + zoomPointY)
 
     zoomedImg.style.transform = `translate(${currentPositionX}px, ${currentPositionY}px)`
   }

diff --git a/packages/core/src/createZoomImageHover.ts b/packages/core/src/createZoomImageHover.ts
@@ -145,11 +145,7 @@ export function createZoomImageHover(container: HTMLElement, options: ZoomImageH
   }
 
   async function handlePointerEnter() {
-    imageLoader.createZoomImage({
-      img: zoomedImg,
-      src: zoomImageSource,
-      store,
-    })
+    imageLoader.createZoomImage(zoomedImg, zoomImageSource, store)
 
     disableScroll()
     zoomedImg.style.display = "block"

diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts
@@ -52,11 +52,7 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo
     const zoomedImgHeight = sourceImgElement.clientHeight * zoomFactor
     zoomedImg.style.width = `${zoomedImgWidth}px`
     zoomedImg.style.height = `${zoomedImgHeight}px`
-    imageLoader.createZoomImage({
-      img: zoomedImg,
-      src: zoomImageSource,
-      store,
-    })
+    imageLoader.createZoomImage(zoomedImg, zoomImageSource, store)
 
     processZoom(event)
 

diff --git a/packages/core/src/imageLoader.ts b/packages/core/src/imageLoader.ts
@@ -7,19 +7,15 @@ import { ZoomedImgStatus } from "./types"
 const THRESHOLD = 50
 
 export const makeImageLoader = () => {
-  const createZoomImage = ({
-    src,
-    store,
-    img,
-  }: {
-    src: string
+  const createZoomImage = (
+    img: HTMLImageElement,
+    src: string,
     store: ReturnType<
       typeof createStore<{
         zoomedImgStatus: ZoomedImgStatus
       }>
-    >
-    img: HTMLImageElement
-  }) => {
+    >,
+  ) => {
     if (img.src === src) return
     img.src = src
     let complete = false

diff --git a/size.json b/size.json
@@ -1,53 +1,53 @@
 {
   "@zoom-image/core": {
     "createZoomImageWheel": "1.5 KB",
-    "createZoomImageHover": "1.18 KB",
-    "createZoomImageMove": "885 B",
-    "createZoomImageClick": "833 B",
+    "createZoomImageHover": "1.16 KB",
+    "createZoomImageMove": "870 B",
+    "createZoomImageClick": "819 B",
     "cropImage": "202 B",
     "makeCalculateZoom": "98 B",
     "makeCalculatePercentage": "96 B"
   },
   "@zoom-image/react": {
     "useZoomImageWheel": "1.79 KB",
-    "useZoomImageHover": "1.45 KB",
-    "useZoomImageMove": "1.12 KB",
-    "useZoomImageClick": "1.06 KB"
+    "useZoomImageHover": "1.43 KB",
+    "useZoomImageMove": "1.1 KB",
+    "useZoomImageClick": "1.04 KB"
   },
   "@zoom-image/preact": {
     "useZoomImageWheel": "2.7 KB",
-    "useZoomImageHover": "2.38 KB",
-    "useZoomImageMove": "2.08 KB",
-    "useZoomImageClick": "2.02 KB"
+    "useZoomImageHover": "2.37 KB",
+    "useZoomImageMove": "2.05 KB",
+    "useZoomImageClick": "1.99 KB"
   },
   "@zoom-image/qwik": {
     "useZoomImageWheel": "1.94 KB",
-    "useZoomImageHover": "1.58 KB",
-    "useZoomImageMove": "1.24 KB",
-    "useZoomImageClick": "1.18 KB"
+    "useZoomImageHover": "1.56 KB",
+    "useZoomImageMove": "1.22 KB",
+    "useZoomImageClick": "1.17 KB"
   },
   "@zoom-image/solid": {
     "useZoomImageWheel": "2.98 KB",
-    "useZoomImageHover": "2.66 KB",
-    "useZoomImageMove": "2.34 KB",
-    "useZoomImageClick": "2.28 KB"
+    "useZoomImageHover": "2.64 KB",
+    "useZoomImageMove": "2.32 KB",
+    "useZoomImageClick": "2.26 KB"
   },
   "@zoom-image/svelte": {
     "useZoomImageWheel": "1.98 KB",
-    "useZoomImageHover": "1.65 KB",
-    "useZoomImageMove": "1.33 KB",
-    "useZoomImageClick": "1.28 KB"
+    "useZoomImageHover": "1.63 KB",
+    "useZoomImageMove": "1.32 KB",
+    "useZoomImageClick": "1.26 KB"
   },
   "@zoom-image/vue": {
     "useZoomImageWheel": "1.76 KB",
-    "useZoomImageHover": "1.44 KB",
-    "useZoomImageMove": "1.1 KB",
-    "useZoomImageClick": "1.05 KB"
+    "useZoomImageHover": "1.42 KB",
+    "useZoomImageMove": "1.08 KB",
+    "useZoomImageClick": "1.04 KB"
   },
   "@zoom-image/angular": {
-    "ZoomImageClickService": "3.25 KB",
-    "ZoomImageHoverService": "3.24 KB",
-    "ZoomImageWheelService": "3.24 KB",
-    "ZoomImageMoveService": "3.24 KB"
+    "ZoomImageClickService": "3.23 KB",
+    "ZoomImageHoverService": "3.23 KB",
+    "ZoomImageMoveService": "3.23 KB",
+    "ZoomImageWheelService": "3.23 KB"
   }
 }