### Install and Run Local Server (Bash)

Source: https://github.com/kennyfrc/cami.js/blob/master/examples/README.md

This snippet uses the Bun package manager to install the 'serve' package globally and then executes it to start a local web server serving the current directory. This is necessary to view the project examples in a browser.

```bash
bun install --global serve
bunx serve
```

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

### Complete Cami.js Counter Component Example (Live Demo)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/reactive_web_components.md

A slightly modified version of the complete counter component example, including additional CSS classes on buttons, presented as a live demo within an HTML article tag.

```html
<counter-component
  ></counter-component>
</article>
<script type="module">
  const { html, ReactiveElement } = cami;

  class CounterElement extends ReactiveElement {
    count = 0

    template() {
      return html`
        <button class="md-button md-button--primary"
        @click=${() => this.count--}>-</button>
        <button class="md-button md-button--primary"
        @click=${() => this.count++}>+</button>
        <p>Count: ${this.count}</p>
      `;
    }
  }

  customElements.define('counter-component', CounterElement);
</script>
```

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

### HTML Structure for Cami.js Popover Example

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

Provides the basic HTML layout for the page, including a heading, paragraph, the custom `cami-popover` element, and script tags to include the Cami.js library.

```html
<h1>Popover</h1>
<p>When you click on either the top / bottom / left / right buttons, a popover will appear in the corresponding position against the reference element.</p>
<cami-popover></cami-popover>
```

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

### Complete Cami.js Counter Component Example (Basic)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/reactive_web_components.md

A full example demonstrating the definition of a reactive counter component using Cami.js, including class definition, template, and registration, embedded within an HTML script tag for immediate use.

```html
<counter-component></counter-component>
<script type="module">
  const { html, ReactiveElement } = cami;

  class CounterElement extends ReactiveElement {
    count = 0;
    template() {
      return html`
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count++}>+</button>
        <div>Count: ${this.count}</div>
      `;
    }
  }

  customElements.define('counter-component', CounterElement);
</script>
```

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

### HTML Structure for Cami.js Registration Form

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/streams.md

Defines the basic HTML structure for the registration form example, including a heading, the custom <form-component> element, and instructions for testing. It also includes script tags to load the Cami.js library.

```html
<article>
  <h1>Registration Form</h1>
  <form-component></form-component>
</article>
<small>
<p>Try entering an email that is already taken, such as trevinowanda@example.net (mock email)</p>
</small>
<script src="./build/cami.cdn.js"></script>
<!-- CDN version below -->
<!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> -->
<script type="module">
  const { html, ReactiveElement } = cami;

  class FormElement extends ReactiveElement {
    emailError = ''
    passwordError = ''
    email = '';
    password = '';
    emailIsValid = null;
    isEmailAvailable = null;

    inputValidation$ = this.stream();
    passwordValidation$ = this.stream();

    onConnect() {
      this.inputValidation$
        .map(e => this.validateEmail(e.target.value))
        .debounce(300)
        .subscribe(({ isEmailValid, emailError, email }) => {
          this.emailError = emailError;
          this.isEmailValid = isEmailValid;
          this.email = email;
          this.isEmailAvailable = this.queryEmail(this.email)
        });

      this.passwordValidation$
        .map(e => this.validatePassword(e.target.value))
        .debounce(300)
        .subscribe(({ isValid, password }) => {
          this.passwordError = isValid ? '' : 'Password must be at least 8 characters long.';
          this.password = password;
        });
    }

    validateEmail(email) {
      const emailRegex = /^[^s@]+@[^s@]+\.[^s@]+$/;
      let emailError = '';
      let isEmailValid = null;
      if (email === '') {
        emailError = '';
        isEmailValid = null;
      } else if (!emailRegex.test(email)) {
        emailError = 'Please enter a valid email address.';
        isEmailValid = false;
      } else {
        emailError = '';
        isEmailValid = true;
      }
      return { isEmailValid, emailError, email };
    }

    validatePassword(password) {
      let isValid = false;
      if (password === '') {
        isValid = null;
      } else if (password?.length >= 8) {
        isValid = true;
      }

      return { isValid, password }
    }

    queryEmail(email) {
      return this.query({
        queryKey: ['Email', email],
        queryFn: () => {
          return fetch(`https://api.camijs.com/users?email=${email}`).then(res => res.json())
        },
        staleTime: 1000 * 60 * 5
      })
    }

    getEmailInputState() {
      if (this.email === '') {
        return '';
      } else if (this.isEmailValid && this.isEmailAvailable?.status === 'success' && this.isEmailAvailable?.data?.length === 0) {
        return false;
      } else {
        return true;
      }
    }

    getPasswordInputState() {
      if (this.password === '') {
        return '';
      } else if (this.passwordError === '') {
        return false;
      } else {
        return true;
      }
    }

    template() {
      return html`
        <form action="/submit" method="POST">
          <label>
            Email:
            <input type="email"
              aria-invalid=${this.getEmailInputState()}
              @input=${(e) => this.inputValidation$.next(e) } value=${this.email}>
              <span>${this.isEmailAvailable?.status === 'success' && this.isEmailAvailable?.data?.length > 0 && this.emailError === '' ? 'Email is already taken.' : ''}</span>
            <span>${this.emailError}</span>
          </label>
          <label>
            Password:
            <input type="password" @input=${(e) => this.passwordValidation$.next(e) }
              value=${this.password}
              aria-invalid=${this.getPasswordInputState()}>
            <span>${this.passwordError}</span>
          </label>
          <input type="submit" value="Submit" style="opacity: ${this.emailError !== '' || this.passwordError !== '' || this.email === '' || this.password === '' ? '0.5' : '1'}">
        </form>
      `;
    }
  }

  customElements.define('form-component', FormElement);
</script>
```

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

### CSS Styling for Popover Backdrop

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

Defines CSS rules for a popover backdrop element. Although commented as unused in this specific example, it shows how a fixed-position overlay could be styled.

```css
<style>
  h1, p {
    text-align: center;
  }
  .popover__backdrop { // unused in this example
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popover__backdrop--hidden { // unused in this example
    display: none;
  }
</style>
```

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

### Creating ObservableStore Instances with Cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/api/observable_store.md

Provides examples of using the `store` function to create new ObservableStore instances. It shows how to create a store with the default localStorage persistence enabled and how to disable persistence using the options object.

```javascript
// Create a store with default localStorage support
const CartStore = store({ cartItems: [] });

// Create a store without localStorage support
const NonPersistentStore = store({ items: [] }, { localStorage: false });
```

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

### HTML Structure for Circle Drawer

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/circle_drawer.md

Defines the basic HTML layout for the circle drawer application, including the main container, the custom `<circle-drawer>` element, and script tags to include the Cami.js library.

```html
<article>
  <h1 style="text-align: center; margin-bottom: 5px;"
  >Circle Drawer</h1>
  <circle-drawer></circle-drawer>
</article>
<script src="./build/cami.cdn.js"></script>
<!-- CDN version below -->
<!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> -->
```

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

### Defining Custom Element and Dependencies HTML

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/contact_manager.md

This HTML snippet sets up the basic page structure, includes the custom `<contact-manager>` element where the application logic will be rendered, and links the Cami.js library script necessary for the custom element and reactivity.

```html
<article>
  <contact-manager></contact-manager>
</article>
<script src="./build/cami.cdn.js"></script>
<!-- CDN version below -->
<!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> -->
<style>
  .container {
    display: flex;
    flex-direction: column;
    width: 330px;
    margin: auto;
  }
  .input-group {
    margin-bottom: 10px;
  }
  .list-container {
    margin-bottom: 10px;
    height: 150px;
    overflow: auto;
    border: 1px solid gray;
  }
  select {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
  }

  select::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .button-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  .validation-error {
    border: 1px solid red;
    padding: 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .close-btn {
    cursor: pointer;
  }
</style>
<script type="module">
  const { html, ReactiveElement } = cami;

  class NameManagerElement extends ReactiveElement {
    names = [{
      firstName: "Hans",
      lastName: "Zimmermann"
    }, {
      firstName: "Ruth",
      lastName: "Huber"
    }, {
      firstName: "Heidi",
      lastName: "Müller"
    }]
    prefix = '';
    selectedName = null;
    firstName = '';
    lastName = '';
    filteredNames = [];
    validationError = '';
    fadeOutClass = '';

    validateName() {
      if (!this.firstName || !this.lastName) {
        this.validationError = 'Both first name and last name must be provided.';
        return false;
      }
      this.validationError = '';
      return true;
    }

    addName() {
      if (!this.validateName()) {
        return;
      }
      this.names.push({ firstName: this.firstName, lastName: this.lastName });
      this.firstName = '';
      this.lastName = '';
    }

    updateName() {
      if (!this.validateName()) {
        return;
      }
      const index = this.names.findIndex(name => name.firstName === this.selectedName.firstName && name.lastName === this.selectedName.lastName);
      if (index !== -1) {
        this.names.splice(index, 1, { firstName: this.firstName, lastName: this.lastName });
        this.firstName = '';
        this.lastName = '';
      }
    }

    deleteName() {
      const index = this.names.findIndex(name => name === this.selectedName);
      if (index !== -1) {
        this.names.splice(index, 1);
        this.selectedName = null;
      }
    }

    get filterNames() {
      return this.names.filter(name => name.firstName.startsWith(this.prefix) || name.lastName.startsWith(this.prefix));
    }

    template() {
      return html`
        <div class="container">
          <div class="input-group">
            <label>Filter prefix:</label>
            <input type="text" @input=${(e) => { this.prefix = e.target.value; }} />
          </div>
          <label>Contacts:</label>
          <div class="list-container">
            <select size="8"
                    @change=${(e) => { this.selectedName = this.filterNames[e.target.selectedIndex]; }}
            >
              ${this.filterNames.map(name => html`<option>${name.firstName} ${name.lastName}</option>`)}
            </select>
          </div>
          <div class="input-group">
            <label>First Name:</label>
            <input type="text" .value=${this.firstName} @input=${(e) => { this.firstName = e.target.value; }} />
          </div>
          <div class="input-group">
            <label>Last Name:</label>
            <input type="text" .value=${this.lastName} @input=${(e) => { this.lastName = e.target.value; }} />
          </div>
          <div class="button-group">
            <button @click=${() => this.addName()}>Create</button>
            <button @click=${() => this.updateName()} ?disabled=${!this.selectedName}>Update</button>
            <button @click=${() => this.deleteName()} ?disabled=${!this.selectedName}>Delete</button>
          </div>
          ${this.validationError ? html`
            <div class="validation-error">
              <span>Notice: ${this.validationError}</span>
              <span class="close-btn" @click=${() => this.validationError = ''}>X</span>
            </div>
          ` : ''}
        </div>
      `;
    }
  }

  customElements.define('contact-manager', NameManagerElement);
</script>

```

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

### Embedding and Registering a Cami.js Component (counter-component)

Source: https://github.com/kennyfrc/cami.js/blob/master/README.md

Provides another example of a Cami.js counter component, demonstrating how to embed it within standard HTML (`<article>`) and register it with a different tag name (`<counter-component>`). The component logic for state and rendering is identical to the basic example.

```HTML
<script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script>
<article>
  <h1>Counter</h1>
  <counter-component
  ></counter-component>
</article>
<script type="module">
  const { html, ReactiveElement } = cami;

  class CounterElement extends ReactiveElement {
    count = 0

    template() {
      return html`
        <button @click=${() => this.count--}>-</button>
        <button @click=${() => this.count++}>+</button>
        <div>Count: ${this.count}</div>
      `;
    }
  }

  customElements.define('counter-component', CounterElement);
</script>
```

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

### Importing Cami.js Library Components

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

Imports necessary components (`html`, `ReactiveElement`) from the Cami.js library using a module script, which are required for defining custom reactive elements.

```javascript
<script type="module">
  const { html, ReactiveElement } = cami;
```

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

### Performing HTTP GET Request with cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/api/http.md

This example demonstrates using the static `http.get` method to send a GET request to a specified URL. It shows how to chain stream operators like `.tap()` to process the response data and `.catchError()` to handle potential request errors.

```JavaScript
http.get('https://api.example.com/data')
  .tap(data => console.log(data))
  .catchError(error => console.error(error));
```

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

### HTML Structure for Cami.js Counter Component

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/counter_interval.md

Provides the basic HTML structure including the custom element tag `<counter-component>` and script tags to load Cami.js and the component definition.

```html
<article>
  <h1>Counter with Interval</h1>
  <counter-component></counter-component>
</article>
<script src="./build/cami.cdn.js"></script>
<!-- CDN version below -->
<!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> -->
<script type="module">
  const { html, ReactiveElement } = cami;

class CounterElement extends ReactiveElement {
  count = 0;

  get doubleCount() {
    return this.count * 2;
  }

  onConnect() {
    setInterval(() => this.count++, 1000);
    this.effect(() => console.log(`Count: ${this.count}`));
    this.effect(() => console.log(`Double Count: ${this.doubleCount}`));
  }

  template() {
    return html`
      <div>Double Count: ${this.doubleCount}</div>
    `;
  }
}

customElements.define('counter-component', CounterElement);
</script>
```

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

### Cami Counter Demo with Styling (HTML/JS)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/index.md

Provides a demo example of the Cami counter component with added CSS classes for styling and a paragraph tag for the count display. Includes the CDN script and the JavaScript component definition and registration.

```html
<article>
  <h4>Counter</h4>
  <cami-counter
  ></cami-counter>
</article>
<script type="module">
  const { html, ReactiveElement } = cami;

  class CounterElement extends ReactiveElement {
    count = 0

    template() {
      return html`
        <button class="md-button md-button--primary"
        @click=${() => this.count--}>-</button>
        <button class="md-button md-button--primary"
        @click=${() => this.count++}>+</button>
        <p>Count: ${this.count}</p
      `;
    }
  }

  customElements.define('cami-counter', CounterElement);
</script>
```

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

### HTML Structure for Cami.js Nested Update Example

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/nested_updates.md

Defines the basic HTML structure including the custom element tag `<nested-data-be>` and includes the Cami.js library script.

```html
<article>
  <h5>User Info with Deeply Nested Data</h5>
  <nested-data-be></nested-data-be>
</article>
<script src="./build/cami.cdn.js"></script>
<!-- CDN version below -->
<!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> -->

```

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

### HTML Structure for Temperature Converter

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/temperature_converter.md

Provides the basic HTML layout for the temperature converter, including the custom element tag and the necessary script imports for the Cami library and the custom element definition.

```HTML
<article>
  <h1>Temperature Converter</h1>
  <temperature-converter></temperature-converter>
</article>
<script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script>
<script type="module">
  const { html, ReactiveElement } = cami;

  class TemperatureConverterElement extends ReactiveElement {
    celsius = '';
    fahrenheit = '';

    convertToFahrenheit(celsius) {
      if (!isNaN(celsius) && celsius !== '') {
        this.fahrenheit = celsius * (9/5) + 32;
      }
    }

    convertToCelsius(fahrenheit) {
      if (!isNaN(fahrenheit) && fahrenheit !== '') {
        this.celsius = (fahrenheit - 32) * (5/9);
      }
    }

    template() {
      return html`
        <label>
          Celsius:
          <input type="number" .value=${this.celsius} @input=${(e) => this.convertToFahrenheit(e.target.value)}>
        </label>
        <label>
          Fahrenheit:
          <input type="number" .value=${this.fahrenheit} @input=${(e) => this.convertToCelsius(e.target.value)}>
        </label>
      `;
    }
  }

  customElements.define('temperature-converter', TemperatureConverterElement);
</script>
```

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

### Converting HTTP Response to JSON with cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/api/http.md

This example shows how to make an HTTP GET request using the `http` function and then use the `.toJson()` method on the resulting `HTTPStream` to parse the response body as JSON. It demonstrates handling the successful JSON data and potential errors using `.then()` and `.catch()`.

```JavaScript
http('https://api.example.com/data')
  .toJson()
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

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

### DemoPopoverElement onConnect Method

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

The `onConnect` lifecycle method for `DemoPopoverElement`. It performs an early render, finds the reference element in the DOM, and sets the initial placement to 'top'.

```javascript
	onConnect() {
  	this.render(); // early render because we need the referenceElement to be set
	  this.referenceElement = document.querySelector(".referenceElement");
    this.placement = 'top';
  }
```

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

### CSS Styles for Circle Drawer Layout

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/circle_drawer.md

Provides the CSS rules to style the layout of the circle drawer application, including flexbox for arrangement, margins, borders, and positioning for the canvas area and circles.

```css
<style>
  .circle-drawer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
  }
  .button-group {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .canvas-container {
    width: 500px;
    height: 400px;
    border: 1px solid black;
    position: relative;
  }
</style>
```

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

### HTML Structure and Styles for Anchored Popover

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/anchored_popover.md

Defines the basic HTML layout including a custom `cami-anchored-popover` element and provides CSS styles for centering text and styling the popover backdrop.

```HTML
<h1>Anchored Popover</h1>
<p>An anchored popover relative to any coordinate. In this example, we're usign the mouse position as the reference element.</p>
<cami-anchored-popover></cami-anchored-popover>
<style>
  h1, p {
    text-align: center;
  }
  .popover__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popover__backdrop--hidden {
    display: none;
  }
</style>
<!-- <script src="./build/cami.cdn.js"></script> -->
<!-- CDN version below -->
<script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script>
<script type="module">
  const { html, ReactiveElement } = cami;

  class ReactiveModalElement extends ReactiveElement {
    isOpen = false;
    lastFocusedElement = null;
    focusableElements = [];

    connectedCallback() {
    	super.connectedCallback();
      this.addEventListener('keydown', (event) => {
        const preventDefault = () => { event.preventDefault(); return true; };
        const isEscape = event.key === 'Escape';
        const isTab = event.key === 'Tab';
        const isShiftTab = isTab && event.shiftKey;
        const isTabAtStart = isTab && document.activeElement === this.focusableElements[0];
        const isTabAtEnd = isTab && document.activeElement === this.focusableElements[this.focusableElements.length - 1];

        isEscape && this.closeDialog();
        isTabAtStart && preventDefault() && this.focusableElements[this.focusableElements.length - 1]?.focus();
        isTabAtEnd && preventDefault() && this.focusFirstElement();
      });
    }

    openDialog() {
      this.isOpen = true;
      this.querySelector('dialog').setAttribute('open', '');
      this.lastFocusedElement = document.activeElement;
      this.focusFirstElement();
    }

    closeDialog() {
      this.isOpen = false;
      this.querySelector('dialog').removeAttribute('open');
      this.lastFocusedElement && this.lastFocusedElement.focus();
    }

    focusFirstElement() {
      const dialog = this.querySelector('dialog');
      this.focusableElements = Array.from(dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
      const hasFocusables = this.focusableElements.length > 0;
      hasFocusables && this.focusableElements[0].focus();
    }
  }

  class ReactivePopoverElement extends ReactiveModalElement {
    referenceElement = null;
    placement = null;

    positionPopover() {
      this.openDialog();
      this.setPopover();
    }

    setPopover() {
      if (!this.referenceElement) return;
      const rect = this.referenceElement.getBoundingClientRect();
      let popover = this.querySelector('dialog');

      ['top', 'left', 'right', 'bottom'].forEach((prop) => popover.style[prop] = 'auto');

      let popoverRect = popover.getBoundingClientRect();
      const placements = {
        'top-start': { top: rect.top - popoverRect.height, left: rect.left },
        'top': { top: rect.top - popoverRect.height, left: rect.left + rect.width / 2 - popoverRect.width / 2 },
        'top-end': { top: rect.top - popoverRect.height, left: rect.right - popoverRect.width },
               'right-start': { top: rect.top, left: rect.right },
        'right': { top: rect.top + rect.height / 2 - popoverRect.height / 2, left: rect.right },
               'right-end': { top: rect.bottom - popoverRect.height, left: rect.right },
        'bottom-start': { top: rect.bottom, left: rect.left },
        'bottom': { top: rect.bottom, left: rect.left + rect.width / 2 - popoverRect.width / 2 },
        'bottom-end': { top: rect.bottom, left: rect.right - popoverRect.width },
        'left-start': { top: rect.top, left: rect.left - popoverRect.width },
        'left': { top: rect.top + rect.height / 2 - popoverRect.height / 2, left: rect.left - popoverRect.width },
        'left-end': { top: rect.bottom - popoverRect.height, left: rect.left - popoverRect.width }
      };

      const availableSpaceLeft = rect.left;
      const availableSpaceRight = window.innerWidth - rect.right;

      const spaceAbove = rect.top;
      const spaceBelow = window.innerHeight - rect.bottom;
      const hasSpaceAbove = spaceAbove >= popoverRect.height;

      // If not enough space above, flip to bottom
      if (!hasSpaceAbove && spaceBelow >= popoverRect.height) {
        this.placement = this.placement.replace('top', 'bottom');
      }

      let position = placements[this.placement];

      // Adjust for viewport overflow
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      // Flip to the right if it would cover the reference element when placed to the left
      if (this.placement === 'left' && availableSpaceLeft < popoverRect.width) {
        this.placement = 'right';
        position.left = availableSpaceLeft + rect.width;
      }


```

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

### DemoPopoverElement Class Definition

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

Defines the `DemoPopoverElement` class which extends `ReactivePopoverElement`. It includes properties to hold the reference element and the desired popover placement.

```javascript
class DemoPopoverElement extends ReactivePopoverElement {
	referenceElement = null
  placement = null
```

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

### Including Cami.js CDN Script

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

Includes the Cami.js library via a Content Delivery Network (CDN) script tag, making the `cami` global object available for use in subsequent JavaScript code.

```html
<!-- CDN version below -->
<script src="https://unpkg.com/cami@0.3.5/build/cami.cdn.js"></script>
```

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

### Making Basic HTTP Request with cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/api/http.md

This example illustrates how to initiate an HTTP request using the main `http` function with a URL string. It shows how to use the `.tap()` operator to inspect the stream data (the response) and `.catchError()` to handle any errors that occur during the request.

```JavaScript
http('https://api.example.com/data')
  .tap(data => console.log(data))
  .catchError(error => console.error(error));
```

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

### Cami.js Counter Component Definition

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/counter_interval.md

Defines a `ReactiveElement` subclass `CounterElement` with a `count` property, a `doubleCount` getter (formula), `onConnect` lifecycle method to set up an interval and effects, and a `template` method for rendering.

```javascript
const { html, ReactiveElement } = cami;

class CounterElement extends ReactiveElement {
  count = 0;

  get doubleCount() {
    return this.count * 2;
  }

  onConnect() {
    setInterval(() => this.count++, 1000);
    this.effect(() => console.log(`Count: ${this.count}`));
    this.effect(() => console.log(`Double Count: ${this.doubleCount}`));
  }

  template() {
    return html`
      <div>Double Count: ${this.doubleCount}</div>
    `;
  }
}

customElements.define('counter-component', CounterElement);
```

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

### Creating ObservableStream from another Stream (JS)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/api/observable_stream.md

This example demonstrates how to use the static ObservableStream.from method to create a new ObservableStream instance from an existing ObservableStream (clickStream). The new stream will emit the same values as the source stream.

```js
// Example 1: Creating an ObservableStream from a user event stream
const clickStream = new ObservableStream(subscriber => {
  document.addEventListener('click', event => subscriber.next(event));
});
const observableStream = ObservableStream.from(clickStream);
```

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

### DemoPopoverElement template Method

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/popover.md

Defines the HTML template for the `DemoPopoverElement` using Cami.js `html` tagged template literal. It includes a dialog for the popover content and buttons to control the popover's placement and open/close state.

```javascript
template() {
    return html`
        <dialog @click=${(event) => event.stopPropagation()} role="dialog" aria-modal=${this.isOpen} aria-labelledby="dialog-title">
          <article>
            <small id="dialog-title">Hi! I'm a Popover</small>
            <button @click=${() => this.closeDialog()} aria-label="Close Popover">Close</button>
          </article>
        </dialog>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 200px;">
        <button @click=${() => { this.placement = 'top'; this.openDialog(); }}>Top</button>
        <div style="display: flex; gap: 200px;">
          <button @click=${() => { this.placement = 'left'; this.openDialog(); }}>Left</button>
          <button class="referenceElement" style="margin-left: 10px;" disabled>Reference</button>
          <button @click=${() => { this.placement = 'right'; this.openDialog(); }}>Right</button>
        </div>
        <button @click=${() => { this.placement = 'bottom'; this.openDialog(); }}>Bottom</button>
      </div>
    `;
  }
}
```

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

### Handling Component Connection (JavaScript)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/anchored_popover.md

Implements the `onConnect` lifecycle method for the `AnchoredPopover` component. It triggers an initial render, initializes properties, and sets up a `mousemove` event listener on the document. The listener updates the component's `referenceElement` to the current mouse position and calls `positionPopover` to reposition the popover.

```javascript
  	onConnect() {
    	this.render(); // early render because we need the dialog to be in the DOM
  	  this.referenceElement = null;
      this.placement = 'top';

      document.addEventListener('mousemove', (event) => {
        this.referenceElement = this.createVirtualElement(event.clientX, event.clientY);
        this.positionPopover();
      });
    }
```

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

### HTML Structure for Flight Booker Component

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/flight_booker.md

This HTML snippet defines the custom element tag <flight-booker> and includes the necessary script tags to load the cami.js library and the component's JavaScript code. It shows how to use the custom element in the page.

```html
<flight-booker></flight-booker>

<script src="./build/cami.cdn.js"></script>
<!-- CDN version below -->
<!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> -->
<script type="module">
  const { html, ReactiveElement } = cami;

  class FlightBookerElement extends ReactiveElement {
    flightType = 'one-way flight';
    startDate = new Date().toISOString().split('T')[0];
    endDate = new Date().toISOString().split('T')[0];
    isButtonDisabled = false;

    updateFlightType(e) {
      this.flightType = e.target.value;
      this.checkButtonState();
    }

    updateStartDate(e) {
      this.startDate = e.target.value;
      this.checkButtonState();
    }

    updateEndDate(e) {
      this.endDate = e.target.value;
      this.checkButtonState();
    }

    checkButtonState() {
      if (this.flightType === 'return flight' && new Date(this.startDate) > new Date(this.endDate)) {
        this.isButtonDisabled = true;
      } else {
        this.isButtonDisabled = false;
      }
    }

    bookFlight() {
      let message = `You have booked a ${this.flightType} on ${this.startDate}.`;
      if (this.flightType === 'return flight') {
        message += ` Return on ${this.endDate}.`;
      }
      alert(message);
    }

    template() {
      return html`
        <select .value=${this.flightType} @change=${(e) => this.updateFlightType(e)}>
          <option>one-way flight</option>
          <option>return flight</option>
        </select>
        <input type="date" .value=${this.startDate} @input=${(e) => this.updateStartDate(e)}>
        <input type="date" .value=${this.endDate} @input=${(e) => this.updateEndDate(e)} ?disabled=${this.flightType === 'one-way flight'}>
        <button @click=${() => this.bookFlight()} ?disabled=${this.isButtonDisabled}>Book</button>
      `;
    }
  }

  customElements.define('flight-booker', FlightBookerElement);
</script>
```

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

### Setting Up Input Validation Streams in Cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/streams.md

Configures stream subscriptions in the `onConnect` lifecycle method. It maps input events to validation functions, debounces the results, and updates the component's state based on validation outcomes and email availability checks.

```JavaScript
onConnect() {
      this.inputValidation$
        .map(e => this.validateEmail(e.target.value))
        .debounce(300)
        .subscribe(({ isEmailValid, emailError, email }) => {
          this.emailError = emailError;
          this.isEmailValid = isEmailValid;
          this.email = email;
          this.isEmailAvailable = this.queryEmail(this.email)
        });

      this.passwordValidation$
        .map(e => this.validatePassword(e.target.value))
        .debounce(300)
        .subscribe(({ isValid, password }) => {
          this.passwordError = isValid ? '' : 'Password must be at least 8 characters long.';
          this.password = password;
        });
    }
```

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

### Initializing Form State Observables - JavaScript

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/streams.md

This snippet shows the declaration of observable properties within a class extending `ReactiveElement`. These properties are used to manage the state of the form, including input values and validation errors.

```javascript
const { html, ReactiveElement } = cami;

class FormElement extends ReactiveElement {
  emailError = '';
  passwordError = '';
  email = '';
  password = '';
  emailIsValid = null;
  isEmailAvailable = null;
  // ...
}
```

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

### Querying Email Availability via API in Cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/streams.md

Uses the Cami.js `query` method to asynchronously fetch user data from an API based on the email address. Configures a query key and a fetch function, setting a stale time for caching.

```JavaScript
queryEmail(email) {
      return this.query({
        queryKey: ['Email', email],
        queryFn: () => {
          return fetch(`https://api.camijs.com/users?email=${email}`).then(res => res.json())
        },
        staleTime: 1000 * 60 * 5
      })
    }
```

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

### Initializing ObservableState in Cami.js (JavaScript)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/api/observable_state.md

This example demonstrates how to create a new instance of the ObservableState class from the 'cami-js' library, initializing it with a value (10 in this case), and then accessing its current value using the '.value' property.

```javascript
import { ObservableState } from 'cami-js';
const observable = new ObservableState(10);
console.log(observable.value); // 10
```

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

### Defining Cami.js Reactive Form Element and State

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/streams.md

Defines the `FormElement` class extending `ReactiveElement` to manage form state reactively. Initializes properties for email, password, validation errors, validity status, and streams for handling input events.

```JavaScript
class FormElement extends ReactiveElement {
    emailError = ''
    passwordError = ''
    email = '';
    password = '';
    emailIsValid = null;
    isEmailAvailable = null;

    inputValidation$ = this.stream();
    passwordValidation$ = this.stream();

    // ... rest of the class methods
}
```

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

### Defining Basic HTML Form Template - JavaScript

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/features/streams.md

This snippet defines the initial HTML structure for a form using a JavaScript template literal. It includes input fields for email and password, placeholders for validation messages, and a submit button.

```js
template() {
  return html`
    <form action="/submit" method="POST">
      <label>
        Email:
        <input type="email" aria-invalid="" value="">
        <span></span> <!-- Placeholder for email availability message -->
        <span></span> <!-- Placeholder for email error message -->
      </label>
      <label>
        Password:
        <input type="password" value="" aria-invalid="">
        <span></span> <!-- Placeholder for password error message -->
      </label>
      <input type="submit" value="Submit" style="opacity: 0.5"> <!-- we use opacity to show that the state is invalid -->
    </form>
  `;
}
```

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

### JavaScript Custom Element for Temperature Converter (Cami)

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/temperature_converter.md

Defines the `TemperatureConverterElement` custom element using the Cami library. It manages the Celsius and Fahrenheit values, provides conversion logic, and renders the input fields using Cami's reactive template system.

```JavaScript
const { html, ReactiveElement } = cami;

  class TemperatureConverterElement extends ReactiveElement {
    celsius = '';
    fahrenheit = '';

    convertToFahrenheit(celsius) {
      if (!isNaN(celsius) && celsius !== '') {
        this.fahrenheit = celsius * (9/5) + 32;
      }
    }

    convertToCelsius(fahrenheit) {
      if (!isNaN(fahrenheit) && fahrenheit !== '') {
        this.celsius = (fahrenheit - 32) * (5/9);
      }
    }

    template() {
      return html`
        <label>
          Celsius:
          <input type="number" .value=${this.celsius} @input=${(e) => this.convertToFahrenheit(e.target.value)}>
        </label>
        <label>
          Fahrenheit:
          <input type="number" .value=${this.fahrenheit} @input=${(e) => this.convertToCelsius(e.target.value)}>
        </label>
      `;
    }
  }

  customElements.define('temperature-converter', TemperatureConverterElement);
```

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

### Implementing Optimistic UI Blog Component with Cami.js

Source: https://github.com/kennyfrc/cami.js/blob/master/docs/learn_by_example/blog.md

This snippet defines a custom web component `blog-component` using Cami.js. It fetches blog posts using a `query` and adds new posts using a `mutation`. The mutation includes `onMutate` for optimistic updates, `onError` for rollback, and `onSettled` for cache invalidation, demonstrating optimistic UI patterns.

```javascript
<article>
  <blog-component></blog-component>
</article>
<script type="module">
  const { html, ReactiveElement, http } = cami;

  class BlogComponent extends ReactiveElement {
    posts = this.query({
      queryKey: ["posts"],
      queryFn: () => {
        return fetch("https://api.camijs.com/posts?_limit=5")
          .then(res => res.json())
      },
      staleTime: 1000 * 60 * 5 // 5 minutes
    })

    //
    // This uses optimistic UI. To disable optimistic UI, remove the onMutate and onError handlers.
    //
    addPost = this.mutation({
      mutationFn: (newPost) => {
        return fetch("https://api.camijs.com/posts", {
          method: "POST",
          body: JSON.stringify(newPost),
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          }
        }).then(res => res.json())
      },
      onMutate: (newPost) => {
        // Snapshot the previous state
        const previousPosts = this.posts.data;

        // Optimistically update to the new value
        this.posts.update(state => {
          state.data.push({ ...newPost, id: Date.now() });
        });

        // Return the rollback function and the new post
        return {
          rollback: () => {
            this.posts.update(state => {
              state.data = previousPosts;
            });
          },
          optimisticPost: newPost
        };
      },
      onError: (error, newPost, context) => {
        // Rollback to the previous state
        if (context.rollback) {
          context.rollback();
        }
      },
      onSettled: () => {
        // Invalidate the posts query to refetch the true state
        if (!this.addPost.isSettled) {
          this.invalidateQueries(['posts']);
        }
      }
    });

    template() {
      if (this.addPost.status === "pending") {
        return html`
        <div>Adding post...</div>`;
      }

      if (this.addPost.status === "error") {
        return html`<div>Error: ${this.addPost.errorDetails.message}</div>`;
      }

      if (this.posts.data) {
        return html`
          <button @click=${() => this.addPost.mutate({
            title: "New Post, Made Optimistically",
            body: "This is a new post created with optimistic UI. This actually won't persist to the server as we're using a Mock API. So once you refresh, this Blog will rollback to the original state. Refreshes are triggered through window tab changes and full page reloads.",
            userId: 1
          })}>Add Post</button>
          <ul>
            ${this.posts.data.slice().reverse().map(post => html`
              <li>
                <h2>${post.title}</h2>
                <p>${post.body}</p>
              </li>
            `)}
          </ul>
        `;
      }

      if (this.posts.status === "loading") {
        return html`<div>Loading...</div>`;
      }

      if (this.posts.status === "error") {
        return html`<div>Error: ${this.posts.errorDetails.message}</div>`;
      }
    }
  }

  customElements.define('blog-component', BlogComponent);
</script>
```