@zumer/snapdom 1.9.7 → 1.9.9

package/README.md

@@ -1,8 +1,6 @@
-# snapDOM
-
 <p align="center">
   <a href="http://zumerlab.github.io/snapdom">
-    <img src="https://raw.githubusercontent.com/zumerlab/snapdom/main/docs/assets/hero.png" width="80%">
+    <img src="https://raw.githubusercontent.com/zumerlab/snapdom/main/docs/assets/newhero.png" width="70%">
   </a>
 </p>
 
@@ -28,13 +26,15 @@
   </a>
 </p>
 
+# snapDOM
+
 **snapDOM** is a fast and accurate DOM-to-image capture tool built for **Zumly**, a zoom-based view transition framework.
 
 It captures any HTML element as a scalable SVG image, preserving styles, fonts, background images, pseudo-elements, and even shadow DOM. It also supports export to raster image formats and canvas.
 
 * 📸 Full DOM capture
 * 🎨 Embedded styles, pseudo-elements, and fonts
-* 🖼️ Export to SVG, PNG, JPG, WebP, or `canvas`
+* 🖼️ Export to SVG, PNG, JPG, WebP, `canvas`, or Blob
 * ⚡ Ultra fast, no dependencies
 * 📦 100% based on standard Web APIs
 
@@ -54,6 +54,12 @@ npm i @zumer/snapdom
 yarn add @zumer/snapdom
 ```
 
+Then import it in your code:
+
+```js
+import { snapdom } from '@zumer/snapdom';
+```
+
 ### CDN
 
 ```html
@@ -145,12 +151,15 @@ All capture methods accept an `options` object:
 | `compress`        | boolean  | `true`   | Removes redundant styles                   |
 | `fast`            | boolean  | `true`   | Skips idle delay for faster results        |
 | `embedFonts`      | boolean  | `false`  | Inlines fonts (icon fonts always embedded) |
+| `localFonts`      | array   | `[]`     | Array of local font descriptors `{ family, src, weight?, style? }` |
+| `iconFonts`       | string \| RegExp \| (string \| RegExp)[] | `[]` | Additional icon font families or patterns |
 | `scale`           | number   | `1`      | Output scale multiplier                    |
+| `dpr`             | number   | `devicePixelRatio` | Device pixel ratio                 |
 | `width`           | number   | -        | Output specific width size                 |
 | `height`          | number   | -        | Output specific height size                |
 | `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|
+| `useProxy`     | string | ''        | Specify a proxy for handling CORS images/fonts 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')` |
@@ -217,7 +226,7 @@ const result = await snapdom(element, {
 
 ### `preCache()` – Optional helper
 
-The `preCache()` function can be used to load external resources (like images and fonts) in advance. It is specially useful when the element to capure is big and complex.
+The `preCache()` function can be used to load external resources (like images and fonts) in advance. It is specially useful when the element to capture is big and complex.
 
 ```js
 import { preCache } from '@zumer/snapdom';
@@ -236,7 +245,9 @@ import { snapdom, preCache } from './snapdom.mjs';
 **Options for `preCache()`:**
 
 * `embedFonts` *(boolean, default: true)* — Inlines non-icon fonts during preload.
-* `useProxy` *(string)* — Proxy for handling CORS images as fallback.
+* `localFonts` *(array)* — Array of `{ family, src, weight?, style? }` for local font sources.
+* `useProxy` *(string)* — Proxy for handling CORS images/fonts as fallback.
+
 
 
 ## Features
@@ -250,7 +261,7 @@ import { snapdom, preCache } from './snapdom.mjs';
 
 ## Limitations
 
-* External images shloud be CORS-accessible (use `useProxy` option for handling CORS denied)
+* External images should 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)
@@ -311,6 +322,36 @@ npm install
 npm run test:benchmark
 ```
 
+
+## Roadmap
+
+Planned improvements for future versions of SnapDOM:
+
+* [ ] **Implement plugin system**
+  SnapDOM will support external plugins to extend or override internal behavior (e.g. custom node transformers, exporters, or filters).
+
+* [ ] **Refactor to modular architecture**
+  Internal logic will be split into smaller, focused modules to improve maintainability and code reuse.
+
+* [X] **Decouple internal logic from global options**
+  Functions will be redesigned to avoid relying directly on `options`. A centralized capture context will improve clarity, autonomy, and testability. See [`next` branch](https://github.com/zumerlab/snapdom/tree/main)
+
+* [ ] **Expose cache control**
+  Users will be able to manually clear image and font caches or configure their own caching strategies.
+
+* [ ] **Auto font preloading**
+  Required fonts will be automatically detected and preloaded before capture, reducing the need for manual `preCache()` calls.
+
+* [ ] **Document plugin development**
+  A full guide will be provided for creating and registering custom SnapDOM plugins.
+
+* [ ] **Make export utilities tree-shakeable**
+  Export functions like `toPng`, `toJpg`, `toBlob`, etc. will be restructured into independent modules to support tree shaking and minimal builds.
+
+Have ideas or feature requests?
+Feel free to share suggestions or feedback in [GitHub Discussions](https://github.com/zumerlab/snapdom/discussions).
+
+
 ## Development
 
 To contribute or build snapDOM locally:
@@ -351,16 +392,21 @@ For detailed contribution guidelines, please see [CONTRIBUTING](https://github.c
 <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/av01d" title="av01d"><img src="https://avatars.githubusercontent.com/u/6247646?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="av01d"/></a>
+<a href="https://github.com/CHOYSEN" title="CHOYSEN"><img src="https://avatars.githubusercontent.com/u/25995358?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="CHOYSEN"/></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/sharuzzaman" title="sharuzzaman"><img src="https://avatars.githubusercontent.com/u/7421941?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="sharuzzaman"/></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>
 <a href="https://github.com/miusuncle" title="miusuncle"><img src="https://avatars.githubusercontent.com/u/7549857?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="miusuncle"/></a>
 <a href="https://github.com/rbbydotdev" title="rbbydotdev"><img src="https://avatars.githubusercontent.com/u/101137670?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="rbbydotdev"/></a>
+<a href="https://github.com/zhanghaotian2018" title="zhanghaotian2018"><img src="https://avatars.githubusercontent.com/u/169218899?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="zhanghaotian2018"/></a>
 <a href="https://github.com/kohaiy" title="kohaiy"><img src="https://avatars.githubusercontent.com/u/15622127?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="kohaiy"/></a>
+<a href="https://github.com/fu050409" title="fu050409"><img src="https://avatars.githubusercontent.com/u/46275354?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="fu050409"/></a>
 </p>
 <!-- CONTRIBUTORS:END -->
 
@@ -370,6 +416,10 @@ Special thanks to [@megaphonecolin](https://github.com/megaphonecolin) for suppo
 
 If you'd like to support this project too, you can [become a sponsor](https://github.com/sponsors/tinchox5).
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=zumerlab/snapdom&type=Date)](https://www.star-history.com/#zumerlab/snapdom&Date)
+
 ## License
 
 MIT © Zumerlab