From 3e3a26ecde3961473244ce11cce271e3cd1ee321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20B?= Date: Mon, 11 Nov 2024 16:29:43 +0100 Subject: [PATCH] [FEATURE] Allow scroll update on resize (#6) Allows specifying an onResize handler, a `updateParentScrollOnResize` handler is usable if we want to try to keep the iframe in the viewport after a resize --- .github/workflows/develop.yml | 9 +- README.md | 46 ++++++--- package-lock.json | 8 +- packages/core/e2e/usecases.spec.ts | 13 ++- .../01-initial-state-chromium-linux.png | Bin 0 -> 119217 bytes .../01-initial-state-chromium-win32.png | Bin 0 -> 49690 bytes .../01-initial-state-firefox-linux.png | Bin 0 -> 138755 bytes .../01-initial-state-firefox-win32.png | Bin 0 -> 77832 bytes .../01-initial-state-webkit-linux.png | Bin 0 -> 80660 bytes .../01-initial-state-webkit-win32.png | Bin 0 -> 43163 bytes ...iframe-height-increased-chromium-linux.png | Bin 0 -> 129044 bytes ...iframe-height-increased-chromium-win32.png | Bin 0 -> 53375 bytes ...-iframe-height-increased-firefox-linux.png | Bin 0 -> 144903 bytes ...-iframe-height-increased-firefox-win32.png | Bin 0 -> 81110 bytes ...r-iframe-height-increased-webkit-linux.png | Bin 0 -> 84917 bytes ...r-iframe-height-increased-webkit-win32.png | Bin 0 -> 44604 bytes ...iframe-height-decreased-chromium-linux.png | Bin 0 -> 102082 bytes ...iframe-height-decreased-chromium-win32.png | Bin 0 -> 44614 bytes ...-iframe-height-decreased-firefox-linux.png | Bin 0 -> 120838 bytes ...-iframe-height-decreased-firefox-win32.png | Bin 0 -> 70578 bytes ...r-iframe-height-decreased-webkit-linux.png | Bin 0 -> 68426 bytes ...r-iframe-height-decreased-webkit-win32.png | Bin 0 -> 38157 bytes packages/core/package.json | 8 +- packages/core/playwright.config.ts | 2 +- packages/core/src/child.ts | 2 +- packages/core/src/common.ts | 4 +- packages/core/src/index.ts | 1 + packages/core/src/parent.ts | 95 +++++++++++++----- packages/core/src/resize-handlers.ts | 13 +++ packages/core/src/type.d.ts | 29 +++++- .../iframe-content.html | 39 +++++++ .../index.html | 85 ++++++++++++++++ packages/core/usecases/root.html | 1 + packages/core/vite.config.ts | 5 + packages/react/package.json | 4 +- packages/react/src/components/index.tsx | 4 +- packages/react/vite.config.ts | 5 + 37 files changed, 313 insertions(+), 60 deletions(-) create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/01-initial-state-chromium-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/01-initial-state-chromium-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/01-initial-state-firefox-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/01-initial-state-firefox-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/01-initial-state-webkit-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/01-initial-state-webkit-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/02-after-iframe-height-increased-chromium-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/02-after-iframe-height-increased-chromium-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/02-after-iframe-height-increased-firefox-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/02-after-iframe-height-increased-firefox-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/02-after-iframe-height-increased-webkit-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/02-after-iframe-height-increased-webkit-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/03-after-iframe-height-decreased-chromium-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/03-after-iframe-height-decreased-chromium-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/03-after-iframe-height-decreased-firefox-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/03-after-iframe-height-decreased-firefox-win32.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/03-after-iframe-height-decreased-webkit-linux.png create mode 100644 packages/core/e2e/usecases.spec.ts-snapshots/03-after-iframe-height-decreased-webkit-win32.png create mode 100644 packages/core/src/resize-handlers.ts create mode 100644 packages/core/usecases/13-update-parent-scroll-on-resize/iframe-content.html create mode 100644 packages/core/usecases/13-update-parent-scroll-on-resize/index.html diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml index 74917a5..070666d 100644 --- a/.github/workflows/develop.yml +++ b/.github/workflows/develop.yml @@ -28,11 +28,14 @@ jobs: run: npm run build - name: Run tests and code coverage + id: test run: npm run test - uses: actions/upload-artifact@v4 - if: always() + if: failure() && steps.test.outcome == 'failure' with: name: playwright-report - path: playwright-report/ - retention-days: 30 + path: | + packages/core/playwright-report/ + packages/core/e2e/usecases.spec.ts-snapshots/ + retention-days: 7 diff --git a/README.md b/README.md index 1033b2b..ea0395a 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,17 @@ -# Open Iframe Resizer +# Open Iframe Resizer ## Overview A modern, lightweight alternative for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects. -If you found this plugin helpful, please consider starring the repository! +If you found this plugin helpful, please consider starring the repository! ## Getting Started ### Browser (ES6 modules) ```html + + + diff --git a/packages/core/usecases/13-update-parent-scroll-on-resize/index.html b/packages/core/usecases/13-update-parent-scroll-on-resize/index.html new file mode 100644 index 0000000..3f1c1db --- /dev/null +++ b/packages/core/usecases/13-update-parent-scroll-on-resize/index.html @@ -0,0 +1,85 @@ + + + + + + Iframe Resize Example + + + + +
+

Some header content

+ 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 +
+ + + +
+

Some footer content

+ 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 + + 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 + + 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 + + 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 + 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 + 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 +
+ + + + + + diff --git a/packages/core/usecases/root.html b/packages/core/usecases/root.html index 58c7986..eb2cbf5 100644 --- a/packages/core/usecases/root.html +++ b/packages/core/usecases/root.html @@ -26,6 +26,7 @@

Directory Index

  • 10 Cross Origin Iframe Resizer Compat
  • 11 Grow Then Shrink
  • 12 Unsubscribe Listener
    • +
  • 13 Update Parent Scroll On Resize
    • diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts index 6b23590..c9cf0ef 100644 --- a/packages/core/vite.config.ts +++ b/packages/core/vite.config.ts @@ -31,4 +31,9 @@ export default defineConfig((env) => ({ formats: ["es", "umd"], }, }, + server: { + watch: { + ignored: ["!**/dist/**"], // Force HMR for build.output + }, + }, })); diff --git a/packages/react/package.json b/packages/react/package.json index b62ee53..b6fddf8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@open-iframe-resizer/react", "private": false, - "version": "1.1.3", + "version": "1.2.0", "description": "Open-source modern iframe resizer component", "license": "MIT", "repository": { @@ -45,7 +45,7 @@ "test": "npx playwright install --with-deps && npx playwright test" }, "dependencies": { - "@open-iframe-resizer/core": "1.1.3" + "@open-iframe-resizer/core": "1.2.0" }, "devDependencies": { "@babel/core": "7.26.0", diff --git a/packages/react/src/components/index.tsx b/packages/react/src/components/index.tsx index f231757..541c453 100644 --- a/packages/react/src/components/index.tsx +++ b/packages/react/src/components/index.tsx @@ -19,10 +19,10 @@ export function IframeResizer(props: Props) { } function filterProps(props: Props): { iframeAttributes: IframeHTMLAttributes; settings: Partial } { - const { offsetSize, enableLegacyLibSupport, checkOrigin, ...iframeAttributes } = props; + const { offsetSize, enableLegacyLibSupport, checkOrigin, onIframeResize, ...iframeAttributes } = props; // biome-ignore lint/suspicious/noExplicitAny: Only here to provide key exhaustiveness - const settings: { [K in keyof Settings]: any } = { offsetSize, enableLegacyLibSupport, checkOrigin }; + const settings: { [K in keyof Settings]: any } = { offsetSize, enableLegacyLibSupport, checkOrigin, onIframeResize }; return { iframeAttributes, settings }; } diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts index 45d4329..c64fe04 100644 --- a/packages/react/vite.config.ts +++ b/packages/react/vite.config.ts @@ -36,4 +36,9 @@ export default defineConfig((env) => ({ globals: true, environment: "jsdom", }, + server: { + watch: { + ignored: ["!**/dist/**"], // Force HMR for build.output + }, + }, }));