### Bootstrapping React Application - index.js

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-28-unreasonable-effectiveness-of-vanilla-js/index.html

This snippet shows the standard entry point for a React application. It imports the stylesheet, initializes the React root, and renders the main `App` component into the DOM element with the ID 'root'. This is the typical setup for a React project.

```JavaScript
import './styles.css';
import { createRoot } from 'react-dom/client';
import App from './App.js';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
```

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

### Defining a Custom Element Constructor (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This snippet shows the start of a custom element's constructor. The constructor is invoked exactly once when the element is created, making it the ideal place to perform initial setup like attaching a Shadow DOM. It typically begins with a call to super() to invoke the parent HTMLElement constructor.

```JavaScript
constructor() {
```

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

### Styling Custom Elements with CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/observer/example.html

Defines basic CSS styles for the document body and the `x-wall` custom element, ensuring proper display and spacing for the custom components.

```css
body { font-family: system-ui, sans-serif; margin: 1em; }
x-wall { display: block; margin-bottom: 1em; }
```

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

### Vanilla JS Port of Preact Signals Example - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-30-poor-mans-signals/index.html

This example demonstrates the combined use of `signal` and `computed` to replicate a common pattern from Preact's signals. It shows how a `count` signal can drive a `doubled` computed signal, with effects logging their values as they change, illustrating reactive updates.

```JavaScript
const count = signal(0);
const doubled = computed(() => count.value * 2, [count]);

count.effect(() => console.log('Count:', count.value));
doubled.effect(() => console.log('Doubled:', doubled.value));

count.value++;
count.value++;
count.value++;
```

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

### Running Static Website with Node.js HTTP Server

Source: https://github.com/jsebrech/plainvanilla/blob/main/README.md

This command uses `npx` to execute `http-server`, a simple static file server, to serve the `public/` directory. The `-c-1` option disables caching. It's a quick way to get a local development server running without complex configurations.

```Shell
npx http-server public -c-1
```

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

### Installing ESLint Globally for Vanilla JS Projects

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-20-editing-plain-vanilla/index.html

This command globally installs ESLint along with its core JavaScript rules and the `globals` package. This allows ESLint to be reused across multiple vanilla JavaScript projects without per-project installation, serving as a prerequisite for VS Code's ESLint extension.

```Shell
npm install -g eslint @eslint/js globals
```

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

### Running Static Website with Python HTTP Server

Source: https://github.com/jsebrech/plainvanilla/blob/main/README.md

This command starts a simple HTTP server using Python's `http.server` module. It serves files from the `public/` directory on port `8000`. The `--directory` option ensures the server serves content from the specified path, making it ideal for quick static site hosting.

```Shell
python3 -m http.server 8000 --directory public
```

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

### Nested Context Providers and Subscriber - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-07-needs-more-context/index.html

This HTML example illustrates the use of multiple context providers, demonstrating how a subscriber receives context from the nearest provider. A global `context-provider` on the `body` sets a default 'dark' theme, while a nested `context-provider` within a panel overrides it with a 'light' theme for its children. This showcases context overriding and scope.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>Nested Context Example</title>
  <script src="my-subscriber.js"></script>
  <script src="context-provider.js"></script>
  <script src="theme-toggle.js"></script>
  <style>
    body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px;
    }
    .panel {
      border: 1px solid #ccc;
      padding: 15px;
    }
  </style>
</head>
<body>
  <context-provider key="theme-toggle" value="dark"></context-provider>
  <div class="panel">
    <h2>Global Theme (Dark)</h2>
    <my-subscriber></my-subscriber>
  </div>
  <div class="panel">
    <h2>Local Theme (Light)</h2>
    <context-provider key="theme-toggle" value="light">
      <my-subscriber></my-subscriber>
    </context-provider>
  </div>
</body>
</html>
```

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

### Using Context Protocol Elements in HTML - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-07-needs-more-context/index.html

This HTML example demonstrates how to use the previously defined custom elements (`theme-toggle` and `my-subscriber`) on a web page. It includes the necessary JavaScript files for the custom element definitions. The `my-subscriber` element will automatically request the 'theme-toggle' context provided by `theme-toggle`, illustrating the end-to-end context communication.

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>Context Protocol Example</title>
  <script src="my-subscriber.js"></script>
  <script src="context-provider.js"></script>
  <script src="theme-toggle.js"></script>
</head>
<body>
  <theme-toggle></theme-toggle>
  <my-subscriber></my-subscriber>
</body>
</html>
```

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

### HTML Page Integrating imports.js and Custom Element (HTML/JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This HTML example illustrates how to integrate the `imports.js` file into a web page. It loads UMD libraries via standard script tags, imports `imports.js` as a module, and defines a custom `<x-metrics>` web component that consumes the `dayjs` and `web-vitals` exports to display dynamic content and log performance metrics.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Metrics Page</title>
  <script src="/lib/dayjs/dayjs.min.js"></script>
  <script src="/lib/dayjs/relativeTime.js"></script>
  <script type="module" src="/lib/imports.js"></script>
</head>
<body>
  <x-metrics></x-metrics>
  <script type="module">
    import { dayjs, getCLS, getFID, getLCP } from '/lib/imports.js';

    class XMetrics extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
                      <h1>Metrics</h1>
                      <p>Current time: ${dayjs().format('YYYY-MM-DD HH:mm:ss')}</p>
                      <p>Time from now: ${dayjs().add(1, 'day').fromNow()}</p>
                    `;

        getCLS(console.log);
        getFID(console.log);
        getLCP(console.log);
      }
    }

    customElements.define('x-metrics', XMetrics);
  </script>
</body>
</html>
```

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

### Adding x-bottle to x-wall - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/observer/example.html

Defines a global JavaScript function `add` that creates a new `x-bottle` element and appends it to the `x-wall` element. This action automatically triggers the `MutationObserver` on `x-wall`, updating the displayed bottle count.

```javascript
function add() {
  document.querySelector('x-wall').append(
    document.createElement('x-bottle'));
}
```

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

### Structuring CSS with @import (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/styling.html

This example demonstrates how to use the `@import` rule in a main CSS file (e.g., `index.css`) to organize and load other stylesheets. This approach helps manage CSS complexity by separating concerns into distinct files like resets, variables, global styles, and component-specific styles.

```CSS
@import "./styles/reset.css";
@import "./styles/variables.css";
@import "./styles/global.css";
@import "./components/x-header/x-header.css";
@import "./components/x-avatar/x-avatar.css";
@import "./components/x-footer/x-footer.css";
```

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

### Initial State of Custom Elements in HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/shadowed/example.html

This HTML snippet shows the initial rendering of the `x-shadowed` and `x-shadowed-later` custom elements before their JavaScript definitions are applied or their shadow DOMs are attached, indicating they are currently undefined and not shadowed.

```html
<x-shadowed>: undefined, not shadowed

<x-shadowed-later>: undefined, not shadowed
```

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

### Styling Custom Elements with CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/shadowed/example.html

This CSS snippet provides basic styling for the document body and sets a background color for the `x-shadowed` and `x-shadowed-later` custom elements when they are not yet shadowed or have their default styling.

```css
body { font-family: system-ui, sans-serif; margin: 1em; } x-shadowed, x-shadowed-later { background-color: lightgray; }
```

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

### Defining x-wall Custom Element with MutationObserver - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/observer/example.html

Registers the `x-wall` custom element. Its `connectedCallback` initializes a paragraph element for text display and sets up a `MutationObserver` to watch for `x-bottle` child additions or removals, triggering the `update` method to refresh the bottle count.

```javascript
customElements.define('x-wall', class extends HTMLElement {
  connectedCallback() {
    if (this.line) return; // prevent double initialization
    this.line = document.createElement('p');
    this.insertBefore(this.line, this.firstChild);
    new MutationObserver(() => this.update()).observe(this, { childList: true });
    this.update();
  }
  update() {
    const count = this.querySelectorAll('x-bottle').length;
    this.line.textContent = `${count} ${count === 1 ? 'bottle' : 'bottles'} of beer on the wall`;
  }
});
```

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

### Defining x-bottle Custom Element - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/observer/example.html

Registers the `x-bottle` custom element. Its `connectedCallback` simply sets its text content to an emoji, visually representing a single bottle.

```javascript
customElements.define('x-bottle', class extends HTMLElement {
  connectedCallback() {
    this.textContent = '🍺';
  }
});
```

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

### Defining Custom Elements with Shadow DOM in JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/shadowed/example.html

This JavaScript function defines two custom elements, `x-shadowed` and `x-shadowed-later`. `x-shadowed` attaches an open shadow DOM immediately in its constructor. `x-shadowed-later` attaches its shadow DOM dynamically upon a user click, demonstrating deferred shadow DOM attachment.

```javascript
function define() {
  customElements.define('x-shadowed', class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.innerHTML = ` <span style="background-color: lightgreen"> shadowed </span> `;
    }
  });
  customElements.define('x-shadowed-later', class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = 'constructed, <a href="#">click to shadow</a>';
      this.querySelector('a').onclick = (e) => {
        e.preventDefault();
        this.addShadow()
      };
    }
    addShadow() {
      this.attachShadow({mode: 'open'});
      this.shadowRoot.innerHTML = ` <span style="background-color: lightgreen"> shadowed </span> `;
    }
  });
  document.querySelector('button#define').setAttribute('disabled', true);
}
```

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

### Vue.js Event Binding Syntax Example (HTML)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-03-unix-philosophy/index.html

This HTML snippet illustrates Vue.js's declarative syntax for binding a DOM event (`click`) to a JavaScript method (`doThis`). It provides inspiration for the design of a generic `bind()` function that would handle event binding back to data in a 'plain vanilla' web development context.

```HTML
<button @click="doThis"></button>
```

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

### Vue.js Attribute Binding Syntax Example (HTML)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-03-unix-philosophy/index.html

This HTML snippet demonstrates Vue.js's declarative syntax for binding an HTML attribute (`src`) to a JavaScript property (`imageSrc`). It serves as an inspiration for the design of a generic `bind()` function that would connect data to DOM elements in a 'plain vanilla' web development approach.

```HTML
<img :src="imageSrc" />
```

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

### Configuring NODE_PATH for Global ESLint with NVM

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-20-editing-plain-vanilla/index.html

This shell command sets the `NODE_PATH` environment variable to the global npm root directory. This is necessary when using Node Version Manager (nvm) to ensure that globally installed packages like ESLint are discoverable by tools such as VS Code.

```Shell
export NODE_PATH=$(npm root -g)
```

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

### Styling Shadow DOM Content with :host (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This CSS snippet demonstrates how to style elements within a Shadow DOM. The :host pseudo-selector targets the custom element itself (the host of the Shadow DOM), while other selectors like h1 apply styles to elements inside the Shadow DOM, benefiting from its encapsulation. It also shows importing a reset.css as Shadow DOM starts unstyled.

```CSS
@import url("reset.css"); /* Assuming reset.css is imported */

:host {
  display: block; /* Example host style */
  padding: 10px;
}

h1 {
  color: blue; /* Example isolated style */
  font-size: 2em;
}
```

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

### Handling Boolean Attributes in a Custom Element

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2025-04-21-attribute-property-duality/index.html

This JavaScript class extends the previous example to correctly handle boolean attributes. It demonstrates the standard HTML behavior where the mere presence of a boolean attribute (regardless of its value) makes the corresponding property true, and its absence makes it false.

```JavaScript
class MyHello extends HTMLElement {
  static get observedAttributes() {
    return ['value', 'active'];
  }

  constructor() {
    super();
    this._value = '';
    this._active = false;
  }

  get value() {
    return this._value;
  }

  set value(v) {
    this._value = v;
    this.setAttribute('value', v);
  }

  get active() {
    return this._active;
  }

  set active(v) {
    this._active = !!v;
    if (this._active) {
      this.setAttribute('active', '');
    } else {
      this.removeAttribute('active');
    }
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'value') {
      this._value = newValue;
    } else if (name === 'active') {
      this._active = newValue !== null;
    }
  }
}
```

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

### Scoping Styles within Shadow DOM (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/styling.html

This example illustrates how styles applied within a component's Shadow DOM, such as for an `h1` element inside `x-header`, are isolated from the main document. It also highlights that CSS variables defined in the light DOM can be inherited and used within the Shadow DOM, maintaining theme consistency.

```CSS
/* Inside x-header's shadow DOM stylesheet */
h1 {
  font-size: 2em;
  color: var(--color-text); /* Uses a variable passed from light DOM */
}
```

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

### SPA Bootstrapping with index.html (HTML)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/applications.html

This HTML snippet shows the `index.html` file for a Plain Vanilla single-page application. It imports various JavaScript modules, including `App.js` and a `router.js`, and then renders the main `<x-app>` web component, serving as the application's entry point.

```HTML
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plain Vanilla App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="module" src="app/App.js"></script>
    <script type="module" src="app/router.js"></script>
    <script type="module" src="app/home.js"></script>
    <script type="module" src="app/about.js"></script>
    <script type="module" src="app/contact.js"></script>

    <x-app></x-app>
</body>
</html>
```

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

### Bootstrapping Vanilla JS Application - index.js

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-28-unreasonable-effectiveness-of-vanilla-js/index.html

This snippet serves as the entry point for the vanilla JavaScript application. It imports all custom web components and then directly injects the root `<tasks-app>` component into the document body, demonstrating a simpler bootstrapping process without a framework's overhead.

```JavaScript
import './styles.css';
import './App.js';
import './TasksContext.js';
import './AddTask.js';
import './TaskList.js';

document.body.innerHTML = '<tasks-app></tasks-app>';
```

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

### Running Static Website with PHP Built-in Server

Source: https://github.com/jsebrech/plainvanilla/blob/main/README.md

This command utilizes PHP's built-in development server to serve the `public/` directory. It listens on `localhost` at port `8000`. The `-t` option specifies the document root, making it suitable for serving static files or simple PHP applications.

```Shell
php -S localhost:8000 -t public
```

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

### Getting a Button Element by ID (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This helper function retrieves a button element from the DOM using its ID. It's used by other functions, such as `setButtonDisabled`, to access and manipulate control buttons.

```JavaScript
function getButton(id) { return document.querySelector('button#' + id); }
```

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

### Single-Page Application with x-router (HTML)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/applications.html

This HTML snippet demonstrates how to use the `x-router` web component to build a single-page application. It defines multiple route-specific components (`x-home`, `x-about`, `x-contact`) within the router, which are then shown or hidden based on the URL hash.

```HTML
<x-router>
    <x-home route=""></x-home>
    <x-about route="about"></x-about>
    <x-contact route="contact"></x-contact>
</x-router>
```

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

### Initializing Storage and UI (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This snippet initializes a global `storage` object to hold references to the custom element instance and immediately calls the `update()` function to set the initial state of the UI controls and status display.

```JavaScript
let storage = { }; update();
```

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

### Bundling Third-Party Dependencies in imports.js (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This JavaScript snippet from `imports.js` demonstrates how to bundle third-party libraries. It uses `import` for ESM modules like `web-vitals` and accesses UMD modules like `dayjs` from the global `window` object, extending `dayjs` with a plugin before exporting all dependencies for application-wide use.

```JavaScript
import { getCLS, getFID, getLCP } from './web-vitals.js';

const dayjs = window.dayjs;
const relativeTime = window.dayjs_plugin_relativeTime;

dayjs.extend(relativeTime);

export {
  dayjs,
  getCLS,
  getFID,
  getLCP
};
```

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

### Defining Custom Element x-example (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined/example.html

This JavaScript function `define()` registers the `x-example` custom element with the browser. It extends `HTMLElement` and sets a 'status' attribute to 'ready' when the element is connected to the DOM, indicating its initialization.

```JavaScript
function define() { customElements.define('x-example', class extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.setAttribute('status', 'ready');
  }
}); }
```

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

### Structuring Page with HTML Landmarks - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

Recommends organizing page markup using semantic HTML landmark elements like <header>, <main>, and <footer>. These elements improve page structure, accessibility, and compatibility with assistive technologies by defining logical content blocks.

```HTML
<header/main/footer>
```

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

### Applying Basic CSS Styles to Root and Div Elements

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-03-unix-philosophy/example-bind3/example.html

This CSS snippet defines basic styling for the root element and div elements. It sets a uniform margin and a system-ui font for the root, and specific vertical margins for div elements, ensuring consistent spacing and typography across the application.

```CSS
:root { margin: 0.5em; font-family: system-ui, sans-serif; } div { margin: 0.5em 0; }
```

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

### Using a Custom Element in HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This snippet demonstrates how to use a previously defined custom HTML element, x-hello-world, directly within an HTML page. Once registered, custom elements behave like standard HTML tags, allowing for modular and reusable UI components.

```HTML
<x-hello-world></x-hello-world>
```

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

### Styling Custom Element x-example (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined/example.html

This CSS snippet defines the visual appearance and status indicators for the `x-example` custom element. It sets a background color and displays whether the element is defined or its current status using pseudo-elements and attribute selectors.

```CSS
body { font-family: system-ui, sans-serif; margin: 1em; } x-example { background-color: lavender; } x-example:not(:defined)::after { content: '{defined: false}' } x-example:defined::after { content: '{defined: true, status: ' attr(status) '}' }
```

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

### HTML for Web Component Demo - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-30-poor-mans-signals/index.html

This simple HTML snippet demonstrates how to use the `x-adder` custom web component. Once the JavaScript for the component is loaded, this tag will render the interactive adder component on the page.

```HTML
<x-adder></x-adder>
```

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

### Displaying No-Script Warning with CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-17-lets-build-a-blog/index.html

This CSS snippet provides a warning message to users when JavaScript is disabled. It leverages the `@media (scripting: none)` query to target the `blog-header` web component and insert content before it, ensuring that users without scripting enabled are informed about potential missing functionality.

```css
@media (scripting: none) { blog-header::before { content: ' ... ' } }
```

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

### Bootstrapping JavaScript with ES Modules in HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2025-01-01-new-years-resolve/index.html

This HTML snippet demonstrates how to load a JavaScript file (`index.js`) as an ES module. Using `type="module"` enables modern JavaScript module features, allowing for `import` and `export` statements within the script and its dependencies, and providing access to `import.meta` properties.

```HTML
<script src="index.js" type="module"></script>
```

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

### Dynamically Importing ESM Module from CDN

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This JavaScript snippet shows how to dynamically import an ESM (ECMAScript Module) directly from a CDN using the import() function. This asynchronous approach allows loading modules on demand and provides a promise that resolves with the module's exports.

```JavaScript
import('https://unpkg.com/web-vitals@4.2.2/dist/web-vitals.js').then((webVitals) => ...)
```

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

### Configuring Viewport for Responsiveness - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

Configures the viewport settings, which is essential for creating mobile-friendly layouts. This meta tag controls the page's width and scaling on various devices, ensuring proper rendering on different screen sizes.

```HTML
<meta name="viewport">
```

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

### Loading Main JavaScript Module - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

Loads the main JavaScript file as a module at the end of the <body>. This placement ensures that the HTML content is parsed and rendered before the script executes, which is ideal for bootstrapping web components and improving perceived page load speed.

```HTML
<script type="module" src="index.js">
```

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

### Encapsulating Hash-Based Routing (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/applications.html

This JavaScript snippet defines a web component (`x-router`) that encapsulates hash-based routing logic. It listens for `hashchange` events, updates its internal state based on the URL hash, and conditionally displays child components corresponding to the active route.

```JavaScript
class Router extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <slot></slot>
        `;
        window.addEventListener('hashchange', this.updateRoute.bind(this));
        this.updateRoute();
    }

    updateRoute() {
        const hash = window.location.hash.substring(1); // Remove '#'
        this.querySelectorAll('[route]').forEach(child => {
            if (child.getAttribute('route') === hash) {
                child.style.display = '';
            } else {
                child.style.display = 'none';
            }
        });
    }
}
customElements.define('x-router', Router);
```

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

### Styling Root Element with CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-30-poor-mans-signals/adder.html

This CSS snippet defines global styles for the `:root` element, setting a margin of 0.5em and specifying a system-ui sans-serif font family. These styles apply universally to the entire document, providing a consistent base layout and typography.

```CSS
:root { margin: 0.5em; font-family: system-ui, sans-serif; }
```

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

### Styling Custom Elements and Lifecycle States (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This CSS snippet defines styles for various custom elements and their states. It includes rules for `x-container`, `x-controls`, `#placeholder`, `#log`, and `x-lifecycle`, specifically showing how to display lifecycle status based on the `:defined` pseudo-class and `connected`/`source` attributes.

```CSS
body { font-family: system-ui, sans-serif; margin: 1em; } x-container { display: block; border: 1px dotted gray; padding: 1em; } x-controls { display: block; margin-top: 1em; } #placeholder:empty::after { content: '-' } #log { border: 1px dotted gray; padding: 1em; font-size: 80%; } x-lifecycle { background: #ddd; padding: 0.1em; } x-lifecycle:not(:defined)::after { content: '{defined: false}'; } x-lifecycle:defined::after { content: '{defined: true, constructed: true' ', connected: ' attr(connected) ', source: ' attr(source) '}'; }
```

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

### Creating a Custom Element Instance (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This function creates an instance of the `x-lifecycle` custom element using `document.createElement()`. It stores the element in `storage.element` and sets its `source` attribute to 'createElement', then updates the UI to reflect the new state.

```JavaScript
function create() { storage.element = document.createElement('x-lifecycle'); storage.element.setAttribute('source', 'createElement'); update(); }
```

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

### Styling a Custom Element with Attributes (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/styling.html

This CSS snippet demonstrates how to style a custom element, `x-avatar`, and its internal `img` tag. It also shows how to apply specific styles based on custom attributes, such as `[size="lg"]`, allowing for variations in component appearance directly through HTML attributes.

```CSS
x-avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 48px;
  height: 48px;
  vertical-align: middle;
}

x-avatar[size="lg"] {
  width: 96px;
  height: 96px;
}

x-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

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

### Defining a Simple Custom Element in JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This JavaScript snippet defines a basic Web Component named HelloWorldComponent that extends HTMLElement. It uses the connectedCallback lifecycle method to set the element's text content to 'hello world!' when it's added to the DOM. The customElements.define call registers this class with the tag x-hello-world, making it available for use in HTML.

```JavaScript
class HelloWorldComponent extends HTMLElement {
    connectedCallback() {
        this.textContent = 'hello world!';
    }
}
customElements.define('x-hello-world', HelloWorldComponent);
```

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

### Including UMD Library via Script Tag

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This HTML snippet shows how to include a UMD (Universal Module Definition) formatted JavaScript library into a webpage using a standard <script> tag. The src attribute points to the local path of the library file, typically located in a 'lib' folder.

```HTML
<script src="lib/microlight.js"></script>
```

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

### Minimal Context Provider Implementation - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-07-needs-more-context/index.html

This JavaScript code defines a minimal `ContextProvider` custom element. It listens for `context-request` events, and if the requested context key matches its own 'key' attribute, it calls the event's callback with its 'value' attribute and stops event propagation. This provides a basic mechanism for supplying context values to requesting elements.

```JavaScript
class ContextProvider extends HTMLElement {
  static get observedAttributes() {
    return ['value'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<slot></slot>`;
    this.boundHandleContextRequest = this.handleContextRequest.bind(this);
  }

  connectedCallback() {
    this.addEventListener('context-request', this.boundHandleContextRequest);
  }

  disconnectedCallback() {
    this.removeEventListener('context-request', this.boundHandleContextRequest);
  }

  handleContextRequest(e) {
    if (e.context === this.getAttribute('key')) {
      e.callback(this.getAttribute('value'));
      e.stopPropagation();
    }
  }
}
customElements.define('context-provider', ContextProvider);
```

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

### Applying Base CSS Styles to Root and Div Elements - CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-03-unix-philosophy/example-combined/example.html

This snippet defines global CSS rules for the document's root element and all div elements. It sets a base margin and font-family for the entire page, and specific margins for div elements, ensuring consistent layout and typography.

```CSS
:root { margin: 0.5em; font-family: system-ui, sans-serif; } div { margin: 0.5em 0; }
```

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

### Using a Vanilla Lazy Web Component

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-09-sweet-suspense/index.html

This HTML snippet illustrates the proposed vanilla web component equivalent of React's `lazy()`. The `<x-lazy>` custom element wraps another custom element (`<x-hello-world>`), indicating that `<x-hello-world>` should be loaded lazily when `<x-lazy>` is added to the DOM.

```HTML
<x-lazy><x-hello-world></x-hello-world></x-lazy>
```

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

### Accessing UMD Library from Window Object

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This JavaScript snippet demonstrates how to access a UMD (Universal Module Definition) library after it has been loaded via a script tag. UMD modules typically expose their exports as properties on the global window object, allowing them to be destructured or directly referenced.

```JavaScript
const { microlight } = window;
```

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

### Statically Importing Local ESM Module

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This JavaScript snippet demonstrates how to statically import an ESM (ECMAScript Module) from a local file path. This is a common way to include local dependencies, where webVitals becomes the default export from the specified module file.

```JavaScript
import webVitals from 'lib/web-vitals.js'
```

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

### Implementing a Barebones Signal with EventTarget - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-30-poor-mans-signals/index.html

This snippet demonstrates a basic signal implementation using JavaScript's `EventTarget` class. It wraps a value, allowing it to dispatch a 'change' event whenever the value is updated. An event listener is attached to log the new value, showcasing the reactive nature of the signal.

```JavaScript
class Signal extends EventTarget {
  constructor(value) {
    super();
    this._value = value;
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    this._value = newValue;
    this.dispatchEvent(new Event('change'));
  }
}

const name = new Signal('Joeri');
name.addEventListener('change', () => console.log(name.value));
name.value = 'Sebrechts';
```

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

### Styling Div Elements - CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-09-sweet-suspense/example/index.html

This CSS snippet defines styles for `div` elements, including a minimum height, a dotted black border, and consistent margins and padding. These styles are useful for creating visually distinct content blocks or containers.

```CSS
div { min-height: 2em; border: 1px dotted black; margin: 1em 0; padding: 1em; }
```

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

### Applying a Minimal CSS Reset (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/styling.html

This snippet provides a minimal, cross-browser CSS reset. It sets `box-sizing` to `border-box` for all elements, ensuring consistent box model behavior, and removes default `body` margins. This establishes a clean baseline for styling.

```CSS
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}
```

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

### Integrating Context Provider in Custom Element - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-07-needs-more-context/index.html

This JavaScript snippet shows how to integrate the `context-provider` within another custom element, `ThemeToggle`. The `ThemeToggle` hosts a `context-provider` with a 'theme-toggle' key and an initial 'light' value. A button click updates the provider's 'value' attribute, demonstrating how a custom element can manage and update a provided context.

```JavaScript
class ThemeToggle extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
          <button>Toggle Theme</button>
          <context-provider key="theme-toggle" value="light"></context-provider>
        `;
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      const provider = this.shadowRoot.querySelector('context-provider');
      provider.setAttribute('value', provider.getAttribute('value') === 'light' ? 'dark' : 'light');
    });
  }
}
customElements.define('theme-toggle', ThemeToggle);
```

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

### Versioning Cached Images with Query Parameters (HTML)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-12-16-caching-vanilla-sites/index.html

This HTML snippet demonstrates how to force a browser to refetch an image by appending a unique version query parameter to its URL. This strategy is used when the image content changes but its filename remains the same, ensuring the updated resource is loaded instead of a stale cached version.

```HTML
<img src="image.jpg?v=2" alt="My cached image" />
```

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

### Upgrading a Custom Element (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This function demonstrates how to programmatically upgrade a custom element using `customElements.upgrade()`. This is useful for elements that were parsed before their definition was registered. It then calls `update()` to refresh the UI state.

```JavaScript
function upgrade() { customElements.upgrade(storage.element); update(); }
```

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

### Importing Styles into Shadow DOM (HTML/JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This HTML snippet, intended for use within a Shadow DOM, imports an external CSS file (header.css). The import.meta.resolve operator dynamically resolves the path to the CSS file relative to the current JavaScript module, ensuring correct styling for the isolated Shadow DOM content.

```HTML
<link rel="stylesheet" href="${import.meta.resolve('./header.css')}">
```

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

### Simple Counter Web Component (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/applications.html

This JavaScript snippet defines a basic `<x-counter>` web component that manages its own state. It exposes an `increment()` method to modify the internal `#count` property and automatically updates its display (`update()`) whenever the state changes, demonstrating self-contained state management within a component.

```JavaScript
class Counter extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.#count = 0;
        this.update();
    }

    #count; // Private field for state

    increment() {
        this.#count++;
        this.update();
    }

    update() {
        this.shadowRoot.innerHTML = `
            <style>
                div {
                    border: solid 1px black;
                    padding: 10px;
                }
            </style>
            <div>
                Count: ${this.#count}
                <button onclick="this.getRootNode().host.increment()">Increment</button>
            </div>
        `;
    }
}
customElements.define('x-counter', Counter);
```

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

### Setting up Mocha Tests in JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/tests/index.html

This snippet initializes the Mocha testing framework in 'bdd' (Behavior-Driven Development) interface style and enables leak checking. It's typically used at the beginning of a test suite to configure the testing environment, ensuring tests are run with the specified interface and potential memory leaks are identified.

```JavaScript
mocha.setup('bdd'); mocha.checkLeaks();
```

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

### Dispatching Context Request Event - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-10-07-needs-more-context/index.html

This JavaScript snippet demonstrates how a consumer element (`MySubscriber`) dispatches a `context-request` event to obtain a context value. The event bubbles up the DOM tree and pierces shadow DOM boundaries. It specifies a context key ('theme-toggle') and provides a callback function to process the received context value, updating the element's styles based on the 'dark' or 'light' theme.

```JavaScript
class MySubscriber extends HTMLElement {
  connectedCallback() {
    const request = new Event('context-request', {
      bubbles: true,
      composed: true
    });
    request.context = 'theme-toggle'; // The context key
    request.callback = (value) => {
      this.style.backgroundColor = value === 'dark' ? 'black' : 'white';
      this.style.color = value === 'dark' ? 'white' : 'black';
    };
    this.dispatchEvent(request);
  }
}
customElements.define('my-subscriber', MySubscriber);
```

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

### Attaching an Open Shadow DOM (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This JavaScript code attaches a Shadow DOM to the current custom element instance. The mode: 'open' setting makes the Shadow DOM accessible from the main document's JavaScript, which is convenient for debugging and interaction in known codebases. The if (!this.shadowRoot) check supports declarative Shadow DOM for server-side rendering.

```JavaScript
if (!this.shadowRoot) { this.attachShadow({ mode: 'open' });
```

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

### Creating an HTML Template Element (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This JavaScript snippet creates an HTMLTemplateElement which serves as a container for HTML markup that can be cloned and reused. Instantiating the template outside the class allows it to be shared across all instances of the custom element, improving performance for complex components with repetitive markup.

```JavaScript
const template = document.createElement('template');
```

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

### Connecting a Custom Element to DOM (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This function connects the previously created `x-lifecycle` element to the DOM by appending it to the `#placeholder` element. This action triggers the `connectedCallback` of the custom element. The UI is then updated to reflect the connection.

```JavaScript
function connect() { document.querySelector('#placeholder').append(storage.element); update(); }
```

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

### Defining a Lazy React Component

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-09-sweet-suspense/index.html

This JavaScript snippet demonstrates how React's `lazy()` function is used to asynchronously load a component. The `MarkdownPreview` component will only be fetched and rendered when it's first needed, improving initial load performance.

```JavaScript
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
```

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

### Defining Site-Wide CSS Custom Properties (CSS)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/styling.html

This snippet defines global CSS custom properties (variables) within the `:root` pseudo-class. These variables centralize definitions for font families, text colors, background colors, and link styles, promoting consistency and ease of theme management across the application.

```CSS
:root {
  --font-family-normal: "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --color-text: #333;
  --color-background: #fff;
  --color-link: #007bff;
  --color-link-hover: #0056b3;
  --color-border: #ccc;
  --color-code-background: #f4f4f4;
  --color-code-text: #333;
}
```

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

### Handling No-JavaScript Content - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

Provides alternative content for users who have JavaScript disabled. This is particularly useful on pages utilizing web components, as they rely on JavaScript for functionality. This warning only needs to be on pages with web components.

```HTML
<noscript>
```

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

### Styling Table Headers and Data Cells - CSS

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-06-how-fast-are-web-components/index.html

This CSS snippet applies basic styling to table headers and data cells. It left-aligns the first type of table header and adds right padding, while right-aligning the second type of table data cell. This is likely used for formatting benchmark results tables.

```CSS
table th:nth-of-type(1) { text-align: left; padding-right: 1em; } table td:nth-of-type(2) { text-align: right; }
```

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

### Enhancing Signals with Syntactic Sugar and Effects - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-30-poor-mans-signals/index.html

This improved signal implementation adds a `signal` factory function and an `effect` method. The `effect` method automatically subscribes a function to changes and immediately executes it, returning a dispose function. `toString` and `valueOf` methods are also added for implicit value access.

```JavaScript
class Signal extends EventTarget {
  constructor(value) {
    super();
    this._value = value;
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    this._value = newValue;
    this.dispatchEvent(new Event('change'));
  }

  toString() {
    return this.value;
  }

  valueOf() {
    return this.value;
  }

  effect(fn) {
    const handler = () => fn();
    this.addEventListener('change', handler);
    fn();
    return () => this.removeEventListener('change', handler);
  }
}

const signal = (value) => new Signal(value);

const name = signal('Joeri');
name.effect(() => console.log(name.value));
name.value = 'Sebrechts';
```

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

### Linking Favicon in HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

This HTML snippet demonstrates how to link a favicon to a webpage. It specifies the relationship as 'icon' and points to the 'favicon.ico' file located in the site's root path. This is a common, simple method for adding a site icon.

```HTML
<link rel="icon" href="favicon.ico">
```

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

### Defining Page Title - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

Defines the title of the HTML document, which appears in the browser tab and is used for bookmarks. It is considered a non-optional element for proper page identification and user experience.

```HTML
<title>
```

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

### Defining a Custom Element (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-09-16-life-and-times-of-a-custom-element/defined2/example.html

This function defines the `x-lifecycle` custom element using `customElements.define()`. It extends `HTMLElement` and implements lifecycle callbacks like `constructor`, `connectedCallback`, `disconnectedCallback`, and `attributeChangedCallback`, logging each phase and updating the UI. It also defines a `status` getter to reflect its current state.

```JavaScript
function define() { customElements.define('x-lifecycle', class extends HTMLElement { get status() { return 'defined: true, constructed: true' + ', connected: ' + (this.getAttribute('connected') || 'false') + ', source: ' + (this.getAttribute('source') || 'unknown'); } constructor() { super(); update(); appendLog('constructed'); } connectedCallback() { this.setAttribute('connected', true); update(); appendLog('connected'); } disconnectedCallback() { this.setAttribute('connected', false); update(); appendLog('disconnected'); } static observedAttributes = ['source']; attributeChangedCallback() { appendLog('attributes changed'); } }); update(); }
```

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

### Resolving Relative Paths with import.meta.resolve() in JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2025-01-01-new-years-resolve/index.html

This JavaScript snippet illustrates the use of `import.meta.resolve()` to dynamically resolve a relative path (`./styles.css`) to an absolute URL. This function is available within ES modules and is crucial for locating assets or other modules relative to the current file, enabling flexible project structures without a build step.

```JavaScript
const cssPath = import.meta.resolve('./styles.css');
console.log(cssPath); // e.g., "http://example.com/path/to/styles.css"
```

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

### Defining a Basic Custom Element (JavaScript)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2025-05-09-form-control/index.html

This snippet defines a minimal custom element, `my-input`, using the Web Components API. It attaches a shadow DOM and uses a slot to render its content, but it lacks form association and input handling, making it non-functional within a form.

```JavaScript
class MyInput extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `<slot></slot>`;
  }
}
customElements.define('my-input', MyInput);
```

```HTML
<form>
  <my-input name="foo">Hello</my-input>
  <my-input name="bar">World</my-input>
  <button>Submit</button>
</form>
```

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

### Defining a Content Slot in Shadow DOM (HTML)

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/components.html

This HTML <slot> element acts as a placeholder within a web component's Shadow DOM where the component's light DOM children will be rendered. It enables content projection, similar to children props in React, allowing consumers to insert their own markup into specific areas of the component's internal structure. Slots are only functional within a Shadow DOM.

```HTML
<slot></slot>
```

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

### Observing Web Component DOM Changes - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2025-04-21-attribute-property-duality/demo3.html

This JavaScript code sets up a MutationObserver to monitor changes to a custom web component ('my-hello'). It updates a 'rawhtml' span with the component's outer HTML, stripping content between tags for a cleaner display, useful for debugging or live previews of component structure.

```JavaScript
const span = document.getElementById('rawhtml');
const myHello = document.querySelector('my-hello');
const m = new MutationObserver(() => {
  span.textContent = myHello.outerHTML.replace(/\\>.*<\\//g, '><');
});
m.observe(myHello, { attributes: true, childList: true });
```

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

### Declaring HTML5 Doctype - HTML

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/pages/sites.html

Specifies the document type as HTML5, ensuring modern browser rendering behavior. This declaration is crucial for preventing quirks mode and enabling standard-compliant rendering.

```HTML
<!doctype html>
```

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

### Integrating Signals with Web Components - JavaScript

Source: https://github.com/jsebrech/plainvanilla/blob/main/public/blog/articles/2024-08-30-poor-mans-signals/index.html

This snippet shows how to integrate the custom signal implementation with a Web Component. An `x-adder` component uses a `signal` to manage its internal count. The `connectedCallback` sets up the DOM, attaches an event listener to increment the signal, and uses an `effect` to update the displayed count reactively when the signal changes.

```JavaScript
class Adder extends HTMLElement {
  constructor() {
    super();
    this.count = signal(0);
  }

  connectedCallback() {
    if (!this.rendered) {
      this.innerHTML = `
        <button>Increment</button>
        <span>${this.count.value}</span>
      `;
      this.querySelector('button').addEventListener('click', () => {
        this.count.value++;
      });
      this.count.effect(() => {
        this.querySelector('span').textContent = this.count.value;
      });
      this.rendered = true;
    }
  }
}

customElements.define('x-adder', Adder);
```