{"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":"inherit","files":["test/*","!**/test/components","!**/test/output"],"require":["babel-register"]},"bin":{"x0":"cli.js"},"bugs":{"url":"https://github.com/c8r/x0/issues"},"dist":{"shasum":"67f33506b57906142c7438e59b2eb5d616c9743e","tarball":"https://registry.npmjs.org/@compositor/x0/-/x0-6.0.0-2.tgz","fileCount":25,"integrity":"sha512-kgATGo0Pp0+8s1ubD5T1+C0pKTQFbyAMp5J8dpIvOgSUp1UxO/7Q+PBnE7Cx3OrhQHN1wRaSBoHvITJIn/pa+w==","signatures":[{"sig":"MEYCIQCM0pQiXMrqnZJsV6RzYVknuiPlL8FhHw37wlcUo7IAowIhAKyOIu0yxk1UZH00mdOOC/mqAJbYEsM65tpEnh8gzykm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLX1CCRA9TVsSAnZWagAAm8kP/0bEsemVvoE2/myi6dgQ\nQddvRLHmg//hDxDngLQLGX87A0tEyaRzOqWiHTs/Advf2emenSpDA3u9dUzA\n13vIjpc87hHoRbHcYSseAqPjNAo4PSPSs1i85doshAXoB+7lMh4Yy0N2UyLy\nWoXftWP0NLp64tooRss6tkcjWCga8S7V60ZNJJL2ttejmjLubaAlQcWWjLn0\nd6TiYZ+EtHogaiwBJxFKIkhBcEkU+VakuT12a8m23sJde1rWWHx9LvWn1tky\nqXjb4lx8C6OiTjn70853mm7S6qKx13HEUJIHcDQ13wh6RnrDWZw2DZlZqNDY\nj6b+bMPm5H2BWmxcUk32Zz1c4XQ5BHfL0/wnkCqLNN9bf8WRXrvAF+Bs9+/0\nv3tp2OGV3Pas+BcbIYUeo4X25fxUBSewDkUJrQvuC/C/RPnMYpPETbkrHymK\nvpCyEY/evw8NV5wICMHep37gijsSTxIldDINDbeA7L+4NmUuP3cxj1RLj2jU\n+HL4W0QRj3W63tQDy2ZtbXhpX7iycbLK3nom/v2KT9t5p90W8QX8dFvxb0hT\nURpGs+CDTO7G2/gWFIvtMZlclLJrneYkuqWfysy8ZYJrkbZZ1ImKytcaDzFZ\nG67FUjRD3L8806HysOwxRk6ZlxIu/X2v0isuqy4ZNKM3d7+/ESa2CwVyitUl\nsNSS\r\n=6bY2\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<img src='docs/hello-x0.gif' class='demo-image' />\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  <h1>Hello {props.data}</h1>\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      <React.Fragment>\n        <Nav />\n        <Header\n          route={route}\n        />\n        {render()}\n        <Footer />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n## CSS-in-JS\n\nx0 supports server-side rendering for [styled-components][sc] and [emotion][emotion] with zero configuration.\n\n### Styled Components\n\nTo enable CSS rendering for static export, ensure that `styled-components` is installed as a dependency in your `package.json`\n\n```json\n\"dependencies\": {\n  \"styled-components\": \"^3.2.6\"\n}\n```\n\n### Emotion\n\nEnsure `emotion` is installed as a dependency in your `package.json`\n\n```json\n\"dependencies\": {\n  \"emotion\": \"^9.1.3\"\n}\n```\n\n## Configuration\n\nDefault options can be set in the `x0` field in `package.json`.\n\n```json\n\"x0\": {\n  \"static\": true,\n  \"outDir\": \"site\",\n  \"title\": \"Hello\",\n}\n```\n\n## Head content\n\nHead elements such as `<title>`, `<meta>`, and `<style>` can be configured with the `x0` field in `package.json`.\n\n```json\n\"x0\": {\n  \"title\": \"My Site\",\n  \"meta\": [\n    { \"name\": \"twitter:card\", \"content\": \"summary\" }\n    { \"name\": \"twitter:image\", \"content\": \"kitten.png\" }\n  ],\n  \"links\": [\n    {\n      \"rel\": \"stylesheet\",\n      \"href\": \"https://fonts.googleapis.com/css?family=Roboto\"\n    }\n  ]\n}\n```\n\n## Custom HTML Template\n\nA custom HTML template can be passed as the `template` option.\n\n```json\n\"x0\": {\n  \"template\": \"./html.js\"\n}\n```\n\n```js\n// example template\nmodule.exports = ({\n  html,\n  css,\n  scripts,\n  title,\n  meta = [],\n  links = [],\n  static: isStatic\n}) => `<!DOCTYPE html>\n<head>\n  <title>{title}</title>\n  ${css}\n</head>\n<div id=root>${html}</div>\n${scripts}\n`\n```\n\n### Routing\n\nx0 creates routes based on the file system, using [react-router][react-router].\nTo set the base URL for static builds, use the `basename` option.\n\n```json\n\"x0\": {\n  \"basename\": \"/my-site\"\n}\n```\n\n#### Links\n\nTo link between different components, install `react-router-dom` and use the `Link` component.\n\n```sh\nnpm i react-router-dom\n```\n\n```js\nimport React from 'react'\nimport { Link } from 'react-router-dom'\n\nexport default () => (\n  <div>\n    <h1>Home</h1>\n    <nav>\n      <Link to='/'>Home</Link>\n      <Link to='/about'>About</Link>\n    </nav>\n  </div>\n)\n```\n\n### JSX Format\n\nx0 includes support for the Compositor JSX file format.\n\n```jsx\n---\ntitle: Hello\n---\nimport { Box, Heading } from 'rebass'\n\n<Box px={2} py={4}>\n  <Heading>\n    {frontMatter.title}\n  </Heading>\n</Box>\n```\n\n### MDX Format\n\nx0 includes support for the [MDX][mdx] file format.\n\n```mdx\nimport { Box } from 'rebass'\n\n# Hello MDX\n\n<Box p={4} bg='tomato'>\n  Beep Boop\n</Box>\n```\n\n### webpack\n\nWebpack configuration files named `webpack.config.js` will automatically be merged with the built-in configuration, using [webpack-merge][webpack-merge].\nTo use a custom filename, pass the file path to the `--webpack` flag.\n\n```js\n// webpack.config.js example\nmodule.exports = {\n  module: {\n    rules: [\n      { test: /\\.txt$/, loader: 'raw-loader' }\n    ]\n  }\n}\n```\n\nSee the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config).\n\n#### Related\n\n- [Compositor JSX][jsx-loader]\n- [MDX][mdx]\n- [React Router][react-router]\n- [Mini HTML Webpack Plugin][mini-html]\n- [Styled Components][sc]\n- [Emotion][emotion]\n- [webpack][webpack]\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[jsx-loader]: https://github.com/c8r/jsx-loader\n[mdx]: https://github.com/mdx-js/mdx\n[nextjs]: https://github.com/zeit/next.js\n[react-router]: https://github.com/ReactTraining/react-router\n[mini-html]: https://github.com/styleguidist/mini-html-webpack-plugin\n[sc]: https://github.com/styled-components/styled-components\n[emotion]: https://github.com/emotion-js/emotion\n[glamorous]: https://github.com/paypal/glamorous\n[glamor]: https://github.com/threepointone/glamor\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[webpack-merge]: https://github.com/survivejs/webpack-merge\n[webpack]: https://webpack.js.org\n\n---\n\n## To Do\n\n**REMOVE BEFORE MERGING**\n\n- [ ] changelog/docs\n\n## API Changes\n- Supports nested routes\n- Adds support for `.md` files, using MDX\n- Configurable default styles for markdown and MDX files\n- Adds LiveEditor and LivePreview capabilities to markdown\n- Adds `--match` option for filtering files\n- Adds `ignore` option for pages\n- Optional layout component\n- Optional Library component\n- Support for 404 pages\n\n## Internal Changes\n- Uses mdx loader for md/mdx/jsx files\n\n## Breaking Changes\n- Specifying scope in JSX front matter is no longer supported\n\n- [x] static 404 output\n- [x] 404\n- [x] Sidebar minHeight/pagination\n- [x] Sidebar hidePagination option\n- [x] bug: route.props from defaultProps\n- [x] SidebarLayout\n- [x] test getInitialProps\n- [x] double check dynamic routing\n- [x] pass RouterState props to view\n- [x] props.children in custom app\n- [x] require.context `_app`\n- [x] peer deps\n- [x] props.ignore\n- [x] default layout for mdx/md\n- [x] default route sorting\n- [x] route dirname/full path\n- [x] pass front-matter as props\n- [x] markdown scope\n- [x] deep require context\n- [x] minimatch\n- [x] move client modules to src\n- [x] adjust resolve\n- [x] props.Component in custom app?\n- [ ] ~~Head component with react helmet~~ doesn't work\n- [ ] ~~scope loader shim for jsx front matter~~\n\n### Breaking\n\n- .jsx imports/scope\n- .jsx props\n- custom app path option (must be `_app.js`) (undocumented)\n- Remove support for glamor and glamorous\n\n","engines":{"node":">=8.0"},"gitHead":"b54f67a7c179eee189c13584a8ae8e5e5199897d","license":"MIT","scripts":{"test":"nyc ava -T 20s","build":"./cli.js build docs","cover":"nyc report --reporter=html --reporter=lcov","start":"./cli.js docs -p 8888","test:components":"nyc ava test/components.js"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"homepage":"https://github.com/c8r/x0#readme","keywords":["react","webpack","zero-config","jsx","mdx","ui","prototyping","static-site-generator","isolated","design-systems"],"repository":{"url":"git+https://github.com/c8r/x0.git","type":"git"},"_npmVersion":"6.1.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":{"meow":"^5.0.0","chalk":"^2.4.1","react":"^16.4.1","glamor":"^2.20.40","rebass":"^2.0.0-6","semver":"^5.5.0","emotion":"^9.2.3","find-up":"^2.1.0","webpack":"^4.10.2","fs-extra":"^6.0.1","pkg-conf":"^2.1.0","minimatch":"^3.0.4","react-dom":"^16.4.1","babel-core":"^6.26.3","clipboardy":"^1.2.3","prop-types":"^15.6.2","react-live":"^1.10.1","@mdx-js/mdx":"^0.10.1","@mdx-js/tag":"^0.11.0","browser-env":"^3.2.5","gray-matter":"^4.0.1","koa-connect":"^2.0.1","read-pkg-up":"^3.0.0","remark-slug":"^5.0.0","babel-loader":"^7.1.4","react-router":"^4.3.1","remark-emoji":"^2.0.1","html-minifier":"^3.5.16","lodash.sortby":"^4.7.0","remark-images":"^0.8.1","styled-system":"^2.3.1","webpack-merge":"^4.1.3","webpack-serve":"^1.0.4","@mdx-js/loader":"^0.11.0","babel-register":"^6.26.0","emotion-server":"^9.2.3","@compositor/log":"^1.0.0-0","react-dev-utils":"^5.0.1","update-notifier":"^2.5.0","@rebass/markdown":"^1.0.0-1","babel-preset-env":"^1.7.0","react-router-dom":"^4.3.1","stringify-object":"^3.2.2","babel-preset-react":"^6.24.1","babel-plugin-macros":"^2.2.2","babel-preset-stage-0":"^6.24.1","react-scope-provider":"^1.0.0-1","mini-html-webpack-plugin":"^0.2.3","remark-autolink-headings":"^5.0.0","connect-history-api-fallback":"^1.5.0","babel-plugin-transform-runtime":"^6.23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ava":"^0.25.0","nyc":"^12.0.1","sinon":"^6.0.0","refunk":"^3.0.1","rimraf":"^2.6.2","@compositor/logo":"^1.4.0","isomorphic-fetch":"^2.2.1","styled-components":"^3.3.2","react-test-renderer":"^16.4.1"},"peerDependencies":{"styled-components":"3.x"},"_npmOperationalInternal":{"tmp":"tmp/x0_6.0.0-2_1529707842284_0.8256229286603467","host":"s3://npm-registry-packages"},"_id":"@compositor/x0@6.0.0-2","version":"6.0.0-2"}