hsx

hsx

Static HTML sites with JSX, Sass, and webpack (no React).

About

• Meant for building static websites (not apps)
• Compiles JSX to HTML, without React (JSX becomes an HTML templating language)
• Supports simple, presentational Components (similar to React's functional stateless components)

Why?

• JSX is an incredibly powerful HTML templating language
• "HTML in JS" feels awesome
• webpack is insanely powerful
• Building static sites with a module bundler (webpack) offers distinct advantages over gulp/grunt

What's in the Box

hsx is a CLI for scaffolding a new project (see the template). A brief description of what's inside follows:

• A swag webpack2 setup
  • JSX to static HTML via string-dom
  • Sass and postcss (with autoprefixer and rucksack)
  • Image compression via imagemin
  • Local server powered by webpack-dev-server
• Wired-up Main component
• Minimal Sass boilerplate (hard reset, mixins, variables, etc)
• package.json with some useful npm scripts

Install

$ npm i hsx -g

Use

To create a new project:

# using node and npm
# install hsx globally
$ npm install hsx -g

# use the hsx command from the CLI to scaffold a project
# template files are copied to the CWD, unless a path is specified
$ hsx [path]
$ npm i
$ npm run dev

Then, in your browser: http://localhost:3000/

First Component

Note the cue to babel to transform JSX into sd function calls, instead of React.createElement.

import sd from 'string-dom'

/** @jsx sd */

// create a simple Div component
// children is the HTML wrapped by the element
const Div = ({ children, name }) => (
  <div class={ name }>
    { children }
  </div>
)

// render it to the DOM, with some inner content
document.body.innerHTML += (
  <Div name="site">
    <h1>hsx</h1>
    <p>This is inside the Div component!</p>
  </Div>
)

License

MIT. © 2017 Michael Cavalea