c8r / x0 Goto Github PK

Thank you guys for creating this. I love it so much!

I have this question:
Can we make a custom 404 page?

yarn install then yarn start load the project in the browser.

making an edit to App.js recompiles webpack but doesnt reload in Firefox

• yarn error Trace:

Trace: 
  Error: Command failed.
  Exit code: 1
  Command: sh
  Arguments: -c x0 dev App.js -o
  Directory: /Users/prisc_000/code/BHYV/x0/examples/configuration
  Output:
  
      at ProcessTermError.MessageError (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:186:110)
      at new ProcessTermError (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:226:113)
      at ChildProcess.<anonymous> (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:30281:17)
      at ChildProcess.emit (events.js:160:13)
      at maybeClose (internal/child_process.js:943:16)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)

If you run yarn build it kinda just doesnt ever finish:

If you refresh the browser, you get this:

I'm not sure if it's the right title for the issue, let me know if there's a better one.

I've used x0 on my main laptop and it worked fantastic, but when I tried setting it up on another one, I can't get it to work. I constantly see this error:

❯ x0 build demo
 x0  @compositor/x0
 x0  ⠧ building static sitewebpack:///../n/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble.es.js?:269
var tt = acorn__WEBPACK_IMPORTED_MODULE_0__["default"].tokTypes;
                                                       ^

TypeError: Cannot read property 'tokTypes' of undefined
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble.es.js?:269:56)
    at Module.../n/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble.es.js (/Users/vadimdemedes/Projects/dist/TEMP/App.js:534:1)
    at __webpack_require__ (/Users/vadimdemedes/Projects/dist/TEMP/App.js:30:30)
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/node_modules/react-live/dist/react-live.es.js?:26:63)
    at Module.../n/lib/node_modules/@compositor/x0/node_modules/react-live/dist/react-live.es.js (/Users/vadimdemedes/Projects/dist/TEMP/App.js:2849:1)
    at __webpack_require__ (/Users/vadimdemedes/Projects/dist/TEMP/App.js:30:30)
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/src/LiveEditor.js?:11:18)
    at Object.../n/lib/node_modules/@compositor/x0/src/LiveEditor.js (/Users/vadimdemedes/Projects/dist/TEMP/App.js:5361:1)
    at __webpack_require__ (/Users/vadimdemedes/Projects/dist/TEMP/App.js:30:30)
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/src/scope.js?:30:19)

I've tried reinstalling Node.js via multiple methods (official package, homebrew, n) and even reproduced the same issue in a fresh Docker container ($ docker run --rm -it node bash). Steps are all the same and taken from the official readme:

1. $ npm i -g @compositor/x0
2. $ mkdir demo
3. $ vim index.js and insert this:

import React from 'react'

export default class extends React.Component {
  render () {
    return (
      <h1>Hello</h1>
    )
  }
}

4. $ x0 docs --open
5. I get the same error output either in browser console or in terminal when using x0 build.

I've also made a video how I reproduce this in a Docker container: https://www.dropbox.com/s/0ktvsx1n2bkmwma/x0.mov?dl=0.

I thought it might have something to do with module resolution and global modules, but since it fails in an isolated Docker container, it might be a bug in x0.

Unfortunately I had to give up that other laptop with working x0 for repair, so I can't find the differences now. Would appreciate any ideas on what might be wrong with my set up :)

Thank you for an amazing piece of software!

When running x0 through Cypress, Cypress errors out:

http://localhost:4321/basic

The content-type of the response we received from your web server was:

  > null

This was considered a failure because responses must have content-type: 'text/html'

I assume "text/html" should be the default for content-type. I've been trying to find where to set the content-type in the webpack config, but not having any luck.

Hi,

first and foremost thanks, this project is great and much needed.

I noticed there is a wrapping div around the App.

<div class="sc-bxivhb dUiVDW">

Also some styling applied:

* {
    box-sizing: border-box;
}

.dUiVDW {
    font-family: system-ui, sans-serif;
}

Ideally I would really like not to have any default styling injected, especially the box-sizing thing, which with time I stopped forcing.

Would it be an option to remove those by default, or provide a way to remove them?

EDIT: which basically boil down to not wrapping with RebassProvider in entry.js :)

Libraries like reflexbox go 💣 when running x0 dev because its trying to insert styles into the document.

👋 Hey All!

First off wanted to say thanks for making this cool tool, I have only used it a bit but definitely want to try using it for more of my small side projects.

The one thing holding me back from using it more is lack of out of the box Emotion support. As far as I can tell this should be fairly easy to adopt with a change to getCSS.js to add a function to handle requiring emotion-server, and calling extractCritical.

I could take a look at trying to make a PR for this if it is something that everyone thinks would be beneficial to add support for. The one part that I don't know how to tackle yet is the client side hydration, so if someone has any ideas on where that would live that would be greatly appreciated.

I recognize this is a special case so feel free to not support it!

I'm trying to get A-Frame (a webVR library) running within x0. It works with the development server:

Unfortunately after running x0 build docs --static I get an error about window being undefined.

x0  @compositor/x0
 x0  ⠋ building static sitewebpack:///./node_modules/aframe/dist/aframe-master.js?:75415
window.hasNativeWebVRImplementation = !!window.navigator.getVRDisplays || !!window.navigator.getVRDevices;
^

ReferenceError: window is not defined
    at Object.148.../package (webpack:///./node_modules/aframe/dist/aframe-master.js?:75415:1)
    at s (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:398)
    at e (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:569)
    at eval (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:598)
    at eval (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:62)
    at eval (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:83)
    at Object../node_modules/aframe/dist/aframe-master.js (/Users/sagejenson/dev/web_dev/x0-cwervo-test/dist/TEMP/App.js:5722:1)
    at __webpack_require__ (/Users/sagejenson/dev/web_dev/x0-cwervo-test/dist/TEMP/App.js:30:30)
    at eval (webpack:///./docs/about.js?:26:1)
    at Object../docs/about.js (/Users/sagejenson/dev/web_dev/x0-cwervo-test/dist/TEMP/App.js:5699:1)

I'm not too familiar with webpack but I recognize this is usually because the compilation environment assumes it's running in node, so I tried making this webpack.config.js:

// webpack.config.js
module.exports = {
    target: 'web'
};

But I get the same error, with & without --static for x0 build docs.

Note: this also happens when I try adding three.js, a popular 3D rendering library. If I add let window = {} the docs build step lets me know that document is not defined and so compilation of Three fails.

Any idea what custom configuration I should do here or if there's something that can be done on the x0 side?

Hey 👋

We're using the configurable <head> content feature to link to our CSS builds and change the <meta> tags like so:

"x0": {
    "title": "primer-react",
    "cssLibrary": "styled-components",
    "basename": "/",
    "meta": [
      {
        "name": "og:title",
        "content": "Primer React"
      },
      {
        "name": "description",
        "content": "Primer components built with React.js."
      }
    ],
    "links": [
      {
        "rel": "stylesheet",
        "href": "https://unpkg.com/primer-buttons/build/build.css"
      }
      {... more links here}
    ]
}

This is working as expected locally, but the static builds contain two <head> tags, the correct one nested under a <div id='root'>. When deployed the second <head> tag gets stripped out and none of our styles appear.

Here's what the static build in the build folder's index.html looks like:

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="generator" content="Compositor x0">
  <title>primer-react</title>
  <style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style>
 </head>
 <div id="root">
  <head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="generator" content="Compositor X0">
   <link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css">
   [... more links]
   <meta name="og:title" content="Primer React">
   <meta name="description" content="Primer components built with React.js.">
   <style>[... some styles here]
  </head>

While testing my webpack-dev-server branch as a dependancy in my own project (my github repo branch as a dep) i get these errors:

• FormidableLabs/react-live#104
• bublejs/buble#159

Or.. How do we only fetch data in a node context / use node-only data fetching dependencies?

Since use-case is static builds, I want to fetch data only during build.
In fact, I'm trying to build a bundle-less site, so my expectation is client-side context should never come into play with this static function.

Using firebase-admin, it shows errors related to missing node libraries.

Tried to copy something similar from a next.js discussion vercel/next.js#219 (comment)
not surprisingly it didn't work.

Thanks for this library by the way!

I am trying to use the LiveEditor from mdx with x0 but I'm having a hard time trying to make it work with my custom components. The document isn't clear about how to include it into the props scope.

Until now, I created a scope.js file like this

`import { Box } from 'rebass'

const scope = {
Box
}

export default scope`

then use it in the _app.js file like this
<ScopeProvider scope={scope}> </ScopeProvider>
But the LiveEditor is still not able to get that Box component. Am I missing something? Thank you!

I'm attempting to use styled-components with their babel plugin, so I can specify a css prop like so

<Box css={`some css here`} />

It appears this plugin only works with babel 7.0+ (babel will not compile syntax the css prop on any previous version), but x0's current dependencies have it locked at babel 6.

Looks like the only way to get this working with x0 would be to bump it's depencies / swap out it's babel presets.

I'm having an issue getting the tool to start. It gets stuck on "starting dev server" and just spins infinitely. I've tried debugging a bit but I can't see what's causing the issue. I'm running on OSX, node 8.11.3 and I've tried it as a local dev dependency (via yarn) and as a global but I'm still not having any luck. It starts the dev server if the folder is empty but it just hangs if there's a jsx file in it. If there are any other details that might help to figure out where the issue might be, let me know.

Thanks the tool looks great and is exactly what I've been look for. Would love to get it working!

Hi there,

I really like how unopinionated x0 is. The only thing that bothers me is the default styling that's being applied. Is there any way to disable that? I created a custom _app.js and thought that would solve the issue but it didn't.

Is this something you might consider supporting? If so, how would you go about it? Happy to help in any way.

For better compatibility – see https://github.com/c8r/x0/blob/master/lib/static/client.js#L65

When I run x0 with the docs folder, the local server starts,

C:\Users\SWK\Desktop\x0>x0 docs
 x0  @compositor/x0
 x0  dev server listening on http://localhost:8080 (copied to clipboard)

but I can't see anything in the browser and it says:

Waiting for localhost..

After a while it says:

This page isn’t working localhost didn’t send any data.
ERR_EMPTY_RESPONSE

When I press Ctr-C there are some errors, I am not sure if they are related with this issue..

TypeError: res.getHeader is not a function
    at processRequest (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:82:18)
    at ready (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\util.js:51:12)
    at handleRequest (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\util.js:167:5)
    at Promise (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:44:7)
    at new Promise (<anonymous>)
    at middleware (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:43:12)
    at Promise.all.Promise (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-webpack\index.js:43:7)
    at new Promise (<anonymous>)
    at C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-webpack\index.js:42:5
    at dispatch (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-compose\index.js:42:32)
TypeError: res.getHeader is not a function
    at processRequest (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:82:18)
    at ready (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\util.js:51:12)
    at handleRequest (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\util.js:167:5)
    at Promise (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:44:7)
    at new Promise (<anonymous>)
    at middleware (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:43:12)
    at Promise.all.Promise (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-webpack\index.js:43:7)
    at new Promise (<anonymous>)
    at C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-webpack\index.js:42:5
    at dispatch (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-compose\index.js:42:32)
TypeError: res.getHeader is not a function
    at processRequest (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:82:18)
    at ready (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\util.js:51:12)
    at handleRequest (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\util.js:167:5)
    at Promise (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:44:7)
    at new Promise (<anonymous>)
    at middleware (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\webpack-dev-middleware\lib\middleware.js:43:12)
    at Promise.all.Promise (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-webpack\index.js:43:7)
    at new Promise (<anonymous>)
    at C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-webpack\index.js:42:5
    at dispatch (C:\Users\SWK\AppData\Roaming\npm\node_modules\@compositor\x0\node_modules\koa-compose\index.js:42:32)
Terminate batch job (Y/N)? y

Related to #10

I get this warning when trying to use MDX to start and build the project (this happens even with an empty index.mdx file).

Warning: Received `true` for a non-boolean attribute `active`.

If you want to write it to the DOM, pass a string instead: active="true" or active={value.toString()}.
    in div
    in Clean.div
    in div
    in Box
    in Clean.div
    in div
    in Box
    in div
    in Container
    in Unknown
    in Catch
    in Route
    in Switch
    in DefaultApp
    in Unknown
    in Route
    in withRouter()
    in Catch
    in Unknown
    in Unknown
    in MDXProvider
    in Unknown
    in ScopeProvider
    in Unknown
    in div
    in Clean.div
    in div
    in Root
    in ThemeProvider
    in Rebass.Provider
    in Unknown
    in Router
    in StaticRouter
    in Root

I assume is somehow related with styled components.

Should set all webpack and webpack-serve options to verbose logging

I noted that in the document this is mentioned
Files that begin with an underscore (e.g. _layout.js) will be ignored.

So, if I create a file called _app.js I can have one main layout by adding

How does x0 know what type of layout I am using?

I think here it'd good to use the open command from react-dev-tools to just open the browser once (like what create-react-app) since it does that but fallsback to opn if you're not on chrome on a mac...

https://github.com/facebookincubator/create-react-app/tree/master/packages/react-dev-utils#openbrowserurl-string-boolean.

Here's how they do it:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L85

lmk i could send a PR to help 😄

When I build my project to static files, I see that in the __initial-props__ script tag my current working path is exposed;

<script id="__initial-props__" type="application/json">
  {"o":true,"open":true,"c":"webpack.config.js","config":"/Users/robinvdvleuten/Projects/*****/webpack.config.js","d":"build","outDir":"build"}
</script>

Is this necessary? I can imagine that this is unneeded when the project is already built.

Would be nice if x0 is a bit more lightweight, at the moment the install size clocks in at 80MB: https://packagephobia.now.sh/result?p=%40compositor%2Fx0

I'm not sure if there's currently a way to extend or override MDX configuration. One way could be to use smart merging. Another way could be to add a mdx field in x0 configuration in package.json:

"x0": {
  "mdx": "./mdx.config.js"
}

// mdx.config.js
const math = require('remark-math')
const katex = require('rehype-katex')

module.exports = ({ defaultMdPlugins, defaultHastPlugins }) => ({
  mdPlugins: [
    ...defaultMdPlugins,
    math,
  ],
  hastPlugins: [
    ...defaultHastPlugins,
    katext,
  ],
})

I prefer the latter strategy. Even though it results in an additional configuration file, it's probably more straightforward to implement and use.

In the README, the Custom App section talks about using the render function to pass props to child routes.

In the equivalent page in the nicely formatted doc there's no mention of using this render function. It mentions using Component instead.

Which approach should we be using?

And also, the reason I went down this hole: I can use _app.js to pass props to child routes. I can access these props in JS files: they're provided to the React component exported from the file.

How do I access these props in MDX files?

(Posted here as requested in https://spectrum.chat/?t=c3ea14b8-8a72-4c84-96cf-b027bd1feb32)

It seems that x0 is somewhat opinionated on styling: you get rebass styles for everything by default. What's the recommended approach for using x0 with a custom style?

I'm prototyping a component library/style guide using x0, and want to make the guide use that library. The style guide needs to comply with itself, in other words.

Right now, it seems I have to undo and/or override a bunch of x0 stuff to reset styles. For example, it looks like I need to set ScopeProvider's scope prop to reference string element names to reset the MDX mappings from rebass components to plain old HTML. The danger is that I get it wrong, and discover too late that my components when rendered in x0 are subtly different to the components when rendered in a real app.

I'd also like to render the LiveEditor using different spacing/colours - at the moment, x0 makes assumptions about the theme that might not be true (for example, that it can resolve the colour name "gray": which it can't do if my theme defines "gray" as an array of different shades).

Is x0 even the right tool for this?

First of all,
Thanks for this wonderful tool!

This might be a dumb question but I can't find any answer yet.
In my MAC computer X0 works perfectly but here at work I just installed it on windows 10 and when I try to run the server it just hangs for a long time then it throws the following error.

Any clues ???

Hello! Is there any interest supporting custom file extensions for components? Today, it seems like these are limited to .js, .jsx, and .mdx, but this prevents using languages that compile to JavaScript for these files. A less than ideal workaround exists where a simple JS file can be used to re-export the component (see below), but it would be fantastic if this workaround wasn't required.

Workaround example: Typescript

File ./components/component.tsx:

import * as React from "react";
const Component = () => <div>Example Component</div>;
export default Component;

File ./docs/component.js:

export default from "../components/component";

where x0 is invoked as x0 build docs.

So maybe I'm missing something but it appears that x0 build src always runs with the process.env.NODE_ENV set to development? Even when I set it explicitly with NODE_ENV=production x0 build src, it still shows development?

Hey folks! 👋

I just came along and this looks great. Especially when I discovered that x0 support --static. One question though. By simply building the example I noticed the HTML is not minified. Is this something to come or how should I approach this?

<!DOCTYPE html>
<meta charset='utf-8'>

<h1>Hello</h1>

But great job! 10min playing around with it was fun already.

First of all, thank you for this awesome project, I was hoping something like this exists, and it's nice to find exactly what you're looking for.

I'm a LiveScript user and I'd like to add support for LiveScript, but my initial (hasty) attempt with adding the loader in the Webpack config files has failed (build still fails with syntax error).

Could you tell me if there's anything you see I might be missing, or otherwise guide me?

I am getting syntax errors in the CSS files while generating static html.The CSS files are separate files which gets imported in related components. I am not using any CSS library.
This is the command I used.

x0 build src/App.js --out-dir site

and this is the error I am getting

x0 is generating nested anchor tags from md to html.

you can replicate by creating a md file with a h1:

// hello.md
# Hello world

And render this

// index.js
import React from 'react';
import Hello from "./hello.md";

export default class extends React.Component {
  render() {
    return Hello />
  }
}

Also happening on https://mdxjs.com

It doesn't happen on the x0 docs site though, maybe this was introduced in a later version?

Thanks!

Low hanging fruit I think would make config awesome..

module.exports = {
  context: {
   // let me add stuff to static x0 context in JS
  },
  modify: (webpackConfig, { env /* dev or static */ }) => {
     // allow users to mutate config and return it
     return webpackConfig
  }
}

Running my project in Docker with docker-compose.

webpack-serve only listens for requests on 127.0.0.1:$PORT.

If we could extend the config in lib/dev.js then i could specify the host option to be 0.0.0.0.

This way the webpack-serve is listening to requests coming from outside my docker container.

Here's how I'm running x0:

docker-compose.yml

version: "2.0"

services:

  tool:
    image: airtonix/${npm_package_name}:${npm_package_version}
    ports:
      - 8080:8080
    volumes:
      - "./src:/app/src"

docker-compose--build.yml

version: "2.0"

services:

  tool:
    build: .
    image: airtonix/${npm_package_name}:${npm_package_version}

Dockerfile

FROM node:8.9.0-alpine as builder

WORKDIR /build

RUN apk add --no-cache \
  autoconf \
  automake \
  ca-certificates \
  curl \
  g++ \
  gcc \
  git \
  jpeg-dev \
  jq \
  make \
  nasm \
  openssh \
  openssl \
  python \
  run-parts \
  zlib-dev \
 && update-ca-certificates

RUN npm install -g node-gyp

COPY ./package.json .
COPY ./package-lock.json .
RUN npm install


FROM node:8.9.0-alpine

WORKDIR /app
COPY . /app
COPY --from=builder /build/node_modules /app/node_modules
CMD [ "npm", "run", "container:prod" ]

package.json

{
  "name": "zenobius",
  "version": "4.0.0-beta",
  "scripts": {
    "dev": "npm run docker:run -- tool npm run container:dev",
    "prod": "npm run docker:run -- tool npm run container:prod",
    "// [container] commands": "",
    "container:dev": "MODE=development x0 src/content",
    "container:prod": "MODE=production x0 build src/content",
    "// [workstation] Release Commands": "",
    "git:pull": "git pull",
    "git:publish": "npx npm-run-all --serial release:post:git-add release:post:git-commit-amend release:post:git-push-origin",
    "prerelease": "npx npm-run-all --serial git:pull",
    "postversion": "npm run docker:run -- tool container:release",
    "release": "npx standard-version",
    "postrelease": "git push --follow-tags",
    "release:post:git-add": "git add .",
    "release:post:git-commit-amend": "git commit --amend --no-edit",
    "release:post:git-push-origin": "git push --follow-tags",
    "// [workstation] Docker Commands": "",
    "docker:run": "docker-compose run --service-ports --rm",
    "docker:shell": "npm run docker:run -- tool /bin/sh",
    "docker:build": "docker-compose -f docker-compose--build.yml build tool",
    "// [container] Release Commands": "",
    "container:release": "npx run-s release:build-frontend release:publish-styleguide",
    "container:release:changelog": "conventional-changelog --infile=./project/CHANGELOG.md "
  },
  "dependencies": {
    "webpack": "4.20.2",
    "axios": "0.17.0",
    "node-sass": "4.5.3",
    "push-dir": "0.4.1",
    "@compositor/x0": "6.0.6"
  }
}

$ npm run docker:build
$ npm run dev

First off amazing library!

From what it appears one is unable to to currently use any component utilizing hooks with x0 when producing the static website. This works wonderfully via webpack dev server yarn xo docs.

After much digging I have determined that the code base is indeed using the same react versions 16.8.6 everywhere. However, the trip is that react is pre-bundled from within the webpack bundle. Therefore when build.js is calling react-dom/server renderToString they are not utilizing the same React memory instance as webpack (client side) and server side (build.js) have their own. This yields to the client side's React never getting ReactSharedInternals being set which in turn yields the null hook dispatcher.

The only possible work around I can think of is forcing react and react-dom to be external resources. via

const { NODE_ENV } = process.env;

console.warn({ NODE_ENV });

const externals =
  NODE_ENV !== 'production'
    ? {}
    : {
        react: 'react',
        'react-dom': 'react-dom',
      };

module.exports = {
  externals,
};

But with this accomplished how do we inject / eval the server side (build.js) version of react into the webpack bundle.

I will happily provide more details if needed.

As a side not this is specifically related to many issues which resolve to facebook/react#14022 .

I installed from within a docker container, so this is most likely busted for all new installs.

I did some digging, seems like docz had a similar issue and it was fixed for most by upgrading buble. I'll do more digging tomorrow.

Uncaught TypeError: Cannot set property 'jsx' of undefined
    at inject (buble-browser.es.js:639)
    at eval (buble-browser.es.js:9823)
    at Array.reduce (<anonymous>)
    at Module.eval (buble-browser.es.js:9822)
    at eval (buble-browser.es.js:9918)
    at Module../usr/local/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble-browser.es.js (dev.js:1267)
    at __webpack_require__ (dev.js:724)
    at fn (dev.js:101)
    at eval (react-live.es.js:26)
    at Module../usr/local/lib/node_modules/@compositor/x0/node_modules/react-live/dist/react-live.es.js (dev.js:3663)

Currently we only support specifying routes under the x0 key in the package.json. There are scenarios where we want to build all possible routes as part of the build process.

For example, consider the following:

import React from 'react'
import fetch from 'isomorphic-fetch'

import {
  StaticRouter,
  BrowserRouter,
  Route
} from 'react-router-dom'

const Router = typeof document === 'undefined' ? StaticRouter : BrowserRouter

const Blog = props =>
  <Router>
    <div>
      <Route exact path='/' render={() => <h1>Hello, world!</h1>} />
      <Route path='/posts/:post' render={() => <h1>Post</h1>} />
    </div>
  </Router>

Blog.getInitialProps = async () => {
  const posts = await fetch('https://example.com/foo/bar')
  return { posts }
}

export default Blog

Ideally we'd be able to run a prebuild script which fetches any routes and writes to a json file that x0 can optionally read during a static build. This would handle scenarios where we have dynamic routing data we want static builds for. So, upon build, any current posts would have their respective pages generated.

Bumping dependencies like styled-components will essentially be a breaking change, so I'm looking to aggregate other changes we can bring into a major release.

• webpack-dev-server #105
• Bump dependencies
  • styled-components #109
  • emotion
  • react
• Move to @reach/router
• Ability to opt out of all styling
• Move all the providers to the layout

Possibilities

• Typescript support
• Linter/prettier

Having a problem with className prop in a .jsx file. If it is a string, it is fine:

---
variation: primary
class: 
content: Click me!
---
<div>
  <div>Hello</div>
  <button className={'btn'}>{ props.content }</button>
</div>

But if becomes a template string, it fails:

---
variation: primary
class: 
content: Click me!
---
<div>
  <div>Hello</div>
  <button className={`btn`}>{ props.content }</button>
</div>

The error in the browser is:
Module parse failed: Unexpected token (23:22)\nYou may need an appropriate loader to handle this file type.

so, I followed the steps up to starting the dev server by typing:

x0 docs --open

...but I get an error in the terminal in VS Code:

...so I'm not sure what to do next. Nothing is running in the terminal and nothing is running at localhost:8080 either.

¯_(ツ)_/¯

Hey guys,

In few words I'm trying to create a page where I will display related topics. Imagine when you have a blog and you have tags and categories. If you click a tag the system will take you to search results.

This is how I would do it in a 'normal' react app but I'm a bit confused about how to do it in X0 since the system is creating the routes 'automagically' for us.

<Route path = "search/:id" component={Search}></Route>

Any help would be greatly appreciated!!!

I have a docs folder including multiple md, mdx and js files which are linked from the index.md file.
When I build the docs folder on Windows x0 build docs, it creates a dist folder including multiple folders for each file together with an index.html file. When I open index.html , I see all links but they do not work since they are pointing to wrong location. If there is an echo.md file, then the location of the link is creates as:

file:///C:/echo

By yarn build all images display correctly but they are missing in development mode. @jxnblk, could you please provide a solution for displaying them?
I use glamorous.