Skip to content

rill-js/html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

46 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Rill
@rill/html
API stability Standard NPM version Downloads Gitter Chat

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!

About

๐ŸŒ… HTML views for Rill.

Resources

Stars

Watchers

Forks

Packages

No packages published