{"x0":{"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":"adf5d5b44dbfa01dcf99fc307e2083681cf0818c","tarball":"https://registry.npmjs.org/@compositor/x0/-/x0-5.0.0-9.tgz","fileCount":11,"integrity":"sha512-NDf/ma6BBtcXhHk5dcGk7WDtThKYJdgItbNRe7cSOkLOccO3Svr7LD7ZCh4dz3f+8/b736LRQw38IE63uuB/8A==","signatures":[{"sig":"MEUCIQCdp7QMy6/FkPWHVLtnE+lrj5k7YNZAm8cGzm3Z7O1f/AIgcvymCedrJE1M1Q0TL4jCggi8NwpHKWLAyhN4f2BtnAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbA57lCRA9TVsSAnZWagAAGN0P/RvKBN8g7EBXl+xRHVHW\nR0F+UMWxKGovjJWbuVhBiBtabN1ENRlEm63Ke5O+FXfa+fJiDB/F18hxx82h\nxI6qeXDWa/aDnurPdgoWnCNMkvYLSZf2dEC4IjAVxVRdM7vzwiHt2w3AxJ/l\ny6qqIqYsdbGWhV9jj9ujTHm28m+dk9+AyIxVSLOgGax18V4DclkwEtO1dJdi\nUwpeyvGKL3Mh5j5kCiGQpGTZgFJhn3cgP38cYDRFX6T6r2tPEHI8FpuN1zvX\nHJyxOKu6hpLl6dWr2+T3qttZYinlbYrfyR2sP6cn8bnZHzJ8jtylOPCiSkH6\nJZ3/m0+woXYVFA8N/BKgtVDplkFc+/wQh6y3kZ4oyuz7vszqhwz38E/z2S37\nv8bLnJNOv3VUm1Hueg/PSKllVQjBk3z7v7jaYqdDfLU88brwB+qBFnaPr/fV\nostRYMUpwgvAgbeeTcfu418lOCIes/2ndOuzO0KbXeP3Fu15aAcUQuPs+A9J\nEgr1um0fVcb0fe/hjTDTiRCKOyq0b6sOdTeSMqS1JThYD7K0EzV2RQ9dKHAX\nBFborIjluUzer3UGnMbSK/8Ch1mCiEwmtFn4DmFfd/U33taetEtDcGrwzg1q\nDnEx+uo+WKLRBElJUFuZWfhTH+9W1pBeRX1Jh22cQo9BnFEq5u+QG5/64ONA\nV1Yq\r\n=lCzN\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![screen-demo](docs/demo.gif)\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\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