@zeix/ui-element

Version:

UIElement - minimal reactive framework based on Web Components

99 lines (96 loc) • 14.1 kB

HTML

<tab-list> <menu> <li><button type="button" aria-pressed="false">HTML</button></li> <li><button type="button" aria-pressed="true">TypeScript</button></li> </menu> <details> <summary> <div class="summary">HTML</div> </summary> <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> </details> <details open> <summary> <div class="summary">TS</div> </summary> <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 { UIElement, setProperty, setText, dangerouslySetInnerHTML } from '../../../' export class LazyLoad extends UIElement<{ src: string, content: string, error: string, }> { static localName = 'lazy-load' init = { src: (v: string | null) => { // Custom attribute parser if (!v) { this.set('error', 'No URL provided in src attribute') return '' } else if ((this.parentElement || (this.getRootNode() as ShadowRoot).host)?.closest(`${this.localName}[src="${v}"]`)) { this.set('error', 'Recursive loading detected') return '' } const url = new URL(v, location.href) // Ensure 'src' attribute is a valid URL if (url.origin === location.origin) // Sanity check for cross-origin URLs return url.toString() this.set('error', 'Invalid URL origin') return '' }, content: async () => { // Async Computed callback const url = this.get('src') if (!url) return '' try { const response = await fetch(this.get('src')) this.querySelector('.loading')?.remove() if (response.ok) return response.text() else this.set('error', response.statusText) } catch (error) { this.set('error', error.message) } return '' }, error: '', } connectedCallback() { super.connectedCallback() // Effect to set error message this.first('.error').sync( setProperty('hidden', () => !this.get('error')), setText('error'), ) // Effect to set innerHTML to result of Computed 'content' this.self.sync(dangerouslySetInnerHTML('content')) } } LazyLoad.define()</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </details> </tab-list>