search

sashafirsov / slotted-element

fetch-element and slotted-element web components to expose fetch() functionality, render JSON as HTML and support fetch() lifecycle via slot without ShadowDOM
Apache License 2.0
13 stars 0 forks source link

add support for image content types #5

Closed sashafirsov closed 2 years ago

sashafirsov commented 3 years ago

SVG, PNG, and other images to be rendered as tag. Since the src attribute drives the image retrieval first, the image would be recognized by content-type from headers and body would be retrieved by JS. To avoid re-reading the image from same URL, it has to be inlined as binary content.

The following image requests could be prevented when headers permit caching. In Second and following instances we could render IMG with src tag instead of fetching the image body. Since embedded SVG image behaves differently than remote, this method is not applicable for SVG images.

Instead of using browser caching via IMG with src attribute, the image could be embedded into web component with reused template. This way even inline image body would be shared across instances. That would require web component per image.

As the optimization techniques have own drawbacks, those have to be controlled by configuration.

Implementation

Shims. The code for each rendering/caching mode would be provided as runtime loaded shim to reduce JS footprint.
For bundle builds the shim could be injected as direct dependency after fetch-element is loaded.

Unified content-type driven rendering shims load and invoking TBD along with image handlers. Current XML, JSON as table, html handlers and renderers should be migrated from inline to shim.

sashafirsov commented 2 years ago

image content type is added. Demo is https://unpkg.com/slotted-element@1.0.3/demo/index.html