rune-ts

Rune - Web API based Front-end SDK

Rune is a fast and robust library for building high-quality frontend applications, serving as a modern web technology-based SDK.

• Object-oriented programming-based architecture
• Type-safe Generic Views & Enable
• Single-component Server-Side Rendering
• Sleek UI component development kit
• High portability and performance

Getting Started

pnpm add rune-ts
npm install rune-ts

Documentation

• Website
• What is Rune?
• Tutorial

Example

interface Setting {
  title: string;
  on: boolean;
}

class SettingItemView extends View<Setting> {
  switchView = new SwitchView(this.data);

  override template() {
    return html`
      <div>
        <span class="title">${this.data.title}</span>
        ${this.switchView}
      </div>
    `;
  }
}

class SettingListView extends ListView<SettingItemView> {
  ItemView = SettingItemView;
}

class SettingPage extends View<Setting[]> {
  private listView = new SettingListView(this.data);
  private checkAllView = new SwitchView({ on: this.isAllOn() });

  override template() {
    return html`
      <div>
        <div class="header">
          <h2>Setting</h2>
          ${this.checkAllView}
        </div>
        <div class="body">${this.listView}</div>
      </div>
    `;
  }

  protected override onRender() {
    this.checkAllView.addEventListener(Toggled, (e) => this.checkAll(e.detail.on));
    this.listView.addEventListener(Toggled, () => this.syncCheckAllView());
  }

  private checkAll(on: boolean) {
    this.listView.itemViews
      .filter(itemView => itemView.data.on !== on)
      .forEach(itemView => itemView.switchView.setOn(on));
  }

  private syncCheckAllView() {
    this.checkAllView.setOn(this.isAllOn());
  }

  private isAllOn() {
    return this.data.every(({ on }) => on);
  }
}