velements
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Virtual Elements

Use the power of JSX in your app without React!

Create elements using JSX:

/* @jsx h */
 
import h from 'velements'; // es6 
const {h} = require('velements'); // commonjs
 
const virtualElement = <div id='my-div'><p>text</p></div>;

Or in plain JavaScript:

const virtualElement = h('div', { id: 'my-div' }, h('p', null, 'text'));

Then use them like regular DOM elements:

document.getElementById('container').appendChild(virtualElement.toElement());

Boost your templates

Handlebars templates are very limiting in terms of logic you can do inside of them
and writing helpers for every peace of logic can be challenging and time consuming.

Why not just write plane javascript functions:

/* @jsx h */
const myPage = (title, text) =>
{
    return (
        <div>
            <h1>{title}</h1>
            <p>{text}</p>
        </div>
    );
};
 
const app = (loggedIn, title, text) =>
{
    return (
        <div>
            {header()}
            <br/>
            {loggedIn ? loginPage() : myPage(title, text)}
        </div>
    );
}
 
const virtualElement = app(/*...*/);

You can treat a virtual element like a regular string:

const str = virtualElement.toString();
 
const html = `<html><body>${virtualElement}</body></html>`;

This removes the need to compile templates and the resulting HTML is already minified.
This greatly improves server response time when doing Server Side Rendering.

React Compatible

Make your code usable by both Vanilla JavaScript apps as well as React apps.

When you want to switch to React world you simply convert your element:

const reactElement = virtualElement.toReactElement();

Or in your component:

const MyReactComponent = (props) =>
{
    return (
        <div>
            <MyOtherComponent/>
            {virtualElement.toReactElement()}
        </div>
    );
}

It can also be rendered by react-dom:

ReactDOM.render(
    virtualElement.toReactElement(),
    document.getElementById('container')
);

You can also inject React into the converter.
The default value is React = require('react')

const reactElement = virtualElement.toReactElement(React);

Package Sidebar

Install

npm i velements

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

16.8 kB

Total Files

5

Last publish

Collaborators

  • zoranravic