{"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":"04e3d3ed70538f377459f31aa2b8f313ad2e3208","tarball":"https://registry.npmjs.org/@compositor/x0/-/x0-5.0.0-1.tgz","fileCount":28,"integrity":"sha512-WtZpuKnZgSjlVI1CHLEZOa4xsHVKhsXvPCMYSespWDX78JlAp7HKpis1aynuCbAmS23cmAmAkg/lfhOOr4W/Gg==","signatures":[{"sig":"MEUCIDCX5CuYSWDRqWorK8egyh8LQwPulxsVLysi6Ni8HlK2AiEAntzzdzDu7G06d3ffCOMOVGwSvihB55zVtlfi3MPIPTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":229323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbAc6RCRA9TVsSAnZWagAAPYkP/jg4WvhezR7Supg8G+ah\nsyPAXl56Q/4vf/n4PtDkWNKuvK28OfybGoD9MUBQrKCuDE0BB3Wp9qKedZVt\nlkxeEYg5/Tm8yax7bgp/iakpS+rSJl0VgdDbkrmwgiX1+WpexgY8m0q6BX3M\nm+Gz6u29Hw0/C1874LgPCZfRA+ZkdwyUWWa/1TZhbnl06fGKMWlBv4nUp3iR\nESBzEaSTyxK72z2JD35L3LExRUvZ9ij5xAi0Qbpiug1g9PF6pWabeZiy+LIf\neUysZnBJ9KDFa87ILWQ0Q/IJ5BaDZUFUo0V5vUClkPCiNtjXqWPH4DNd82Df\nwOv1ECaMC83W1twFa2hC0DEIcKHmug/Ddpd0PEG7DDrQMh531CC/CKE7RhTN\nizaYatEJ/F8qFzMAfXdB1Lgmlz+1VHAMs8MnKc+6Ce4xJjUnak/CtLsQR9Ir\n7i75jw99bswEs+M0vBBiXkeExez9ZIGJLicuXOsZVy4b2j3F3nNVgHz1hhOE\n6IV65EeKIPhaJw8k2PP3hynVCB5F5vgrXwfuVJYkerpaXH4+/Qf2elpPCC0p\nuvXtUKQNOQ9kQx5Uq8rD1JXHLTP4mONxdRmjeryqo7cfCKaD70ixMXzL7NlD\nQYxk9bQKl7Ka7duD9TAXa1EXU5fgWaU5iphVMf7R0mYMrqG464oWJivQm3fw\nltX6\r\n=ENJZ\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]\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