chore(deps): upgrade dependencies (#695)

- pre-commit hook -> pre-push
- fix tests after upgrading packages
- add dependabot workflow for actions

Author: timmywil

.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+
+updates:
+  - package-ecosystem: github-actions
+    directory: '/'
+    schedule:
+      interval: monthly
+
+    # Group all dependabot version update PRs into one
+    groups:
+      github-actions:
+        applies-to: version-updates
+        patterns:
+          - '*'

.github/workflows/test.yml

@@ -32,7 +32,7 @@ jobs:
             ${{ runner.os }}-node-${{ env.NODE_VERSION }}-npm-lock-
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Run tests
         run: npm test

.husky/pre-commit .husky/pre-push.husky/pre-commit renamed to .husky/pre-push

@@ -50,50 +50,50 @@
     "email": "timmywil@users.noreply.github.com"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
+    "@commitlint/cli": "^20.4.3",
+    "@commitlint/config-conventional": "^20.4.3",
     "@release-it/bumper": "7.0.5",
-    "@release-it/conventional-changelog": "10.0.2",
+    "@release-it/conventional-changelog": "10.0.5",
     "@types/assert": "^1.5.11",
-    "@types/prismjs": "^1.26.5",
+    "@types/prismjs": "^1.26.6",
     "@types/qunit": "^2.19.13",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
-    "@typescript-eslint/eslint-plugin": "^8.48.0",
-    "@typescript-eslint/parser": "^8.48.0",
-    "commitlint": "^20.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "commitlint": "^20.4.3",
     "concurrently": "^9.2.1",
-    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "conventional-changelog-conventionalcommits": "^9.3.0",
     "cross-env": "^10.1.0",
-    "css-loader": "^7.1.2",
-    "eslint": "^9.39.1",
+    "css-loader": "^7.1.4",
+    "eslint": "^9.39.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "gzip-size": "^7.0.0",
-    "html-webpack-plugin": "^5.6.5",
+    "html-webpack-plugin": "^5.6.6",
     "husky": "^9.1.7",
-    "jquery-test-runner": "^0.2.8",
-    "marked": "^17.0.1",
-    "prettier": "^3.7.3",
+    "jquery-test-runner": "^0.3.0",
+    "marked": "^17.0.4",
+    "prettier": "^3.8.1",
     "prismjs": "^1.30.0",
-    "qunit": "^2.24.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "release-it": "19.0.6",
-    "rollup": "^4.53.3",
+    "qunit": "^2.25.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "release-it": "19.2.4",
+    "rollup": "^4.59.0",
     "rollup-plugin-typescript2": "^0.36.0",
-    "semver": "^7.7.3",
+    "semver": "^7.7.4",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.4",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.15",
-    "typedoc-plugin-markdown": "^4.9.0",
+    "typedoc": "^0.28.17",
+    "typedoc-plugin-markdown": "^4.10.0",
     "typescript": "~5.9.3",
     "uglify-js": "^3.19.3",
-    "webpack": "^5.103.0",
+    "webpack": "^5.105.4",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.3"
   },
   "prettier": {
     "printWidth": 100,

README.md

@@ -110,7 +110,11 @@ export function setTransform(
  * Dimensions used in containment and focal point zooming
  */
 export function getDimensions(elem: HTMLElement | SVGElement) {
-  const parent = elem.parentNode as HTMLElement | SVGElement
+  let parent = elem.parentNode as HTMLElement | SVGElement | null
+  if (!parent || parent.nodeType !== 1) {
+    parent = document.documentElement
+  }
+
   const style = window.getComputedStyle(elem)
   const parentStyle = window.getComputedStyle(parent)
   const rectElem = elem.getBoundingClientRect()

package-lock.json

@@ -63,27 +63,27 @@ QUnit.module('Panzoom', () => {
     const div = document.createElement('div')
     document.body.appendChild(div)
     Panzoom(div)
-    function checkEvent(event: CustomEvent<PanzoomEventDetail>) {
-      console.log(`${event.type} called`)
-      assert.ok(event.detail, 'Event detail exists')
-      assert.ok(event.detail.hasOwnProperty('x'), 'Event detail has x value')
-      assert.ok(event.detail.hasOwnProperty('y'), 'Event detail has y value')
-      assert.ok(event.detail.hasOwnProperty('scale'), 'Event detail has scale value')
-      assert.ok(event.detail.hasOwnProperty('isSVG'), 'Event detail has isSVG value')
-      assert.ok(
-        event.detail.hasOwnProperty('originalEvent'),
-        'Event detail has originalEvent value'
-      )
-      if (event.type === 'panzoomend') {
-        document.body.removeChild(div)
-        done()
-      }
+
+    const events = ['panzoomstart', 'panzoomchange', 'panzoompan', 'panzoomzoom', 'panzoomend']
+    let eventsCalled = 0
+    for (const eventName of events) {
+      div.addEventListener(eventName, (event) => {
+        eventsCalled++
+        const customEvent = event as CustomEvent<PanzoomEventDetail>
+        assert.ok(customEvent.detail, 'Event detail exists')
+        assert.ok(customEvent.detail.hasOwnProperty('x'), 'Event detail has x value')
+        assert.ok(customEvent.detail.hasOwnProperty('y'), 'Event detail has y value')
+        assert.ok(customEvent.detail.hasOwnProperty('scale'), 'Event detail has scale value')
+        assert.ok(customEvent.detail.hasOwnProperty('isSVG'), 'Event detail has isSVG value')
+        assert.ok(
+          customEvent.detail.hasOwnProperty('originalEvent'),
+          'Event detail has originalEvent value'
+        )
+        if (eventsCalled === events.length) {
+          done()
+        }
+      })
     }
-    ;(div as any).addEventListener('panzoomstart', checkEvent)
-    ;(div as any).addEventListener('panzoomchange', checkEvent)
-    ;(div as any).addEventListener('panzoompan', checkEvent)
-    ;(div as any).addEventListener('panzoomzoom', checkEvent)
-    ;(div as any).addEventListener('panzoomend', checkEvent)
 
     div.dispatchEvent(new PointerEvent('pointerdown'))
     setTimeout(() => {
@@ -93,6 +93,7 @@ QUnit.module('Panzoom', () => {
       })
     })
   })
+
   QUnit.test('removes the events when using the destroy method', (assert) => {
     const div = document.createElement('div')
     document.body.appendChild(div)