Quickstart

This guide will help you get started with Ignite-Element. You’ll learn how to install the necessary libraries, initialize Ignite-Element with a state management library, and create shared and isolated components.

Ignite-Element is designed to work seamlessly with modern web standards, enabling developers to build reusable, reactive web components for any JavaScript or TypeScript environment.

---

Install Ignite-Element

To get started, you’ll need:

1. Ignite-Element: The core library.

2. lit-html: For templating.

3. A state management library: Choose between XState, Redux, or MobX.

Install them using your preferred package manager:

pnpm

pnpm add ignite-element lit-html xstate
# Or replace `xstate` with `redux` or `mobx`

---

Initialize Ignite-Element

After installing the dependencies, initialize Ignite-Element with your preferred state management library. In this example, we’ll use XState with a simple toggle machine:

JavaScript

import { igniteCore } from 'ignite-element';
import { createMachine } from 'xstate';

// Define a toggle state machine
const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'Inactive',
  states: {
    Inactive: {
      on: { toggle: 'Active' },
    },
    Active: {
      on: { toggle: 'Inactive' },
    },
  },
});

For more details about this example, visit the XState Quickstart: Create a Machine documentation.

---

Plug into Ignite-Element

You can use this machine with Ignite-Element as follows:

TypeScript

const igniteElement = igniteCore({
  adapter: "xstate",
  source: counterMachine,
});

---

Create a Shared Component

Shared components use a global state that is shared across all instances. Here's an example of a toggle component:

JavaScript

igniteElement.shared('toggle-display', (state, send) => {
  return html`
    <div>
      <h3>State: ${state.value}</h3>
      <button @click=${() => send({ type: 'toggle' })}>Toggle</button>
    </div>
  `;
});

---

Create an Isolated Component

JavaScript

igniteElement.isolated('toggle-button', (state, send) => {
  return html`
    <div>
      <h3>State: ${state.value}</h3>
      <button @click=${() => send({ type: 'toggle' })}>Toggle</button>
    </div>
  `;
});

Each toggle-button instance will manage its own state independently.

---

Add Styles

You can define global styles or styles specific to a component. For example, using lit-html’s built-in support for <style> tags:

JavaScript

igniteElement.shared('styled-toggle', (state, send) => {
  return html`
    <style>
      .toggle {
        color: #0077cc;
        font-size: 1.2rem;
      }
    </style>
    <div class="toggle">
      <h3>State: ${state.value}</h3>
      <button @click=${() => send({ type: 'toggle' })}>Toggle</button>
    </div>
  `;
});

For larger or shared styles, use the setGlobalStyles method. Refer to the Styling with Ignite-Element section for detailed examples and best practices.