{"id":13608900,"url":"https://github.com/marpple/rune","last_synced_at":"2025-05-16T06:04:35.148Z","repository":{"id":226138546,"uuid":"767862892","full_name":"marpple/rune","owner":"marpple","description":"Web API based Front-end SDK","archived":false,"fork":false,"pushed_at":"2025-03-13T03:17:28.000Z","size":2952,"stargazers_count":192,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-16T06:04:07.580Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://marpple.github.io/rune/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marpple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-06T03:00:11.000Z","updated_at":"2025-05-16T02:22:45.000Z","dependencies_parsed_at":"2024-06-06T07:58:45.482Z","dependency_job_id":"a7732dff-5e1f-4b28-a400-ec5ecbbfc7cc","html_url":"https://github.com/marpple/rune","commit_stats":null,"previous_names":["marpple/rune"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Frune","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Frune/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Frune/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Frune/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marpple","download_url":"https://codeload.github.com/marpple/rune/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478186,"owners_count":22077675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T19:01:30.884Z","updated_at":"2025-05-16T06:04:35.104Z","avatar_url":"https://github.com/marpple.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp\u003e\u003cimg src=\"https://raw.githubusercontent.com/marpple/rune/main/docs/img/logo.png\" width=\"50%\" alt=\"rune\"\u003e\u003c/p\u003e\n\n# Rune - Web API based Front-end SDK\n\nRune is a fast and robust library for building high-quality frontend applications, serving as a modern web technology-based SDK.\n\n- Object-oriented programming-based architecture\n- Type-safe Generic Views \u0026 Enable\n- Single-component Server-Side Rendering\n- Sleek UI component development kit\n- High portability and performance\n\n# Getting Started\n\n```shell\npnpm add rune-ts\nnpm install rune-ts\n```\n\n# Documentation\n\n- [Website](https://marpple.github.io/rune/)\n- [What is Rune?](https://marpple.github.io/rune/guide/what-is-rune.html)\n- [Tutorial](https://marpple.github.io/rune/tutorial/view.html)\n\n# Example\n\n```typescript\ninterface Setting {\n  title: string;\n  on: boolean;\n}\n\nclass SettingItemView extends View\u003cSetting\u003e {\n  switchView = new SwitchView(this.data);\n\n  override template() {\n    return html`\n      \u003cdiv\u003e\n        \u003cspan class=\"title\"\u003e${this.data.title}\u003c/span\u003e\n        ${this.switchView}\n      \u003c/div\u003e\n    `;\n  }\n}\n\nclass SettingListView extends ListView\u003cSettingItemView\u003e {\n  ItemView = SettingItemView;\n}\n\nclass SettingPage extends View\u003cSetting[]\u003e {\n  private listView = new SettingListView(this.data);\n  private toggleAllView = new SwitchView({ on: this.isAllOn() });\n\n  override template() {\n    return html`\n      \u003cdiv\u003e\n        \u003cdiv class=\"header\"\u003e\n          \u003ch2\u003eSetting\u003c/h2\u003e\n          ${this.toggleAllView}\n        \u003c/div\u003e\n        \u003cdiv class=\"body\"\u003e${this.listView}\u003c/div\u003e\n      \u003c/div\u003e\n    `;\n  }\n\n  protected override onRender() {\n    this.toggleAllView.addEventListener(Toggled, (e) =\u003e this.toggleAll(e.detail.on));\n    this.listView.addEventListener(Toggled, () =\u003e this.syncToggleAllView());\n  }\n\n  private toggleAll(on: boolean) {\n    this.listView.itemViews\n      .filter((itemView) =\u003e itemView.data.on !== on)\n      .forEach((itemView) =\u003e itemView.switchView.setOn(on));\n  }\n\n  private syncToggleAllView() {\n    this.toggleAllView.setOn(this.isAllOn());\n  }\n\n  private isAllOn() {\n    return this.data.every(({ on }) =\u003e on);\n  }\n}\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/marpple/rune/main/docs/img/setting_controller.gif\" alt=\"setting_controller\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarpple%2Frune","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarpple%2Frune","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarpple%2Frune/lists"}