eisen

Dependency-free TypeScript frontend framework with JSX, hooks, and a fast virtual DOM.

Features

• Virtual DOM with content-hashed diffing and memoization
• JSX/TSX with Show, For, Transition, Fragment, portals
• React-style hooks: useState, useEffect, useRef
• @reactive() decorator with deep mutation tracking
• @computed() cached getters
• Two-way binding: bind:value, bind:checked
• Context (provide/inject), router, i18n
• Dev warnings for common mistakes

Install

npm install @kloudsoftware/eisen

Quick Start

import { createApp, useState } from '@kloudsoftware/eisen';

function App() {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => setCount(c => c + 1)}>
            Clicked {count} times
        </button>
    );
}

createApp(App, '#app');

Or with a class component:

import { createApp, Component, reactive } from '@kloudsoftware/eisen';

class App extends Component {
    @reactive() count = 0;

    render() {
        return (
            <button onClick={() => this.count++}>
                Clicked {this.count} times
            </button>
        );
    }
}

createApp(App, '#app');

Both styles can be mixed freely.

Docs

• Getting Started -- Install, TSX config, first app
• Hooks -- useState, useEffect, useRef
• Components -- @reactive, @computed, lifecycle, shouldUpdate
• Templates -- Show, For, Transition, Fragment, className, style, SVG
• Forms -- bind:value, bind:checked, validation
• Advanced -- Memoization, context, portals, router, i18n, performance tips

TSX Config

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "jsx",
        "jsxFragmentFactory": "Fragment",
        "experimentalDecorators": true
    }
}

Build

npm run build     # compile with tsup
npm run example   # serve example at http://localhost:5173
npm test          # run tests

Maintainers

Written and maintained by kloudsoftware.