Skip to content

hyperx.md

Latest commit

 

History

History
185 lines (149 loc) · 4.96 KB

hyperx.md

File metadata and controls

185 lines (149 loc) · 4.96 KB

Hyperx

About Hyperx

Hyperx is a standards-compliant ES6 tagged template string function factory. It is a pure JavaScript alternative to JSX.

Hyperx is used like this:

const hyperx = require("hyperx")
const html = hyperx(h)

const main = html`
  <div>
    <h1>Hello.</h1>
    <button onclick=${() => alert("Hi")}>Click</button>
  </div>`

Setup

We'll use Hyperxify to transform Hyperx into h() function calls and a bundler to create a single file we can deliver to the browser.

The ES6 import syntax is incompatible with Hyperxify, so we'll use the Node.js require function.

In a new directory, create an index.html file:

<!doctype html>
<html>

<body>
  <script src="bundle.js"></script>
</body>

</html>

And and index.js file:

const { h, app } = require("hyperapp")
const hyperx = require("hyperx")
const html = hyperx(h)

app({
  state: "Hi.",
  view: state => html`<h1>${state}</h1>`
})

Install dependencies:

npm i -S hyperapp

Browserify

Install development dependencies:

npm i -D \
  browserify \
  hyperx \
  hyperxify \
  babelify \
  uglifyify \
  bundle-collapser \
  uglify-js

Create a .babelrc file:

{
  "presets": ["es2015"]
}

Bundle the application:

$(npm bin)/browserify \
  -t hyperxify \
  -t babelify \
  -g uglifyify \
  -p bundle-collapser/plugin index.js | uglifyjs > bundle.js

Webpack

Install development dependencies:

npm i -D \
  hyperx \
  hyperxify \
  webpack \
  transform-loader \
  babel-core \
  babel-loader \
  babel-preset-es2015

Create a .babelrc file:

{
  "presets": ["es2015"]
}

Create a webpack.config.js file:

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader!transform-loader?hyperxify"
      }
    ]
  }
}

Bundle the application:

$(npm bin)/webpack -p

Rollup

Install development dependencies:

npm i -D \
  babel-preset-es2015-rollup \
  hyperx \
  hyperxify \
  rollup \
  rollup-plugin-browserify-transform \
  rollup-plugin-buble \
  rollup-plugin-commonjs \
  rollup-plugin-node-resolve \
  rollup-plugin-uglify

Create a rollup.config.js file:

import buble from "rollup-plugin-buble"
import resolve from "rollup-plugin-node-resolve"
import uglify from "rollup-plugin-uglify"
import browserify from "rollup-plugin-browserify-transform"
import hyperxify from "hyperxify"
import cjs from "rollup-plugin-commonjs"

export default {
  moduleName: "window",
  plugins: [
    browserify(hyperxify),
    buble(),
    cjs(),
    resolve({
      module: false
    }),
    uglify()
  ]
}

Bundle the application:

$(npm bin)/rollup -cf iife -i index.js -o bundle.js