@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_lazy-load.html" aria-controls="panel_lazy-load.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_lazy-load.ts" aria-controls="panel_lazy-load.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_lazy-load.html" aria-labelledby="trigger_lazy-load.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> lazy-load.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><lazy-load src="./examples/snippets/snippet.html"> <p class="loading">Loading...</p> <p class="error"></p> </lazy-load> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_lazy-load.ts" aria-labelledby="trigger_lazy-load.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> lazy-load.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type AttributeParser, type Component, type SignalProducer, setProperty, setText, dangerouslySetInnerHTML, component, first, } from "../../../"; export type LazyLoadProps = { error: string; src: string; content: string; }; /* === Attribute Parser === */ const asURL: AttributeParser<HTMLElement & { error: string }, string> = ( el, v, ) => { let value = ""; let error = ""; if (!v) { error = "No URL provided in src attribute"; } else if ( (el.parentElement || (el.getRootNode() as ShadowRoot).host)?.closest( `${el.localName}[src="${v}"]`, ) ) { error = "Recursive loading detected"; } else { const url = new URL(v, location.href); // Ensure 'src' attribute is a valid URL if (url.origin === location.origin) value = String(url); // Sanity check for cross-origin URLs else error = "Invalid URL origin"; } el.error = error; return value; }; /* === Signal Producer === */ const fetchText: SignalProducer< HTMLElement & { error: string; src: string }, string > = (el) => async (abort) => { // Async Computed callback const url = el.src; if (!url) return ""; try { const response = await fetch(url, { signal: abort }); el.querySelector(".loading")?.remove(); if (response.ok) return response.text(); else el.error = response.statusText; } catch (error) { el.error = error.message; } return ""; }; /* === Component === */ export default component( "lazy-load", { error: "", src: asURL, content: fetchText, }, (el) => [ dangerouslySetInnerHTML("content"), first<LazyLoadProps, HTMLElement>( ".error", setText("error"), setProperty("hidden", () => !el.error), ), ], ); declare global { interface HTMLElementTagNameMap { "lazy-load": Component<LazyLoadProps>; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> </tab-group>