https://github.com/marpple/rune

Web API based Front-end SDK
https://github.com/marpple/rune

Last synced: about 2 months ago
JSON representation

Web API based Front-end SDK

• Host: GitHub
• URL: https://github.com/marpple/rune
• Owner: marpple
• Created: 2024-03-06T03:00:11.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-17T06:04:21.000Z (3 months ago)
• Last Synced: 2024-07-15T14:26:33.092Z (2 months ago)
• Language: TypeScript
• Homepage: https://marpple.github.io/rune/
• Size: 2.46 MB
• Stars: 87
• Watchers: 5
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# 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

```shell

pnpm add rune-ts

npm install rune-ts

```

# Documentation

- [Website](https://marpple.github.io/rune/)

- [What is Rune?](https://marpple.github.io/rune/guide/what-is-rune.html)

- [Tutorial](https://marpple.github.io/rune/tutorial/view.html)

# Example

```typescript

interface Setting {

  title: string;

  on: boolean;

}

class SettingItemView extends View {

  switchView = new SwitchView(this.data);

  override template() {

    return html`

      


        ${this.data.title}

        ${this.switchView}

      

    `;

  }

}


class SettingListView extends ListView {

  ItemView = SettingItemView;

}

class SettingPage extends View {

  private _listView = new SettingListView(this.data);

  private _checkAllView = new SwitchView({ on: this._isCheckAll() });

  override template() {

    return html`

      


        


          
Setting

          ${this._checkAllView}

        

        
${this._listView}

      

    `;

  }


  protected override onRender() {

    this._checkAllView.addEventListener(Toggled, (e) => this._checkAll(e.detail.on));

    this._listView.addEventListener(Toggled, () => this._syncCheckAll());

  }

  private _checkAll(on: boolean) {

    this._listView.itemViews

      .filter((itemView) => itemView.data.on !== on)

      .forEach((itemView) => itemView.switchView.setOn(on));

  }

  private _syncCheckAll() {

    this._checkAllView.setOn(this._isCheckAll());

  }

  private _isCheckAll() {

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

  }

}

```