Package Exports

@compositor/x0
@compositor/x0/lib/dev

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@compositor/x0) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

x0

Zero-config React renderer and CLI

npm install @compositor/x0

Features

Hot-loading development environment
Works with any React component*
No convoluted APIs
Renders static HTML
Renders JS bundles
Use any CSS-in-JS library
Routing with react-router
Async data fetching

* Components cannot rely on bundler features like webpack loaders

Isolated development environment

x0 dev src/App.js

Options:

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

x0 dev src/App.js -op 8080

Static Render

Render static HTML and client-side bundle

x0 build src/App.js --out-dir site

Render static HTML without bundle

x0 build src/App.js --out-dir site --static

Options

  -d --out-dir    Directory to save index.html and bundle.js to
  -s --static     Only render static HTML (no client-side JS)

Fetching Data

Use the getInitialProps static method to fetch data for static rendering. This method was inspired by Next.js but only works for static rendering.

const App = props => (
  <h1>Hello {props.data}</h1>
)

App.getInitialProps = async ({
  Component,
  html,
  pathname
}) => {
  const fetch = require('isomorphic-fetch')
  const res = await fetch('http://example.com/data')
  const data = await res.json()

  return { data }
}

CSS-in-JS

Use the getInitialProps static method to precompile CSS from css-in-js libraries such as styled-components

// styled-components
import React from 'react'
import styled from 'styled-components'

const Heading = styled.h1`
  color: tomato;
`

const App = props => [
  props.styles && (
    <head
      dangerouslySetInnerHTML={{
        __html: props.styles
      }}
    />
  ),
  <div>
    <Heading>Hello</Heading>
  </div>
]

App.getInitialProps = async ({
  Component,
  props
}) => {
  const { ServerStyleSheet } = require('styled-components')
  const sheet = new ServerStyleSheet()
  sheet.collectStyles(<Component {...props} />)
  const styles = sheet.getStyleTags()
  return { styles }
}

// CXS
import React from 'react'
import cxs from 'cxs/component'

const Heading = cxs('h1')({
  color: 'tomato'
})

const App = props => (
  <div>
    <style
      dangerouslySetInnerHTML={{
        __html: props.css
      }}
    />
    <Heading>Hello</Heading>
  </div>
)

App.getInitialProps = async () => {
  const css = cxs.css()
  return { css }
}

Head content

Head elements such as <title>, <meta>, and <style> can be rendered at the beginning of a component. Browsers should handle this correctly since the <head> and <body> elements are optional in HTML 5.

const App = props => (
  <div>
    <title>Hello x0</title>
    <style dangerouslySetInnerHTML={{
      __html: 'body{font-family:-apple-system,BlinkMacSystemFont,sans-serif}'
    }} />
    <h1>Hello x0</h1>
  </div>
)

Returning an array of elements also works.

const App = props => [
  <title>Hello</title>,
  <div>
    <h1>Hello</h1>
  </div>
]

Configuration

Default props can be passed to x0 in a package.json field named x0.

"x0": {
  "title": "Hello",
  "count": 0
}

Routing

To render multiple pages and use routing, add a routes array to the package.json configuration object.

"x0": {
  "routes": [
    "/",
    "/about"
  ]
}

x0 static src/App.js --out-dir site

For easier integration with react-router, use the x0 Router component, which handles universal rendering.

import React from 'react'
import Router from '@compositor/x0/Router'
import { Route, Link } from 'react-router-dom'
import Home from './Home'
import About from './About'

const App = props => (
  <Router
    basename={props.basename}
    location={props.pathname}>
    <nav>
      <Link to='/'>Home</Link>
      <Link to='/about'>About</Link>
    </nav>
    <Route
      exact
      path='/'
      render={() => <Home {...props} />}
    />
    <Route
      path='/about'
      render={() => <About {...props} />}
    />
  </Router>
)

MIT License