{"id":16988502,"url":"https://github.com/chaoyangnz/weiv","last_synced_at":"2025-08-21T12:47:27.096Z","repository":{"id":65520286,"uuid":"116633728","full_name":"chaoyangnz/weiv","owner":"chaoyangnz","description":"🤡 weiv.js - A pragmatic UI view library for modern component-oriented web development.","archived":false,"fork":false,"pushed_at":"2025-06-24T11:09:16.000Z","size":4993,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T09:37:25.684Z","etag":null,"topics":["angular-ish","angular-like","component","frontend","react-like","reactive","vdom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chaoyangnz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-08T05:26:05.000Z","updated_at":"2023-08-13T10:10:57.000Z","dependencies_parsed_at":"2023-01-27T03:00:57.423Z","dependency_job_id":null,"html_url":"https://github.com/chaoyangnz/weiv","commit_stats":null,"previous_names":["richdyang/weiv","chaoyangnz/rav"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/chaoyangnz/weiv","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaoyangnz%2Fweiv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaoyangnz%2Fweiv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaoyangnz%2Fweiv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaoyangnz%2Fweiv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chaoyangnz","download_url":"https://codeload.github.com/chaoyangnz/weiv/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaoyangnz%2Fweiv/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264545017,"owners_count":23625387,"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":["angular-ish","angular-like","component","frontend","react-like","reactive","vdom"],"created_at":"2024-10-14T03:04:10.509Z","updated_at":"2025-07-10T07:04:54.279Z","avatar_url":"https://github.com/chaoyangnz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## What is `weiv`\n![npm](https://img.shields.io/npm/dt/weivjs.svg)\n![npm](https://img.shields.io/npm/l/weivjs.svg)\n![npm](https://img.shields.io/npm/v/weivjs.svg)\n\n\u003cimg src='./weiv.svg' width=\"80\" /\u003e weiv.js - A home-brew UI view library for modern component-oriented web development.\n`Weiv` is the reverse of the word `View` or `微V` in Chinese which means micro-view literally.\n\n## Why `weiv`?\n\nThis is an era of front-end evolution with tons of front-end frameworks: React, Angular, Vue, Preact, Ractive, Svelte. Probably like me, you also feel tired to follow this one or another one. So I choose to reinvent the wheel and eat my own dog food.\n\nFor developers: [Guide for developers](guide-for-developers.md)\n\n## How it's like\n\n### TODO MVC example\n\n[Live demo](http://chao.yang.to/weiv-todomvc/)\n\n[Source code](http://github.com/chaoyangnz/weiv-todomvc)\n\n\u003cimg src=\"https://i.imgur.com/bVaAVQt.gif\" width=\"500\"\u003e\n\n[![Edit weiv-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/91w42n314o?autoresize=1\u0026expanddevtools=1\u0026hidenavigation=1)\n\n### Basic feature example\n\u003cimg src=\"https://i.imgur.com/7zDlvn1.gif\" width=\"500\"\u003e\n\n[![Edit weiv-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m7k55r39p9?autoresize=1\u0026expanddevtools=1\u0026hidenavigation=1)\n```javascript\nimport { Component, observable, action } from 'weivjs'\n\n@Component({\n  template: `\n  \u003cdiv\u003e\n    \u003cspan\u003eTODO: {{a}}\u003c/span\u003e\n    \u003cbutton onclick=\"changeProp\" style=\"height: 30px\"\u003eTry to change props?\u003c/button\u003e\n    \u003cp\u003e\n      \u003cslot\u003e\n        \u003cp\u003eshow when no slot\u003c/p\u003e\n      \u003c/slot\u003e\n      \u003cp\u003e\n        \u003cinput type=\"text\" oninput=\"onInput\"  /\u003e\n        \u003cbutton onclick=\"onSave\" style=\"height: 30px\"\u003eSave\u003c/button\u003e\n        \u003cinput type=\"text\" disabled @bind:value=\"input\" /\u003e\n      \u003c/p\u003e\n      \u003cul\u003e\n        \u003cslot name=\"item\"\u003eshow when no item slot\u003c/slot\u003e\n      \u003c/ul\u003e\n    \u003c/p\u003e\n  \u003c/div\u003e\n  `,\n  props: {\n    a: {type: 'number', required: true}\n  },\n  events: {\n    save: {}\n  }\n})\nexport class Todo {\n  changeProp() {\n    try {\n      this.a = 0\n    } catch (err) {\n      alert(err.message)\n    }\n  }\n\n  onSave() {\n    this.$emit('save', this.input, '')\n  }\n\n  @observable\n  input = ''\n\n  onInput(e) {\n    this.input = e.target.value\n    console.log('on input %o', e)\n  }\n}\n\n@Component({\n  template: `\n  \u003cdiv @var:i=\"100\"\u003e\n    \u003ch1 @bind:title=\"counter\"\u003e{{firstName}} {{lastName}}\u003c/h1\u003e\u003cp\u003e{{blogURL}}\u003c/p\u003e\n    \u003cdiv @if=\"counter \u003c 5\"\u003eLocation: {{location.city}} - {{location.country}}\u003c/div\u003e\n    \u003cp\u003eCountdown: {{counter}}\u003c/p\u003e\n    \u003cbutton onclick=\"minus\" style=\"width: 80px\"\u003e➖\u003c/button\u003e\n    \u003cbutton @on:click=\"plus\" style=\"width: 80px\"\u003e➕\u003c/button\u003e\n    \u003cp\u003eTip: When counter is less than 5, location will be shown.\u003c/p\u003e\n    \u003col\u003e\n      \u003cli @for:i=\"[1,2,3]\"\u003e\n      {{i}} - {{$super.i}}\n      \u003c/li\u003e\n    \u003c/ol\u003e\n    \u003ctodo @bind:a=\"counter\" @on:save=\"onSave\"\u003e\n      \u003cdiv\u003ethis is a default slot\u003c/div\u003e\n      \u003cli slot=\"item\"\u003eitem1\u003c/li\u003e\n      \u003cli slot=\"item\"\u003eitem2\u003c/li\u003e\n      \u003cspan\u003eanother default slot\u003c/span\u003e\n      \u003cp\u003eshow var value: {{i}}\u003c/p\u003e\n    \u003c/todo\u003e\n  \u003c/div\u003e\n  `,\n  components: {'todo': Todo}\n})\nexport class App {\n  firstName = 'Chao'\n  lastName = 'Yang'\n  blogURL = 'http://chaoyang.nz'\n  location = {\n    city: 'Auckland',\n    country: 'New Zealand'\n  }\n\n  @observable counter = 10\n  @action plus() {\n    if (this.counter === 10) return\n    this.counter += 1\n  }\n  @action minus() {\n    if (this.counter === 0) return\n    this.counter -= 1\n  }\n\n  onSave(a, b) {\n    alert(`Are you sure to save: ${a} ${b}?`)\n  }\n}\n\nnew App().$mount('#app')\n```\n\n## Building blocks \u0026 Credits\n\n- [virtual dom](https://github.com/Matt-Esch/virtual-dom)\n- [mobx](https://github.com/mobxjs/mobx)\n- [jexl-sync](https://github.com/chaoyangnz/jexl-sync)\n\n## TODOs\n\n- [x] Add slots support\n- [x] Refine directive structure\n- [x] Add scope to support `@for:i=\"\"` directive like `for ... in`\n- [x] Enhance events support\n- [x] A lot of built-in directives: `@for`, `@if`/`@elif`/`else`, `@var`, `@bind`, `@on`, `@model`, `@show`, `@html`\n- [ ] Add lifecycle hooks\n- [ ] Optimise: cache subtree via vdom-trunk\n- [ ] Optimise: batch update via main-loop\n- [ ] Optimise: try to use zone.js intead of mobx `autorun`\n- [ ] Write a UI component library like ElementUI\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaoyangnz%2Fweiv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchaoyangnz%2Fweiv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaoyangnz%2Fweiv/lists"}