{"x0":{"meta":[{"name":"description","content":"Zero-config React development environment and static site generator"},{"name":"twitter:card","content":"summary"},{"name":"twitter:site","content":"@getcompositor"},{"name":"twitter:image","content":"https://compositor.io/logo/dist/compositor.png"},{"name":"twitter:title","content":"Compositor x0"},{"name":"twitter:description","content":"Zero-config React development environment and static site generator"}],"title":"Compositor x0","basename":"/x0"},"ava":{"babel":{"plugins":["transform-runtime"],"presets":["env","stage-0","react"]},"files":["test/*","!**/test/components","!**/test/output"],"require":["babel-register"]},"bin":{"x0":"cli.js"},"bugs":{"url":"https://github.com/c8r/x0/issues"},"dist":{"shasum":"7fcf6baef5a4e7b5f7292bf653c2370e7043c193","tarball":"https://registry.npmjs.org/@compositor/x0/-/x0-5.1.0-4.tgz","fileCount":24,"integrity":"sha512-xXJFKCc+swGRRTDzZDzqaMTyoKOhyp+wMInUS28YkDeEvMsfYMyPkmv3HWy27qp4ZnNQxPROOhAQ23/qW9SpwA==","signatures":[{"sig":"MEUCIQDphZUkgn/0K1TcpaysmpZ+aZEW1k8Ad+2GF8NKyQWixwIgA+mTmG2tUwxsMpKFz9SdpiEkjZ5QSVAbI25RQtsHUBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKp/zCRA9TVsSAnZWagAAVL8P/0Ho6YTcC/N49NKkZEt1\npi7LiNbjI0LEtVQll6h+tjThpMUhpB07Mh+NzrSnjyykfYYdluBHNHXCBb1N\nydRg/B93xs0c+ITEpQwkF1yKlMdlwYnujJChaK6JNgQQfMeQW+ksxCAu27gN\nLRjUu05LCOVd899EWFgHcsPg3qOCBCE0jmPG0TdIPdoAPGLDoJFHTDqjUOsh\ncJoVtAP4eyP58i/8eBg9NQ41PPRn1aGQvMIfBMeEFazp18sbW6bwFaD840Lp\ns8MtVKOJa4+zed0gB8fzORpUvHUH963YCbL0umaI75GhMCzZJZ4aFHjc+DPv\n+W1OWBlzJqV0+Gdmv6ru0i63IheTmbAMEiiqkY2oEnvnOBNrh26ZwB1RVe3t\n1mHU0OLg5EePqnviRGmwQzYuYfDJ0Kh/y6NElkZPRqvFUhumOuk1IrVkuCm0\n6Yahg8UwbwpJPo/MNauIeQzZhR12zxOg4rGbs1k2dDV0Vlyx7aT592N2biFf\nftIasUuPyQcM0MSNkhI5hlQcepTRyb/kYffa3c5WAzf024zbqd7AzEQaV20/\nwzczT+CVteQJ9n72OkMiRjBKknGV+ozhnALF9CyEo5Yixbme6BiaqpZkgHE2\nI+5Fh4a0C5nozDtoliUSInO2Go+EKy2BKP+ACRiwvdk4XLtau78rIjSSjfEV\nU2p0\r\n=IG8E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"@compositor/x0","author":{"name":"Brent Jackson"},"readme":"\n# x0\n\nZero-config React development environment and static site generator\n\n[![Build Status][build-badge]][build]\n\n```sh\nnpm install -g @compositor/x0\n```\n\n[build-badge]: https://img.shields.io/travis/c8r/x0/master.svg?style=flat-square\n[build]: https://travis-ci.org/c8r/x0\n\n\n\n## Features\n\n- Zero-config\n- Hot-loading development environment\n- Works with virtually any React component\\*\n- No confusing APIs\n- Automatic file system based routing\n- Exports static HTML\n- Exports JS bundles\n- Works with CSS-in-JS libraries like [styled-components][sc] and [emotion][emotion]\n- Support for async data fetching\n\nRead more about x0 in our [blog post](https://compositor.io/blog/x0-making-react-component-development-stupid-simple/).\n\n\\* Custom [webpack configuration](#webpack) is required for components that rely on webpack-based features\n\n\n## Isolated development environment\n\n```sh\nx0 components\n```\n\nOptions:\n\n```\n-o --open Open dev server in default browser\n-p --port Custom port for dev server\n-t --template Path to custom HTML template\n--webpack Path to custom webpack configuration\n```\n\n```sh\nx0 components -op 8080\n```\n\n\n## Static Build\n\nExport static HTML and client-side bundle\n\n```sh\nx0 build components\n```\n\nExport static HTML without bundle\n\n```sh\nx0 build components --static\n```\n\nOptions\n\n```\n-d --out-dir Output directory (default dist)\n-s --static Output static HTML without JS bundle\n-t --template Path to custom HTML template\n--webpack Path to custom webpack configuration\n```\n\n\n## Fetching Data\n\nUse the async `getInitialProps` static method to fetch data for static rendering.\nThis method was inspired by [Next.js][nextjs].\n\n```jsx\nconst Index = props => (\n

Hello {props.data}

\n)\n\nIndex.getInitialProps = async () => {\n const fetch = require('isomorphic-fetch')\n const res = await fetch('http://example.com/data')\n const data = await res.json()\n\n return { data }\n}\n```\n\n## Custom App\n\nA custom `App` component can be provided by including an `_app.js` file.\nThe `App` component uses the [render props][render-props] pattern to provide additional state and props to its child routes.\n\n[render-props]: https://reactjs.org/docs/render-props.html\n\n```jsx\n// example _app.js\nimport React from 'react'\n\nexport default class extends React.Component {\n state = {\n count: 0\n }\n\n update = fn => this.setState(fn)\n\n render () {\n const { render, routes } = this.props\n\n return render({\n ...this.state,\n decrement: () => this.update(s => ({ count: s.count - 1 })),\n increment: () => this.update(s => ({ count: s.count + 1 }))\n })\n }\n}\n```\n\n### Layouts\n\nThe `App` component can also be used to provide a common layout for all routes.\n\n```jsx\n// example _app.js\nimport React from 'react'\nimport Nav from '../components/Nav'\nimport Header from '../components/Header'\nimport Footer from '../components/Footer'\n\nexport default class extends React.Component {\n render () {\n const {\n render,\n routes\n } = this.props\n\n const route = routes.find(route => route.path === props.location.pathname)\n\n return (\n \n