@ts-kit/lit-framework
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0-alpha.14 • Public • Published

    lit-framework

    A small frameworking for building web components using lit-html

    Goals

    • Small (~7k for todo app)
    • uses standards (custom elements and shadow dom)
    • component template can ONLY be updated by calling set state. no exceptions
    • Uses dependency Injection
    • Component and Custom Element are Separate. (Your should be able to test component code without creating the custom element)

    Installation:

    npm i @ts-kit/lit-framework @ts-kit/di lit-html

    Example:

    import { Component, State, ComponentState, Handle } from '@ts-kit/lit-framework';
    import { html } from 'lit-html';
     
    @Component<number>({
      tag: 'hello-world',
      defaultState: 0,
      template(state, run) {
        return html`
         <button @click=${run('DECREMENT')}>Decrement</button>
         
         ${state}
         
         <button @click=${run('INCREMENT')}>Increment</button>
        `
      }
    })
    class HelloWorldComponent {
      constructor(@State() private state: ComponentState<number>) {}
      
      @Handle('INCREMENT') onIncrement() {
        this.state.setState(state => state + 1);
      }
      
      @Handle('DECREMENT') onDecrement() {
        this.state.setState(state => state - 1);
      }
    }

    Install

    npm i @ts-kit/lit-framework

    DownloadsWeekly Downloads

    30

    Version

    3.0.0-alpha.14

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar