LiteralJS
Is a simple view library for creating components with Template Literals. Components are converted to Hyper Script
which creates the virtual dom. The virtual dom has a diffing mechanism similar to ReactJS. This library is still in Alpha.
Usage without NPM
<!DOCTYPE html>
<html>
<head>
<title>Literal JS Test</title>
<script src="http://unpkg.com/literaljs"></script>
</head>
<body>
<div id="app"></div>
<script>
var firstComponent = Literal.Component(
`<div>
This should render like React.
<p>Isn't this lovely?</p>
${otherComponent}
</div>`
);
var secondComponent = Literal.Component(
`<div>
Oh yeah!
</div>`
);
Literal.Render(firstComponent, 'app');
</script>
</body>
</html>
Example
Component
Literal.Component(
`<p class="corn">
<div>
This is a div!
</div>
</p>`
);
Components just accept Template Literals and generate Hyper Script.
You can combine components with ${ }
, like this:
var firstComponent = Literal.Component(
`<div>
This should render like React.
<p>Isn't this lovely?</p>
${otherComponent}
</div>`
);
var secondComponent = Literal.Component(
`<div>
Oh yeah!
</div>`
);
Render
Literal.Render(MainComponent, 'app');
The Render method takes the last component and id of an html node in your entry file.