@zeix/ui-element

<module-tabgroup> <div role="tablist"> <button type="button" role="tab" id="trigger_module-lazy.html" aria-controls="panel_module-lazy.html" aria-selected="false" tabindex="-1" >HTML</button> <button type="button" role="tab" id="trigger_module-lazy.ts" aria-controls="panel_module-lazy.ts" aria-selected="true" tabindex="0" >TypeScript</button> </div> <div role="tabpanel" id="panel_module-lazy.html" aria-labelledby="trigger_module-lazy.html" hidden> <module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> module-lazy.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><module-lazy src="./examples/snippets/snippet.html"> <card-callout> <p class="loading" role="status">Loading...</p> <p class="error" role="alert" aria-live="polite" hidden></p> </card-callout> </module-lazy> </code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_module-lazy.ts" aria-labelledby="trigger_module-lazy.ts"> <module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> module-lazy.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, UNSET, component, computed, dangerouslySetInnerHTML, setText, show, state, toggleClass, } from '../../..' import { requireDescendant } from '../../../src/core/dom' import { asURL } from '../../functions/attribute-parser/as-url' import { fetchWithCache } from '../../functions/shared/fetch-with-cache' export type ModuleLazyProps = { src: string } export default component( 'module-lazy', { src: asURL, }, (el, { first }) => { requireDescendant(el, 'card-callout') requireDescendant(el, '.error') const error = state('') const content = computed(async abort => { const url = el.src.value if (el.src.error || !url) { error.set(el.src.error ?? 'No URL provided') return '' } try { error.set('') el.querySelector('.loading')?.remove() const { content } = await fetchWithCache(url, abort) return content } catch (err) { const errorMessage = err instanceof Error ? err.message : String(err) error.set(errorMessage) return '' } }) return [ dangerouslySetInnerHTML(content), first( 'card-callout', show(() => !!error.get() || content.get() === UNSET), toggleClass('danger', () => !error.get()), ), first('.error', setText(error)), ] }, ) declare global { interface HTMLElementTagNameMap { 'module-lazy': Component<ModuleLazyProps> } } </code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> </module-tabgroup>