Skip to content

Releases: components-1812/svg-isolate

svg-isolate@0.0.2

29 May 04:51
@FrancoJavierGadea FrancoJavierGadea
v0.0.2
52c3f1e

Choose a tag to compare

View all tags
svg-isolate@0.0.2 Latest
Latest

SVGIsolate v0.0.2 🚀

Version v0.0.2 introduces powerful enhancements to the core web component, focusing on responsive vector rendering, advanced resource loading strategies, a smart caching engine, and a robust security layer for isolated SVG delivery via Shadow DOM.

🌟 Key Features

1. Responsive srcset & Container Queries

SVGIsolate now supports dynamic SVG asset switching based on the component's actual rendered container width:

  • Dynamic source selection evaluated through an internal ResizeObserver.
  • Responsive selection format: srcset="/assets/small.svg 300w, /assets/large.svg 800w".

2. Advanced Loading Strategies (loading)

To optimize page performance and main-thread responsiveness, you can now specify one of four loading modes via the loading attribute:

  • eager (Default): Immediate resource fetching.
  • lazy: Deferred loading utilizing an IntersectionObserver, triggering only when the component enters the viewport.
  • defer: Delays loading until the DOMContentLoaded event fires.
  • idle: Loads asynchronously during browser idle periods using requestIdleCallback.

3. Shared Caching & Memory Boundaries

  • Shared Network Cache: Dedupes identical concurrent HTTP requests across all component instances.
  • Cache Limits & Tracking: Implements maximum size limits and monitors exact memory footprint (in bytes) of cached vectors.
  • Bypass Control: Introduces the no-cache attribute to force fresh network fetches when needed.

4. XSS Protection & Sanitization

  • Sanitization Engine: The sanitize attribute removes scripts and inline javascript event handlers (e.g. onmouseover, onclick) from SVGs before mounting.
  • Static sanitizer API: Allows global customization of sanitization configurations and rules.
  • expose-svg Attribute: Grants safe, read-only/interactive access to the isolated inner SVG node within the Shadow DOM.

5. URL Resolution & Base Remapping

Full support for resolving relative URLs and mapping paths using the base attribute on both the instance and global level:

<svg-isolate base="https://cdn.jsdelivr.net/npm/heroicons@2.2.0/24/outline" src="/cake.svg"></svg-isolate>

6. Lifecycle Events & Reactive State Attributes

Enables styling and application logic state matching via reactive CSS states and standard DOM events:

  • Applied CSS State Attributes: [fetching], [ready], and [ready-links].
  • Emitted DOM Events: fetching, ready, and ready-links.

🛠️ Bug Fixes & Refinements

  • API Naming: Renamed the static configuration property sanitize to sanitizer to avoid naming collisions with the instance attribute.
  • ResizeObserver Stability: Fixed a potential crash by gracefully cleaning up the ResizeObserver instance upon element disconnection.
  • Robust URL Parsing: Wrapped internal URL parser logic in a try/catch block inside the sources getter to gracefully handle malformed source paths.
  • Dimension Validators: Corrected the validation rules in width and height setters to evaluate using the cleaned, trimmed value (v).
  • Style System: Refactored internal shadow DOM style injection and resolved reference lookup issues on dynamic stylesheet link checks.

📦 Installation & Integration

<!-- Import the v0.0.2 bundle -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@components-1812/svg-isolate@0.0.2/dist/index.bundle.min.js"></script>
Assets 8
Loading