rune-ts
v0.9.8TypeScript
Rune Core Library
0/weekUpdated 3 months agoApache-2.0Unpacked: 310.5 KB
Published by marpple-dev-admin
npm install 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
``shell`
pnpm add rune-ts
npm install rune-ts
Documentation
- Website
- What is Rune?
- Tutorial
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.isAllOn() });
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.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);
}
}
``