Finalize frameworks integration 💞 (#136)

* Let's 🚀 Qwik first 💞

* chore: upgrade all existing packages

* docs: finish up svelte adapter

* docs: fix up demo page

* docs: add changeset for @zoom-image/svelte 💞

* feat: add Vue integration 💞

* docs: modernization 💞

.changeset/healthy-lemons-listen.md

@@ -0,0 +1,5 @@
+---
+"@zoom-image/svelte": minor
+---
+
+Initial release of @zoom-image/svelte 💞

.changeset/silver-ducks-change.md

@@ -0,0 +1,5 @@
+---
+"@zoom-image/vue": minor
+---
+
+Initial release of @zoom-image/vue 💞

examples/preact-ts/src/app.tsx

@@ -58,6 +58,7 @@ function App() {
   }
 
   useEffect(() => {
+    setCroppedImage("")
     if (zoomType === "wheel") {
       const imageContainer = imageWheelContainerRef.current as HTMLDivElement
       createZoomImageWheel(imageContainer)
@@ -130,7 +131,7 @@ function App() {
             <div ref={imageWheelContainerRef} class="h-[300px] w-[300px] cursor-crosshair">
               <img class="h-full w-full" alt="Large Pic" src="/large.webp" />
             </div>
-            {croppedImage && <img src={croppedImage} class="h-[300px] w-[300px]" alt="Cropped image placeholder" />}
+            {croppedImage && <img src={croppedImage} class="h-[300px] w-[300px]" alt="Cropped placeholder" />}
           </div>
 
           <div class="flex space-x-2">

examples/qwik-ts/src/routes/index.tsx

@@ -38,6 +38,7 @@ export default component$(() => {
 
   useVisibleTask$(({ track }) => {
     track(() => zoomType.value)
+    croppedImage.value = ""
 
     if (zoomType.value === "wheel" && imageWheelContainerRef.value) {
       const imageContainer = imageWheelContainerRef.value
@@ -109,7 +110,7 @@ export default component$(() => {
               <img class="h-full w-full" alt="Large Pic" src="/large.webp" />
             </div>
             {croppedImage.value && (
-              <img src={croppedImage.value} class="h-[300px] w-[300px]" alt="Cropped image placeholder" />
+              <img src={croppedImage.value} class="h-[300px] w-[300px]" alt="Cropped placeholder" />
             )}
           </div>
 

examples/react-ts/src/App.tsx

@@ -58,6 +58,7 @@ function App() {
   }
 
   useEffect(() => {
+    setCroppedImage("")
     if (zoomType === "wheel") {
       const imageContainer = imageWheelContainerRef.current as HTMLDivElement
       createZoomImageWheel(imageContainer)
@@ -130,7 +131,7 @@ function App() {
             <div ref={imageWheelContainerRef} className="h-[300px] w-[300px] cursor-crosshair">
               <img className="h-full w-full" alt="Large Pic" src="/large.webp" />
             </div>
-            {croppedImage && <img src={croppedImage} className="h-[300px] w-[300px]" alt="Cropped image placeholder" />}
+            {croppedImage && <img src={croppedImage} className="h-[300px] w-[300px]" alt="Cropped placeholder" />}
           </div>
 
           <div className="flex space-x-2">

examples/solid-ts/src/App.tsx

@@ -59,6 +59,7 @@ const App: Component = () => {
   }
 
   createEffect(() => {
+    setCroppedImage("")
     if (zoomType() === "hover") {
       createZoomImageHover(imageHoverContainer, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
@@ -125,7 +126,7 @@ const App: Component = () => {
             <div ref={imageWheelContainer} class="h-[300px] w-[300px] cursor-crosshair">
               <img class="h-full w-full" alt="Large Pic" src="/large.webp" />
             </div>
-            {croppedImage() && <img src={croppedImage()} class="h-[300px] w-[300px]" alt="Cropped image placeholder" />}
+            {croppedImage() && <img src={croppedImage()} class="h-[300px] w-[300px]" alt="Cropped placeholder" />}
           </div>
 
           <div class="flex space-x-2">

examples/svelte-ts/package.json

@@ -6,11 +6,13 @@
     "dev": "vite"
   },
   "dependencies": {
-    "@zoom-image/core": "latest"
+    "@zoom-image/core": "latest",
+    "@zoom-image/svelte": "latest"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.3.0",
     "@tsconfig/svelte": "^4.0.1",
+    "@unocss/reset": "^0.52.1",
     "svelte": "^3.59.1",
     "svelte-check": "^3.3.2",
     "tslib": "^2.5.2",

examples/svelte-ts/src/App.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
-  import { onDestroy, tick } from "svelte"
-  import {
-    createZoomImageHover,
-    createZoomImageWheel,
-    createZoomImageMove,
-    createZoomImageClick,
-  } from "@zoom-image/core"
+  import { tick } from "svelte"
+  import { useZoomImageClick, useZoomImageHover, useZoomImageMove, useZoomImageWheel } from "@zoom-image/svelte"
+  import { cropImage } from "@zoom-image/core"
 
   const tabs: {
     name: string
@@ -19,54 +15,56 @@
     { name: "Click", href: "#", current: false, value: "click" },
   ]
   $: zoomType = tabs.find((tab) => tab.current)?.value as "wheel" | "hover" | "move" | "click"
+  let croppedImage: string = ""
 
   let imageWheelContainer: HTMLDivElement
   let imageMoveContainer: HTMLDivElement
   let imageHoverContainer: HTMLDivElement
   let imageClickContainer: HTMLDivElement
   let zoomTarget: HTMLDivElement
-  let cleanup: () => void = () => {}
+  const {
+    createZoomImage: createZoomImageWheel,
+    zoomImageState: zoomImageWheelState,
+    setZoomImageState: setZoomImageWheelState,
+  } = useZoomImageWheel()
+  const { createZoomImage: createZoomImageHover } = useZoomImageHover()
+  const { createZoomImage: createZoomImageMove } = useZoomImageMove()
+  const { createZoomImage: createZoomImageClick } = useZoomImageClick()
 
   async function processZoom(zoomType: "wheel" | "hover" | "move" | "click") {
-    cleanup()
+    croppedImage = ""
     await tick()
 
     if (zoomType === "hover") {
-      const result = createZoomImageHover(imageHoverContainer, {
+      createZoomImageHover(imageHoverContainer, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
         customZoom: { width: 300, height: 500 },
         zoomTarget,
         scaleFactor: 0.5,
       })
-      cleanup = result.cleanup
     }
 
     if (zoomType === "wheel") {
-      const result = createZoomImageWheel(imageWheelContainer)
-      cleanup = result.cleanup
+      createZoomImageWheel(imageWheelContainer)
     }
 
     if (zoomType === "move") {
-      cleanup = createZoomImageMove(imageMoveContainer, {
+      createZoomImageMove(imageMoveContainer, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
-      }).cleanup
+      })
     }
 
     if (zoomType === "click") {
-      cleanup = createZoomImageClick(imageClickContainer, {
+      createZoomImageClick(imageClickContainer, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
-      }).cleanup
+      })
     }
   }
 
   $: processZoom(zoomType)
-
-  onDestroy(() => {
-    cleanup()
-  })
 </script>
 
-<div class="font-sans">
+<div class="p-4 font-sans">
   <nav class="flex space-x-4 pb-4" aria-label="Tabs">
     {#each tabs as tab (tab.name)}
       <a
@@ -86,9 +84,53 @@
   </nav>
 
   {#if zoomType === "wheel"}
-    <p>Scroll inside the image to see zoom in-out effect</p>
-    <div bind:this={imageWheelContainer} class="h-[300px] w-[300px] cursor-crosshair">
-      <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/large.webp" />
+    <div class="space-y-4">
+      <p>Current zoom: {`${Math.round($zoomImageWheelState.currentZoom * 100)}%`}</p>
+      <p>Scroll inside the image to see zoom in-out effect</p>
+      <div class="mt-1 flex space-x-2">
+        <div bind:this={imageWheelContainer} class="h-[300px] w-[300px] cursor-crosshair">
+          <img class="h-full w-full" alt="Large Pic" src="/large.webp" />
+        </div>
+
+        {#if croppedImage !== ""}
+          <img src={croppedImage} class="h-[300px] w-[300px]" alt="Cropped placeholder" />
+        {/if}
+      </div>
+      <div class="flex space-x-2">
+        <button
+          on:click={() => {
+            setZoomImageWheelState({
+              currentZoom: $zoomImageWheelState.currentZoom + 0.5,
+            })
+          }}
+          class="text-dark-500 rounded bg-gray-100 p-2 text-sm font-medium"
+        >
+          Zoom in
+        </button>
+        <button
+          on:click={() => {
+            setZoomImageWheelState({
+              currentZoom: $zoomImageWheelState.currentZoom - 0.5,
+            })
+          }}
+          class="text-dark-500 rounded bg-gray-100 p-2 text-sm font-medium"
+        >
+          Zoom out
+        </button>
+        <button
+          class="text-dark-500 rounded bg-gray-100 p-2 text-sm font-medium"
+          on:click={() => {
+            croppedImage = cropImage({
+              currentZoom: $zoomImageWheelState.currentZoom,
+              image: imageWheelContainer.querySelector("img"),
+              positionX: $zoomImageWheelState.currentPositionX,
+              positionY: $zoomImageWheelState.currentPositionY,
+            })
+          }}
+        >
+          Crop image
+        </button>
+      </div>
     </div>
   {/if}
 

examples/svelte-ts/src/main.ts

@@ -1,4 +1,5 @@
 import "virtual:uno.css"
+import "@unocss/reset/tailwind.css"
 import App from "./App.svelte"
 
 const app = new App({

examples/vue-ts/package.json

@@ -6,10 +6,12 @@
   },
   "dependencies": {
     "@zoom-image/core": "latest",
+    "@zoom-image/vue": "latest",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^20.2.3",
+    "@unocss/reset": "^0.52.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/tsconfig": "^0.4.0",
     "npm-run-all": "^4.1.5",