Neglected Puppy Market

    angular-vdom

    0.5.0 • Public • Published

    angular-vdom

    NPM

    angular-vdom allows you to have ultra high performance rendering with virtual-dom components angular 1.5. Under the hood, anguar-vdom takes uses the new .component() lifecycle hooks and works perfectly with stateless components. Live Demo!

    huh?

    angular-vdom uses virtual-dom and main-loop, take a look at the source, it's super straight forward. Why does angular need a virtual-dom implementation? You can check out the performance gains over here. This works great on pages that require huge lists or tables, with 60 FPS scrolling and instant patching

    Usage

    // app.js
    var h = require('virtual-dom/h')
    var ngVirtualComponent = require('angular-vdom')
    var virtualComponent = ngVirtualComponent(render, {bindings: {message: '<'}})
     
    module.exports = require('angular')
      .module('app', [])
      .component('virtualComponent', virtualComponent)
      .name
     
    // Doesn't need to be hyperscript as long as we return a VTree
    function render (state) {
      return h('div', state.message)
    }
     
    // index.html
    <div ng-app="app">
      <virtual-component message="Hello World!"></virtual-component>
    </div>

    Usage with ui-router too!

    var virtualComponent = ngVirtualComponent(render, {bindings: {message: '<'}})
     
    angular
      .module('app', [])
      .component('virtualComponent', virtualComponent)
      .config(['$stateProvider', function ($stateProvider) {
        $stateProvider.state('virtual', {
          url: '/virtual',
          template: '<virtual-component controller-as="vd" message="vd.message"></virtual-component>',
          controllerAs: 'vd',
          controller: function () {
            this.message = 'Hello World'
          }
        })
      }])

    API

    angular-vdom exports a function that takes two params:
    ngVirtualComponent(render, options)

    Render -> fn

    function that returns a VTree. I use hyperscript but you can use hyperx and even jsx. The render function is called with a state object, that contains your bindings data

    Options -> {object}

    Default values for configuring the angular component. When a binded value changes it will trigger an $onChange() event, which will then rAF and render

    Using controllerAs?

    Just use the attribute
    <virtual-component controller-as="vd" message="vd.message"></virtual-component>

    TODO

    • Emit events for angular controller consumption

    Building

    npm i && npm run build
    cd example/
    open index.html

    More

    angular component lifecycle hooks

    Install

    npm i angular-vdom

    DownloadsWeekly Downloads

    15

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • hanford