x0v5
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 ot
Last updated a year ago by jxnblk .
MIT · Original npm · Tarball · package.json
$ cnpm install x0v5 
SYNC missed versions from official npm registry.

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>

Current Tags

  • 1.0.0-0                                ...           latest (a year ago)

1 Versions

  • 1.0.0-0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 4
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |