chore: cleanup 🧹

willnguyen1312 · May 16, 2023 · 57ba546 · 57ba546
1 parent 2c6e2e3
commit 57ba546
Show file tree

Hide file tree

Showing 21 changed files with 78 additions and 262 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,22 +1,11 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "willnguyen1312/zoom-image" }
-  ],
+  "changelog": ["@changesets/changelog-github", { "repo": "willnguyen1312/zoom-image" }],
   "commit": false,
   "fixed": [],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [
-    "vanilla-ts",
-    "vue-ts",
-    "react-ts",
-    "solid-ts",
-    "svelte-ts",
-    "preact-ts",
-    "qwik-ts"
-  ]
+  "ignore": ["vanilla-ts", "vue-ts", "react-ts", "solid-ts", "svelte-ts", "preact-ts", "qwik-ts"]
 }
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -24,19 +24,14 @@ jobs:
           cache: pnpm
 
       - name: Setup npmrc
-        run:
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
-          .npmrc
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
 
       - name: install dependencies
         run: pnpm install
 
-      - name: Build
-        run: pnpm build
-
       - name: Publish packages
         id: changesets
-        uses: changesets/action@main
+        uses: changesets/action@v1
         with:
           publish: pnpm release
           commit: "chore: update versions"

diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,7 @@
 {
   "bracketSpacing": true,
   "jsxSingleQuote": false,
-  "printWidth": 80,
+  "printWidth": 100,
   "proseWrap": "always",
   "semi": false,
   "singleQuote": false,

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -5,8 +5,7 @@ const pkg = require("../../packages/core/package.json")
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Zoom Image",
-  description:
-    "A little yet powerful framework agnostic library to zoom image on the web",
+  description: "A little yet powerful framework agnostic library to zoom image on the web",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
@@ -77,9 +76,7 @@ export default defineConfig({
       },
     ],
 
-    socialLinks: [
-      { icon: "github", link: "https://github.com/willnguyen1312/zoom-image" },
-    ],
+    socialLinks: [{ icon: "github", link: "https://github.com/willnguyen1312/zoom-image" }],
 
     search: {
       provider: "algolia",

diff --git a/examples/preact-ts/src/app.tsx b/examples/preact-ts/src/app.tsx
@@ -90,9 +90,7 @@ function App() {
               href={tab.href}
               class={
                 "decoration-none rounded-md px-3 py-2 text-sm font-medium " +
-                (tab.current
-                  ? "bg-gray-100 text-gray-700"
-                  : "text-gray-500 hover:text-gray-700")
+                (tab.current ? "bg-gray-100 text-gray-700" : "text-gray-500 hover:text-gray-700")
               }
               aria-current={tab.current ? "page" : undefined}
             >
@@ -105,10 +103,7 @@ function App() {
       {zoomType === "wheel" && (
         <>
           <p>Scroll inside the image to see zoom in-out effect</p>
-          <div
-            ref={imageWheelContainerRef}
-            class="h-[300px] w-[300px] cursor-crosshair"
-          >
+          <div ref={imageWheelContainerRef} class="h-[300px] w-[300px] cursor-crosshair">
             <img
               class="h-full w-full"
               alt="Large Pic"
@@ -119,10 +114,7 @@ function App() {
       )}
 
       {zoomType === "hover" && (
-        <div
-          ref={imageHoverContainerRef}
-          class="relative flex h-[250px] w-[250px] items-start"
-        >
+        <div ref={imageHoverContainerRef} class="relative flex h-[250px] w-[250px] items-start">
           <img
             class="h-full w-full"
             alt="Small Pic"

diff --git a/examples/qwik-ts/src/entry.ssr.tsx b/examples/qwik-ts/src/entry.ssr.tsx
@@ -1,8 +1,5 @@
 /* eslint-disable import/no-unresolved */
-import {
-  renderToStream,
-  type RenderToStreamOptions,
-} from "@builder.io/qwik/server"
+import { renderToStream, type RenderToStreamOptions } from "@builder.io/qwik/server"
 import { manifest } from "@qwik-client-manifest"
 import Root from "./root"
 

diff --git a/examples/qwik-ts/src/root.tsx b/examples/qwik-ts/src/root.tsx
@@ -1,11 +1,7 @@
 // eslint-disable-next-line import/no-unresolved
 import "uno.css"
 import { component$ } from "@builder.io/qwik"
-import {
-  QwikCityProvider,
-  RouterOutlet,
-  ServiceWorkerRegister,
-} from "@builder.io/qwik-city"
+import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from "@builder.io/qwik-city"
 
 export default component$(() => {
   return (

diff --git a/examples/qwik-ts/src/routes/index.tsx b/examples/qwik-ts/src/routes/index.tsx
@@ -1,9 +1,4 @@
-import {
-  component$,
-  useSignal,
-  useComputed$,
-  useVisibleTask$,
-} from "@builder.io/qwik"
+import { component$, useSignal, useComputed$, useVisibleTask$ } from "@builder.io/qwik"
 import {
   createZoomImageClick,
   createZoomImageHover,
@@ -92,9 +87,7 @@ export default component$(() => {
               }}
               class={
                 "decoration-none cursor-pointer rounded-md px-3 py-2 text-sm font-medium " +
-                (tab.current
-                  ? "bg-gray-100 text-gray-700"
-                  : "text-gray-500 hover:text-gray-700")
+                (tab.current ? "bg-gray-100 text-gray-700" : "text-gray-500 hover:text-gray-700")
               }
               aria-current={tab.current ? "page" : undefined}
             >
@@ -107,10 +100,7 @@ export default component$(() => {
       {zoomType.value === "wheel" && (
         <>
           <p>Scroll inside the image to see zoom in-out effect</p>
-          <div
-            ref={imageWheelContainerRef}
-            class="h-[300px] w-[300px] cursor-crosshair"
-          >
+          <div ref={imageWheelContainerRef} class="h-[300px] w-[300px] cursor-crosshair">
             <img
               class="h-full w-full"
               alt="Large Pic"
@@ -121,10 +111,7 @@ export default component$(() => {
       )}
 
       {zoomType.value === "hover" && (
-        <div
-          ref={imageHoverContainerRef}
-          class="relative flex h-[250px] w-[250px] items-start"
-        >
+        <div ref={imageHoverContainerRef} class="relative flex h-[250px] w-[250px] items-start">
           <img
             class="h-full w-full"
             alt="Small Pic"

diff --git a/examples/react-ts/src/App.tsx b/examples/react-ts/src/App.tsx
@@ -93,9 +93,7 @@ function App() {
               href={tab.href}
               className={
                 "decoration-none rounded-md px-3 py-2 text-sm font-medium " +
-                (tab.current
-                  ? "bg-gray-100 text-gray-700"
-                  : "text-gray-500 hover:text-gray-700")
+                (tab.current ? "bg-gray-100 text-gray-700" : "text-gray-500 hover:text-gray-700")
               }
               aria-current={tab.current ? "page" : undefined}
             >
@@ -108,10 +106,7 @@ function App() {
       {zoomType === "wheel" && (
         <>
           <p>Scroll inside the image to see zoom in-out effect</p>
-          <div
-            ref={imageWheelContainerRef}
-            className="h-[300px] w-[300px] cursor-crosshair"
-          >
+          <div ref={imageWheelContainerRef} className="h-[300px] w-[300px] cursor-crosshair">
             <img
               className="h-full w-full"
               alt="Large Pic"
@@ -122,10 +117,7 @@ function App() {
       )}
 
       {zoomType === "hover" && (
-        <div
-          ref={imageHoverContainerRef}
-          className="relative flex h-[250px] w-[250px] items-start"
-        >
+        <div ref={imageHoverContainerRef} className="relative flex h-[250px] w-[250px] items-start">
           <img
             className="h-full w-full"
             alt="Small Pic"

diff --git a/examples/solid-ts/src/App.tsx b/examples/solid-ts/src/App.tsx
@@ -88,9 +88,7 @@ const App: Component = () => {
               href={tab.href}
               class={
                 "decoration-none rounded-md px-3 py-2 text-sm font-medium " +
-                (tab.current
-                  ? "bg-gray-100 text-gray-700"
-                  : "text-gray-500 hover:text-gray-700")
+                (tab.current ? "bg-gray-100 text-gray-700" : "text-gray-500 hover:text-gray-700")
               }
               aria-current={tab.current ? "page" : undefined}
             >
@@ -103,10 +101,7 @@ const App: Component = () => {
       {zoomType() === "wheel" && (
         <>
           <p>Scroll inside the image to see zoom in-out effect</p>
-          <div
-            ref={imageWheelContainer}
-            class="h-[300px] w-[300px] cursor-crosshair"
-          >
+          <div ref={imageWheelContainer} class="h-[300px] w-[300px] cursor-crosshair">
             <img
               class="h-full w-full"
               alt="Large Pic"
@@ -119,10 +114,7 @@ const App: Component = () => {
       )}
 
       {zoomType() === "hover" && (
-        <div
-          ref={imageHoverContainer}
-          class="relative flex h-[250px] w-[250px] items-start"
-        >
+        <div ref={imageHoverContainer} class="relative flex h-[250px] w-[250px] items-start">
           <img
             class="h-full w-full"
             alt="Small Pic"

diff --git a/examples/vanilla-ts/src/main.ts b/examples/vanilla-ts/src/main.ts
@@ -28,24 +28,14 @@ function createSimpleState<T>(initialState: T) {
   }
 }
 
-const zoomWheelLink = document.getElementById(
-  "zoom-image-wheel",
-) as HTMLAnchorElement
-const zoomHoverLink = document.getElementById(
-  "zoom-image-hover",
-) as HTMLAnchorElement
-const zoomMouseLink = document.getElementById(
-  "zoom-image-move",
-) as HTMLAnchorElement
-const zoomClickLink = document.getElementById(
-  "zoom-image-click",
-) as HTMLAnchorElement
+const zoomWheelLink = document.getElementById("zoom-image-wheel") as HTMLAnchorElement
+const zoomHoverLink = document.getElementById("zoom-image-hover") as HTMLAnchorElement
+const zoomMouseLink = document.getElementById("zoom-image-move") as HTMLAnchorElement
+const zoomClickLink = document.getElementById("zoom-image-click") as HTMLAnchorElement
 
 type ZoomType = "wheel" | "hover" | "move" | "click"
 
-const makeImageTemplate = (
-  id: "image-wheel" | "image-hover" | "image-move" | "image-click",
-) => {
+const makeImageTemplate = (id: "image-wheel" | "image-hover" | "image-move" | "image-click") => {
   const template = document.getElementById(id) as HTMLTemplateElement
   return template.content.cloneNode(true)
 }
@@ -67,9 +57,7 @@ const makeUpdateUIFunc = () => {
     if (state === "wheel") {
       const imageWheel = makeImageTemplate("image-wheel")
       parent.replaceChildren(imageWheel)
-      const container = document.getElementById(
-        "image-wheel-container",
-      ) as HTMLDivElement
+      const container = document.getElementById("image-wheel-container") as HTMLDivElement
 
       cleanupZoom = createZoomImageWheel(container).cleanup
     }
@@ -78,12 +66,8 @@ const makeUpdateUIFunc = () => {
       const imageHover = makeImageTemplate("image-hover")
       parent.replaceChildren(imageHover)
 
-      const container = document.getElementById(
-        "image-hover-container",
-      ) as HTMLDivElement
-      const zoomTarget = document.getElementById(
-        "zoom-hover-target",
-      ) as HTMLDivElement
+      const container = document.getElementById("image-hover-container") as HTMLDivElement
+      const zoomTarget = document.getElementById("zoom-hover-target") as HTMLDivElement
 
       cleanupZoom = createZoomImageHover(container, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
@@ -97,9 +81,7 @@ const makeUpdateUIFunc = () => {
       const imageHover = makeImageTemplate("image-move")
       parent.replaceChildren(imageHover)
 
-      const container = document.getElementById(
-        "image-move-container",
-      ) as HTMLDivElement
+      const container = document.getElementById("image-move-container") as HTMLDivElement
 
       cleanupZoom = createZoomImageMove(container, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
@@ -110,9 +92,7 @@ const makeUpdateUIFunc = () => {
       const imageClick = makeImageTemplate("image-click")
       parent.replaceChildren(imageClick)
 
-      const container = document.getElementById(
-        "image-click-container",
-      ) as HTMLDivElement
+      const container = document.getElementById("image-click-container") as HTMLDivElement
 
       cleanupZoom = createZoomImageClick(container, {
         zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",

diff --git a/examples/vue-ts/.eslintrc.cjs b/examples/vue-ts/.eslintrc.cjs
@@ -3,11 +3,7 @@ require("@rushstack/eslint-patch/modern-module-resolution")
 
 module.exports = {
   root: true,
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript",
-  ],
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-typescript"],
   parserOptions: {
     ecmaVersion: "latest",
   },

diff --git a/examples/vue-ts/tsconfig.node.json b/examples/vue-ts/tsconfig.node.json
@@ -1,11 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "playwright.config.*"
-  ],
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]

diff --git a/packages/core/src/createZoomImageClick.ts b/packages/core/src/createZoomImageClick.ts
@@ -11,10 +11,7 @@ export type ZoomImageClickState = {
   zoomedImgStatus: ZoomedImgStatus
 }
 
-export function createZoomImageClick(
-  container: HTMLElement,
-  options: ZoomImageClickOptions = {},
-) {
+export function createZoomImageClick(container: HTMLElement, options: ZoomImageClickOptions = {}) {
   const sourceImgElement = getSourceImage(container)
   const finalOptions: Required<ZoomImageClickOptions> = {
     zoomFactor: options.zoomFactor ?? 4,
@@ -24,14 +21,11 @@ export function createZoomImageClick(
   let isOnMove = false
 
   const store = createStore<ZoomImageClickState>({
-    zoomedImgStatus: imageCache.checkImageLoaded(finalOptions.zoomImageSource)
-      ? "loaded"
-      : "idle",
+    zoomedImgStatus: imageCache.checkImageLoaded(finalOptions.zoomImageSource) ? "loaded" : "idle",
   })
 
   const zoomedImgWidth = sourceImgElement.clientWidth * finalOptions.zoomFactor
-  const zoomedImgHeight =
-    sourceImgElement.clientHeight * finalOptions.zoomFactor
+  const zoomedImgHeight = sourceImgElement.clientHeight * finalOptions.zoomFactor
   const zoomedImg = container.appendChild(document.createElement("img"))
   zoomedImg.style.maxWidth = "none"
   zoomedImg.style.width = `${zoomedImgWidth}px`
@@ -76,12 +70,8 @@ export function createZoomImageClick(
     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 * finalOptions.zoomFactor + zoomPointX)
+    const currentPositionY = calculatePositionY(-zoomPointY * finalOptions.zoomFactor + zoomPointY)
 
     zoomedImg.style.transform = `translate(${currentPositionX}px, ${currentPositionY}px)`
   }