hyperapp-helmet

v1.0.1

Published

2 years ago

A package to update HTML head tags on Hyperapp framework.

Downloads

0High
0Medium
0Low

babie

hyperapp helmet ssr head

Hyperapp Helmet

Hyperapp Helmet is a library to update HTML <head> tags on Hyperapp.

This library supports:

Server-Side Rendering with @hyperapp/router and @hyperapp/render
Nesting components
TypeScirpt

Versioning

>=1.0.0 <2.0.0: for Hyperapp V1
>=2.0.0 <3.0.0: for Hyperapp V2

Installation

$ npm i hyperapp hyperapp-helmet
or
$ yarn add hyperapp hyperapp-helmet

Usage

import { h } from 'hyperapp'
import { Helmet } from 'hyperapp-helmet'

export const Some = () => (
  <div key="some">
    <Helmet key="some-helmet">
      <title>This is written in Helmet</title>
      <meta name="description" content="anything" />
      <link rel="stylesheet" href="/style.css" />
      <style>{'body { background-color: green; }'}</style>
      <script src="/some.js" defer />
    </Helmet>
    <h1>Anything Else</h1>
    <article>anything else.</article>
  </div>
)

Helmet Component must have key!

Server-Side Rendering

html.js:

import { h, View } from 'hyperapp'
import { getHelmetNodes } from 'hyperapp-helmet'
import { App } from './App'

const Fragment = ''
export const Html = (state, actions) => {
  const helmetNodes = getHelmetNodes(App.view, state, actions)
  return (
    <Fragment>
      <Fragment innerHTML="<!doctype html>" />
      <html lang="ja">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <base href="http://localhost:3000" />
          <link rel="stylesheet" href="/html.css" />
          <style>{'body { color: blue; }'}</style>
          <script src="./index.js" defer />
          {helmetNodes}
        </head>
        <body>
          <div id="app">{App.view}</div>
        </body>
      </html>
    </Fragment>
  )
}

server.js:

import { JSDOM } from 'jsdom'

declare var global: any
global.document = new JSDOM('<!doctype html><html><body></body></html>', {
  url: 'http://localhost:3000'
})
global.window = global.document.window
global.navigator = { userAgent: 'node.js' }

import { renderToStream } from '@hyperapp/render'
import express from 'express'

import { App } from './App'
import { Html } from './html'

const server = express()
server.use(express.static('./'))
server.get('/*', (req, res, next) => {
  App.state.location.pathname = req.path
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/html')
  renderToStream(Html, App.state, App.actions).pipe(res)
  next()
})

server.listen(3000, () => {
  console.log(`Server is running.`)
})

API

Helmet(attributes, children) => VNode

returns <template>{children}<template> nodes and it add/update/remove tags in <head></head> on oncreate/onupdate/onremove lifecycle.

attributes: must have key prop.
children: supports title, base, meta, link, style, script tags.

getHelmetNodes(view, state, actions) => VNode[]

returns nodes for implementing in <head></head>.

view: hyperapp view/nodes.
state: hyperapp state.
actions: hyperapp actions.

License

Hyperapp Helmet is MIT licensed. See LICENSE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme