Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
@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,
html,
pathname
}) => {
const fetch = require('isomorphic-fetch')
const res = await fetch('http://example.com/data')
const data = await res.json()
return { data }
}
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 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>
]
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
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
FAQs
Document & develop React components without breaking a sweat
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.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.