### Initial Setup and Build Commands

Source: https://github.com/keroami/gleam-lustre/blob/main/example/README.md

Commands for installing dependencies, building the Gleam project, running the development server, and creating a production build.

```sh
npm install
gleam build
```

```sh
make dev
```

```sh
make
```

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

### Development Setup

Source: https://github.com/keroami/gleam-lustre/blob/main/README.md

Commands to set up the development environment for Lustre, including installing npm dependencies and starting the development server with code watching.

```sh
npm i
npm start
```

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

### Install Lustre Package

Source: https://github.com/keroami/gleam-lustre/blob/main/README.md

Instructions for adding the Lustre package to a Gleam project using `gleam add` and installing React dependencies from npm.

```sh
gleam add lustre
npm i react react-dom
```

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

### Gleam Lustre Application Example

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/index.html

Demonstrates the basic structure of a Gleam Lustre application, including state management, event handling, and rendering.

```gleam
import gleam/int
import lustre
import lustre/element.{ button, div, p, text }
import lustre/event.{ dispatch, on_click }

pub fn main () {
    let app = lustre.application(0, update, render)
    lustre.start(app, "#app")
}

type Action {
    Incr
    Decr
}

fn update (state, action) {
    case action {
        Incr -> state + 1
        Decr -> state - 1
    }
}

fn render (state) {
    div([])([
        p([text("Count: " ++ int.to_string(state))]),
        button([on_click(Decr)], [text("-")]),
        button([on_click(Incr)], [text("+")])
    ])
}
```

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

### App Constructor

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Construct an App from two exposed constructors: `basic` and `application`. These allow for setting up an application and deferring its start.

```gleam
pub opaque type App(state, action)
```

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

### Lustre Start Function

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Starts a Lustre application by mounting it to a specified DOM node using a CSS selector. If successful, it returns a dispatch function to send actions to the application's update loop.

```gleam
import lustre

pub fn main () {
    let app = lustre.appliation(init, update, render)
    assert Ok(dispatch) = lustre.start(app, "#root")

    dispatch(Incr)
    dispatch(Incr)
    dispatch(Incr)
}

```

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

### Gleam Lustre Application Example

Source: https://github.com/keroami/gleam-lustre/blob/main/README.md

This snippet demonstrates a basic Lustre application in Gleam. It sets up a simple counter with increment and decrement buttons. The application state is managed using a tuple of the state value and a command, with `update` and `render` functions defining the application's logic and UI.

```gleam
import gleam/int
import lustre
import lustre/element.{button, div, p, text}
import lustre/event.{on_click}
import lustre/cmd

pub fn main() {
  let app = lustre.application(#(0, cmd.none()), update, render)
  lustre.start(app, "#app")
}

pub type Action {
  Incr
  Decr
}

fn update(state, action) {
  case action {
    Incr -> #(state + 1, cmd.none())
    Decr -> #(state - 1, cmd.none())
  }
}

fn render(state) {
  div(
    [],
    [
      button([on_click(Decr)], [text("-")]),
      p([], [text(int.to_string(state))]),
      button([on_click(Incr)], [text("+")])
    ],
  )
}
```

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

### Lustre Application Constructor

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Constructs a Lustre application that allows returning a Cmd from init and update functions. Commands enable side effects like HTTP requests or timers, dispatching actions back to the runtime.

```gleam
import lustre
import lustre/cmd
import lustre/element

pub fn main () {
    let init = #(0, tick())
    let update = fn (state, action) {
        case action {
            Tick -> #(state + 1, tick())
        }
    }
    let render = fn (state) {
        element.div([], [
            element.text("Count is: ")
            element.text(state |> int.to_string |> element.text)
        ])
    }

    let app = lustre.simple(init, update, render)
    lustre.start(app, "#root")   
}

fn tick () -> Cmd(Action) {
    cmd.from(fn (dispatch) {
        setInterval(fn () {
            dispatch(Tick)
        }, 1000)
    })
}

external fn set_timeout (f: fn () -> a, delay: Int) -> Nil 
    = "" "window.setTimeout"

```

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

### Project Version Selector

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/index.html

Initializes a version selector for the project, allowing users to switch between different versions of the documentation.

```javascript
if ("undefined" !== typeof versionNodes) {
  const currentVersion = "v1.0.0";
  if (! versionNodes.find(element => element.version === currentVersion)) {
    versionNodes.unshift({ version: currentVersion, url: "#" });
  }
  document.querySelector("#project-version").innerHTML = versionNodes.reduce(
    (acc, element) => {
      const status = currentVersion === element.version ? "selected disabled" : "";
      return ` ${acc} <option value="${element.url}" ${status}> ${element.version} </option> `;
    },
    ` <form autocomplete="off"> <select onchange="window.location.href = this.value"> `
  ) + ` </select> <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg> </form> `;
}
```

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

### Lustre Simple Constructor

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Constructs a simple Lustre application that allows HTML elements to dispatch actions to update program state. This is useful when managing global state or when stateful elements become cumbersome.

```gleam
import gleam/int
import lustre
import lustre/element
import lustre/event.{ dispatch }

type Action {
    Incr
    Decr
}

pub fn main () {
    let init = 0
    let update = fn (state, action) {
        case action {
            Incr -> state + 1
            Decr -> state - 1
        }
    }
    let render = fn (state) {
        element.div([], [
            element.button([ event.on_click(dispatch(Decr)) ], [
                element.text("-")
            ]),
            element.text(state |> int.to_string |> element.text),
            element.button([ event.on_click(dispatch(Incr)) ], [
                element.text("+")
            ])
        ])
    }

    let app = lustre.simple(init, update, render)
    lustre.start(app, "#root")
}

```

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

### Cmd Functions API

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/cmd.html

API documentation for core functions operating on the Cmd type in gleam-lustre. Includes functions for creating, transforming, and converting Cmd instances.

```APIDOC
Cmd Functions:

from(cmd: fn(fn(a) -> Nil) -> Nil) -> Cmd(a)
  Creates a Cmd from a function.

map(cmd: Cmd(a), f: fn(a) -> b) -> Cmd(b)
  Maps a function over the value inside a Cmd.

none() -> Cmd(a)
  Returns an empty Cmd.

to_list(cmd: Cmd(a)) -> List(fn(fn(a) -> Nil) -> Nil)
  Converts a Cmd to a list of functions.
```

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

### Gleam Lustre Initialization

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Initializes Gleam Lustre options by applying settings from local storage or defaults. It updates body classes and calls callbacks based on the selected configuration.

```javascript
"use strict";
/* Initialise options before any content loads */
void function() {
  for (const property in gleamConfig) {
    const name = `Gleam.${property}`;
    let value;
    try {
      value = localStorage.getItem(name);
      if (value.startsWith('"') && value.endsWith('"')) {
        localStorage.setItem(name, value.slice(1, value.length - 1));
      }
    } catch (_error) {}
    const defaultValue = gleamConfig[property].values[0].value;
    try {
      value = localStorage.getItem(name);
    } catch(_error) {}
    if (-1 < [null, undefined].indexOf(value)) {
      value = defaultValue;
    }
    const bodyClasses = document.body.classList;
    bodyClasses.remove(`${property}-${defaultValue}`);
    bodyClasses.add(`${property}-${value}`);
    try {
      gleamConfig[property].callback(value);
    } catch(_error) {}
  }
}();

```

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

### Gleam Cmd API

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/cmd.html

API documentation for Gleam's command module. It defines the opaque type 'Cmd' for actions and provides functions for batching commands and creating commands from other types.

```APIDOC
lustre/cmd - lustre

Types
=====

Cmd
---

[</>](https://github.com/hayleigh-dot-dev/gleam-lustre/blob/v1.0.0/src/lustre/cmd.gleam#L7-L7 "View Source")

    pub opaque type Cmd(action)

Functions
=========

batch
-----

[</>](https://github.com/hayleigh-dot-dev/gleam-lustre/blob/v1.0.0/src/lustre/cmd.gleam#L24-L24 "View Source")

    pub fn batch(cmds: List(Cmd(a))) -> Cmd(a)

from
----

[</>](https://github.com/hayleigh-dot-dev/gleam-lustre/blob/v1.0.0/src/lustre/cmd.gleam#L36-L36 "View Source")

    pub fn from(f: fn() -> a) -> Cmd(a)

map
---

[</>](https://github.com/hayleigh-dot-dev/gleam-lustre/blob/v1.0.0/src/lustre/cmd.gleam#L47-L47 "View Source")

    pub fn map(cmd: Cmd(a), f: fn(a) -> b) -> Cmd(b)

none
----

[</>](https://github.com/hayleigh-dot-dev/gleam-lustre/blob/v1.0.0/src/lustre/cmd.gleam#L57-L57 "View Source")

    pub fn none() -> Cmd(a)

to_list
--------

[</>](https://github.com/hayleigh-dot-dev/gleam-lustre/blob/v1.0.0/src/lustre/cmd.gleam#L68-L68 "View Source")

    pub fn to_list(cmd: Cmd(a)) -> List(a)
```

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

### Initialise Options

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/cmd.html

JavaScript code to initialize options based on the gleamConfig. It iterates through defined properties, retrieves values from localStorage, applies default values if necessary, updates body classes, and executes associated callbacks.

```javascript
"use strict"; /* Initialise options before any content loads */ void function() { for (const property in gleamConfig) { const name = `Gleam.${property}`; let value; try { value = localStorage.getItem(name); if (value.startsWith('"') && value.endsWith('"')) { localStorage.setItem(name, value.slice(1, value.length - 1)); } } catch (_error) {} const defaultValue = gleamConfig[property].values[0].value; try { value = localStorage.getItem(name); } catch(_error) {} if (-1 < [null, undefined].indexOf(value)) { value = defaultValue; } const bodyClasses = document.body.classList; bodyClasses.remove(`${property}-${defaultValue}`); bodyClasses.add(`${property}-${value}`); try { gleamConfig[property].callback(value); } catch(_error) {} } }();
```

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

### Initialize Lustre Playground

Source: https://github.com/keroami/gleam-lustre/blob/main/test/playground/index.html

Initializes the Lustre Playground application by importing the main module and attaching an event listener for DOMContentLoaded.

```javascript
import { main } from 'playground/main.mjs'
document.addEventListener('DOMContentLoaded', main)
```

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

### Theme and Prewrap Configuration

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/cmd.html

JavaScript configuration object for managing theme (dark/light) and prewrap (line wrapping) settings. It includes logic to apply settings to the document body, update localStorage, and trigger callbacks for theme changes, including syntax highlighting updates.

```javascript
"use strict"; /* gleamConfig format: * // object with one or more options * {option: { * // array of values * values: [ { * // this value * value: \"off\", * // optional button label * label: \"default\", * // optional array of icons * icons: [\"star\", \"toggle-left\", ...\], * }, ...\], * * // value update function * update: () => {...}, * * // optional callback function * callback: (value) => {...}, * }, ...}; */ const gleamConfig = { theme: { values: (() => { const dark = { value: \"dark\", label: \"Switch to light mode\", icons: [\"moon\"] }; const light = { value: \"light\", label: \"Switch to dark mode\", icons: [\"sun\"] }; return ( window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? [dark, light] : [light, dark] ).map((item, index) => { item.icons.push(`toggle-${0 === index ? \"left\" : \"right\"}`); return item; }); })(), update: () => \"light\" === Gleam.getProperty(\"theme\") ? \"dark\" : \"light\", callback: function(value) { const syntaxThemes = { dark: \"atom-one-dark\", light: \"atom-one-light\", }; const syntaxTheme = document.querySelector(\"#syntax-theme\"); const hrefParts = syntaxTheme.href.match( /^(.*?)([^/\\#?]+)((?:\.min)?\.css.*)$/i ); if (syntaxThemes[value] !== hrefParts[2]) { hrefParts[2] = syntaxThemes[value]; hrefParts.shift(); syntaxTheme.href = hrefParts.join(\"\"); } }, }, prewrap: { values: [ { value: \"off\", label: \"Switch to line-wrapped snippets\", icons: [\"more-horizontal\", \"toggle-left\"] }, { value: \"on\", label: \"Switch to non-wrapped snippets\", icons: [\"more-vertical\", \"toggle-right\"] }, ], update: () => \"off\" === Gleam.getProperty(\"prewrap\") ? \"on\" : \"off\", }, };
```

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

### Lustre Configuration Object

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/index.html

Defines the configuration options for Lustre, including theme and prewrap settings, with associated update and callback functions.

```javascript
const gleamConfig = {
  theme: {
    values: (() => {
      const dark = { value: "dark", label: "Switch to light mode", icons: ["moon"], };
      const light = { value: "light", label: "Switch to dark mode", icons: ["sun"], };
      return ( window.matchMedia("(prefers-color-scheme: dark)").matches ? [dark, light] : [light, dark] ).map((item, index) => {
        item.icons.push(`toggle-${0 === index ? "left" : "right"}`);
        return item;
      });
    })(),
    update: () => "light" === Gleam.getProperty("theme") ? "dark" : "light",
    callback: function(value) {
      const syntaxThemes = {
        dark: "atom-one-dark",
        light: "atom-one-light",
      };
      const syntaxTheme = document.querySelector("#syntax-theme");
      const hrefParts = syntaxTheme.href.match( /^(.*?)([^/\\#?]+)((?:\.min)?\.css.*)$/i );
      if (syntaxThemes[value] !== hrefParts[2]) {
        hrefParts[2] = syntaxThemes[value];
        hrefParts.shift();
        syntaxTheme.href = hrefParts.join("");
      }
    },
  },
  prewrap: {
    values: [
      { value: "off", label: "Switch to line-wrapped snippets", icons: ["more-horizontal", "toggle-left"], },
      { value: "on", label: "Switch to non-wrapped snippets", icons: ["more-vertical", "toggle-right"], },
    ],
    update: () => "off" === Gleam.getProperty("prewrap") ? "on" : "off",
  },
};

void function() {
  for (const property in gleamConfig) {
    const name = `Gleam.${property}`;
    let value;
    try {
      value = localStorage.getItem(name);
      if (value.startsWith('"') && value.endsWith('"')) {
        localStorage.setItem(name, value.slice(1, value.length - 1));
      }
    } catch (_error) {}
    const defaultValue = gleamConfig[property].values[0].value;
    try {
      value = localStorage.getItem(name);
    } catch(_error) {}
    if (-1 < [null, undefined].indexOf(value)) {
      value = defaultValue;
    }
    const bodyClasses = document.body.classList;
    bodyClasses.remove(`${property}-${defaultValue}`);
    bodyClasses.add(`${property}-${value}`);
    try {
      gleamConfig[property].callback(value);
    } catch(_error) {}
  }
}();
```

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

### Gleam Configuration for Theme and Pre-wrap

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

This JavaScript code defines configuration options for the Gleam framework, specifically for theme switching (dark/light) and pre-wrap settings for code display. It includes logic for determining the initial theme based on system preferences and updating the theme with a callback function that modifies syntax highlighting. The pre-wrap setting toggles between line-wrapped and non-wrapped code views.

```javascript
const gleamConfig = {
  theme: {
    values: (() => {
      const dark = { value: "dark", label: "Switch to light mode", icons: ["moon"], };
      const light = { value: "light", label: "Switch to dark mode", icons: ["sun"], };
      return ( window.matchMedia("(prefers-color-scheme: dark)").matches ? [dark, light] : [light, dark] ).map((item, index) => {
        item.icons.push(`toggle-${0 === index ? "left" : "right"}`);
        return item;
      });
    })(),
    update: () => "light" === Gleam.getProperty("theme") ? "dark" : "light",
    callback: function(value) {
      const syntaxThemes = {
        dark: "atom-one-dark",
        light: "atom-one-light",
      };
      const syntaxTheme = document.querySelector("#syntax-theme");
      const hrefParts = syntaxTheme.href.match( /^(.*?)([^/\\#?]+)((?:\.min)?\.css.*)$/i );
      if (syntaxThemes[value] !== hrefParts[2]) {
        hrefParts[2] = syntaxThemes[value];
        hrefParts.shift();
        syntaxTheme.href = hrefParts.join("");
      }
    },
  },
  prewrap: {
    values: [
      { value: "off", label: "Switch to line-wrapped snippets", icons: ["more-horizontal", "toggle-left"], },
      { value: "on", label: "Switch to non-wrapped snippets", icons: ["more-vertical", "toggle-right"], },
    ],
    update: () => "off" === Gleam.getProperty("prewrap") ? "on" : "off",
  },
};
```

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

### Initialise Gleam Options

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

This JavaScript code initializes Gleam options by iterating through the `gleamConfig` object. It retrieves values from local storage, applies default values if none are found, updates the body classes based on the selected option, and executes a callback function for each option. This ensures that the Gleam framework's settings are correctly applied on page load.

```javascript
void function() {
  for (const property in gleamConfig) {
    const name = `Gleam.${property}`;
    let value;
    try {
      value = localStorage.getItem(name);
      if (value.startsWith('"') && value.endsWith('"')) {
        localStorage.setItem(name, value.slice(1, value.length - 1));
      }
    } catch (_error) {}
    const defaultValue = gleamConfig[property].values[0].value;
    try {
      value = localStorage.getItem(name);
    } catch(_error) {}
    if (-1 < [null, undefined].indexOf(value)) {
      value = defaultValue;
    }
    const bodyClasses = document.body.classList;
    bodyClasses.remove(`${property}-${defaultValue}`);
    bodyClasses.add(`${property}-${value}`);
    try {
      gleamConfig[property].callback(value);
    } catch(_error) {}
  }
}();
```

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

### Gleam Lustre Configuration

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Defines the configuration object for Gleam Lustre, including theme and pre-wrap settings. It specifies values, update logic, and callback functions for these settings.

```javascript
"use strict";
/* gleamConfig format: */
/* // object with one or more options */
/* {option: { */
/* // array of values */
/* values: [*/
/*   { */
/*     // this value */
/*     value: "off", */
/*     // optional button label */
/*     label: "default", */
/*     // optional array of icons */
/*     icons: ["star", "toggle-left", ...], */
/*   }, ...*/
/* }, */
/* */
/* // value update function */
/* update: () => {...}, */
/* */
/* // optional callback function */
/* callback: (value) => {...}, */
/* }, ...*/
/* }; */
const gleamConfig = {
  theme: {
    values: (() => {
      const dark = {
        value: "dark",
        label: "Switch to light mode",
        icons: ["moon"],
      };
      const light = {
        value: "light",
        label: "Switch to dark mode",
        icons: ["sun"],
      };
      return (window.matchMedia("(prefers-color-scheme: dark)").matches ? [dark, light] : [light, dark]).map((item, index) => {
        item.icons.push(`toggle-${0 === index ? "left" : "right"}`);
        return item;
      });
    })(),
    update: () => "light" === Gleam.getProperty("theme") ? "dark" : "light",
    callback: function(value) {
      const syntaxThemes = {
        dark: "atom-one-dark",
        light: "atom-one-light",
      };
      const syntaxTheme = document.querySelector("#syntax-theme");
      const hrefParts = syntaxTheme.href.match(/^(.*?)([^/\\#?]+)((?:\.min)?\.css.*)$/i);
      if (syntaxThemes[value] !== hrefParts[2]) {
        hrefParts[2] = syntaxThemes[value];
        hrefParts.shift();
        syntaxTheme.href = hrefParts.join("");
      }
    },
  },
  prewrap: {
    values: [
      {
        value: "off",
        label: "Switch to line-wrapped snippets",
        icons: ["more-horizontal", "toggle-left"],
      },
      {
        value: "on",
        label: "Switch to non-wrapped snippets",
        icons: ["more-vertical", "toggle-right"],
      },
    ],
    update: () => "off" === Gleam.getProperty("prewrap") ? "on" : "off",
  },
};

```

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

### Gleam Configuration Object

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/attribute.html

Defines the configuration structure for Gleam, including theme and prewrap options. It specifies values, update logic, and callback functions for each option. The theme option includes logic to set the correct syntax theme based on user preference or system settings.

```javascript
const gleamConfig = {
  theme: {
    values: (() => {
      const dark = { value: "dark", label: "Switch to light mode", icons: ["moon"], };
      const light = { value: "light", label: "Switch to dark mode", icons: ["sun"], };
      return ( window.matchMedia("(prefers-color-scheme: dark)").matches ? [dark, light] : [light, dark] ).map((item, index) => {
        item.icons.push(`toggle-${0 === index ? "left" : "right"}`);
        return item;
      });
    })(),
    update: () => "light" === Gleam.getProperty("theme") ? "dark" : "light",
    callback: function(value) {
      const syntaxThemes = {
        dark: "atom-one-dark",
        light: "atom-one-light",
      };
      const syntaxTheme = document.querySelector("#syntax-theme");
      const hrefParts = syntaxTheme.href.match( /^(.*?)([^/\\#?]+)((?:\.min)?\.css.*)$/i );
      if (syntaxThemes[value] !== hrefParts[2]) {
        hrefParts[2] = syntaxThemes[value];
        hrefParts.shift();
        syntaxTheme.href = hrefParts.join("");
      }
    },
  },
  prewrap: {
    values: [
      { value: "off", label: "Switch to line-wrapped snippets", icons: ["more-horizontal", "toggle-left"], },
      { value: "on", label: "Switch to non-wrapped snippets", icons: ["more-vertical", "toggle-right"], },
    ],
    update: () => "off" === Gleam.getProperty("prewrap") ? "on" : "off",
  },
};
```

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

### Lustre Element Constructor

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Creates a basic Lustre application that renders a single element. This is suitable for simpler UIs without global state management, though stateful elements can be used for local component state.

```gleam
import lustre
import lustre/element

pub fn main () {
    let app = lustre.element(
        element.h1([], [
            element.text("Hello, world!") 
        ])
    )

    lustre.start(app, "#root")
}

```

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

### Gleam Configuration and Initialization

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/event.html

Defines the configuration object for Gleam, including theme and pre-wrap settings. It also includes an immediately invoked function expression (IIFE) to initialize options by reading from localStorage, applying default values, and updating the body classes and callbacks accordingly.

```javascript
"use strict"; /* gleamConfig format: * // object with one or more options * {option: { * // array of values * values: [{ * // this value * value: \"off\", * // optional button label * label: \"default\", * // optional array of icons * icons: [\"star\", \"toggle-left\", ...], * }, ...], * * // value update function * update: () => {...}, * * // optional callback function * callback: (value) => {...}, * }, ...}; */ const gleamConfig = { theme: { values: (() => { const dark = { value: \"dark\", label: \"Switch to light mode\", icons: [\"moon\"] }; const light = { value: \"light\", label: \"Switch to dark mode\", icons: [\"sun\"] }; return ( window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? [dark, light] : [light, dark] ).map((item, index) => { item.icons.push(`toggle-${0 === index ? \"left\" : \"right\"}`); return item; }); })(), update: () => \"light\" === Gleam.getProperty(\"theme\") ? \"dark\" : \"light\", callback: function(value) { const syntaxThemes = { dark: \"atom-one-dark\", light: \"atom-one-light\", }; const syntaxTheme = document.querySelector(\"#syntax-theme\"); const hrefParts = syntaxTheme.href.match( /^(.*?)([^/\\#?]+?)((?:\.min)?\.css.*)$/i ); if (syntaxThemes[value] !== hrefParts[2]) { hrefParts[2] = syntaxThemes[value]; hrefParts.shift(); syntaxTheme.href = hrefParts.join(\"\"); } }, }, prewrap: { values: [ { value: \"off\", label: \"Switch to line-wrapped snippets\", icons: [\"more-horizontal\", \"toggle-left\"] }, { value: \"on\", label: \"Switch to non-wrapped snippets\", icons: [\"more-vertical\", \"toggle-right\"] }, ], update: () => \"off\" === Gleam.getProperty(\"prewrap\") ? \"on\" : \"off\", }, }; "use strict"; /* Initialise options before any content loads */ void function() { for (const property in gleamConfig) { const name = `Gleam.${property}`; let value; try { value = localStorage.getItem(name); if (value.startsWith('\"') && value.endsWith('\"')) { localStorage.setItem(name, value.slice(1, value.length - 1)); } } catch (_error) {} const defaultValue = gleamConfig[property].values[0].value; try { value = localStorage.getItem(name); } catch(_error) {} if (-1 < [null, undefined].indexOf(value)) { value = defaultValue; } const bodyClasses = document.body.classList; bodyClasses.remove(`${property}-${defaultValue}`); bodyClasses.add(`${property}-${value}`); try { gleamConfig[property].callback(value); } catch(_error) {} } }();
```

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

### Version Selector Initialization

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/cmd.html

JavaScript code to populate a version selector dropdown. It checks if the current version is already listed and inserts it if not. The dropdown allows users to navigate to different project versions.

```javascript
if ("undefined" !== typeof versionNodes) { const currentVersion = "v1.0.0"; if (! versionNodes.find(element => element.version === currentVersion)) { versionNodes.unshift({ version: currentVersion, url: "#" }); } document.querySelector("#project-version").innerHTML = versionNodes.reduce( (acc, element) => { const status = currentVersion === element.version ? "selected disabled" : ""; return ` ${acc} <option value="${element.url}" ${status}> ${element.version} </option> `; }, ` <form autocomplete="off"> <select onchange="window.location.href = this.value"> ` ) + ` </select> <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg> </form> `; }
```

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

### Gleam Lustre samp Function

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a samp element, used to represent sample output from a computer program. It takes attributes and child elements.

```gleam
pub fn samp(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Project Version Selector

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/attribute.html

Dynamically creates a project version selector dropdown. It populates the dropdown with available versions from `versionNodes` and allows users to navigate to a selected version by changing the window location. The current version is marked as selected and disabled.

```javascript
if ("undefined" !== typeof versionNodes) {
  const currentVersion = "v1.0.0";
  if (! versionNodes.find(element => element.version === currentVersion)) {
    versionNodes.unshift({ version: currentVersion, url: "#" });
  }
  document.querySelector("#project-version").innerHTML = versionNodes.reduce(
    (acc, element) => {
      const status = currentVersion === element.version ? "selected disabled" : "";
      return ` ${acc} <option value="${element.url}" ${status}> ${element.version} </option> `;
    },
    ` <form autocomplete="off"> <select onchange="window.location.href = this.value">`
  ) + ` </select> <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg> </form> `;
}
```

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

### Project Version Selector

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre.html

Dynamically generates a project version selector dropdown using provided version nodes. It allows users to navigate to different project versions.

```html
[lustre](./) - v1.0.0 "use strict";
if ("undefined" !== typeof versionNodes) {
  const currentVersion = "v1.0.0";
  if (! versionNodes.find(element => element.version === currentVersion)) {
    versionNodes.unshift({ version: currentVersion, url: "#" });
  }
  document.querySelector("#project-version").innerHTML = versionNodes.reduce(
    (acc, element) => {
      const status = currentVersion === element.version ? "selected disabled" : "";
      return ` ${acc} <option value="${element.url}" ${status}> ${element.version} </option> `;
    },
    ` <form autocomplete="off"> <select onchange="window.location.href = this.value"> `
  ) + 
  ` </select> <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg> </form> `;
}

```

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

### Project Version Selector

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/event.html

Handles the display and selection of project versions. It checks if the current version is already in the list of available versions and adds it if not. It then populates a dropdown menu with version options, allowing users to navigate to different versions of the project.

```javascript
[lustre](../) - v1.0.0 "use strict"; if ("undefined" !== typeof versionNodes) { const currentVersion = "v1.0.0"; if (! versionNodes.find(element => element.version === currentVersion)) { versionNodes.unshift({ version: currentVersion, url: "#" }); } document.querySelector("#project-version").innerHTML = versionNodes.reduce( (acc, element) => { const status = currentVersion === element.version ? "selected disabled" : ""; return ` ${acc} <option value="${element.url}" ${status}> ${element.version} </option> `; }, ` <form autocomplete="off"> <select onchange="window.location.href = this.value"> ` ) + ` </select> <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg> </form> `; }
```

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

### Gleam Element Creation Functions

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Provides functions to create various HTML elements. These functions abstract the process of building elements with attributes and child elements.

```gleam
pub fn title(attributes: List(Attribute(a)), name: String) -> Element(
  a,
)
```

```gleam
pub fn tr(attributes: List(Attribute(a)), children: List(
    Element(a),
  )) -> Element(a)
```

```gleam
pub fn track(attributes: List(Attribute(a)), children: List(
    Element(a),
  )) -> Element(a)
```

```gleam
pub fn u(attributes: List(Attribute(a)), children: List(
    Element(a),
  )) -> Element(a)
```

```gleam
pub fn ul(attributes: List(Attribute(a)), children: List(
    Element(a),
  )) -> Element(a)
```

```gleam
pub fn var_(attributes: List(Attribute(a)), children: List(
    Element(a),
  )) -> Element(a)
```

```gleam
pub fn video(attributes: List(Attribute(a)), children: List(
    Element(a),
  )) -> Element(a)
```

```gleam
pub fn wbr(attributes: List(Attribute(a))) -> Element(a)
```

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

### Gleam Lustre Element Creation Functions

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Provides functions for creating various HTML elements. Each function typically takes a list of attributes and a list of children (if applicable) to construct an Element. The `node` function is a general-purpose element creator, while others are specific to HTML tags.

```gleam
pub fn input(attributes: List(Attribute(a))) -> Element(a)

pub fn ins(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn kbd(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn label(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn legend(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn li(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn main(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn map_(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn mark(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn mathml(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn menu(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn meta(attributes: List(Attribute(a))) -> Element(a)

pub fn meter(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn nav(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn noscript(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn object(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)

pub fn ol(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Lustre Summary Element

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a `<summary>` HTML element with specified attributes and children. Used within `<details>` elements.

```gleam
pub fn summary(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Version Selector

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

This JavaScript code dynamically generates a version selector dropdown for the Gleam project. It checks if a `versionNodes` array exists and adds the current version if it's not already present. The code then populates a `<select>` element with options for different project versions, allowing users to navigate to specific versions by changing the selection. A visual indicator (SVG icon) is also included.

```javascript
if ("undefined" !== typeof versionNodes) {
  const currentVersion = "v1.0.0";
  if (! versionNodes.find(element => element.version === currentVersion)) {
    versionNodes.unshift({ version: currentVersion, url: "#" });
  }
  document.querySelector("#project-version").innerHTML = versionNodes.reduce(
    (acc, element) => {
      const status = currentVersion === element.version ? "selected disabled" : "";
      return ` ${acc} <option value="${element.url}" ${status}> ${element.version} </option> `;
    },
    ` <form autocomplete="off"> <select onchange="window.location.href = this.value"> `
  ) + 
  ` </select> <svg class="icon icon-chevrons-down"><use xlink:href="#icon-chevrons-down"></use></svg> </form> `;
}
```

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

### Gleam Lustre param Function

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a param element, used to provide parameter values for objects like applets. It takes attributes and child elements.

```gleam
pub fn param(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Component Rendering

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/index.html

This Gleam code defines a `render` function that creates a UI component. It uses `div`, `button`, and `p` elements, and handles click events by dispatching actions (`Incr`, `Decr`). This snippet is intended for browser execution via Gleam's JavaScript FFI.

```gleam
fn render (state) {
    div([], [
        button([ on_click(dispatch(Decr)) ], [ text("-") ]),
        p([], [ text(int.to_string(state)) ]),
        button([ on_click(dispatch(Incr)) ], [ text("+") ])
    ])
}
```

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

### Create dl Element

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a 'dl' (description list) element with specified attributes and children. This function is part of the gleam-lustre library for HTML generation.

```gleam
pub fn dl(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Lustre source Function

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a source element, used within picture or video/audio elements to specify media sources. It takes attributes.

```gleam
pub fn source(attributes: List(Attribute(a))) -> Element(a)
```

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

### Initialize Gleam Options

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/attribute.html

Initializes Gleam options by reading from localStorage and applying default values if necessary. It updates the body classes based on the selected option and executes a callback function for each property. This ensures that user preferences are persisted and applied correctly.

```javascript
void function() {
  for (const property in gleamConfig) {
    const name = `Gleam.${property}`;
    let value;
    try {
      value = localStorage.getItem(name);
      if (value.startsWith('"') && value.endsWith('"')) {
        localStorage.setItem(name, value.slice(1, value.length - 1));
      }
    } catch (_error) {}
    const defaultValue = gleamConfig[property].values[0].value;
    try {
      value = localStorage.getItem(name);
    } catch(_error) {}
    if (-1 < [null, undefined].indexOf(value)) {
      value = defaultValue;
    }
    const bodyClasses = document.body.classList;
    bodyClasses.remove(`${property}-${defaultValue}`);
    bodyClasses.add(`${property}-${value}`);
    try {
      gleamConfig[property].callback(value);
    } catch(_error) {}
  }
}();
```

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

### JavaScript Module Import with Shim

Source: https://github.com/keroami/gleam-lustre/blob/main/test/example/index.html

This snippet demonstrates how to dynamically create and append a script tag to the DOM. It's used to import a module shim from a CDN, bypassing Parcel's limitations with HTTPS imports and module type attributes.

```javascript
import { main } from 'example/main.mjs'
document.addEventListener('DOMContentLoaded', main)

document.querySelector('head').appendChild((() => {
  const script = document.createElement('script')
  script.type = 'module'
  script.innerHTML = `import 'https://cdn.skypack.dev/twind/shim'`
  return script
})())
```

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

### Gleam Lustre Sup Element

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a `<sup>` HTML element with specified attributes and children. Used for superscripted text.

```gleam
pub fn sup(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Lustre Template Element

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a `<template>` HTML element with specified attributes and children. Used for client-side content that is not rendered immediately.

```gleam
pub fn template(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Lustre select Function

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a select element, allowing users to choose from a list of options. It takes attributes and child elements.

```gleam
pub fn select(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Gleam Lustre Textarea Element

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a `<textarea>` HTML element with specified attributes. Used for multi-line text input.

```gleam
pub fn textarea(attributes: List(Attribute(a))) -> Element(a)
```

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

### HTML Element Functions

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Provides functions for creating various HTML elements. Each function accepts a list of attributes and optionally a list of child elements.

```gleam
pub external type Element(action)

pub fn a(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn abbr(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn address(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn area(attributes: List(Attribute(a))) -> Element(a)
pub fn article(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn aside(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn audio(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn b(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn base(attributes: List(Attribute(a))) -> Element(a)
pub fn bdi(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn bdo(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
pub fn blockquote(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```

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

### Create details Element

Source: https://github.com/keroami/gleam-lustre/blob/main/docs/lustre/element.html

Creates a 'details' element with specified attributes and children. This function is part of the gleam-lustre library for HTML generation.

```gleam
pub fn details(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a)
```