@inglorious/web 4.5.1 → 5.0.1

package/README.md

@@ -17,7 +17,7 @@ Unlike modern frameworks that invent their own languages or rely on signals, pro
 
 - **Entity-Based Rendering Model**  
   Each entity type defines its own `render(entity, api)` method.  
-  `api.render(id)` composes the UI by invoking the correct renderer for each entity.
+  `api.render(id, typeName?, Type?)` composes the UI by invoking the correct renderer for each entity and can lazily register a missing type.
 
 - **Type Composition**  
   Types can be composed as arrays of behaviors, enabling reusable patterns like authentication guards, logging, or any cross-cutting concern.
@@ -306,8 +306,8 @@ const types = {
 }
 
 const entities = {
-  counter1: { type: "counter", value: 0 },
-  counter2: { type: "counter", value: 10 },
+  counter1: { type: "Counter", value: 0 },
+  counter2: { type: "Counter", value: 10 },
 }
 
 export const store = createStore({ types, entities })
@@ -358,7 +358,7 @@ import { counter } from "./types/counter.js"
 
 test("increment adds to value", () => {
   const { entity, events } = trigger(
-    { type: "counter", id: "counter1", value: 10 },
+    { type: "Counter", id: "counter1", value: 10 },
     counter.increment,
     { amount: 5 },
   )
@@ -369,7 +369,7 @@ test("increment adds to value", () => {
 
 test("increment dispatches overflow event", () => {
   const { entity, events } = trigger(
-    { type: "counter", id: "counter1", value: 99 },
+    { type: "Counter", id: "counter1", value: 99 },
     counter.increment,
     { amount: 5 },
   )
@@ -389,7 +389,7 @@ import { counter } from "./types/counter.js"
 
 test("counter renders correctly", () => {
   const entity = {
-    type: "counter",
+    type: "Counter",
     id: "counter1",
     value: 42,
   }
@@ -406,7 +406,7 @@ test("counter renders correctly", () => {
 })
 
 test("counter button has click handler", () => {
-  const entity = { type: "counter", id: "counter1", value: 10 }
+  const entity = { type: "Counter", id: "counter1", value: 10 }
   const mockApi = { notify: jest.fn() }
 
   const template = counter.render(entity, mockApi)
@@ -445,12 +445,12 @@ That's it. No `@testing-library/react`, no `renderHook`, no `act()` wrappers.
 
 ```javascript
 import { trigger } from "@inglorious/web/test"
-import { todo } from "./types/todo.js"
+import { Todo } from "./types/todo.js"
 
 test("toggle changes completed status", () => {
   const { entity } = trigger(
-    { type: "todo", id: "todo1", text: "Buy milk", completed: false },
-    todo.toggle,
+    { type: "Todo", id: "todo1", text: "Buy milk", completed: false },
+    Todo.toggle,
   )
 
   expect(entity.completed).toBe(true)
@@ -458,8 +458,8 @@ test("toggle changes completed status", () => {
 
 test("delete dispatches remove event", () => {
   const { events } = trigger(
-    { type: "todo", id: "todo1", text: "Buy milk" },
-    todo.delete,
+    { type: "Todo", id: "todo1", text: "Buy milk" },
+    Todo.delete,
   )
 
   expect(events).toEqual([{ type: "#todoList:removeTodo", payload: "todo1" }])
@@ -470,17 +470,17 @@ test("delete dispatches remove event", () => {
 
 ```javascript
 import { render } from "@inglorious/web/test"
-import { todo } from "./types/todo.js"
+import { Todo } from "./types/todo.js"
 
 test("todo renders text and status", () => {
   const entity = {
-    type: "todo",
+    type: "Todo",
     id: "todo1",
     text: "Buy milk",
     completed: false,
   }
 
-  const html = render(todo.render(entity, { notify: jest.fn() }))
+  const html = render(Todo.render(entity, { notify: jest.fn() }))
 
   expect(html).toContain("Buy milk")
   expect(html).not.toContain("completed")
@@ -488,13 +488,13 @@ test("todo renders text and status", () => {
 
 test("completed todo has completed class", () => {
   const entity = {
-    type: "todo",
+    type: "Todo",
     id: "todo1",
     text: "Buy milk",
     completed: true,
   }
 
-  const html = render(todo.render(entity, { notify: jest.fn() }))
+  const html = render(Todo.render(entity, { notify: jest.fn() }))
 
   expect(html).toContain("completed")
 })
@@ -504,13 +504,13 @@ test("completed todo has completed class", () => {
 
 ```javascript
 import { createStore } from "@inglorious/web"
-import { counter } from "./types/counter.js"
+import { Counter } from "./types/counter.js"
 
 test("full user interaction flow", () => {
   const store = createStore({
-    types: { counter },
+    types: { Counter },
     entities: {
-      counter1: { type: "counter", id: "counter1", value: 0 },
+      counter1: { type: "Counter", id: "counter1", value: 0 },
     },
   })
 
@@ -595,11 +595,11 @@ Type composition (like route guards) is also easy to test:
 ```javascript
 import { trigger } from "@inglorious/web/test"
 import { requireAuth } from "./guards/require-auth.js"
-import { adminPage } from "./pages/admin.js"
+import { AdminPage } from "./pages/admin.js"
 
 test("requireAuth blocks unauthenticated access", () => {
   // Compose the guard with the page type
-  const guardedPage = requireAuth(adminPage)
+  const GuardedPage = requireAuth(AdminPage)
 
   // Mock localStorage.getItem to return null (not logged in)
   const mockApi = {
@@ -607,8 +607,8 @@ test("requireAuth blocks unauthenticated access", () => {
   }
 
   const { events } = trigger(
-    { type: "adminPage", id: "admin" },
-    guardedPage.routeChange,
+    { type: "GuardedPage", id: "admin" },
+    GuardedPage.routeChange,
     { route: "adminPage" },
     mockApi,
   )
@@ -626,12 +626,12 @@ test("requireAuth allows authenticated access", () => {
   // Mock localStorage.getItem to return user data
   localStorage.setItem("user", JSON.stringify({ id: 1 }))
 
-  const guardedPage = requireAuth(adminPage)
+  const GuardedPage = requireAuth(AdminPage)
   const mockApi = { notify: jest.fn() }
 
   const { events } = trigger(
-    { type: "adminPage", id: "admin" },
-    guardedPage.routeChange,
+    { type: "GuardedPage", id: "admin" },
+    GuardedPage.routeChange,
     { route: "adminPage" },
     mockApi,
   )
@@ -694,7 +694,7 @@ To use it:
 3. Write your render functions using JSX
 
 ```jsx
-export const counter = {
+export const Counter = {
   render(entity, api) {
     return (
       <div className="counter">
@@ -848,7 +848,7 @@ const title = "Todos"
 **Generated output (simplified):**
 
 ```js
-export const app = {
+export const App = {
   create(entity) {
     entity.title = "Todos"
   },
@@ -963,24 +963,24 @@ To enable the router, add it to your store's types and create a `router` entity.
 ```javascript
 // store.js
 import { createStore, html } from "@inglorious/web"
-import { router, setRoutes } from "@inglorious/web/router"
+import { Router, setRoutes } from "@inglorious/web/router"
 
 const types = {
   // 1. Add the router type to your store's types
-  router,
+  Router,
 
   // 2. Define types for your pages
-  homePage: {
+  HomePage: {
     render: () => html`<h1>Welcome Home!</h1>`,
   },
-  userPage: {
+  UserPage: {
     render: (entity, api) => {
       // Access route params from the router entity
       const { params } = api.getEntity("router")
       return html`<h1>User ${params?.id ?? "Unknown"} - ${entity.username}</h1>`
     },
   },
-  notFoundPage: {
+  NotFoundPage: {
     render: () => html`<h1>404 - Page Not Found</h1>`,
   },
 }
@@ -988,10 +988,10 @@ const types = {
 const entities = {
   // 3. Create the router entity (no `routes` here)
   router: {
-    type: "router",
+    type: "Router",
   },
   userPage: {
-    type: "userPage",
+    type: "UserPage",
     username: "Alice",
   },
 }
@@ -1056,7 +1056,7 @@ You can improve performance by lazy-loading routes. Use a loader function that r
 ```javascript
 // store.js
 const entities = {
-  router: { type: "router" },
+  router: { type: "Router" },
 }
 
 export const store = createStore({ types, entities })
@@ -1073,7 +1073,7 @@ setRoutes({
 import { html } from "@inglorious/web"
 
 // Must be a named export matching the type name you want to use
-export const adminPage = {
+export const AdminPage = {
   render: () => html`<h1>Admin Area</h1>`,
 }
 ```
@@ -1116,25 +1116,25 @@ export const requireAuth = (type) => ({
 ```javascript
 // store.js
 import { createStore } from "@inglorious/web"
-import { router } from "@inglorious/web/router"
+import { Router } from "@inglorious/web/router"
 import { requireAuth } from "./guards/require-auth.js"
-import { adminPage } from "./pages/admin.js"
-import { loginPage } from "./pages/login.js"
+import { AdminPage } from "./pages/admin.js"
+import { LoginPage } from "./pages/login.js"
 
 const types = {
-  router,
+  Router,
 
   // Public page - no guard
-  loginPage,
+  LoginPage,
 
   // Protected page - composed with requireAuth guard
-  adminPage: [adminPage, requireAuth],
+  AdminPage: [AdminPage, requireAuth],
 }
 
 const entities = {
-  router: { type: "router" },
-  adminPage: { type: "adminPage" },
-  loginPage: { type: "loginPage" },
+  router: { type: "Router" },
+  adminPage: { type: "AdminPage" },
+  loginPage: { type: "LoginPage" },
 }
 
 export const store = createStore({ types, entities })
@@ -1173,10 +1173,10 @@ You can compose multiple guards for fine-grained control:
 ```javascript
 const types = {
   // Require authentication AND admin role
-  adminPage: [adminPage, requireAuth, requireAdmin],
+  AdminPage: [AdminPage, requireAuth, requireAdmin],
 
   // Require authentication AND resource ownership
-  userProfile: [userProfile, requireAuth, requireOwnership],
+  UserProfile: [UserProfile, requireAuth, requireOwnership],
 }
 ```
 
@@ -1207,7 +1207,7 @@ const logging = (type) => ({
 
 const types = {
   // Compose the counter type with logging
-  counter: [counterBase, logging],
+  counter: [CounterBase, logging],
 }
 ```
 
@@ -1248,13 +1248,13 @@ Include `form` in your `types` and create an entity for the form (use any id you
 
 ```javascript
 import { createStore } from "@inglorious/web"
-import { form } from "@inglorious/web/form"
+import { Form } from "@inglorious/web/form"
 
-const types = { form }
+const types = { Form }
 
 const entities = {
   form: {
-    type: "form",
+    type: "Form",
     initialValues: {
       name: "",
       email: "",
@@ -1324,7 +1324,7 @@ For a complete, working demo and helper components look at `examples/apps/web-fo
 
 ```javascript
 // @acme/design-system/data-grid.js
-export const dataGrid = {
+export const DataGrid = {
   render(entity, api) {
     const type = api.getType(entity.type)
 
@@ -1348,14 +1348,14 @@ export const dataGrid = {
 **Users customize freely:**
 
 ```javascript
-import { dataGrid } from "@acme/design-system/data-grid"
+import { DataGrid } from "@acme/design-system/data-grid"
 
 // Use as-is
-const simpleGrid = { ...dataGrid }
+const SimpleGrid = { ...DataGrid }
 
 // Override methods
-const customGrid = {
-  ...dataGrid,
+const CustomGrid = {
+  ...DataGrid,
   renderRow(entity, row, api) {
     return html`<div class="data-grid-row custom">
       ${row.name} - ${row.email}
@@ -1366,8 +1366,8 @@ const customGrid = {
 // Compose with behaviors
 import { sortable, exportable } from "@acme/design-system/behaviors"
 
-const advancedGrid = [
-  dataGrid,
+const AdvancedGrid = [
+  DataGrid,
   sortable,
   exportable,
   {
@@ -1441,10 +1441,10 @@ import "@shoelace-style/shoelace/dist/components/color-picker/color-picker.js"
 
 const types = {
   // App-specific type - full store integration
-  productTable,
+  ProductTable,
 
   // Web Component - for specialized UI
-  themeEditor: {
+  ThemeEditor: {
     colorChange(entity, color) {
       entity.primaryColor = color
     },
@@ -1475,7 +1475,7 @@ Let's be real: in a web app you very rarely need to create more than one entity
 
 ```javascript
 const types = {
-  app: {
+  App: {
     render(entity, api) {
       return html`
         <div class="app">${api.render("header")} ${api.render("content")}</div>
@@ -1483,13 +1483,13 @@ const types = {
     },
   },
 
-  header: {
+  Header: {
     render(entity, api) {
       return html`<header>${entity.title}</header>`
     },
   },
 
-  content: {
+  Content: {
     render(entity, api) {
       return html`<main>${entity.text}</main>`
     },
@@ -1498,9 +1498,9 @@ const types = {
 
 // Without autoCreateEntities - you need to define every entity
 const entities = {
-  app: { type: "app" },
-  header: { type: "header", title: "Welcome" },
-  content: { type: "content", text: "Hello World" },
+  app: { type: "App" },
+  header: { type: "Header", title: "Welcome" },
+  content: { type: "Content", text: "Hello World" },
 }
 
 // With autoCreateEntities - entities are created automatically
@@ -1514,7 +1514,7 @@ const store = createStore({
 If you want to initialize an entity with specific data, you can use the `create()` event handler:
 
 ```javascript
-const header = {
+const Header = {
   create(entity) {
     entity.title = "Welcome"
   },
@@ -1556,9 +1556,9 @@ Connects a store to a `lit-html` template and renders it into a DOM element. It
 
 The `renderFn` receives a powerful `api` object that contains all methods from the store's API (`getEntities`, `getEntity`, `notify`, etc.) plus special methods for the web package.
 
-**`api.render(id, options?)`**
+**`api.render(id, typeName?, Type?)`**
 
-This method is the cornerstone of entity-based rendering. It looks up an entity by its `id`, finds its corresponding type definition, and calls the `render(entity, api)` method on that type. This allows you to define rendering logic alongside an entity's other behaviors.
+This method is the cornerstone of entity-based rendering. It looks up an entity by its `id`, finds its corresponding type definition, and calls the `render(entity, api)` method on that type. When you pass `typeName` and `Type`, it will lazily register the type with `api.setType(typeName, Type)` if the type is not already present.
 
 ### Re-exported `lit-html` Utilities
 
@@ -1589,12 +1589,19 @@ import {
 
 // Subpath imports for tree-shaking
 import {
-  form,
+  Form,
   getFieldError,
   getFieldValue,
   isFieldTouched,
 } from "@inglorious/web/form"
-import { router } from "@inglorious/web/router"
+import {
+  Router,
+  getRoutes,
+  getRoute,
+  setRoutes,
+  addRoute,
+  removeRoute,
+} from "@inglorious/web/router"
 import { render, trigger } from "@inglorious/web/test"
 ```
 
@@ -1607,7 +1614,7 @@ When an entity's `render()` method throws an error, it can crash your entire app
 **Best practice:** Wrap your render logic in try-catch at the entity level:
 
 ```javascript
-const myType = {
+const MyType = {
   render(entity, api) {
     try {
       // Your render logic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "4.5.1",
+  "version": "5.0.1",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -51,8 +51,8 @@
   "dependencies": {
     "@lit-labs/ssr-client": "^1.1.8",
     "lit-html": "^3.3.1",
-    "@inglorious/store": "9.6.0",
-    "@inglorious/utils": "3.7.3"
+    "@inglorious/utils": "3.8.0",
+    "@inglorious/store": "10.0.0"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

package/src/form/index.js

@@ -1,6 +1,6 @@
 import * as handlers from "./handlers.js"
 import * as helpers from "./helpers.js"
 
-export const form = { ...handlers }
+export const Form = { ...handlers }
 
 export const { getFieldError, getFieldValue, isFieldTouched } = helpers

package/src/mount.js

@@ -1,5 +1,6 @@
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('@inglorious/store').Store} Store */
+/** @typedef {import('@inglorious/store').EntityType} EntityType */
 /** @typedef {import('../types/mount').Api} Api */
 
 import { html, render } from "lit-html"
@@ -9,20 +10,21 @@ import { html, render } from "lit-html"
  * @param {Store} store - The application state store.
  * @param {(api: Api) => TemplateResult | null} renderFn - The root render function.
  * @param {HTMLElement | DocumentFragment} element - The DOM element to mount the template to.
+ * @param {Object} [options] - Mount options.
+ * @param {boolean} [options.hydrate=true] - Whether to hydrate the existing DOM.
  * @returns {() => void} An unsubscribe function
  */
-export async function mount(store, renderFn, element) {
+export async function mount(store, renderFn, element, options = {}) {
   const api = { ...store._api }
   api.render = createRender(api)
 
-  let shouldHydrate = element.hasChildNodes()
+  const shouldHydrate = options.hydrate !== false && element.hasChildNodes()
 
   // If we need to hydrate, load the heavy lifting only now
   if (shouldHydrate) {
     const { hydrate } = await import("@lit-labs/ssr-client")
     const template = renderFn(api)
     hydrate(template, element)
-    shouldHydrate = false
   }
 
   const unsubscribe = store.subscribe(() => {
@@ -42,19 +44,33 @@ export async function mount(store, renderFn, element) {
  * @private
  */
 function createRender(api) {
-  return function (id) {
+  return function (id, typeName, type) {
+    registerTypeIfMissing(api, typeName, type)
+
     const entity = api.getEntity(id)
 
     if (!entity) {
       return ""
     }
 
-    const type = api.getType(entity.type)
-    if (!type?.render) {
+    const entityType = api.getType(entity.type)
+    if (!entityType?.render) {
       console.warn(`No render function for type: ${entity.type}`)
       return html`<div>No renderer for ${entity.type}</div>`
     }
 
-    return type.render(entity, api)
+    return entityType.render(entity, api)
+  }
+}
+
+/**
+ * Registers a type definition lazily when the caller provides one to render().
+ * @param {Api} api - The mount API.
+ * @param {string | undefined} typeName - The type name to register.
+ * @param {EntityType | undefined} type - The type definition to register.
+ */
+function registerTypeIfMissing(api, typeName, type) {
+  if (typeName && type && !api.getType(typeName)) {
+    api.setType(typeName, type)
   }
 }

package/src/router/handlers.js

@@ -4,6 +4,8 @@
  * @typedef {import("../../types/router").Api} Api
  */
 
+import { toCamelCase } from "@inglorious/utils/data-structures/string.js"
+
 const SKIP_FULL_MATCH_GROUP = 1 // .match() result at index 0 is the full string
 const REMOVE_COLON_PREFIX = 1
 
@@ -74,10 +76,6 @@ export function createHandlers(routeConfig) {
       })
     },
 
-    create(entity) {
-      entity.path ??= "/"
-    },
-
     /**
      * Handles browser `popstate` events.
      * Attempts to match the current location to a route and updates the router
@@ -93,12 +91,12 @@ export function createHandlers(routeConfig) {
       const entityId = entity.id
 
       if (route) {
-        if (typeof route.entityType === "function") {
+        if (typeof route.route === "function") {
           entity.isLoading = true
           entity.error = null
 
           try {
-            const module = await route.entityType()
+            const module = await route.route()
             api.notify(`#${entityId}:routeLoadSuccess`, { module, route })
             api.notify(`#${entityId}:popstate`, payload)
           } catch (error) {
@@ -166,12 +164,12 @@ export function createHandlers(routeConfig) {
       }
 
       // Asynchronous navigation
-      if (typeof route.entityType === "function") {
+      if (typeof route.route === "function") {
         entity.isLoading = true
         entity.error = null
 
         try {
-          const module = await route.entityType()
+          const module = await route.route()
           api.notify(`#${entityId}:routeLoadSuccess`, { module, route })
           api.notify(`#${entityId}:navigate`, payload)
         } catch (error) {
@@ -204,7 +202,7 @@ export function createHandlers(routeConfig) {
      * Registers the loaded type in the runtime type registry via `api.setType`
      * and updates the `routeConfig` entry for the pattern.
      * @param {RouterEntity} entity
-     * @param {{module: object, route: {pattern: string, entityType: string}}} payload
+     * @param {{module: object, route: {pattern: string, route: string}}} payload
      * @param {Api} api
      */
     routeLoadSuccess(entity, payload, api) {
@@ -215,7 +213,8 @@ export function createHandlers(routeConfig) {
       )
 
       api.setType(typeName, type)
-      routeConfig[route.pattern] = typeName
+      const [routeEntity] = api.getEntities(typeName)
+      routeConfig[route.pattern] = routeEntity?.id ?? toCamelCase(typeName)
 
       entity.isLoading = false
     },
@@ -263,9 +262,9 @@ function findRoute(routeConfig, pathname) {
   const [path, search] = pathname.split("?")
   let fallbackRoute = null
 
-  for (const [pattern, entityType] of Object.entries(routeConfig)) {
+  for (const [pattern, route] of Object.entries(routeConfig)) {
     if (pattern === "*") {
-      fallbackRoute = { pattern, entityType, params: {}, path }
+      fallbackRoute = { pattern, route, params: {}, path }
       continue
     }
 
@@ -274,7 +273,7 @@ function findRoute(routeConfig, pathname) {
       const query = search
         ? Object.fromEntries(new URLSearchParams(search))
         : {}
-      return { pattern, entityType, params, path, query }
+      return { pattern, route, params, path, query }
     }
   }
 
@@ -331,13 +330,13 @@ function patternToRegex(pattern) {
  * Updates the router entity's internal state.
  * @param {RouterEntity} entity - The router entity.
  * @param {object} options - The update options.
- * @param {string} options.entityType - The matched entity type.
+ * @param {string} options.route - The matched entity.
  * @param {string} options.path - The full path (pathname only, no query).
  * @param {object} options.params - The extracted route parameters.
  * @param {object} [options.query] - The parsed query parameters.
  */
-function updateRouter(entity, { entityType, path, params, query }) {
-  entity.route = entityType
+function updateRouter(entity, { route, path, params, query }) {
+  entity.route = route
   entity.path = path
   entity.params = params
   entity.query = query

package/src/router/index.js

@@ -9,7 +9,7 @@ import { createHelpers } from "./helpers.js"
  */
 const routeConfig = {}
 
-export const router = { ...createHandlers(routeConfig) }
+export const Router = { ...createHandlers(routeConfig) }
 
 export const { getRoutes, getRoute, setRoutes, addRoute, removeRoute } =
   createHelpers(routeConfig)

package/types/form.d.ts

@@ -189,7 +189,7 @@ export interface FormValidationErrorPayload {
 /**
  * The form type implementation for the entity-based state manager.
  */
-export declare const form: {
+export interface FormType {
   /**
    * Initializes the form entity with default state.
    * @param entity The form entity.
@@ -310,6 +310,8 @@ export declare const form: {
   ): void
 }
 
+export declare const Form: FormType
+
 /**
  * Gets the value of a specific field in the form.
  * @param form The form entity.

package/types/mount.d.ts

@@ -1,13 +1,31 @@
 import type { TemplateResult } from "lit-html"
-import type { BaseEntity, Store, Api as StoreApi } from "@inglorious/store"
+import type {
+  BaseEntity,
+  EntitiesState,
+  EntityType,
+  Store,
+  Api as StoreApi,
+} from "@inglorious/store"
 
-export type Api = StoreApi & {
+export type Api<
+  TEntity extends BaseEntity = BaseEntity,
+  TState extends EntitiesState<TEntity> = EntitiesState<TEntity>,
+> = StoreApi<TEntity, TState> & {
   /**
    * Renders an entity or a type component by its ID.
    * @param id The ID of the entity or type to render.
+   * @param typeName Optional type name to lazy-register.
+   * @param type Optional type definition to register when typeName is provided.
    * @returns The rendered template or an empty string if not found.
    */
-  render: (id: string) => TemplateResult | string
+  render: {
+    (id: string): TemplateResult | string
+    (
+      id: string,
+      typeName: string,
+      type: EntityType<TEntity>,
+    ): TemplateResult | string
+  }
 }
 
 /**
@@ -17,8 +35,11 @@ export type Api = StoreApi & {
  * @param element The DOM element to mount the template to.
  * @returns An unsubscribe function.
  */
-export function mount<Entity = BaseEntity, State = BaseState>(
-  store: Store<Entity, State>,
-  renderFn: (api: Api) => TemplateResult | null,
+export function mount<
+  TEntity extends BaseEntity = BaseEntity,
+  TState extends EntitiesState<TEntity> = EntitiesState<TEntity>,
+>(
+  store: Store<TEntity, TState>,
+  renderFn: (api: Api<TEntity, TState>) => TemplateResult | null,
   element: HTMLElement | DocumentFragment,
 ): () => void

package/types/router.d.ts

@@ -1,3 +1,5 @@
+import type { Api } from "./mount"
+
 /**
  * A map of route patterns to entity types.
  * The order of routes matters: more specific routes (e.g., `/users/new`)
@@ -83,7 +85,7 @@ export interface RouterType {
    * @param payload The initialization payload (currently unused).
    * @param api The store API for interacting with the system.
    */
-  init(entity: RouterEntity, payload: any, api: StoreApi): void
+  init(entity: RouterEntity, payload: any, api: Api): void
 
   /**
    * Navigates to a new route, updating the browser's history and the router entity state.
@@ -99,7 +101,7 @@ export interface RouterType {
   navigate(
     entity: RouterEntity,
     payload: string | number | NavigatePayload,
-    api: StoreApi,
+    api: Api,
   ): void | Promise<void>
 
   /**
@@ -109,25 +111,17 @@ export interface RouterType {
    * @param {RouteSyncPayload} payload - The new route state.
    * @param {StoreApi} api - The store API.
    */
-  routeSync(
-    entity: RouterEntity,
-    payload: RouteSyncPayload,
-    api: StoreApi,
-  ): void
+  routeSync(entity: RouterEntity, payload: RouteSyncPayload, api: Api): void
   /**
    * Handles browser `popstate` events. May perform async loading for lazy routes.
    */
-  popstate(
-    entity: RouterEntity,
-    payload: any,
-    api: StoreApi,
-  ): void | Promise<void>
+  popstate(entity: RouterEntity, payload: any, api: Api): void | Promise<void>
 
   /**
    * Handles successful async route loading for a pattern.
    * Registers the loaded type and updates runtime route config.
    */
-  routeLoadSuccess(entity: RouterEntity, payload: any, api: StoreApi): void
+  routeLoadSuccess(entity: RouterEntity, payload: any, api: Api): void
 
   /**
    * Handles errors that occurred while loading a lazy route.
@@ -135,6 +129,8 @@ export interface RouterType {
   routeLoadError(entity: RouterEntity, payload: any): void
 }
 
+export declare const Router: RouterType
+
 /**
  * Returns the current route configuration.
  * @returns {Record<string, string|function>} The current route configuration.