{"x0":{"title":"Compositor x0","_basename":"/x0","cssLibrary":"styled-components"},"ava":{"babel":{"plugins":["transform-runtime"],"presets":["env","stage-0","react"]},"files":["test/*","!test/components","!test/output"],"require":["babel-register"]},"bin":{"x0":"bin/cli.js"},"bugs":{"url":"https://github.com/c8r/x0/issues"},"dist":{"shasum":"e87cb5ef236532526761d38035f4b7327617f7ec","tarball":"https://registry.npmjs.org/@compositor/x0/-/x0-3.2.0-1.tgz","fileCount":22,"integrity":"sha512-hp1iMuJ1mINCq1Nn4sBkO2i7GVqB9IO4G7A5KO+NkPm/iXHmeGtUfx67bX82NmFk4oPyLMIkqUY/U8uEE9n7cQ==","signatures":[{"sig":"MEUCIEiv3FGcAcq53q6m+pv3cQKoLfO1iBBnMXyiRxB74sZaAiEAgwQPwDqZvjA0D00Xo7V8UcJM5XyM0m3rKq5vaB+8wko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28734},"main":"index.js","name":"@compositor/x0","author":{"name":"Brent Jackson"},"readme":"\n# x0\n\nZero-config React development environment and static site generator\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- Renders static HTML\n- Renders JS bundles\n- Works with CSS-in-JS libraries like [styled-components][sc] and [glamorous][glamorous]\n- Support for routing with [react-router][react-router]\n- Support for async data fetching\n- Support for code splitting with [React Loadable][react-loadable]\n\n\\* Components cannot rely on bundler features like webpack loaders\n\n\n## Isolated development environment\n\n```sh\nx0 dev src/App.js\n```\n\nOptions:\n\n```\n  -o --open   Open dev server in default browser\n  -p --port   Set custom port for dev server\n```\n\n```sh\nx0 dev src/App.js -op 8080\n```\n\n\n## Static Render\n\nRender static HTML and client-side bundle\n\n```sh\nx0 build src/App.js --out-dir site\n```\n\nRender static HTML without bundle\n\n```sh\nx0 build src/App.js --out-dir site --static\n```\n\nOptions\n\n```\n  -d --out-dir    Directory to save index.html and bundle.js to\n  -s --static     Only render static HTML (no client-side JS)\n```\n\n## Fetching Data\n\nUse the `getInitialProps` static method to fetch data for static rendering.\nThis method was inspired by [Next.js][nextjs] but only works for static rendering.\n\n```jsx\nconst App = props => (\n  <h1>Hello {props.data}</h1>\n)\n\nApp.getInitialProps = async ({\n  Component,\n  pathname\n}) => {\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## CSS-in-JS\n\nx0 supports server-side rendering for [styled-components][sc], [glamor][glamor], [glamorous][glamorous], and [fela][fela].\nTo enable CSS rendering for static output, use the `cssLibrary` option\n\n```sh\nx0 build src/App.js --cssLibrary=\"styled-components\"\n```\n\nAvailable options:\n\n- [`styled-components`][sc]\n- [`glamorous`][glamorous]\n- [`glamor`][glamor]\n- [`fela`][fela]\n\n## Head content\n\nHead elements such as `<title>`, `<meta>`, and `<style>` can be rendered at the beginning of a component.\nBrowsers should handle this correctly since the `<head>` and `<body>` elements are optional in HTML 5.\n\n```jsx\nconst App = props => (\n  <React.Fragment>\n    <title>Hello x0</title>\n    <style dangerouslySetInnerHTML={{\n      __html: 'body{font-family:-apple-system,BlinkMacSystemFont,sans-serif}'\n    }} />\n    <h1>Hello x0</h1>\n  </React.Fragment>\n)\n```\n\n## Configuration\n\nDefault props can be passed to x0 in a `package.json` field named `x0`.\n\n```json\n\"x0\": {\n  \"title\": \"Hello\",\n  \"count\": 0\n}\n```\n\n### Routing\n\nTo render multiple pages and use routing, add a `routes` array to the `package.json` configuration object.\n\n```json\n\"x0\": {\n  \"routes\": [\n    \"/\",\n    \"/about\"\n  ]\n}\n```\n\n```sh\nx0 build src/App.js --static --out-dir site\n```\n\nThe current route will be passed to the component as `props.pathname`.\nThis can be used with [react-router][react-router]'s StaticRouter and BrowserRouter components.\n\n```jsx\n// Example with react-router\nimport React from 'react'\nimport {\n  StaticRouter,\n  BrowserRouter,\n  Route,\n  Link\n} from 'react-router-dom'\nimport Home from './Home'\nimport About from './About'\n\n// universal router component\nconst Router = typeof document !== 'undefined'\n  ? BrowserRouter\n  : StaticRouter\n\nconst App = props => (\n  <Router\n    basename={props.basename}\n    location={props.pathname}>\n    <nav>\n      <Link to='/'>Home</Link>\n      <Link to='/about'>About</Link>\n    </nav>\n    <Route\n      exact\n      path='/'\n      render={() => <Home {...props} />}\n    />\n    <Route\n      path='/about'\n      render={() => <About {...props} />}\n    />\n  </Router>\n)\n```\n\n### Code Splitting\n\nTo split client side bundles when rendering a static site,\nx0 supports [React Loadable][react-loadable] with no additional setup needed.\n\n```jsx\n// example of using React Loadable\nimport React from 'react'\nimport Loadable from 'react-loadable'\n\nconst About = Loadable({\n  loading: () => <div>loading...</div>,\n  loader: () => import('./About')\n})\n\nconst App = props => (\n  <div>\n    <h1>Hello</h1>\n    <About />\n  </div>\n)\n```\n\n### Proxy\n\nIf you want to proxy requests you can configure it using the `x0` key in your `package.json`.\nThis can be useful when you're running a local api server during development.\n\nThe following example proxies all `/api` requests to `http://localhost:3000`.\n\n```json\n\"x0\": {\n  \"/api\": \"http://localhost:3000\"\n}\n```\n\n#### Related\n\n- [Create React App](https://github.com/facebookincubator/create-react-app)\n- [Next.js][nextjs]\n- [Gatsby][gatsby]\n- [React-Static][react-static]\n\n---\n\n[Made by Compositor](https://compositor.io/)\n|\n[MIT License](LICENSE.md)\n\n[nextjs]: https://github.com/zeit/next.js\n[react-router]: https://github.com/ReactTraining/react-router\n[sc]: https://github.com/styled-components/styled-components\n[glamorous]: https://github.com/paypal/glamorous\n[glamor]: https://github.com/threepointone/glamor\n[fela]: https://github.com/rofrischmann/fela\n[gatsby]: https://github.com/gatsbyjs/gatsby\n[react-static]: https://github.com/nozzle/react-static\n[react-loadable]: https://github.com/thejameskyle/react-loadable\n","gitHead":"b625cba5482c21eca607cb88cbcc8ae1dd4c9adb","license":"MIT","scripts":{"test":"nyc ava","build":"./bin/cli.js build docs/App.js -d docs -c docs/webpack.config.js","cover":"nyc report --reporter=html --reporter=lcov","start":"./bin/cli.js dev docs/App.js -op 8888","static":"./bin/cli.js build docs/App.js --static -d docs"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"homepage":"https://github.com/c8r/x0#readme","keywords":[],"repository":{"url":"git+https://github.com/c8r/x0.git","type":"git"},"_npmVersion":"5.6.0","description":"Zero-config React development environment and static site generator","directories":{},"maintainers":[{"name":"johno","email":"johnotander@gmail.com"},{"name":"jxnblk","email":"jxnblk@gmail.com"},{"name":"mrmrs","email":"hi@mrmrs.cc"}],"_nodeVersion":"8.1.2","dependencies":{"ora":"^1.3.0","fela":"^6.1.0","meow":"^3.7.0","chalk":"^2.1.0","react":"^16.2.0","glamor":"^2.20.40","pkg-up":"^2.0.0","webpack":"^3.10.0","fela-dom":"^7.0.0","glamorous":"^4.11.0","react-dom":"^16.2.0","babel-core":"^6.26.0","react-fela":"^6.1.1","read-pkg-up":"^2.0.0","babel-loader":"^7.1.2","webpack-merge":"^4.1.1","babel-register":"^6.26.0","react-loadable":"^5.3.1","react-dev-utils":"^4.2.1","update-notifier":"^2.2.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","webpack-dev-server":"^2.9.1","babel-preset-stage-0":"^6.24.1","babel-minify-webpack-plugin":"^0.2.0","babel-plugin-transform-runtime":"^6.23.0","babel-plugin-dynamic-import-node":"^1.2.0","babel-plugin-syntax-dynamic-import":"^6.18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ava":"^0.24.0","nyc":"^11.2.1","refunk":"^2.0.0-1","nano-style":"^1.0.0-20","raw-loader":"^0.5.1","styled-system":"^1.0.7","isomorphic-fetch":"^2.2.1","react-router-dom":"^4.2.2","styled-components":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/x0_3.2.0-1_1518376482776_0.7981283372957484","host":"s3://npm-registry-packages"},"_id":"@compositor/x0@3.2.0-1","version":"3.2.0-1"}