### Setup Server-side in Node.js and Bun

Source: https://github.com/lowlighter/mizu/blob/main/www/html/mizu/usage.html

Install via JSR npm compatibility layer and import the server module.

```bash
# NodeJS
npx jsr add @mizu/render
```

```bash
# Bun
bunx jsr add @mizu/render
```

```javascript
import Mizu from "@mizu/render/server"
            await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "🌊 Yaa, mizu!" } })
```

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

### Setup Client-side via ESM

Source: https://github.com/lowlighter/mizu/blob/main/www/html/mizu/usage.html

Allows manual initialization and customization of the rendering process.

```html
<script type="module">
            import Mizu from "https://mizu.sh/client.mjs"
            await Mizu.render(document.body, { context: { foo: "🌊 Yaa, mizu!" } })
          </script>
```

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

### Install and Render HTML on Server with Node.js/Bun

Source: https://context7.com/lowlighter/mizu/llms.txt

Install the library via JSR and use the server renderer for Node.js or Bun environments.

```bash
# Node.js
npx jsr add @mizu/render

# Bun
bunx jsr add @mizu/render
```

```typescript
import Mizu from "@mizu/render/server"

const template = `
  <article *for="let post of posts">
    <h2 *text="post.title"></h2>
    <p *text="post.excerpt"></p>
    <a :href="'/posts/' + post.slug">Read more</a>
  </article>
  <p *empty>No posts found.</p>
`

const result = await Mizu.render(template, {
  context: {
    posts: [
      { title: "Getting Started", excerpt: "Learn the basics...", slug: "getting-started" },
      { title: "Advanced Usage", excerpt: "Deep dive into...", slug: "advanced-usage" }
    ]
  }
})
```

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

### NodeJS/Bun: Install Mizu.js

Source: https://github.com/lowlighter/mizu/blob/main/README.md

Install Mizu.js for server-side rendering in NodeJS or Bun environments using the JSR npm compatibility layer.

```bash
# NodeJS
npx jsr add @mizu/render
```

```bash
# Bun
bunx jsr add @mizu/render
```

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

### Applying Context Styles

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/bind/mod_test.html

Examples of setting inline styles using strings, objects, and arrays.

```javascript
context.style = "color: red;"
```

```javascript
context.style = "color: blue;"
```

```javascript
context.style = { color: "red", background: "blue" }
```

```javascript
context.style = null
```

```javascript
context.style = { color: "red !important", background: "blue" }
```

```javascript
context.style = { "--color": "red", "background-color": "blue" }
```

```javascript
context.style = { borderColor: "red", borderTopLeftRadius: "1px" }
```

```javascript
context.style = { top: -1, left: 1, bottom: -1.5, right: 1.5, color: 1 }
```

```javascript
context.style = { color: "red" }
```

```javascript
context.style = { background: "blue" }
```

```javascript
context.style = ["color: red;", { background: "blue" }, ["width: 1px;", { height: "1px" }, "", {}, []]]
```

```javascript
context.style = ["display: inline-block; color: red;", { color: "blue", background: "blue" }, { background: "red" }]
```

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

### Install mizu/render

Source: https://github.com/lowlighter/mizu/blob/main/www/html/mizu/demo.html

Commands to add the @mizu/render package to your project using Deno, npm, or Bun.

```shell
deno add jsr:@mizu/render
```

```shell
npx jsr add @mizu/render
```

```shell
bunx jsr add @mizu/render
```

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

### Setup Server-side in Deno

Source: https://github.com/lowlighter/mizu/blob/main/www/html/mizu/usage.html

Import mizu.js directly using the jsr: specifier or add it via the Deno CLI.

```typescript
import Mizu from "jsr:@mizu/render/server"
            await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "🌊 Yaa, mizu!" } })
```

```bash
deno add jsr:@mizu/render
```

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

### Incomplete Interpolation Example 1

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/mustache/mod_test.html

An example showing an incomplete interpolation syntax. This might lead to parsing errors or unexpected behavior.

```plaintext
foo {{ foo foo
```

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

### Render with Mizu.js Server-side (NodeJS/Bun)

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Import Mizu.js after installation for server-side rendering in Node.js or Bun environments. Rendering is implicit.

```typescript
import Mizu from "@mizu/render/server"
await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "🌊 Yaa, mizu!" } })
```

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

### Basic ~test directive usage

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/test/README.md

Example of applying the ~test directive to a samp element with a testing phase and text content.

```html
<samp ~test[testing].text="'...'">
  <!--...-->
</samp>
```

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

### Initialize Mizu.js with ESM (Client-side)

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Import and manually start Mizu.js in your browser using ESM. This allows for customization of the initial context and loading of additional directives.

```html
<script type="module">
  import Mizu from "https://mizu.sh/client.mjs"
  await Mizu.render(document.body, { context: { foo: "🌊 Yaa, mizu!" } })
</script>
```

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

### Add Mizu.js to Bun Project

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Install the Mizu.js render package for Bun projects using the JSR add command.

```bash
# Bun
bunx jsr add @mizu/render
```

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

### Add Mizu.js to Node.js Project

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Install the Mizu.js render package for Node.js projects using npm compatibility layer.

```bash
# NodeJS
npx jsr add @mizu/render
```

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

### Incomplete Interpolation Example 2

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/mustache/mod_test.html

Another instance of incomplete interpolation syntax, potentially causing rendering issues.

```plaintext
{{ foo }}
```

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

### Listening for Events with Dots in Their Names

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/README.md

Explains how to listen for events that contain dots in their names using bracket notation, for example, '@ {my.event}'.

```html
@ {my.event}
```

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

### Basic Button Click Listener

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/README.md

A simple example of attaching a click listener to a button to update its text content when clicked. This demonstrates the fundamental usage of the @click directive.

```html
<button @click="this.value = 'Clicked!'">
  <!--Not clicked yet.-->
</button>
```

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

### Configure Mizu Client and Server Instances

Source: https://context7.com/lowlighter/mizu/llms.txt

Demonstrates initializing a client-side instance with custom context and debug settings, and a server-side instance with specific directives and output configuration.

```typescript
// Client-side custom instance
import { Client } from "https://mizu.sh/client.mjs"

const mizu = new Client({
  // Custom initial context
  context: {
    appName: "My App",
    version: "1.0.0",
    api: {
      baseUrl: "https://api.example.com",
      async fetch(endpoint) {
        const res = await fetch(this.baseUrl + endpoint)
        return res.json()
      }
    }
  },
  // Custom warning handler
  warn: (msg) => console.warn("[Mizu]", msg),
  // Enable debug mode
  debug: true
})

// Render specific element
await mizu.render(document.querySelector("#app"))

// Access and modify context (reactive)
mizu.context.user = { name: "Alice" }

// Flush pending reactive updates
await mizu.flush()

// Server-side custom instance
import { Server } from "jsr:@mizu/render/server"

const serverMizu = new Server({
  directives: ["@mizu/text", "@mizu/for", "@mizu/if", "@mizu/bind"],
  context: { siteName: "My Site" },
  generate: {
    output: "./public",
    clean: true
  }
})

serverMizu.context.buildTime = new Date().toISOString()

const html = await serverMizu.render(`
  <html>
    <head><title *text="siteName"></title></head>
    <body>
      <footer *text="'Built: ' + buildTime"></footer>
    </body>
  </html>
`)
```

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

### Initialize Demo Interface

Source: https://github.com/lowlighter/mizu/blob/main/www/html/mizu/demo.html

Client-side script to manage tab switching and runtime selection in the interactive demo.

```javascript
window.addEventListener("load", function () { const data = { runtime: "", tab: "" } for (const key of Object.keys(data)) { document.querySelectorAll(`[data-demo-${key}]`).forEach((element) => { element.addEventListener("click", () => { if ((key === "runtime") && (data.runtime !== element.getAttribute(`data-demo-${key}`))) { const selector = element.getAttribute(`data-demo-${key}`) === "browsers" ? ".mockup.browser [data-demo-tab]" : `.mockup.runtime [data-demo-tab][data-demo-for-runtime="${element.getAttribute(`data-demo-${key}`)}"]` document.querySelector(selector)?.click() } data[key] = element.getAttribute(`data-demo-${key}`) document.querySelectorAll(`[data-demo-for-${key}]`).forEach((element) => { if (Object.keys(data).every((key) => (element.getAttribute(`data-demo-for-${key}`) === data[key]) || (!element.hasAttribute(`data-demo-for-${key}`)))) { element.style.removeProperty("display") } else { element.style.setProperty("display", "none", "important") } }) document.querySelectorAll(".dock > *").forEach((element) => element.classList.toggle("active", element.getAttribute("data-demo-runtime") === data.runtime)) document.querySelectorAll(".tab[data-demo-tab]").forEach((element) => element.classList.toggle("active", element.getAttribute("data-demo-tab") === data.tab)) }) }) } document.querySelector(`[data-demo-runtime]`).click() document.querySelector(".demo").classList.remove("loading") })
```

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

### Initialize Playground Environment

Source: https://github.com/lowlighter/mizu/blob/main/www/html/playground.html

Sets up the editor, tab switching, message listeners, and rendering logic for the Mizu playground.

```javascript
window.addEventListener("load", function () { // Setup elements const playground = document.querySelector(".playground") const editor = document.querySelector(".editor") const textarea = editor.querySelector("textarea") const highlight = editor.querySelector(".highlight") const messages = document.querySelector(".messages") const button = document.querySelector("#render") const iframe = document.querySelector("iframe") const debug = false // Setup code editor function coloration(value, target = highlight) { target.innerHTML = `${hljs.highlight(value, { language: "xml" }).value}\n` } textarea.addEventListener("input", () => coloration(textarea.value)) textarea.addEventListener("input", () => render()) textarea.addEventListener("scroll", function () { highlight.scrollTop = this.scrollTop highlight.scrollLeft = this.scrollLeft }) coloration(textarea.value) // Setup tabs const data = { tab: "" } for (const key of Object.keys(data)) { document.querySelectorAll(`[data-${key}]`).forEach((element) => { element.addEventListener("click", () => { data[key] = element.getAttribute(`data-${key}`) document.querySelectorAll(`[data-for-${key}]`).forEach((element) => { if (element.getAttribute(`data-for-${key}`) === data[key]) { element.style.removeProperty("display") } else { element.style.setProperty("display", "none", "important") } }) document.querySelectorAll(`[data-${key}]`).forEach((element) => element.classList.toggle("active", element.getAttribute(`data-${key}`) === data[key])) }) }) } document.querySelector(`[data-tab]`).click() // Setup messages function cleanMessages() { document.querySelectorAll(".message.warn, .message.debug").forEach((element) => element.remove()) document.querySelector(".errors-count small b").textContent = "" } globalThis.addEventListener("message", (event) => { const { data: { type, message, target } } = event if ((!message)||((!debug)&&(type === "debug"))) { return } const element = document.querySelector(".message.template").cloneNode(true) element.querySelector(".content").textContent = message if (target) { coloration(target, element.querySelector(".target")) } element.classList.remove("template") element.classList.add(type) if (element.classList.contains("warn")) { document.querySelector(".errors-count small b").textContent++ } messages.appendChild(element) }) // Setup renderer let timeout = NaN function render(delay = 2000) { clearTimeout(timeout) button.classList.add("attention") timeout = setTimeout(() => { button.classList.remove("attention") button.dispatchEvent(new MouseEvent("click")) }, delay) } button.addEventListener("click", async function () { if (playground.classList.contains("pending")) { return } cleanMessages() let resolve = null, reject = null const promise = new Promise((ok, ko) => { resolve = ok reject = ko }) try { playground.classList.add("pending") const frame = iframe.contentDocument iframe.onload = resolve iframe.onerror = reject frame.open() frame.write(` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/matcha.css"> </head> <body *mizu class="pt-1"> ${textarea.value} <script type="module"> import { Mizu } from "/client.mjs" await new Mizu({ warn(message, target) { globalThis.parent.postMessage({ type: "warn", message, target: target?.nodeType === globalThis.window.document.COMMENT_NODE ? `<!--${target.textContent}-->` : target?.outerHTML?.replace(target.innerHTML, "") ?? null }, "*") }, debug(message, target) { globalThis.parent.postMessage({ type: "debug", message, target: target?.nodeType === globalThis.window.document.COMMENT_NODE ? `<!--${target.textContent}-->` : target?.outerHTML?.replace(target.innerHTML, "") ?? null }, "*") } }).render() <\/script> </body> </html>`.trim()) frame.close() await promise } finally { playground.classList.remove("pending") } }) render(0) })
```

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

### Generate Static Sites with Mizu

Source: https://context7.com/lowlighter/mizu/llms.txt

Configure the server and generate static files from strings, callbacks, URLs, or local directories.

```typescript
import { Server } from "jsr:@mizu/render/server"

const mizu = new Server({
  directives: ["@mizu/text", "@mizu/for", "@mizu/if"],
  generate: { output: "./dist", clean: true }
})

await mizu.generate([
  // Generate from raw string
  ["<h1 *text='title'></h1>", "index.html", { render: { context: { title: "Home" } } }],

  // Copy static files from directory
  ["**/*.css", "assets", { directory: "./src/styles" }],
  ["**/*.{png,jpg,svg}", "images", { directory: "./src/assets" }],

  // Generate from callback function
  [() => JSON.stringify({ version: "1.0.0" }), "manifest.json"],

  // Generate from callback with rendering
  [
    () => `<ul><li *for="let page of pages" *text="page"></li></ul>`,
    "sitemap.html",
    { render: { context: { pages: ["home", "about", "contact"] } } }
  ],

  // Fetch and render from URL
  [
    new URL("https://api.example.com/template.html"),
    "dynamic.html",
    { render: { context: { data: "fetched" } } }
  ]
])
```

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

### Assigning Context Values

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/bind/mod_test.html

Demonstrates setting string and boolean values to the context.

```javascript
context.value = "foo"
```

```javascript
context.value = "bar"
```

```javascript
context.value = true
```

```javascript
context.value = false
```

```javascript
context.dataValue = "foo"
```

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

### Test Mizu DOM Interaction and State Synchronization

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/model/mod_test.html

Demonstrates how to simulate user input on raw and casted fields and verify the resulting context values.

```javascript
e = ["0"] expect(document.querySelector("input[name=raw]").checked).toBe(true) expect(document.querySelector("input[name=casted]").checked).toBe(false) context.value = [0] expect(document.querySelector("input[name=raw]").checked).toBe(false) expect(document.querySelector("input[name=casted]").checked).toBe(true) context.value = []   // Raw value raw = document.querySelector("input[name=raw]") raw.checked = true raw.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual(["yes"])) // Casted value casted = document.querySelector("input[name=casted]") casted.checked = true casted.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual(["yes", true])) // Reverse mapping context.value = ["yes"] expect(document.querySelector("input[name=raw]").checked).toBe(true) expect(document.querySelector("input[name=casted]").checked).toBe(false) context.value = [true] expect(document.querySelector("input[name=raw]").checked).toBe(false) expect(document.querySelector("input[name=casted]").checked).toBe(true) context.value = []   // Raw value raw = document.querySelector("input[name=raw]") raw.checked = true raw.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual(["no"])) // Casted value casted = document.querySelector("input[name=casted]") casted.checked = true casted.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual(["no", false])) // Reverse mapping context.value = ["no"] expect(document.querySelector("input[name=raw]").checked).toBe(true) expect(document.querySelector("input[name=casted]").checked).toBe(false) context.value = [false] expect(document.querySelector("input[name=raw]").checked).toBe(false) expect(document.querySelector("input[name=casted]").checked).toBe(true) context.value = { raw: null, casted: null }   // Raw value raw = document.querySelector("input[name=raw]") raw.value = "0" raw.dispatchEvent(new Event("input")) await retry(() => expect(context.value.raw).toBe(0)) // Casted value casted = document.querySelector("input[name=casted]") casted.value = "0" casted.dispatchEvent(new Event("input")) await retry(() => expect(context.value.casted).toBe("0")) context.value = [] document.querySelectorAll("option").forEach((option) => option.selected = true) document.querySelector("select").dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual([1, 2])) context.value = true  context.value = "foo"   input = document.querySelector("input") input.dispatchEvent(new Event("input")) expect(input.value).toBe("foo")
```

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

### Filter Response using Status Code Aliases

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/README.md

Use predefined aliases like 2XX, 3XX, 4XX, or 5XX to filter responses based on common status code categories. For example, 2XX matches codes from 200 to 299.

```html
<div %http="'https://example.com'" %response 2XX></div>
```

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

### Basic String Interpolation

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/mustache/mod_test.html

Demonstrates basic string interpolation using double curly braces. Ensure the variable is defined in the context.

```plaintext
context.foo = "bar"

foo {{ foo }} foo

foo bar foo

context.foo = "baz"

foo baz foo
```

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

### Render Mizu with ESM

Source: https://github.com/lowlighter/mizu/blob/main/www/html/mizu/examples/browsers/esm.html

Import Mizu and render it into the document body with a context. Ensure the script is loaded as an ESM module.

```javascript
import Mizu from "https://mizu.sh/client.mjs"
await Mizu.render(document.body, { context: { foo: "🌊 Yaa, mizu!" } })
```

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

### Add Mizu.js to Deno Project

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Add the Mizu.js render package to your Deno project using the Deno CLI.

```bash
deno add jsr:@mizu/render
```

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

### Basic Event Listener

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/mod.html

Listen for a dispatched Event.

```APIDOC
## @event="listener"

### Description
Listen for a dispatched [`Event`](https://developer.mozilla.org/docs/web/api/event).

### Method
N/A (Directive-based)

### Endpoint
N/A (Directive-based)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<button @click="myFunction">
  Click Me
</button>
```

### Response
#### Success Response (200)
N/A (Event-driven)

#### Response Example
N/A (Event-driven)
```

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

### Import and use a third-party custom element

Source: https://github.com/lowlighter/mizu/blob/main/www/html/community.html

Use the *custom-element and %http directives to load and register a custom element from a remote URL.

```html
<!-- Import custom element on the fly... -->         <template *custom-element="x-example" %http="https//mizu.sh/community/x-example" %response.html ></template>          <!-- And use it in your page! -->         <x-example>🌊 Yaa, mizu!</x-example>
```

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

### Listening for Keyboard Events with Key Modifiers

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/README.md

Shows how to use the '.keys' modifier with keyboard events to specify which keys must be pressed for the listener to trigger. Multiple key combinations can be separated by commas.

```html
@keypress.keys[ctrl+space]="handleSpecialKey()"
```

```html
@keyup.keys[ctrl+space,shift+space]="handleMultipleKeys()"
```

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

### Inspect Request and Response Instances

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/mod_test.html

Verify that the http.request and http.response are instances of Request and Response respectively.

```javascript
expect(http.request).toBeInstanceOf(Request)
expect(http.response).toBeInstanceOf(Response)
```

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

### Include Mizu.js via IIFE (Client-side)

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Use this script tag to include Mizu.js for immediate rendering on the client-side. It requires no manual import or initialization.

```html
<script src="https://mizu.sh/client.js" defer></script>
```

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

### Managing Context Classlist

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/bind/mod_test.html

Shows how to update classlist using strings, objects, arrays, and null values.

```javascript
context.classlist = "foo bar"
```

```javascript
context.classlist = " foo bar "
```

```javascript
context.classlist = "bar"
```

```javascript
context.classlist = "bar baz"
```

```javascript
context.classlist = "baz"
```

```javascript
context.classlist = { foo: true, bar: true, baz: false }
```

```javascript
context.classlist = null
```

```javascript
context.classlist = { bar: true }
```

```javascript
context.classlist = { bar: true, baz: true }
```

```javascript
context.classlist = { baz: true }
```

```javascript
context.classlist = ["bar", { baz: true }, ["qux", { quux: true }, "", {}, []]]
```

```javascript
context.classlist = ["bar", { foo: false, bar: false, baz: false }, { baz: true }]
```

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

### Render HTML on Server with Deno

Source: https://context7.com/lowlighter/mizu/llms.txt

Generate static HTML strings on the server using Deno's native JSR support.

```typescript
import Mizu from "jsr:@mizu/render/server"

// Simple template rendering
const html = await Mizu.render(`
  <html>
    <body>
      <h1 *text="title"></h1>
      <ul>
        <li *for="let user of users" *text="user.name"></li>
      </ul>
      <footer *if="showFooter">
        <p *text="copyright"></p>
      </footer>
    </body>
  </html>
`, {
  context: {
    title: "User Directory",
    users: [
      { name: "Alice" },
      { name: "Bob" },
      { name: "Charlie" }
    ],
    showFooter: true,
    copyright: "2024 Example Corp"
  }
})

console.log(html)
// Output: <html><body><h1>User Directory</h1><ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul><footer><p>2024 Example Corp</p></footer></body></html>
```

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

### Perform HTTP Request with %http

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/README.md

Initiates a fetch request on the element. Requires a %response directive to handle the result.

```html
<div %http="https://example.com">
  <!--...-->
</div>
```

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

### Attach Event Listeners

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/mod.html

Basic syntax for listening to DOM events.

```html
@event="listener"
```

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

### Input Event Handling

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/model/mod_test.html

Illustrates the difference between input and change events for updating the model.

```javascript
input = document.querySelector("input") expect(input.value).toBe("foo") input.value = "bar" input.dispatchEvent(new Event("input")) await expect(retry(() => expect(context.value).toBe("bar"))).rejects.toThrow() input.dispatchEvent(new Event("change")) await retry(() => expect(context.value).toBe("bar")) context.value = "foo" context.foo = undefined context.bar = undefined expect(context.foo).toBe("foo") expect(context.bar).toBeUndefined() context.value = []
```

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

### License Information

Source: https://github.com/lowlighter/mizu/blob/main/README.md

This section displays the MIT License details for the Mizu.js project.

```plaintext
MIT License

Copyright (c) 2024 Simon Lecoq
```

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

### Basic `*noop` Directive Usage

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/unstable/noop/README.md

This HTML snippet demonstrates the basic usage of the `*noop` directive. It is an attribute directive that does nothing.

```html
<div *noop></div>
```

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

### Handle Null Values

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/mod_test.html

Demonstrates handling of null values in different contexts.

```plaintext
**null**
```

```plaintext
null **foo**
```

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

### Include mizu.js via script tag

Source: https://github.com/lowlighter/mizu/blob/main/www/html/_/mizu-banner.html

Add the mizu.js client library to your HTML document to enable interactive features.

```html
<script src="https://mizu.sh/client.js" defer> </script>
```

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

### Handle mizu.js build form submission

Source: https://github.com/lowlighter/mizu/blob/main/www/html/build.html

This script manages the form submission process, collects configuration data, and sends a request to the build API. It handles loading states, error reporting, and opening the generated build in a new tab.

```javascript
{ const form = document.querySelector("form.builder") form.addEventListener("submit", async (event) => { event.preventDefault() // Prepare data const raw = new FormData(form) const data = { format: "", console: [], directives: [], minify: false, standalone: false } for (const [key, value] of raw) { switch (key) { case "console": case "directives": data[key].push(value) break case "minify": case "standalone": data[key] = value === "on" break default: data[key] = value } } // Generate build try { form.classList.add("pending") document.querySelector(".builder-error").classList.add("hidden") const response = await fetch(location.hostname === "mizu.sh" ? "https://mizu.deno.dev/api/build" : "/api/build", { method: "POST", body: JSON.stringify(data) }) if (response.status !== 200) { throw new Error(await response.text()) } const url = URL.createObjectURL(new Blob([await response.blob()], { type: "application/javascript;charset=utf-8" })) globalThis.open(url, "_blank") } catch (error) { document.querySelector(".builder-error").classList.remove("hidden") document.querySelector(".builder-error small").innerText = error.message setTimeout(() => document.querySelector(".builder-error").classList.add("hidden"), 15 * 1000) } finally { form.classList.remove("pending") } }) function refresh() { form.querySelectorAll('input[type="checkbox"][data-group]').forEach((input) => { const local = Array.from(form.querySelectorAll(`input[data-group="${input.dataset.group}"]`)).reduce((checked, input) => checked && input.checked, true) form.querySelector(`input[data-group-toggle="${input.dataset.group}"]`).checked = local }) form.querySelectorAll('input[type="checkbox"]:is([data-group="rendering"],[data-group-toggle="rendering"])').forEach((input) => input.checked = true) const global = Array.from(form.querySelectorAll(`input[data-group]`)).reduce((checked, input) => checked && input.checked, true) form.querySelector(`input[type="checkbox"][data-group-toggle="*"]`).checked = global } // Add interactivity to group checkboxes form.querySelectorAll('legend input[type="checkbox"][data-group-toggle]').forEach((input) => { if (input.dataset.groupToggle === "*") { input.addEventListener("change", () => form.querySelectorAll('input[type="checkbox"][data-group]').forEach((input) => input.checked = event.target.checked)) } else { input.addEventListener("change", () => form.querySelectorAll(`input[type="checkbox"][data-group="${input.dataset.groupToggle}"]`).forEach((child) => child.checked = input.checked)) } }) form.querySelectorAll('input[type="checkbox"]:is([data-group],[data-group-toggle])').forEach((input) => input.addEventListener("change", () => refresh())) refresh() }
```

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

### Initializing Model with Nullish Coalescing and ::.value

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/model/mod.html

Initialize the model using the nullish coalescing operator and the input `value` attribute if present. This assigns the `value` attribute's content to the model if the model is nullish.

```html
<input ::.value="foo" value="bar">
```

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

### Set innerHTML with syntax highlighting

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/code/mod.html

Use the code directive to dynamically import highlight.js and apply syntax highlighting to element content.

```text
*code="content"
```

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

### Use HTML Content Directive

Source: https://context7.com/lowlighter/mizu/llms.txt

Render raw HTML content into an element. Exercise caution with user-provided input to prevent XSS.

```html
<!-- Render HTML content -->
<div *html="'<strong>Bold</strong> and <em>italic</em>'"></div>

<!-- Dynamic HTML from context -->
<article *html="post.content"></article>

<!-- Template usage -->
<template *html="richContent">
  <!-- Rendered HTML replaces template content -->
</template>

<!-- Warning: Be cautious with user input to prevent XSS -->
<div *html="sanitizedUserContent"></div>
```

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

### Create an element reference with *ref

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/ref/README.md

Assigns a reference name to an element, which can then be accessed through the $refs collection.

```html
<div *ref="foo" data-text="bar">
  <!--<p *text="$refs.foo.dataset.text"></p>-->
</div>
```

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

### Render with Mizu.js Server-side (Deno)

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/render/README.md

Import Mizu.js using the JSR specifier for server-side rendering in Deno. This method allows for implicit rendering without the need for the `*mizu` attribute.

```typescript
import Mizu from "jsr:@mizu/render/server"
await Mizu.render(`<div *text="foo"></div>`, { context: { foo: "🌊 Yaa, mizu!" } })
```

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

### Define local context variables with *set

Source: https://context7.com/lowlighter/mizu/llms.txt

Use *set to define local variables, nested scopes, computed properties, and functions for an element and its descendants.

```html
<!-- Define local variables -->
<div *set="{ count: 0, message: 'Hello' }">
  <p *text="message"></p>
  <button @click="count++">Count: <span *text="count"></span></button>
</div>

<!-- Nested contexts -->
<div *set="{ theme: 'dark' }">
  <p *text="theme"></p>  <!-- dark -->
  <div *set="{ theme: 'light' }">
    <p *text="theme"></p>  <!-- light -->
  </div>
  <p *text="theme"></p>  <!-- dark -->
</div>

<!-- Computed values -->
<div *set="{ items: [1, 2, 3], get total() { return this.items.reduce((a, b) => a + b, 0) } }">
  <p *text="`Total: ${total}`"></p>
</div>

<!-- Functions in context -->
<div *set="{
  todos: [],
  addTodo(text) { this.todos.push({ text, done: false }) },
  toggleTodo(i) { this.todos[i].done = !this.todos[i].done }
}">
  <input ::="newTodo" @keypress.keys[enter]="addTodo(newTodo); newTodo = ''">
  <ul>
    <li *for="let (todo, i) of todos.entries()">
      <input type="checkbox" :checked="todo.done" @change="toggleTodo(i)">
      <span *text="todo.text" :class="{ done: todo.done }"></span>
    </li>
  </ul>
</div>
```

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

### Select Element Data Binding

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/model/mod_test.html

Shows how to handle single and multiple select options and their synchronization with the model.

```javascript
// Model to value (set) select = document.querySelector("select") expect(select.value).toBe("bar") expect(document.querySelector("option[value=foo]").selected).toBe(false) expect(document.querySelector("option[value=bar]").selected).toBe(true) expect(document.querySelector("option[value=baz]").selected).toBe(false) // Value to model (set) select.value = "baz" select.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toBe("baz")) expect(document.querySelector("option[value=foo]").selected).toBe(false) expect(document.querySelector("option[value=bar]").selected).toBe(false) expect(document.querySelector("option[value=baz]").selected).toBe(true) // Value to model (reset) select.value = null select.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toBeUndefined()) expect(document.querySelector("option[value=foo]").selected).toBe(false) expect(document.querySelector("option[value=bar]").selected).toBe(false) expect(document.querySelector("option[value=baz]").selected).toBe(false) // Model to value (reset) select.value = "foo" context.value = null expect(document.querySelector("select").value).toBe("") context.value = ["bar", "baz"] // Model to value (set) select = document.querySelector("select") expect(select.value).toBe("bar") expect(document.querySelector("option[value=foo]").selected).toBe(false) expect(document.querySelector("option[value=bar]").selected).toBe(true) expect(document.querySelector("option[value=baz]").selected).toBe(true) // Value to model (set) select.value = "foo" select.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual(["foo"])) expect(document.querySelector("option[value=foo]").selected).toBe(true) expect(document.querySelector("option[value=bar]").selected).toBe(false) expect(document.querySelector("option[value=baz]").selected).toBe(false) // Value to model (set multiple) option = document.querySelector("option[value=bar]") option.selected = true select.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual(["foo", "bar"])) expect(document.querySelector("option[value=foo]").selected).toBe(true) expect(document.querySelector("option[value=bar]").selected).toBe(true) expect(document.querySelector("option[value=baz]").selected).toBe(false) // Value to model (reset) select.value = null select.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toEqual([])) expect(document.querySelector("option[value=foo]").selected).toBe(false) expect(document.querySelector("option[value=bar]").selected).toBe(false) expect(document.querySelector("option[value=baz]").selected).toBe(false) // Model to value (reset) select.value = "foo" context.value = null expect(document.querySelector("select").value).toBe("") context.value = "foo"
```

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

### Making HTTP Requests with %http

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/mod.html

The `%http` directive initiates a fetch call. It can be used with various modifiers to control request details and response handling. A `%response` directive is required to trigger the request.

```APIDOC
## %http directive

### Description
Initiates a `fetch()` call that can be handled by `%response` directives. Without a `%response` directive, the request won't be performed automatically. Use `%response.void` to trigger the request and ignore the response.

### Usage
`%http="url"`

### Notes
- A new request is triggered if the URL or its reference changes.
- Recommended for read-only operations due to potential for unpredictable request triggers.
- For endpoints with side effects, consider the `%@event` directive.
```

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

### Create element references with *ref

Source: https://context7.com/lowlighter/mizu/llms.txt

Use *ref to create programmatic access to elements. The .raw modifier can be used to skip expression evaluation.

```html
<!-- Basic reference -->
<input *ref="emailInput" type="email">
<button @click="$refs.emailInput.focus()">Focus Email</button>

<!-- Multiple references -->
<div *set="{ focusNext(current) { /* logic */ } }">
  <input *ref="field1" @keypress.keys[enter]="$refs.field2.focus()">
  <input *ref="field2" @keypress.keys[enter]="$refs.field3.focus()">
  <input *ref="field3">
</div>

<!-- Access element properties -->
<div *ref="container" data-config='{"limit": 10}'>
  <button @click="console.log(JSON.parse($refs.container.dataset.config))">
    Log Config
  </button>
</div>

<!-- Raw modifier (skip expression evaluation) -->
<input *ref.raw="myInput">
```

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

### Testing Context Value and Callbacks

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/test/mod_test.html

Tests the behavior of context value changes and callback invocations. Ensure context and testing utilities are properly set up.

```javascript
context.value = true
context.value = false
context.callback = fn()
document.querySelector("div").dispatchEvent(new Event("bar"))
expect(context.callback).not.toHaveBeenCalled()
```

```javascript
document.querySelector("div").dispatchEvent(new Event("foo"))
expect(context.callback).toHaveBeenCalled()
```

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

### Test Text Input Binding

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/model/mod_test.html

Demonstrates synchronization between a string model value and a standard text input element.

```javascript
context.value = "foo"  // Model to value (set) input = document.querySelector("input") expect(context.value).toBe("foo") expect(input.value).toBe("foo") // Value to model (set) input.value = "bar" input.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toBe("bar")) // Value to model (reset) input.value = null input.dispatchEvent(new Event("input")) await retry(() => expect(context.value).toBe("")) // Model to value (reset) context.value = null expect(document.querySelector("input").value).toBe("")
```

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

### Inspect Request URL Pathname

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/mod_test.html

Set the context URL and verify that the request object is an instance of Request and its URL pathname matches the expected value.

```javascript
context.url = "/foo"
expect(http.request).toBeInstanceOf(Request)
expect(new URL(http.request.url).pathname).toBe("/foo")
```

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

### Attaching Multiple Listeners with Shorthand

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/README.md

Illustrates how to attach multiple event listeners to a single element using the shorthand syntax '@ ="object"'. Modifiers applied at this level affect all listeners within the object.

```html
@ ="{ foo() {}, bar() {} }"
```

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

### Render HTML with ESM Client-Side Module

Source: https://context7.com/lowlighter/mizu/llms.txt

Use the ESM module for granular control over rendering, allowing custom context and configuration.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import Mizu from "https://mizu.sh/client.mjs"

    // Render with custom context
    await Mizu.render(document.body, {
      context: {
        user: { name: "Alice", role: "admin" },
        items: [
          { id: 1, title: "Task 1", done: false },
          { id: 2, title: "Task 2", done: true }
        ],
        toggleItem(id) {
          const item = this.items.find(i => i.id === id)
          if (item) item.done = !item.done
        }
      }
    })
  </script>
</head>
<body *mizu>
  <header>
    <span *text="`Welcome, ${user.name}!`"></span>
    <span *if="user.role === 'admin'" :class="{ badge: true }">Admin</span>
  </header>

  <ul>
    <li *for="let item of items" :class="{ completed: item.done }">
      <input type="checkbox" :checked="item.done" @change="toggleItem(item.id)">
      <span *text="item.title"></span>
    </li>
  </ul>
</body>
</html>
```

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

### Initialize storage elements

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/is/mod_test.html

Resets or assigns DOM elements to the storage object.

```javascript
storage.element = null storage.child = null
```

```javascript
storage.element = document.querySelector("div") storage.child = document.querySelector("a")
```

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

### Listen for events with %@event

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/event/mod.html

Defines an event listener on an element that also contains an %http directive.

```html
%@event="listener"
```

```html
%http="$event ? '/foo' : '/bar'"
```

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

### Syntax Highlighting with *code Directive

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/code/README.md

Use this directive to inject syntax-highlighted content into an element. It dynamically imports highlight.js and defaults to plaintext for unsupported languages.

```html
<code *code[ts]="'...'">
  <!--<span class="hljs-*">...</span>-->
</code>
```

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

### Attaching Listeners with Different Modifiers using Tags

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/event/README.md

Shows how to use tags like '[1]' and '[2]' to attach listeners with distinct modifiers to the same event on an element.

```html
@[1]="{}" @[1].prevent="{}
```

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

### Perform HTTP requests with %http

Source: https://context7.com/lowlighter/mizu/llms.txt

Use %http to perform fetch requests declaratively. Supports various response formats, status code handling, and event triggers.

```html
<!-- Basic GET request with HTML response -->
<div %http="'https://api.example.com/content'" %response.html>
  Loading...
</div>

<!-- JSON response handling -->
<div %http="'/api/users'" %response.json="users = $content">
  <ul>
    <li *for="let user of users" *text="user.name"></li>
  </ul>
</div>

<!-- POST request with body -->
<form %http.post="'/api/submit'"
      %body.json="{ name: formName, email: formEmail }"
      %response.json="result = $content">
  <input ::="formName" placeholder="Name">
  <input ::="formEmail" placeholder="Email">
  <button type="submit">Submit</button>
  <p *if="result" *text="result.message"></p>
</form>

<!-- Custom headers -->
<div %http="'/api/protected'"
     %header[Authorization]="'Bearer ' + token"
     %header[X-Custom]="'value'"
     %response.json>
</div>

<!-- Handle different status codes -->
<div %http="'/api/resource'"
     %response[2XX].json="data = $content"
     %response[4XX]="error = 'Client error: ' + $response.status"
     %response[5XX]="error = 'Server error'">
  <div *if="data" *text="JSON.stringify(data)"></div>
  <div *if="error" class="error" *text="error"></div>
</div>

<!-- Event-triggered requests -->
<button %http="'/api/action'" %@click.post.json="result = $content">
  Click to Fetch
</button>

<!-- Swap content -->
<div %http="'/api/partial'" %response.swap>
  Content will be replaced with response
</div>
```

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

### Define function

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/code/mod_test.html

Defines a function named foo that returns the string 'bar'.

```javascript
function foo() {
  return 'bar'
}
```

```javascript
`function foo() {           return 'bar'         }`
```

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

### Directive: set

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/set/mod.html

Sets context values for an element and its children, which persist across renderings.

```APIDOC
## Directive: *set="context"

### Description
Sets context values for an element and its children. The context is initialized once and persists across renderings, though it can be updated by other directives.

### Parameters
#### Request Body
- **context** (Object) - Required - A JavaScript Object containing the values to be set for the element scope.
```

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

### Inspect Response Status and Headers

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/mod_test.html

Verify that the response object is an instance of Response and check its status code and specific headers.

```javascript
expect(http.response).toBeInstanceOf(Response)
expect(http.response.status).toBe(Status.OK)
expect(http.response.headers.get("location")).toBeNull()
```

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

### Mizu Directive Event Handling

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/model/mod.html

Customize the event that triggers model updates using the `::` event listener. Recommended events are `input` or `change`.

```APIDOC
## Mizu Directive Event Handling

### Description
Allows customization of the event that triggers model updates.

### Event Binding
- **`::`**: Listens to the `::` event, which is always triggered after the model has been updated. This is recommended to avoid precedence issues with `@input` or `@change`.
- **`@event`**: You can specify the event that triggers the model update. Recommended events are `input` or `change`.

### Example Usage
```html
<!-- Using the default :: event -->
<input ::="model">

<!-- Explicitly binding to the 'input' event -->
<input @input="model" ::="model">

<!-- Explicitly binding to the 'change' event -->
<input @change="model" ::="model">
```
```

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

### Test Sequential Context State Transitions

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/event/mod_test.html

Verifies that context updates occur sequentially across multiple event dispatches.

```javascript
foo bar context.a = null context.b = nullrendered.querySelector("p").dispatchEvent(new Event("a")) await retry(() => { expect(context.a).toBe("foo") expect(context.b).toBeNull() rendered.querySelector("p").dispatchEvent(new Event("b")) }) await retry(() => { expect(context.a).toBe("foo") expect(context.b).toBe("bar") })
```

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

### Render HTML with IIFE Client-Side Script

Source: https://context7.com/lowlighter/mizu/llms.txt

Include the IIFE script to automatically render elements marked with the *mizu attribute using global window context.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://mizu.sh/client.js" defer></script>
</head>
<body>
  <main *mizu>
    <h1 *text="greeting">Loading...</h1>
    <p *if="showMessage">Welcome to mizu.js!</p>
    <ul>
      <li *for="let item of items" *text="item"></li>
    </ul>
  </main>

  <script>
    // Context is automatically available via window
    window.greeting = "Hello, World!"
    window.showMessage = true
    window.items = ["Apple", "Banana", "Cherry"]
  </script>
</body>
</html>
```

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

### %http Directive

Source: https://github.com/lowlighter/mizu/blob/main/@mizu/http/README.md

The %http directive performs a fetch() call. It requires a %response directive to handle the output.

```APIDOC
## %http="url"

### Description
Performs a fetch() call. The request is triggered when the element's reference or evaluated URL changes.

### Parameters
#### Path Parameters
- **url** (string) - Required - The target URL for the fetch request.

### Modifiers
- **.follow[boolean=true]** - Control redirection following.
- **.history[boolean]** - Update browser history.
- **.method[string]** - Set HTTP method.
- **.get, .head, .post, .put, .patch, .delete** - Aliases for HTTP methods.

### Request Example
<div %http="https://example.com">
  <!--...-->
</div>
```