set-page
v3.0.1
Published
Framework agnostic, isomorphic `<html>`, `<body` and `<head>` rendering utility.
Downloads
8
Maintainers
dylanpierceyReadme
Formerly named set-head.
Framework agnostic, isomorphic <html>, <body and <head> rendering utility.
Installation
npm install set-pageExample
import Page from 'set-page'
// Create a new page element, this should be done once per request.
const page = new Page()
page
// Set html and body attributes.
.html({ lang: 'en' })
.body({ class: 'loading' })
// Add elements to <head> via method chaining.
.meta({ charset: 'utf8' })
.title('My App')
.base({ href: '/admin/' })
.meta({ name: 'description' content: 'Cool stuff' })
.link({ rel: 'stylesheet', href: 'index.css' })
.script({ async: true, src: 'index.js' })Overriding
set-page makes overriding values easy. If you invoke page again later it will replace any existing similar head element and merge any body or html attributes.
The module uses special keying scheme for head elements found in ./src/base.js under const KEYS to understand which elements to replace and which to add. Ultimately this allows for efficient re-ordering and rendering without any 'key' non-sense.
// Setting defaults somewhere (perhaps in a middleware or plugin.)
page
.title('My App')
.meta({ name: 'author', content: 'Dylan Piercey' })
.meta({ name: 'description', content: 'Welcome to the site' })
.link({ rel: 'stylesheet', href: '/app.css' })
.script({ async: true, src: '/app.js' })
// The later in a specific route you can continue chaining like so to override.
page
.title('My App > My sub page')
.meta({ name: 'description', content: 'Sub page description' })Browser Rendering
To render to the browser, simply invoke 'render' after all setting up the page.
page.render()Server Rendering
Server side rendering is accomplished by invoking renderToString after setting up the page.
export default (req, res) => {
const parts = page.renderToString()
res.end(`
<!doctype html>
<html${parts.htmlAttributes}>
<head>${parts.head}</head>
<body${parts.bodyAttributes}>
...
</body>
</html>
`)
}Contributions
- Use
npm testto run tests.
Please feel free to create a PR!