X0v5 NPM | npm.io

RFC: x0 v5

This is a proposal for for the next major version of x0, which is a complete rewrite and would include some breaking changes. Nothing is final, this is meant to start a discussion around what set of features makes most sense for x0 when compared to other options for developing and building small, static React applications.

This alpha version can be installed with the following tag:

npm i @compositor/x0@alpha

Changes from v4

Now accepts a folder of components as the entry argument
Automatic routing based on filename
Dev server uses webpack-serve under the hood
Uses mini-html-webpack-plugin
Default HTML head contents for UTF-8 charset and viewport meta tag
Minimal base CSS styling
Rendering the <head> in the component is no longer supported
Webpack used both for the client and static rendering, enabling webpack features in getInitialProps
Support for babel-plugin-macros
Default props can no longer be passed through the package.json config
The routes array in package.json is no longer supported
Adding react-router is no longer necessary
Removes react-loadable support
Proxy option is no longer supported, but can be configured with a custom webpack config
Automatically looks for a webpack.config.js file in the directory
The --config flag has been renamed to --webpack
Automatic support for styled-components
custom HTML template option

Usage

x0 components

Build to static site

x0 build components

Data fetching

class Page extends React.Component {
  static getInitialProps = async () => {
    return {
      // ...someProps
    }
  }

  render () {
    return (
      <h1>Page</h1>
    )
  }
}

Options

  --webpack       Path to webpack config file

Dev Server

  -o --open       Open dev server in default browser
  -p --port       Port for dev server

Build

  -d --out-dir    Output directory (default dist)
  -s --static     Output static HTML without JS bundle
  -t --template   Path to custom HTML template

Options can be passed via the x0 field in package.json

"x0": {
  "outDir": "site",
  "template": "./html.js"
}

Head Content

Head content can be configured in the package.json field

"x0": {
  "title": "Hello",
  "meta": [
    {
      "name": "twitter:card",
      "content": "summary"
    }
  ],
  "links": [
    {
      "rel": "stylesheet",
      "href": "https://fonts.googleapis.com/css?family=Roboto"
    }
  ]
}

Custom HTML Templates

module.exports = ({
  html,
  css,
  scripts,
  title,
  meta = [],
  links = [],
}) => `<!DOCTYPE html>
<head>
  <title>Custom Template</title>
  ${css}
</head>
<body>
  <div id=root>${html}</div>
  ${scripts}
</body>