OKALIT

LIAPF

logo The Progressive Web Components Framework.

Documentation

Initialize Scroll

Concept

What is this?

Okalit is a progressive Web Components framework built on Lit, enhanced with signal-based reactivity via uhtml, modern TC39 decorators, and a modular enterprise architecture. Uncompromised performance meets absolute control.

Opinionated Architecture

SIGNALS

Fine-grained reactivity. Update the DOM without virtual diffing overhead.

ROUTER

Lazy-loaded SPA routes with built-in navigation guards and interceptors.

SERVICES

REST & GraphQL Data Injection. Clean separation of concerns.

CHANNELS

Cross-component reactive state. Eliminate prop-drilling instantly.

I18N

Reactive translations. Switch languages without reloading the app.

PERF

Idle, When, Viewport directives for optimal lazy hydration.

The Core Node

Define an entity on the network. A self-contained component connected to the DOM through signals, ensuring surgical reactivity without re-rendering the whole tree. Uses modern TC39 Decorators.

my-counter.js

import { Okalit, html, defineElement } from '@okalit';

@defineElement({
  tag: 'my-counter',
  styles: [css],
  props: [
    { count: { type: Number, value: 0 } }
  ]
})
export class MyCounter extends Okalit {
  render() {
    return html`
      <p>Count: ${this.count.value}</p>
      <button @click=${() => this.count.value++}>+1</button>
    `;
  }
}

Routing Systems

SPA router based on history.pushState. Nested routes, lazy loading via import(), dynamic parameters, guards, and interceptors.

APP.ROUTES.JS

export default [{
  path: '/',
  component: 'example-module',
  import: () => import('./modules/example.module.js'),
  interceptors: [navLogInterceptor],
  children: [
    {
      path: '/detail/:id',
      component: 'example-detail',
      import: () => import('./pages/example-detail.js'),
      guards: [authGuard],
    }
  ]
}];

SPA NAVIGATION

> Lazy loading
Guards run before import()
> Nested routes
Module → Page hierarchy
> Dynamic params
Express-like /detail/:id
> Interceptors
Logging, analytics, transforms


                                    this.navigate('/detail/42');

The Power of Channels

Eliminate prop-drilling with global reactive state singletons. Channels provide a clean API for cross-component communication.

COUNTER.CHANNEL.JS

// 1. Define global reactive state
export const CounterChannel = defineChannel('app:counter', {
  initialValue: 0,
  persist: 'local',    // 'memory' | 'local' | 'session'
  scope: 'app',        // 'app' | 'module' | 'page'
});

COMPONENT-A.JS

// 2. Update state from anywhere
static channels = { count: CounterChannel() };
onBtnClick() { 
  this.count.set(this.count.value + 1); 
}

COMPONENT-B.JS

// 3. Reactive read
render() {
  return html`<p>Shared: ${this.count.value}</p>`;
}

Persistence Levels

Memory In-memory signal. Volatile.
Session SessionStorage persistence.
Local LocalStorage. Max survival.

Hierarchical Stands

Organize your application logic with a modular architecture. Modules encapsulate domains, Pages manage routes, and Components breathe life into your UI.

Class Hierarchy

App (AppMixin)
└── Module (ModuleMixin)
    └── Page (PageMixin)
        └── Component (Okalit)

src/ Structure

src/
├── main-app.js          // Root
├── app.routes.js        // Routes
├── channels/            // State
├── guards/              // Auth
├── interceptors/        // Network
├── modules/             // Domains
│   └── example/
│       ├── example.module.js
│       ├── example.routes.js
│       └── pages/
├── services/            // API
└── styles/              // CSS

LIAPF Team