c8r / x0 Goto Github PK
View Code? Open in Web Editor NEWDocument & develop React components without breaking a sweat
Home Page: https://compositor.io/x0/
License: MIT License
Document & develop React components without breaking a sweat
Home Page: https://compositor.io/x0/
License: MIT License
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!
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.
For better compatibility β see https://github.com/c8r/x0/blob/master/lib/static/client.js#L65
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!!!
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?
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
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?
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.
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.
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?
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
:)
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
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
Should set all webpack and webpack-serve options to verbose logging
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
.
Thank you guys for creating this. I love it so much!
I have this question:
Can we make a custom 404 page?
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@reach/router
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!
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.
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
& into it. What if I want to create a different layout with different components? Can we do that with x0?How does x0 know what type of layout I am using?
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.
π 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'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.
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 .
yarn install then yarn start load the project in the browser.
making an edit to App.js recompiles webpack but doesnt reload in Firefox
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 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.
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!
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:
$ npm i -g @compositor/x0
$ mkdir demo
$ vim index.js
and insert this:import React from 'react'
export default class extends React.Component {
render () {
return (
<h1>Hello</h1>
)
}
}
$ x0 docs --open
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!
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.
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...
Here's how they do it:
lmk i could send a PR to help π
(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?
Related to #10
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 ???
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
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
}
}
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>
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.
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
.
Libraries like reflexbox
go π£ when running x0 dev
because its trying to insert styles into the document.
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.
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
?
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:
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 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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.