API Reference

This page documents the runtime API for Inglorious Web and the underlying Inglorious Store.

createStore(config)

Creates a store instance to manage entities, event dispatch, and reactive rendering.

Parameters

• types?: Record<string, object> — type definitions for entities.
• entities?: Record<string, object> — initial entity state.
• systems?: object[] — systems that handle events outside entity-specific handlers.
• middlewares?: Function[] — middleware functions to intercept or transform events.
• autoCreateEntities?: boolean — automatically create a default entity for each registered type.
• updateMode?: "auto" | "manual" — whether events are processed immediately or manually.
• updateStrategy?: "structural-sharing" | "full-clone" — how the state is copied before queued events are applied. The default, "structural-sharing", copies only the entities that change. Use "full-clone" for simulations where thousands of entities change every frame; it requires every state value to be structured-cloneable (no functions or DOM nodes in the state). Under both strategies the current state is swapped only after every queued event has been processed.

Example

const store = createStore({
  types: {
    Counter: {
      create(entity) {
        entity.count = 0
      },
      increment(entity) {
        entity.count += 1
      },
      render(entity) {
        return html`<span>${entity.count}</span>`
      },
    },
  },
  entities: {
    counter: { type: "Counter" },
  },
})

Store methods

The object returned by createStore() exposes the core store API.

store.subscribe(listener)

Subscribe to state updates.

const unsubscribe = store.subscribe(() => {
  console.log("store updated")
})

Related

Example

import { mount } from "@inglorious/web"

mount(store, (api) => api.render("app"), document.getElementById("root"), {
  onError(error) {
    console.error("render failed", error)
  },
})

What mount does

• Creates an api object from the store
• Adds api.render() for entity rendering
• Hydrates existing markup if the container already has child nodes
• Subscribes to store updates and re-renders automatically
• Emits the init event once mounted

Rendering helpers

The docs use lit-html helpers like html, when, repeat, and unsafeHTML.

when(condition, content)

Render content conditionally.

html` ${when(entity.isOpen, () => html`<div>Open</div>`)} `

repeat(items, fn)

Render a list with keyed diffing.

html`
  <ul>
    ${repeat(
      items,
      (item) => item.id,
      (item) => html`<li>${item.label}</li>`,
    )}
  </ul>
`

unsafeHTML(htmlString)

Render raw HTML.

html`<div>${unsafeHTML(entity.content)}</div>`

Middleware

Middleware can intercept and modify events before they reach handlers.

function logger(store, event) {
  console.log("event", event)
  return event
}

Middleware receives:

• store — the store object
• event — the event object with type and optional payload

If a middleware returns null, the event is dropped.

const loggingMiddleware = (store, event) => {
  console.log("Event:", event.type, event.payload)
  return event // Always return event
}

const store = createStore({
  types,
  middlewares: [loggingMiddleware],
})

Environment Variables

import.meta.env.DEV

Is development mode.

if (import.meta.env.DEV) {
  console.log("Debug info")
}

import.meta.env.PROD

Is production mode.

if (import.meta.env.PROD) {
  // Enable analytics
}

TypeScript

Entity Type

interface Entity {
  type: string
  [key: string]: any
}

Template Result

type TemplateResult = import("lit-html").TemplateResult

Update Function

type UpdateFn<T extends Entity = Entity> = (draft: Draft<T>) => void

Related

• Guide — Getting started guide
• Featured Types — Built-in types documentation
• Advanced — Advanced patterns

Need help? Report an issue or ask on discussions.