@zumer/snapdom 1.9.3 → 1.9.6-dev.0

package/README.md

@@ -151,6 +151,9 @@ All capture methods accept an `options` object:
 | `backgroundColor` | string   | `"#fff"` | Fallback color for JPG/WebP                |
 | `quality`         | number   | `1`      | Quality for JPG/WebP (0 to 1)              |
 | `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
 
@@ -256,55 +259,51 @@ import { snapdom, preCache } from './snapdom.mjs';
 
 ## ⚡ Performance Benchmarks
 
-Snapdom has received **major performance improvements** since version `v1.8.0`. Below are benchmark results comparing:
+Snapdom has received **significant performance improvements** since version `v1.8.0`. The following benchmarks compare:
 
-* 🔷 **Snapdom (current)**
-* 🔸 **Snapdom v1.8.0**
-* 🟥 `html2canvas`
-* 🟨 `modern-screenshot`
+* **Snapdom (current)**
+* **Snapdom v1.8.0**
+* `html2canvas`
+* `html-to-image`
 
-Each benchmark shows the **fastest observed time** (lower is better), measured in **milliseconds (ms)**.
-
----
 
 ### Simple elements
 
-| Scenario                 | Snapdom (current) | Snapdom v1.8.0 | html2canvas | modern-screenshot |
-| ------------------------ | ----------------- | -------------- | ----------- | ----------------- |
-| Small (200×100)          | **0.4 ms**        | 1.2 ms         | 70.3 ms     | 11.9 ms           |
-| Modal (400×300)          | **0.4 ms**        | 1.1 ms         | 68.8 ms     | 14.1 ms           |
-| Page View (1200×800)     | **0.4 ms**        | 1.0 ms         | 100.5 ms    | 34.2 ms           |
-| Large Scroll (2000×1500) | **0.4 ms**        | 1.0 ms         | 153.1 ms    | 77.8 ms           |
-| Very Large (4000×2000)   | **0.4 ms**        | 1.0 ms         | 278.9 ms    | 194.7 ms          |
+| 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 | modern-screenshot |
-| ------------------------ | ----------------- | -------------- | ----------- | ----------------- |
-| Small (200×100)          | **1.1 ms**        | 3.2 ms         | 72.5 ms     | 16.1 ms           |
-| Modal (400×300)          | **4.5 ms**        | 14.0 ms        | 90.1 ms     | 34.6 ms           |
-| Page View (1200×800)     | **32.9 ms**       | 113.6 ms       | 196.1 ms    | 181.1 ms          |
-| Large Scroll (2000×1500) | **133.9 ms**      | 387.4 ms       | 446.6 ms    | 635.9 ms          |
-| Very Large (4000×2000)   | **364.0 ms**      | 1,200.4 ms     | 1,275.4 ms  | 1,685.6 ms        |
+| 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    |
+
 
----
 
 ### Summary
 
-* Snapdom (current) is consistently **2×–4× faster** than `v1.8.0`
-* Up to **500× faster** than `html2canvas`
-* Also significantly faster than `modern-screenshot`, especially for large DOMs
+* 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>All benchmarks were run in Chromium using Vitest.<br>
-Tests were performed on a 2018 MacBook Air.<br>
-⚠️ Performance can be even better on more modern hardware.</sub>
+<sub>Benchmarks run in Chromium using Vitest.<br>
+Hardware: MacBook Air 2018.<br>
+⚠️ Performance may vary depending on device.</sub>
 
 
-### Run the benchmarks
 
-To run these benchmarks yourself:
+### Run the benchmarks
 
 ```sh
 git clone https://github.com/zumerlab/snapdom.git
@@ -313,8 +312,6 @@ npm install
 npm run test:benchmark
 ```
 
-They execute in **headless Chromium** using real DOM nodes.
-
 ## Development
 
 To contribute or build snapDOM locally:
@@ -324,6 +321,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
 
@@ -347,12 +347,14 @@ 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 -->