Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chaoyangnz/weiv

🤡 weiv.js - A pragmatic UI view library for modern component-oriented web development.
https://github.com/chaoyangnz/weiv

angular-ish angular-like component frontend react-like reactive vdom

Last synced: about 1 month ago
JSON representation

🤡 weiv.js - A pragmatic UI view library for modern component-oriented web development.

Host: GitHub
URL: https://github.com/chaoyangnz/weiv
Owner: chaoyangnz
License: mit
Created: 2018-01-08T05:26:05.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2020-03-13T22:56:22.000Z (over 4 years ago)
Last Synced: 2024-03-24T18:43:28.434Z (8 months ago)
Topics: angular-ish, angular-like, component, frontend, react-like, reactive, vdom
Language: JavaScript
Homepage:
Size: 4.57 MB
Stars: 6
Watchers: 2
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        ## What is `weiv`

![npm](https://img.shields.io/npm/dt/weivjs.svg)

![npm](https://img.shields.io/npm/l/weivjs.svg)

![npm](https://img.shields.io/npm/v/weivjs.svg)

 weiv.js - A home-brew UI view library for modern component-oriented web development.

`Weiv` is the reverse of the word `View` or `微V` in Chinese which means micro-view literally.

## Why `weiv`?

This 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.

For developers: [Guide for developers](guide-for-developers.md)

## How it's like

### TODO MVC example

[Live demo](http://chao.yang.to/weiv-todomvc/)

[Source code](http://github.com/chaoyangnz/weiv-todomvc)



[![Edit weiv-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/91w42n314o?autoresize=1&expanddevtools=1&hidenavigation=1)

### Basic feature example



[![Edit weiv-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m7k55r39p9?autoresize=1&expanddevtools=1&hidenavigation=1)

```javascript

import { Component, observable, action } from 'weivjs'

@Component({

  template: `

  


    TODO: {{a}}

    Try to change props?

    

      

        
show when no slot

      

      



        

        Save

        

      

      

        show when no item slot

      

    

  

  `,

  props: {

    a: {type: 'number', required: true}

  },

  events: {

    save: {}

  }

})

export class Todo {

  changeProp() {

    try {

      this.a = 0

    } catch (err) {

      alert(err.message)

    }

  }

  onSave() {

    this.$emit('save', this.input, '')

  }

  @observable

  input = ''

  onInput(e) {

    this.input = e.target.value

    console.log('on input %o', e)

  }

}

@Component({

  template: `

  


    {{firstName}} {{lastName}}

{{blogURL}}

    Location: {{location.city}} - {{location.country}}

    Countdown: {{counter}}

    ➖

    ➕

    Tip: When counter is less than 5, location will be shown.

    

      

      {{i}} - {{$super.i}}

      

    

    

      this is a default slot

      item1

      item2

      another default slot

      show var value: {{i}}

    

  

  `,

  components: {'todo': Todo}

})

export class App {

  firstName = 'Chao'

  lastName = 'Yang'

  blogURL = 'http://chaoyang.nz'

  location = {

    city: 'Auckland',

    country: 'New Zealand'

  }

  @observable counter = 10

  @action plus() {

    if (this.counter === 10) return

    this.counter += 1

  }

  @action minus() {

    if (this.counter === 0) return

    this.counter -= 1

  }

  onSave(a, b) {

    alert(`Are you sure to save: ${a} ${b}?`)

  }

}

new App().$mount('#app')

```

## Building blocks & Credits

- [virtual dom](https://github.com/Matt-Esch/virtual-dom)

- [mobx](https://github.com/mobxjs/mobx)

- [jexl-sync](https://github.com/chaoyangnz/jexl-sync)

## TODOs

- [x] Add slots support

- [x] Refine directive structure

- [x] Add scope to support `@for:i=""` directive like `for ... in`

- [x] Enhance events support

- [x] A lot of built-in directives: `@for`, `@if`/`@elif`/`else`, `@var`, `@bind`, `@on`, `@model`, `@show`, `@html`

- [ ] Add lifecycle hooks

- [ ] Optimise: cache subtree via vdom-trunk

- [ ] Optimise: batch update via main-loop

- [ ] Optimise: try to use zone.js intead of mobx `autorun`

- [ ] Write a UI component library like ElementUI