@kloudsoftware/eisen
v3.0.4
Published
Declarative and expressive TypeScript framework for building modern web applications
Downloads
67
Readme
eisen
declarative and expressive TypeScript framework for building modern web applications.
What is eisen?
eisen [ˈaizən] is a dependency‑free frontend framework written entirely in TypeScript. It ships with type definitions, a lean ~1200 LoC core and first class support for routing and internationalization. Features include:
- Virtual DOM with a diffing renderer
- Component model with lifecycle hooks
- Reactive state via the
reactivedecorator - Two‑way data binding using
Props - Built‑in router and i18n helpers
Why use eisen?
- Written in TypeScript – excellent editor integration and type safety
- Dependency free – the full source is easy to understand and extend
- Lightweight – focuses on essentials without sacrificing features
Installing
Install the package from npm:
npm install @kloudsoftware/eisenUsing eisen
Hello world
index.ts
import { VApp, Renderer } from '@kloudsoftware/eisen';
const renderer = new Renderer();
const app = new VApp('target', renderer);
app.init();
app.createElement('h1', 'Hello world!', app.rootNode);index.html
<body>
<div id="target"></div>
<script type="module" src="./index.ts"></script>
or
<script type="module" src="./index.tsx"></script>
</body>Components
To encapsulate and reuse logic, extend Component and implement render and lifeCycle:
import {Component, Props, reactive, VNode} from '@kloudsoftware/eisen';
export class Counter extends Component {
@reactive() count = 0;
render(props: Props): VNode {
//tsx version
return <div>
<button onclick={() => {
this.count++;
}}>
Click me
</button>
<strong e-if={() => this.count > 0}>Count: {this.count}</strong>
</div>;
}
lifeCycle() {
return {
mounted: () => console.log('mounted'),
unmounted: () => console.log('unmounted'),
};
}
}Mount the component:
import { VApp, Renderer, Props } from '@kloudsoftware/eisen';
const renderer = new Renderer();
const app = new VApp('target', renderer);
app.init();
app.mountComponent(new Counter(app), app.rootNode, new Props(app));Props and two‑way binding
Props provide a simple way to pass data and react to changes.
const props = new Props(app);
props.setProp('name', 'World');
const heading = app.k('h1', { value: 'Hello {{ name }}!' }, undefined, undefined, props);
props.registerCallback('name', val => console.log('name changed to', val));Input binding and validation
import { VInputNode } from '@kloudsoftware/eisen';
const user = { name: '' };
const input = app.k('input') as VInputNode;
input.bindObj(user, 'name');
input.validate(() => user.name.length > 3, 'error');
app.rootNode.appendChild(input);Router & i18n
const router = app.useRouter(app.rootNode);
// register your routes ...
app.useTranslationResolver(key => translations[key]);Build
Use microbundle to compile the source:
npm run buildMaintainers
Eisen is written and maintained by kloudsoftware.