[CHORE] Update dev dependencies (#3)

- Update dev dependencies - Improve unsubscribe handle - Remove engine limitation
Lemick · Oct 27, 2024 · 51f54e6 · 51f54e6
1 parent c93bd08
commit 51f54e6
Show file tree

Hide file tree

Showing 9 changed files with 1,896 additions and 3,632 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,22 +9,22 @@
   },
   "type": "module",
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@playwright/test": "^1.47.0",
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.48.2",
     "@types/node": "^20.12.12",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
-    "concurrently": "^8.2.2",
+    "@vitest/coverage-v8": "^2.1.3",
+    "@vitest/ui": "^2.1.3",
+    "concurrently": "^9.0.1",
     "copyfiles": "^2.4.1",
-    "jsdom": "^24.1.1",
+    "jsdom": "^25.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.26.5",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.3",
+    "tslib": "^2.8.0",
+    "typedoc": "^0.26.10",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
     "vite-plugin-dts": "^4.1.1",
     "vite-plugin-progress": "^0.0.7",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.3"
   },
   "workspaces": [
     "packages/core",

diff --git a/packages/core/e2e/usecases.spec.ts b/packages/core/e2e/usecases.spec.ts
@@ -71,3 +71,9 @@ test("Should resize iframe whether it shrinks or grows", async ({ page }) => {
 
   await page.waitForFunction<boolean, AssertArg>(allIframesOffsetHeightMatch, { comparator: "lesserThan", threshold: 700 });
 });
+
+test("Should not resize iframe when unsubscribed", async ({ page }) => {
+  await page.goto("/usecases/12-unsubscribe-listener/index.html");
+
+  await page.waitForFunction<boolean, AssertArg>(allIframesOffsetHeightMatch, { comparator: "lesserThan", threshold: 700 });
+});
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@open-iframe-resizer/core",
 	"private": false,
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"description": "Open-source modern iframe resizer",
 	"license": "MIT",
 	"repository": {

diff --git a/packages/core/src/parent.ts b/packages/core/src/parent.ts
@@ -11,20 +11,20 @@ import { handleLegacyLibResizeMessage, sendLegacyLibInitMessageOnIframeLoad } fr
 import type { IframeResizeEvent, InitializeFunction, Settings } from "./type";
 
 const resizeObserver = createResizeObserver();
-const registeredIframes: Array<{ iframe: HTMLIFrameElement; settings: Settings }> = [];
+let registeredIframes: Array<{ iframe: HTMLIFrameElement; settings: Settings }> = [];
 
 const initialize: InitializeFunction = (clientSettings, selector) => {
   const finalSettings = { ...getDefaultSettings(), ...removeUndefinedProperties(clientSettings ?? {}) };
   const iframes = resolveIframesToRegister(selector);
   const allowedOrigins = registerIframesAllowOrigins(finalSettings, iframes);
 
   return iframes.map((iframe) => {
-    const length = registeredIframes.push({ iframe, settings: finalSettings });
+    registeredIframes.push({ iframe, settings: finalSettings });
     const unsubscribeResizeListener = addChildResizeListener(iframe, finalSettings, allowedOrigins);
     return {
       unsubscribe: () => {
         unsubscribeResizeListener();
-        registeredIframes.splice(length - 1, 1);
+        registeredIframes = registeredIframes.filter((entry) => entry.iframe !== iframe);
       },
     };
   });

diff --git a/packages/core/usecases/12-unsubscribe-listener/iframe-content.html b/packages/core/usecases/12-unsubscribe-listener/iframe-content.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Loader Example</title>
+  <style>
+      body {
+          font-family: Arial, sans-serif;
+          padding: 20px;
+      }
+  </style>
+</head>
+<body>
+<h1 id="title">The text will grow periodically</h1>
+<p id="content">This is the initial text that loads with the page.</p>
+
+<script>
+  const lorem = "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat\n";
+  const content = document.getElementById("content");
+  const additionalText = lorem.repeat(10);
+
+  let times = 0;
+  const intervalId = setInterval(() => {
+    if (times < 3) {
+      content.innerHTML += additionalText;
+      times++;
+    } else {
+      clearInterval(intervalId);
+    }
+  }, 500);
+</script>
+</body>
+</html>
diff --git a/packages/core/usecases/12-unsubscribe-listener/index.html b/packages/core/usecases/12-unsubscribe-listener/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Iframe Resize Example</title>
+  <style>
+      iframe {
+          border: 2px dotted red;
+          width: 100%;
+          height: 400px;
+      }
+  </style>
+</head>
+<body>
+<iframe id="myIframe" src="iframe-content.html"></iframe>
+
+<script type="module">
+  import { initialize } from "/dist/index.js";
+
+  const [registeredHandle] = initialize({}, "#myIframe");
+
+  setTimeout(() => {
+    registeredHandle.unsubscribe();
+  }, 10)
+</script>
+
+</body>
+</html>
diff --git a/packages/core/usecases/root.html b/packages/core/usecases/root.html
@@ -25,6 +25,7 @@ <h1>Directory Index</h1>
     <li><a href="./09-cross-origin-deferred-initialization/index.html">09 Cross Origin Deferred Initialization</a></li>
     <li><a href="./10-cross-origin-iframe-resizer-compat/index.html">10 Cross Origin Iframe Resizer Compat</a></li>
     <li><a href="./11-grow-then-shrink/index.html">11 Grow Then Shrink</a></li>
+    <li><a href="./12-unsubscribe-listener/index.html">12 Unsubscribe Listener</a></li>
 
   </ul>
 </body>

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,16 +1,13 @@
 {
 	"name": "@open-iframe-resizer/react",
 	"private": false,
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"description": "Open-source modern iframe resizer component",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Lemick/open-iframe-resizer.git"
 	},
-	"engines": {
-		"node": ">=20.0.0"
-	},
 	"keywords": [
 		"iframe",
 		"Resizing",
@@ -48,21 +45,21 @@
 		"test": "npx playwright install --with-deps && npx playwright test"
 	},
 	"dependencies": {
-		"@open-iframe-resizer/core": "1.1.2"
+		"@open-iframe-resizer/core": "1.1.3"
 	},
 	"devDependencies": {
-		"@babel/core": "7.22.10",
-		"@testing-library/react": "14.0.0",
-		"@types/react": "18.2.20",
-		"@types/react-dom": "18.2.7",
-		"@vitejs/plugin-react": "4.3.1",
-		"autoprefixer": "10.4.14",
-		"babel-loader": "9.1.3",
-		"jsdom": "22.1.0",
+		"@babel/core": "7.26.0",
+		"@testing-library/react": "16.0.1",
+		"@types/react": "18.3.12",
+		"@types/react-dom": "18.3.1",
+		"@vitejs/plugin-react": "4.3.3",
+		"autoprefixer": "10.4.20",
+		"babel-loader": "9.2.1",
+		"jsdom": "25.0.1",
 		"json": "11.0.0",
 		"prop-types": "15.8.1",
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
 	},
 	"peerDependencies": {
 		"react": ">=17.0.0",