https://github.com/marpple/rune
Web API based Front-end SDK
https://github.com/marpple/rune
Last synced: about 1 year 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-13T03:17:28.000Z (over 1 year ago)
- Last Synced: 2025-05-16T06:04:07.580Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://marpple.github.io/rune/
- Size: 2.82 MB
- Stars: 192
- Watchers: 5
- Forks: 8
- 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 toggleAllView = new SwitchView({ on: this.isAllOn() });
override template() {
return html`
Setting
${this.toggleAllView}
${this.listView}
`;
}
protected override onRender() {
this.toggleAllView.addEventListener(Toggled, (e) => this.toggleAll(e.detail.on));
this.listView.addEventListener(Toggled, () => this.syncToggleAllView());
}
private toggleAll(on: boolean) {
this.listView.itemViews
.filter((itemView) => itemView.data.on !== on)
.forEach((itemView) => itemView.switchView.setOn(on));
}
private syncToggleAllView() {
this.toggleAllView.setOn(this.isAllOn());
}
private isAllOn() {
return this.data.every(({ on }) => on);
}
}
```
