mirror of
https://github.com/c8r/x0.git
synced 2024-07-14 16:50:34 +03:00
Merge branch 'master' into next-docs
This commit is contained in:
Brent Jackson
commit
49667ee34c
43
README.md
43
README.md
@ -27,11 +27,46 @@ npm install -g @compositor/x0
|
||||
|
||||
Read more about x0 in our [blog post](https://compositor.io/blog/x0-making-react-component-development-stupid-simple/).
|
||||
|
||||
## Getting Started
|
||||
|
||||
x0 renders a directory of React components, automatically handling routing based on filename.
|
||||
Create a `docs` folder and add an `index.js` file.
|
||||
|
||||
```jsx
|
||||
// index.js
|
||||
import React from 'react'
|
||||
|
||||
export default class extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<h1>Hello</h1>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Start a development server by running:
|
||||
|
||||
```sh
|
||||
x0 docs --open
|
||||
```
|
||||
|
||||
To add more pages, add a new component for each route. For example, create an about page:
|
||||
|
||||
```jsx
|
||||
// about.js
|
||||
import React from 'react'
|
||||
|
||||
export default props =>
|
||||
<h1>About</h1>
|
||||
```
|
||||
|
||||
The about page should now render when navigating to <http://localhost:8080/about>.
|
||||
|
||||
## Isolated development environment
|
||||
|
||||
```sh
|
||||
x0 components
|
||||
x0 docs
|
||||
```
|
||||
|
||||
Options:
|
||||
@ -44,7 +79,7 @@ Options:
|
||||
```
|
||||
|
||||
```sh
|
||||
x0 components -op 8080
|
||||
x0 docs -op 8080
|
||||
```
|
||||
|
||||
|
||||
@ -53,13 +88,13 @@ x0 components -op 8080
|
||||
Export static HTML and client-side bundle
|
||||
|
||||
```sh
|
||||
x0 build components
|
||||
x0 build docs
|
||||
```
|
||||
|
||||
Export static HTML without bundle
|
||||
|
||||
```sh
|
||||
x0 build components --static
|
||||
x0 build docs --static
|
||||
```
|
||||
|
||||
Options
|
||||
|
||||
34
create-x0/cli.js
Executable file
34
create-x0/cli.js
Executable file
@ -0,0 +1,34 @@
|
||||
#!/usr/bin/env node
|
||||
const path = require('path')
|
||||
const init = require('initit')
|
||||
const chalk = require('chalk')
|
||||
|
||||
const [ name ] = process.argv.slice(2)
|
||||
const template = 'c8r/x0/examples/basic'
|
||||
|
||||
if (!name) {
|
||||
console.log('name is required: $ create-x0 my-project')
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
console.log('Creating x0 project ', chalk.green(name))
|
||||
console.log()
|
||||
|
||||
init({
|
||||
name,
|
||||
template,
|
||||
})
|
||||
.then(res => {
|
||||
console.log(
|
||||
chalk.green(
|
||||
'Successfully created new x0 project'
|
||||
)
|
||||
)
|
||||
process.exit(0)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(
|
||||
chalk.red(err)
|
||||
)
|
||||
process.exit(1)
|
||||
})
|
||||
15
create-x0/package.json
Normal file
15
create-x0/package.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "create-x0",
|
||||
"version": "1.0.0-1",
|
||||
"description": "Create an x0 starter project",
|
||||
"bin": {
|
||||
"create-x0": "./cli.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.1",
|
||||
"initit": "^1.0.0-2"
|
||||
}
|
||||
}
|
||||
@ -11,7 +11,7 @@ npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
Editing `index.js` will live update in the development server.
|
||||
Editing `src/index.js` will live update in the development server.
|
||||
|
||||
## Static Build
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
"name": "x0-basic-example",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "x0 . -o",
|
||||
"build": "x0 build ."
|
||||
"start": "x0 src -o",
|
||||
"build": "x0 build src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@compositor/x0": "^5.0.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@compositor/x0",
|
||||
"version": "6.0.0-4",
|
||||
"version": "6.0.0",
|
||||
"description": "Document & develop React components without breaking a sweat",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
|
||||
@ -56,6 +56,8 @@ export const code = ({
|
||||
return (
|
||||
<Pre
|
||||
p={3}
|
||||
mt={4}
|
||||
mb={4}
|
||||
bg='gray'
|
||||
children={children}
|
||||
/>
|
||||
|
||||
@ -20,7 +20,6 @@ import {
|
||||
|
||||
browserEnv()
|
||||
|
||||
// make sure this doesn't conflict with webpack tests
|
||||
global.DIRNAME = 'beep'
|
||||
|
||||
const renderJSON = el => render(el).toJSON()
|
||||
@ -221,7 +220,6 @@ test('SidebarLayout renders', t => {
|
||||
)
|
||||
t.snapshot(json)
|
||||
})
|
||||
// console.log(require('util').inspect(json, { depth: null }))
|
||||
|
||||
const blacklist = {
|
||||
pre: true
|
||||
|
||||
@ -9,9 +9,3 @@ Generated by [AVA](https://ava.li).
|
||||
> Snapshot 1
|
||||
|
||||
'<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>x0</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div class="sc-bxivhb dUiVDW"><h1>Hello</h1></div></div><script src="/bundle.js"></script>'
|
||||
|
||||
## static uses getInitialProps method
|
||||
|
||||
> Snapshot 1
|
||||
|
||||
'<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>x0</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div class="sc-bxivhb dUiVDW"><h1>Hello</h1></div></div><script src="/bundle.js"></script>'
|
||||
|
||||
Binary file not shown.
@ -278,7 +278,7 @@ Generated by [AVA](https://ava.li).
|
||||
> Snapshot 1
|
||||
|
||||
<pre
|
||||
className="sc-kGXeez YhsQM"
|
||||
className="sc-kGXeez hIJWeT"
|
||||
/>
|
||||
|
||||
## scope.h1 renders
|
||||
|
||||
Binary file not shown.
Loading…
Reference in New Issue
Block a user