@compositor/x0
Advanced tools
Zero-config React development environment and static site generator
npm install @compositor/x0
* Components cannot rely on bundler features like webpack loaders
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
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)
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,
pathname
}) => {
const fetch = require('isomorphic-fetch')
const res = await fetch('http://example.com/data')
const data = await res.json()
return { data }
}
x0 supports server-side rendering for styled-components, glamor, glamorous, and fela.
To enable CSS rendering for static output, use the cssLibrary option
x0 build src/App.js --cssLibrary="styled-components"
Available options:
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 => (
<React.Fragment>
<title>Hello x0</title>
<style dangerouslySetInnerHTML={{
__html: 'body{font-family:-apple-system,BlinkMacSystemFont,sans-serif}'
}} />
<h1>Hello x0</h1>
</React.Fragment>
)
Default props can be passed to x0 in a package.json field named x0.
"x0": {
"title": "Hello",
"count": 0
}
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
The current route will be passed to the component as props.pathname.
This can be used with react-router's StaticRouter and BrowserRouter components.
// Example with react-router
import React from 'react'
import {
StaticRouter,
BrowserRouter,
Route,
Link
} from 'react-router-dom'
import Home from './Home'
import About from './About'
// universal router component
const Router = typeof document !== 'undefined'
? BrowserRouter
: StaticRouter
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>
)
FAQs
Document & develop React components without breaking a sweat
The npm package @compositor/x0 receives a total of 118 weekly downloads. As such, @compositor/x0 popularity was classified as not popular.
We found that @compositor/x0 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.