@zumer/snapdom 1.8.0 → 1.9.3-next-dev.0

package/README.md

@@ -19,6 +19,10 @@
   <a href="https://github.com/zumerlab/snapdom/network/members">
     <img alt="GitHub forks" src="https://img.shields.io/github/forks/zumerlab/snapdom?style=flat-square&label=Forks">
   </a>
+  <a href="https://github.com/sponsors/tinchox5">
+    <img alt="Sponsor tinchox5" src="https://img.shields.io/github/sponsors/tinchox5?style=flat-square&label=Sponsor">
+  </a>
+
   <a href="https://github.com/zumerlab/snapdom/blob/main/LICENSE">
     <img alt="License" src="https://img.shields.io/github/license/zumerlab/snapdom?style=flat-square">
   </a>
@@ -146,7 +150,10 @@ All capture methods accept an `options` object:
 | `height`          | number   | -        | Output specific height size                |
 | `backgroundColor` | string   | `"#fff"` | Fallback color for JPG/WebP                |
 | `quality`         | number   | `1`      | Quality for JPG/WebP (0 to 1)              |
-| `crossOrigin`     | function | -        | Function to determine CORS mode per image URL |
+| `useProxy`     | string | ''        | Specify a proxy for handling CORS images as fallback|
+| `type`     | string | `svg`        | Select `png`, `jpg`, `webp` Blob type|
+| `exclude` | string[] | -  | CSS selectors for elements to exclude |
+| `filter` | function | -  | Custom filter function ie `(el) => !el.classList.contains('hidden')` |
 
 ### Setting custom dimensions with width and height options
 
@@ -154,7 +161,7 @@ Use the `width` and `height` options to generate an image with specific dimensio
 
 **Examples:**
 
-**1. Fixed width (proportional Hhight)**
+**1. Fixed width (proportional height)**
 Sets a specific width while maintaining the aspect ratio. Height adjusts proportionally.
 
 ```js
@@ -188,22 +195,14 @@ Example: `{ scale: 3, width: 500 }` ignores width and scales the image 3x instea
 
 ### Cross-Origin Images
 
-By default, snapDOM loads images with `crossOrigin="anonymous"`. You can customize this behavior using the `crossOrigin` option:
+By default, snapDOM loads images with `crossOrigin="anonymous"` or `crossOrigin="use-credentials"`. In case fails to get the images, `useProxy` can be used to deal with CORS images:
 
 ```js
 const result = await snapdom(element, {
-  crossOrigin: (url) => {
-    // Use credentials for same-origin images
-    if (url.startsWith(window.location.origin)) {
-      return "use-credentials";
-    }
-    // Use anonymous for cross-origin images
-    return "anonymous";
-  }
+  useProxy: 'your/proxy/' //Example: 'https://corsproxy.io/?url=' or 'https://api.allorigins.win/raw?url='
 });
 ```
 
-This is useful when your images require authentication or when dealing with credentialed requests.
 
 ### Download options
 
@@ -238,13 +237,13 @@ import { snapdom, preCache } from './snapdom.mjs';
 
 * `embedFonts` *(boolean, default: true)* — Inlines non-icon fonts during preload.
 * `reset` *(boolean, default: false)* — Clears all existing internal caches.
-* `crossOrigin` *(function)* — Function to determine CORS mode per image URL during preload.
+* `useProxy` *(string)* — Proxy for handling CORS images as fallback.
 
 
 ## Features
 
 * Captures **shadow DOM** and Web Components
-* Supports `::before` and `::after` pseudo-elements
+* Supports `::before`, `::after` and `::first-letter` pseudo-elements
 * Inlines background images and fonts
 * Handles **Font Awesome**, **Material Icons**, and more
 * `data-capture="exclude"` to ignore an element
@@ -252,34 +251,63 @@ import { snapdom, preCache } from './snapdom.mjs';
 
 ## Limitations
 
-* External images must be CORS-accessible (use `crossOrigin` option for credentialed requests)
+* External images shloud be CORS-accessible (use `useProxy` option for handling CORS denied)
 * Iframes are not supported
 * When WebP format is used on Safari, it will fallback to PNG rendering.
 * `@font-face` CSS rule is well supported, but if need to use JS `FontFace()`, see this workaround [`#43`](https://github.com/zumerlab/snapdom/issues/43)
 
-## Benchmarks
 
-`snapDOM` is not only highly accurate — it’s **extremely fast**.
+Of course! Here's the updated **README section in English**, with `modern-screenshot` removed and replaced by `html-to-image`:
 
-Latest benchmarks show significant performance improvements against other libraries:
+---
 
-| Scenario                         | vs. `modern-screenshot` | vs. `html2canvas` |
-| -------------------------------- | :---------------------: | :---------------: |
-| Small element (200×100)          |       6.46× faster      |   32.27× faster   |
-| Modal size (400×300)             |       7.28× faster      |   32.66× faster   |
-| Page view (1200×800)             |      13.17× faster      |   35.29× faster   |
-| Large scroll area (2000×1500)    |      38.23× faster      |   68.85× faster   |
-| Very large element (4000×2000)   |      93.31× faster      |   133.12× faster  |
-| Complex small element (200×100)  |       3.97× faster      |   15.23× faster   |
-| Complex modal (400×300)          |       2.32× faster      |    5.33× faster   |
-| Complex page (1200×800)          |       1.62× faster      |    1.65× faster   |
-| Complex large scroll (2000×1500) |       1.66× faster      |    1.24× faster   |
-| Complex very large (4000×2000)   |       1.52× faster      |    1.28× faster   |
+## ⚡ Performance Benchmarks
 
+Snapdom has received **significant performance improvements** since version `v1.8.0`. The following benchmarks compare:
 
-### Run the benchmarks
+* **Snapdom (current)**
+* **Snapdom v1.8.0**
+* `html2canvas`
+* `html-to-image`
+
+
+### Simple elements
+
+| Scenario                 | Snapdom (current) | Snapdom v1.8.0 | html2canvas | html-to-image |
+| ------------------------ | ----------------- | -------------- | ----------- | ------------- |
+| Small (200×100)          | **0.4 ms**        | 1.2 ms         | 70.3 ms     | 3.6 ms        |
+| Modal (400×300)          | **0.4 ms**        | 1.1 ms         | 68.8 ms     | 3.6 ms        |
+| Page View (1200×800)     | **0.4 ms**        | 1.0 ms         | 100.5 ms    | 3.4 ms        |
+| Large Scroll (2000×1500) | **0.4 ms**        | 1.0 ms         | 153.1 ms    | 3.4 ms        |
+| Very Large (4000×2000)   | **0.4 ms**        | 1.0 ms         | 278.9 ms    | 4.3 ms        |
+
+---
+
+### Complex elements
+
+| Scenario                 | Snapdom (current) | Snapdom v1.8.0 | html2canvas | html-to-image |
+| ------------------------ | ----------------- | -------------- | ----------- | ------------- |
+| Small (200×100)          | **1.1 ms**        | 3.2 ms         | 76.0 ms     | 15.3 ms       |
+| Modal (400×300)          | **4.5 ms**        | 14.0 ms        | 133.2 ms    | 55.4 ms       |
+| Page View (1200×800)     | **32.9 ms**       | 113.6 ms       | 303.4 ms    | 369.1 ms      |
+| Large Scroll (2000×1500) | **133.9 ms**      | 387.4 ms       | 594.4 ms    | 1,163.0 ms    |
+| Very Large (4000×2000)   | **364.0 ms**      | 1,200.4 ms     | 1,380.8 ms  | 3,023.9 ms    |
+
+---
 
-To run these benchmarks yourself:
+### Summary
+
+* Snapdom (current) is **2×–6× faster** than `v1.8.0`
+* Up to **150× faster** than `html2canvas`
+* Up to **8× faster** than `html-to-image` in large scenarios
+
+<sub>Benchmarks run in Chromium using Vitest.<br>
+Hardware: MacBook Air 2018.<br>
+⚠️ Performance may vary depending on device.</sub>
+
+---
+
+### Run the benchmarks
 
 ```sh
 git clone https://github.com/zumerlab/snapdom.git
@@ -288,8 +316,6 @@ npm install
 npm run test:benchmark
 ```
 
-They execute in **headless Chromium** using real DOM nodes.
-
 ## Development
 
 To contribute or build snapDOM locally:
@@ -299,6 +325,9 @@ To contribute or build snapDOM locally:
 git clone https://github.com/zumerlab/snapdom.git
 cd snapdom
 
+# Switch to dev branch
+git checkout dev
+
 # Install dependencies
 npm install
 
@@ -322,14 +351,24 @@ For detailed contribution guidelines, please see [CONTRIBUTING](https://github.c
 <!-- CONTRIBUTORS:START -->
 <p>
 <a href="https://github.com/tinchox5" title="tinchox5"><img src="https://avatars.githubusercontent.com/u/11557901?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="tinchox5"/></a>
+<a href="https://github.com/tarwin" title="tarwin"><img src="https://avatars.githubusercontent.com/u/646149?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="tarwin"/></a>
+<a href="https://github.com/17biubiu" title="17biubiu"><img src="https://avatars.githubusercontent.com/u/13295895?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="17biubiu"/></a>
 <a href="https://github.com/pedrocateexte" title="pedrocateexte"><img src="https://avatars.githubusercontent.com/u/207524750?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="pedrocateexte"/></a>
 <a href="https://github.com/domialex" title="domialex"><img src="https://avatars.githubusercontent.com/u/4694217?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="domialex"/></a>
 <a href="https://github.com/elliots" title="elliots"><img src="https://avatars.githubusercontent.com/u/622455?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="elliots"/></a>
 <a href="https://github.com/jswhisperer" title="jswhisperer"><img src="https://avatars.githubusercontent.com/u/1177690?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="jswhisperer"/></a>
+<a href="https://github.com/simon1uo" title="simon1uo"><img src="https://avatars.githubusercontent.com/u/60037549?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="simon1uo"/></a>
+<a href="https://github.com/titoBouzout" title="titoBouzout"><img src="https://avatars.githubusercontent.com/u/64156?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="titoBouzout"/></a>
 <a href="https://github.com/jhbae200" title="jhbae200"><img src="https://avatars.githubusercontent.com/u/20170610?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="jhbae200"/></a>
 </p>
 <!-- CONTRIBUTORS:END -->
 
+## 💖 Sponsors
+
+Special thanks to [@megaphonecolin](https://github.com/megaphonecolin) for supporting this project!  
+
+If you'd like to support this project too, you can [become a sponsor](https://github.com/sponsors/tinchox5).
+
 ## License
 
 MIT © Zumerlab