alejorod / virtud

Proof of concept for view layer mixing parts of react and vue

VIRTUD

Proof of concept for view layer mixing parts of react and vue. Not meant for production, more of personal use/learning expirience.

Uses a simple/naive virtual dom implementation and reactive system.

Installation

With npm:

npm install --save virtud

Usage

import virtud from 'virtud';

const app = virtud.tree({
    data: {
        message: 'hello world!'
    },
    methods: {
        updateMessage: function(e) {
            this.message = e.target.value;
        }
    },
    render: function() {
        return (
            <div>
                <h2>{this.message}</h2>
                <input value={this.message} onInput={this.updateMessage}/>
            </div>
        );
    }
});

// mount the app to an HTML element with id "app"
app.mount('app');

// read data from the app instance
console.log(app.message); // => 'hello world!'

// update data from the app instace 
app.message = 'hello there!'; // html view will be updated


// Using components

// add a custom component globaly
// works like react stateless components but 
// access passed in data through `this` keyword
virtud.component({
    name: 'prettyinput',
    render: function() {
        return (
            <div>
                <label>{this.label}</label>
                <input value={this.value} onInput={this.handleUpdate}/>
            </div>
        );
    }
});

// uses custom component like other html tag by the registered name
const app2 = virtud.tree({
    data: {
        message: 'hello world!'
    },
    methods: {
        updateMessage: function(e) {
            this.message = e.target.value;
        }
    },
    render: function() {
        return (
            <div>
                <h2>{this.message}</h2>
                <prettyinput 
                    label="type your message"
                    value={this.message} 
                    handleUpdate={this.updateMessage} />
            </div>
        );
    }
});

app2.mount('app2');

API

virtud.tree

virtud.tree({data, methods, render}) : Object

Creates a reactive app based on data and template information

Parameters
data : {Object}
data to be used as part of the tree context (e.g methods and render this context)
methods : {Object}
methods that have access to the data as its this context, need to be functions, not arrow functions.
render : {Function}
Function with access to both data and methods as its this context, should return valid jsx code.

virtud.component

virtud.component({name, methods, render}) : void

Adds a component globaly to the virtud virtual dom system.

Parameters
name : {String}
Name to be used as its tag in other components or tree.
methods : {Object}
same as virtud.tree methods parameter but instead of accesing a data object, it has access to the attributes passed
to it
render : {Function}
Function with access to both the attributes passed in and methods as its this context, should return valid jsx code.

Note: to transpile jsx code use pragma virtud.core.h

---

Made with ❤️ by Alejo Rodriguez