### uhtml Fragment Rendering Example

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Shows how uhtml handles rendering multiple sibling elements directly within a template literal without requiring a wrapper fragment like JSX's `<>...</>`. This demonstrates a key difference and simplification offered by uhtml's syntax.

```javascript
// uhtml fragment example
html`
  <div>first element</div>
  <p> ... </p>
  <div>last element</div>
`
```

--------------------------------

### Loading uhtml from CDN

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Provides examples of how to load the uhtml library from a Content Delivery Network (CDN) using various import paths for production, development, and automatic version selection. It highlights the benefit of using CDN URLs for automatic debug mode switching.

```javascript
// implicit production version
import { render, html } from 'https://esm.run/uhtml';
// https://cdn.jsdelivr.net/npm/uhtml/dist/prod/dom.js

// explicit production version
import { render, html } from 'https://esm.run/uhtml/prod';
// https://cdn.jsdelivr.net/npm/uhtml/dist/prod/dom.js

// explicit developer/debugging version
import { render, html } from 'https://esm.run/uhtml/dev';
import { render, html } from 'https://esm.run/uhtml/debug';
// https://cdn.jsdelivr.net/npm/uhtml/dist/dev/dom.js

// automatic prod/dev version on ?dev or ?debug
import { render, html } from 'https://esm.run/uhtml/auto';
import { render, html } from 'https://esm.run/uhtml/cdn';
// https://cdn.jsdelivr.net/npm/uhtml/dist/prod/cdn.js
```

--------------------------------

### Rollup Configuration for Minifying uhtml Templates

Source: https://github.com/webreflection/uhtml/blob/main/README.md

An example Rollup configuration using rollup-plugin-minify-template-literals and @rollup/plugin-terser to optimize JavaScript and uhtml templates for production. It highlights specific options for template minification.

```js
import terser from "@rollup/plugin-terser";
import templateMinifier from "rollup-plugin-minify-template-literals";
import { nodeResolve } from "@rollup/plugin-node-resolve";

export default {
  input: "src/your-component.js",
  plugins: [
    templateMinifier({
      options: {
        minifyOptions: {
          // allow only explicit <!--! comments !-->
          ignoreCustomComments: [/^!/],
          keepClosingSlash: true,
          caseSensitive: true,
        },
      },
    }),
    nodeResolve(),
    terser(),
  ],
  output: {
    esModule: true,
    file: "dist/your-component.js",
  },
};
```

--------------------------------

### Create and Render a Reactive Counter with uhtml

Source: https://github.com/webreflection/uhtml/blob/main/test/counter.html

This snippet defines a Counter component that uses a signal to track its state. The component renders a button that increments the count when clicked. The component is then appended to the document body.

```javascript
import { html, signal } from '../dist/dev/dom.js';

function Counter() {
  const count = signal(0);
  return html` <button onClick=${() => count.value++}> Clicked ${count.value} times </button> `;
}

document.body.append( html`<${Counter} />` );
```

--------------------------------

### Creating a Reactive Counter Component with uhtml Signals

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Illustrates how to create a reusable 'Counter' component using uhtml's `signal` for state management. The component features a button that increments a counter, and the displayed count updates reactively. This example also uses `esm.run` for module import.

```javascript
import { html, signal } from 'https://esm.run/uhtml';

function Counter() {
  const count = signal(0);

  return html`
    <button onClick=${() => count.value++}>
      Clicked ${count.value} times
    </button>
  `;
}

document.body.append(
  html`<${Counter} />`
);
```

--------------------------------

### Special Attributes in uhtml - Events, Bindings, and More

Source: https://context7.com/webreflection/uhtml/llms.txt

Explains uhtml's special attribute syntax for handling events (@event, on<event>), property binding (.property), boolean attributes (?attribute), ARIA attributes, and data attributes. Shows examples of direct property access and conditional attributes.

```javascript
import { html, signal } from 'uhtml';

// Event handlers with @event or onevent syntax
const handleClick = (e) => console.log('Clicked!', e);
const button1 = html`<button @click=${handleClick}>Click (@ syntax)</button>`;
const button2 = html`<button onclick=${handleClick}>Click (on syntax)</button>`;

// Event with options (array syntax)
const buttonWithOptions = html`
  <button @click=${[handleClick, { once: true, capture: true }]}>
    Click once only
  </button>
`;

// Direct property access with .property
const inputValue = signal("initial");
const input = html`
  <input .value=${inputValue.value} oninput=${(e) => inputValue.value = e.target.value} />
`;

// Boolean attributes with ?attribute
const isDisabled = signal(false);
const isHidden = signal(true);
const element = html`
  <button ?disabled=${isDisabled.value}>Submit</button>
  <div ?hidden=${isHidden.value}>Secret content</div>
`;

// Aria attributes for accessibility
const ariaButton = html`
  <button aria=${{ role: 'button', labelledBy: 'btn-label', pressed: false }}>
    Accessible Button
  </button>
`;

// Data attributes
const dataElement = html`
  <div data=${{ userId: '123', action: 'edit', timestamp: Date.now() }}>
    Element with data-* attributes
  </div>
`;

document.body.append(button1, button2, buttonWithOptions, input, element, ariaButton, dataElement);

```

--------------------------------

### Using Import Maps with uhtml in HTML

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Demonstrates how to use an import map to include uhtml from a CDN and then import and use it within a module script. This approach enhances portability and allows exclusion from bundlers.

```html
<script type="importmap">
{
  "imports": {
    "uhtml": "https://cdn.jsdelivr.net/npm/uhtml/dist/prod/cdn.js"
  }
}
</script>
<!-- your library code -->
<script type="module">
import { html } from 'uhtml';

document.body.append(
  html`Import Maps are Awesome!`
);
</script>
```

--------------------------------

### Basic HTML Rendering with uhtml

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Demonstrates the fundamental usage of the `html` tag from the uhtml library to render a simple HTML heading into the document's body. This requires importing the `html` function from 'uhtml' via esm.run.

```html
<!doctype html>
<script type="module">
  import { html } from 'https://esm.run/uhtml';

  document.body.prepend(
    html`<h1>Hello DOM !</h2>`
  );
</script>
```

--------------------------------

### CDN Usage and Browser Import Maps with uhtml

Source: https://context7.com/webreflection/uhtml/llms.txt

Shows how to load uhtml directly from a CDN using browser import maps. This allows for easy integration without a build process and supports automatic production/development mode switching.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
  {
    "imports": {
      "uhtml": "https://cdn.jsdelivr.net/npm/uhtml/dist/prod/cdn.js"
    }
  }
  </script>
</head>
<body>
  <script type="module">
    // Import from CDN
    import { html, render, signal } from 'uhtml';

    // Or directly without import map:
    // import { html } from 'https://esm.run/uhtml';
    // import { html } from 'https://esm.run/uhtml/auto'; // auto dev/prod switch
    // import { html } from 'https://esm.run/uhtml/dev';  // debug mode

    function App() {
      const count = signal(0);
      return html`
        <div>
          <h1>Counter: ${count.value}</h1>
          <button onclick=${() => count.value++}>+1</button>
        </div>
      `;
    }

    render(document.body, App);
  </script>
</body>
</html>
```

--------------------------------

### Spread Props on Elements and Components with uhtml

Source: https://context7.com/webreflection/uhtml/llms.txt

Demonstrates how to use object spread syntax to spread props onto HTML elements and uhtml components. This feature simplifies passing multiple attributes or properties to elements and components, reducing boilerplate code.

```javascript
import { html } from 'uhtml';

// Spread attributes on elements
const buttonProps = {
  class: 'btn btn-primary',
  type: 'submit',
  disabled: false
};

const button = html`<button ...${{...buttonProps}}>Submit</button>`;

// Spread props on components
function Button({ class: className, children, ...rest }) {
  return html`
    <button class=${className} ...${{...rest}}>
      ${children}
    </button>
  `;
}

const componentProps = {
  type: 'button',
  onclick: () => console.log('clicked'),
  'aria-label': 'Action button'
};

document.body.append(
  html`<${Button} class="custom" ...${{...componentProps}}>Click Me</>`
);
```

--------------------------------

### Render Dynamic Lists with uhtml

Source: https://github.com/webreflection/uhtml/blob/main/test/index.html

Demonstrates rendering an unordered list (`<ul>`) with dynamically generated list items (`<li>`) using uhtml. The order of items is changed after 3 and 4 seconds, showcasing list re-rendering.

```javascript
import { render, html } from '../dist/dev/dom.js';

function LI(entries) {
  return entries.map(key => html`<li key=${key}>Rando ${key}</li>`);
}

function UL(keys) {
  return html`<ul>${LI(keys)}</ul>`;
}

setTimeout((...args) => {
  render(document.body, () => UL([1, 2, 3]));
}, 3000, document.body, comp);

setTimeout((...args) => {
  render(document.body, () => UL([3, 2, 1]));
}, 4000, document.body, comp);
```

--------------------------------

### Function-Based Components in uhtml

Source: https://context7.com/webreflection/uhtml/llms.txt

Demonstrates creating React-like function components in uhtml. Components can accept props and utilize signals for internal state management. Supports rendering nested components and children.

```javascript
import { html, signal, render } from 'uhtml';

// Simple component with props
function Greeting({ name, age }) {
  return html`<p>Hello, ${name}! You are ${age} years old.</p>`;
}

document.body.append(
  html`<${Greeting} name="Alice" age=${30} />`
);

// Component with children
function Card({ title, children }) {
  return html`
    <div class="card">
      <h2>${title}</h2>
      <div class="content">${children}</div>
    </div>
  `;
}

document.body.append(
  html`
    <${Card} title="Welcome">
      <p>This is the card content.</p>
      <button>Click me</button>
    </>
  `
);

// Stateful component with signals
function TodoItem() {
  const completed = signal(false);
  const text = signal("New task");

  return html`
    <li class=${completed.value ? 'done' : ''}>
      <input
        type="checkbox"
        ?checked=${completed.value}
        onchange=${() => completed.value = !completed.value}
      />
      <span>${text.value}</span>
    </li>
  `;
}

document.body.append(html`<ul><${TodoItem} /></ul>`);

```

--------------------------------

### Key Attribute for Efficient List Updates in uhtml

Source: https://context7.com/webreflection/uhtml/llms.txt

Explains the `key` attribute in uhtml, which provides a unique identity for list items to enable efficient updates and reordering. Demonstrates how uhtml reuses keyed elements when the list data changes.

```javascript
import { html, signal, render } from 'uhtml';

const items = signal([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);

function ItemList() {
  return html`
    <ul>
      ${items.value.map(item => html`
        <li key=${item.id}>${item.name}</li>
      `)}
    </ul>
  `;
}

render(document.body, ItemList);

// When items change, keyed elements are reused efficiently
items.value = [
  { id: 2, name: 'Banana' },  // Reused
  { id: 1, name: 'Apple' },   // Reused, just moved
  { id: 4, name: 'Date' }     // New element created
];

```

--------------------------------

### Create DOM Fragments with fragment

Source: https://context7.com/webreflection/uhtml/llms.txt

The `fragment` utility simplifies the creation of DOM `DocumentFragment` objects from HTML or SVG strings. It acts as a convenient wrapper around the standard template element parsing, making it easier to work with DOM fragments.

```javascript
import { fragment } from 'uhtml';

// Create HTML fragment
const htmlFragment = fragment('<div>Hello</div><span>World</span>');
document.body.append(htmlFragment);

// Create SVG fragment (pass true as second argument)
const svgFragment = fragment('<circle cx="50" cy="50" r="25" />', true);
```

--------------------------------

### uhtml Core Exports and Usage

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Imports and explains the core functionalities of the uhtml library, including rendering functions (render, html, svg), unsafe content injection, and signal-based reactivity utilities. It also mentions internal classes and helper functions.

```javascript
import {
  // DOM manipulation
  render, html, svg, unsafe,
  // Preact like signals, based on alien-signals library
  signal, computed, effect, untracked, batch,
  // extras
  Hole, fragment,
} from 'https://esm.run/uhtml';
```

--------------------------------

### Define and Render a Button Component with uhtml

Source: https://github.com/webreflection/uhtml/blob/main/test/index.html

Defines a reusable Button component that accepts text and children props. It then renders this component, initially with 'hello world'. The text is updated after 2 seconds.

```javascript
import { render, html, signal, unsafe } from '../dist/dev/dom.js';

let hello = 'hello';

const comp = () => html`<${Button} text=${hello}>world</>`;

function Button(props) {
  return html`<button key=${1}>${props.text} ${props.children}</button>`;
}

document.body.appendChild(comp());

setTimeout((...args) => {
  hello = 'ahoi';
  render(...args);
}, 2000, document.body, comp);
```

--------------------------------

### Render Content and Manage Reactivity with uhtml's render Function

Source: https://context7.com/webreflection/uhtml/llms.txt

The `render` function in uhtml mounts content to a specified DOM element and supports reactive updates. When provided with a function, it creates a scoped effect that re-renders automatically when reactive dependencies change.

```javascript
import { render, html, signal } from 'uhtml';

// Simple one-time render
render(document.getElementById('app'), html`<h1>Static Content</h1>`);

// Reactive render with a function
const count = signal(0);

render(document.body, () => html`
  <div>
    <p>Count: ${count.value}</p>
    <button onclick=${() => count.value++}>Increment</button>
  </div>
`);

// The DOM automatically updates when count.value changes
// Clicking the button triggers a re-render of just the changed parts
```

--------------------------------

### Using Special Attributes in uhtml

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Demonstrates the usage of special attributes provided by uhtml for enhanced functionality. This includes simplifying ARIA attributes with `aria`, handling dataset with `data`, managing generic events with `@event`, direct event handling with `on...`, direct property updates with `.direct`, and boolean attributes with `?toggle`.

```javascript
  * `aria` attribute to simplify *a11y*, such as `<button aria=${{role: 'button', labelledBy: 'id'}} />`
  * `data` attribute to simplify *dataset* handling, such as `<div data=${{any: 'data'}} />`
  * `@event` attribute for generic events handling, accepting an array when *options* are meant to be passed, such as `<button @click=${[event => {}, { once: true }]} />`
  * `on...` prefixed, case insensitive, direct events, such as `<button onclick=${listener} />`
  * `.direct` properties access, such as `<input .value=${content} />`, `<button .textContent=${value} />` or `<div .className=${value} />`
  * `?toggle` boolean attributes, such as `<div ?hidden=${isHidden} />`
```

--------------------------------

### Group Updates with batch

Source: https://context7.com/webreflection/uhtml/llms.txt

The `batch` function allows grouping multiple signal updates into a single operation. This prevents intermediate re-renders, improving performance by ensuring effects only run after all batched changes have been applied.

```javascript
import { signal, computed, effect, batch } from 'uhtml';

const x = signal(0);
const y = signal(0);
const sum = computed(() => x.value + y.value);

effect(() => {
  console.log(`Sum is: ${sum.value}`);
});
// Logs: "Sum is: 0"

// Without batch - effect runs twice
x.value = 5; // Logs: "Sum is: 5"
y.value = 3; // Logs: "Sum is: 8"

// With batch - effect runs once for all changes
batch(() => {
  x.value = 10;
  y.value = 20;
});
// Logs: "Sum is: 30" (only once)
```

--------------------------------

### Using the ref Attribute for DOM Element References in uhtml

Source: https://context7.com/webreflection/uhtml/llms.txt

Illustrates how to use the `ref` attribute in uhtml to obtain direct references to DOM elements. It supports callback functions, signals, and objects with a `current` property for managing element references.

```javascript
import { html, signal, effect } from 'uhtml';

// Using ref with a callback function
const callbackRef = html`
  <input ref=${(el) => {
    console.log('Element mounted:', el);
    el.focus();
  }} type="text" placeholder="Auto-focused" />
`;

// Using ref with a signal
const inputRef = signal(null);

effect(() => {
  if (inputRef.value) {
    console.log('Input element:', inputRef.value);
    inputRef.value.focus();
  }
});

const signalRef = html`<input ref=${inputRef} type="text" />`;

// Using ref with an object (React-style)
const refObject = { current: null };
const objectRef = html`<div ref=${refObject}>Content</div>`;
// Access later: refObject.current

document.body.append(callbackRef, signalRef, objectRef);

```

--------------------------------

### Create Reactive State with uhtml's signal Function

Source: https://context7.com/webreflection/uhtml/llms.txt

The `signal` function from uhtml creates a reactive value container. Changes to the signal's value automatically trigger updates in any dependent computations or effects, enabling dynamic UIs.

```javascript
import { html, signal, render } from 'uhtml';

// Create a reactive counter
const counter = signal(0);

// Access value with .value property
console.log(counter.value); // 0

// Update triggers reactive updates
counter.value = 5;
console.log(counter.value); // 5

// Signals in templates - automatic reactivity
function Counter() {
  const count = signal(0);

  return html`
    <button onClick=${() => count.value++}>
      Clicked ${count.value} times
    </button>
  `;
}

document.body.append(html`<${Counter} />`);
```

--------------------------------

### Create a Counter Component with Signals and uhtml

Source: https://github.com/webreflection/uhtml/blob/main/test/index.html

Implements a Counter component that uses uhtml's signal for reactive state management. Clicking the button increments the count, and the UI updates automatically. It also demonstrates rendering unsafe HTML content.

```javascript
import { render, html, signal, unsafe } from '../dist/dev/dom.js';

function Counter({ count }) {
  return html`<button @click=${() => count.value++}>${unsafe('<em>count</em>')} ${count.value}</button>`;
}

setTimeout((...args) => {
  const count = signal(0);
  render(document.body, html`<${Counter} count=${count} />`);
}, 5000);
```

--------------------------------

### Create HTML Elements with uhtml's html Tag

Source: https://context7.com/webreflection/uhtml/llms.txt

The `html` template literal tag from uhtml is used to create HTML elements. It supports standard HTML syntax, dynamic interpolated values, and fragments (multiple elements).

```javascript
import { html } from 'uhtml';

// Basic HTML element creation
const greeting = html`<h1>Hello World!</h1>`;
document.body.append(greeting);

// With dynamic values
const name = "Alice";
const message = html`<p>Welcome, ${name}!</p>`;
document.body.append(message);

// Multiple elements (fragments)
const list = html`
  <div>First element</div>
  <p>Second element</p>
  <div>Third element</div>
`;
document.body.append(list);

// Self-closing tags
const selfClosing = html`<input type="text" placeholder="Enter name" />`;
document.body.append(selfClosing);
```

--------------------------------

### Inject Raw HTML Content with unsafe

Source: https://context7.com/webreflection/uhtml/llms.txt

The `unsafe` function allows the direct injection of raw HTML strings into your templates. Exercise caution, as this bypasses standard escaping mechanisms and can introduce Cross-Site Scripting (XSS) vulnerabilities if used with untrusted input.

```javascript
import { html, unsafe } from 'uhtml';

// Inject raw HTML content
const rawHtml = '<em>This is <strong>formatted</strong> text</em>';
const element = html`<div>${unsafe(rawHtml)}</div>`;
document.body.append(element);

// Useful for rendering markdown or sanitized HTML
const markdownResult = '<h2>Title</h2><p>Paragraph with <code>code</code></p>';
const article = html`
  <article>
    ${unsafe(markdownResult)}
  </article>
`;
document.body.append(article);
```

--------------------------------

### Run Side Effects with effect

Source: https://context7.com/webreflection/uhtml/llms.txt

The `effect` function executes a callback function whenever its reactive dependencies change. This is ideal for performing actions like logging, API calls, or DOM manipulations that are outside the direct templating system.

```javascript
import { signal, effect } from 'uhtml';

const username = signal("guest");
const isLoggedIn = signal(false);

// Effect runs immediately and re-runs when dependencies change
effect(() => {
  console.log(`User: ${username.value}, Logged in: ${isLoggedIn.value}`);
});
// Logs: "User: guest, Logged in: false"

username.value = "alice";
// Logs: "User: alice, Logged in: false"

isLoggedIn.value = true;
// Logs: "User: alice, Logged in: true"

// Practical example: sync to localStorage
const theme = signal("light");

effect(() => {
  localStorage.setItem("theme", theme.value);
  document.body.className = theme.value;
});
```

--------------------------------

### Preserving Comments in uhtml

Source: https://github.com/webreflection/uhtml/blob/main/README.md

Demonstrates how to preserve comments within uhtml templates. Only comments marked with '<!--! ... !-->' are kept in the rendered output. Other comments are stripped by default.

```javascript
html`
  <!--! this is here to stay !-->
  <!--// this will go -->
  <!-- also this -->
`
```

--------------------------------

### Create SVG Elements with uhtml's svg Tag

Source: https://context7.com/webreflection/uhtml/llms.txt

The `svg` template literal tag in uhtml correctly handles the SVG namespace for creating Scalable Vector Graphics elements. It allows for dynamic attributes and values within SVG structures.

```javascript
import { svg } from 'uhtml';

// Create an SVG icon
const icon = svg`
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="blue" />
    <rect x="30" y="30" width="40" height="40" fill="red" />
  </svg>
`;
document.body.append(icon);

// Dynamic SVG with variables
const radius = 25;
const color = "green";
const dynamicCircle = svg`
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="${radius}" fill="${color}" />
  </svg>
`;
document.body.append(dynamicCircle);
```

--------------------------------

### Access Values Without Tracking with untracked

Source: https://context7.com/webreflection/uhtml/llms.txt

The `untracked` function provides a way to read signal values without establishing a reactive dependency. This is useful when you need to access a signal's current value within an effect or computed function without causing that function to re-run when the signal changes.

```javascript
import { signal, effect, untracked } from 'uhtml';

const tracked = signal("tracked value");
const notTracked = signal("not tracked value");

effect(() => {
  // This creates a dependency on 'tracked'
  console.log("Tracked:", tracked.value);

  // This does NOT create a dependency on 'notTracked'
  const value = untracked(() => notTracked.value);
  console.log("Untracked:", value);
});
// Initial: Logs both values

tracked.value = "new tracked"; // Effect re-runs
notTracked.value = "new not tracked"; // Effect does NOT re-run
```

--------------------------------

### Create Derived Reactive Values with computed

Source: https://context7.com/webreflection/uhtml/llms.txt

The `computed` function generates a reactive value that updates automatically when its dependencies change. It takes a function that returns the derived value. Dependencies within the function are automatically tracked.

```javascript
import { signal, computed, effect } from 'uhtml';

// Base signals
const firstName = signal("John");
const lastName = signal("Doe");

// Computed value that depends on both signals
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

console.log(fullName.value); // "John Doe"

// When dependencies change, computed updates automatically
firstName.value = "Jane";
console.log(fullName.value); // "Jane Doe"

// Example with calculations
const price = signal(100);
const quantity = signal(2);
const tax = signal(0.1);

const total = computed(() => {
  const subtotal = price.value * quantity.value;
  return subtotal + (subtotal * tax.value);
});

console.log(total.value); // 220
quantity.value = 5;
console.log(total.value); // 550
```

--------------------------------

### Render SVG Element with uhtml

Source: https://github.com/webreflection/uhtml/blob/main/test/index.html

Renders an SVG element with a red rectangle to the document body. This showcases basic SVG rendering capabilities within uhtml.

```javascript
import { html } from '../dist/dev/dom.js';
document.body.appendChild( html`<svg><rect fill="red" width=${100} height=${50} /></svg>` );
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.