UIElement Docs Version 0.13.3

🔗 🍽️ Examples & Recipes

Discover practical examples and patterns for building reactive, modular components with UIElement. Each example focuses on showcasing a specific feature or best practice, guiding you through real-world use cases.

🔗 Counter

Source Code

Loading...

🔗 Slide 1

Hello, World!

🔗 Slide 2

🔗 Slide 3

🔗 Slide 4

🔗 Slide 5

Source Code

Loading...

🔗 Combobox

Tell us where you live so we can set your timezone for our calendar and notification features.
Source Code

Loading...

🔗 Todo App

    Well done, all done!

    task tasks remaining

    ModuleTodo Source Code

    Loading...
    InputTextbox Source Code

    Loading...
    InputButton Source Code

    Loading...
    InputCheckbox Source Code

    Loading...
    InputRadiogroup Source Code

    Loading...

    🔗 Lazy Loading

    This example shows how to handle asynchronous data loading and error states.

    Features:

    • Lazy loading with intersection observer
    • Loading states and error handling
    • Content replacement patterns

    js 

    component(
  'module-lazy',
  {
    src: asString(),
    loaded: asBoolean(),
    loading: asBoolean(),
    error: asString(),
  },
  (el, { first }) => {
    let observer

    const loadContent = async () => {
      if (el.loaded || el.loading || !el.src) return

      el.loading = true
      el.error = ''

      try {
        const response = await fetch(el.src)
        if (!response.ok) throw new Error(`HTTP ${response.status}`)

        const content = await response.text()
        el.querySelector('.content').innerHTML = content
        el.loaded = true
      } catch (err) {
        el.error = err.message
      } finally {
        el.loading = false
      }
    }

    return [
      // Loading state
      first(
        '.loading',
        setStyle('display', () => (el.loading ? 'block' : 'none')),
      ),

      // Error state
      first(
        '.error',
        setText('error'),
        setStyle('display', () => (el.error ? 'block' : 'none')),
      ),

      // Content container
      first(
        '.content',
        setStyle('display', () => (el.loaded ? 'block' : 'none')),
      ),

      // Setup intersection observer
      () => {
        observer = new IntersectionObserver(entries => {
          if (entries[0].isIntersecting) {
            loadContent()
            observer.disconnect()
          }
        })

        observer.observe(el)

        return () => observer?.disconnect()
      },
    ]
  },
)

    html 

    <module-lazy src="/api/user-profile">
  <div class="loading">Loading user profile...</div>
  <div class="error"></div>
  <div class="content"></div>
</module-lazy>