Awesome
<h1 align="center"> <!-- Logo --> <img src="https://raw.githubusercontent.com/rill-js/rill/master/Rill-Icon.jpg" alt="Rill"/> <br/> @rill/html <br/> <!-- Stability --> <a href="https://nodejs.org/api/documentation.html#documentation_stability_index"> <img src="https://img.shields.io/badge/stability-stable-brightgreen.svg?style=flat-square" alt="API stability"/> </a> <!-- Standard --> <a href="https://github.com/feross/standard"> <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square" alt="Standard"/> </a> <!-- NPM version --> <a href="https://npmjs.org/package/@rill/html"> <img src="https://img.shields.io/npm/v/@rill/html.svg?style=flat-square" alt="NPM version"/> </a> <!-- Downloads --> <a href="https://npmjs.org/package/@rill/html"> <img src="https://img.shields.io/npm/dm/@rill/html.svg?style=flat-square" alt="Downloads"/> </a> <!-- Gitter Chat --> <a href="https://gitter.im/rill-js/rill"> <img src="https://img.shields.io/gitter/room/rill-js/rill.svg?style=flat-square" alt="Gitter Chat"/> </a> </h1>Universal html rendering middleware for Rill. Uses set-dom to update html in the browser.
Need isomorphic event handling? Check out @rill/delegate!
Installation
npm install @rill/html
Example
// We will use handlebars for our example.
const hbs = require('handlebars')
const homePage = hbs.compile(`
<html>
<head>
<title>My App</title>
<meta name="description" content="Rill Application">
</head>
<body>
{{title}}
<script src="/app.js"/>
</body>
</html>
`)
// Setup a universal Rill application.
const app = require('rill')()
// Setup the html diffing/rendering middleware.
app.use(require('@rill/html')())
// Setup a homepage route.
app.get('/', ({ req, res }, next)=> {
// Just set the response body to some html.
// updates the dom in the browser, or render a string in the server.
res.body = homePage({ title: '@rill/html' });
// On the server the final response will be.
`
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="description" content="Rill Application">
</head>
<body>
@rill/html
<script src="/app.js"></script>
</body>
</html>
`
})
Sub page rendering.
Sometimes the goal is not to diff the entire page, or you want to use something like @rill/page to handle the document.
@rill/html adds the ability to change the root element with an option for this purpose.
// Use a query selector to set the root element to diff.
app.use(require('@rill/html')({ root: '#my-element' }))
Contributions
- Use
npm test
to run tests.
Please feel free to create a PR!