mirror of
https://github.com/c8r/x0.git
synced 2024-08-17 09:20:52 +03:00
Merge branch 'master' into next-docs
This commit is contained in:
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/).
|
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
|
## Isolated development environment
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 components
|
x0 docs
|
||||||
```
|
```
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
@ -44,7 +79,7 @@ Options:
|
|||||||
```
|
```
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 components -op 8080
|
x0 docs -op 8080
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
@ -53,13 +88,13 @@ x0 components -op 8080
|
|||||||
Export static HTML and client-side bundle
|
Export static HTML and client-side bundle
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 build components
|
x0 build docs
|
||||||
```
|
```
|
||||||
|
|
||||||
Export static HTML without bundle
|
Export static HTML without bundle
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 build components --static
|
x0 build docs --static
|
||||||
```
|
```
|
||||||
|
|
||||||
Options
|
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
|
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
|
## Static Build
|
||||||
|
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
"name": "x0-basic-example",
|
"name": "x0-basic-example",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "x0 . -o",
|
"start": "x0 src -o",
|
||||||
"build": "x0 build ."
|
"build": "x0 build src"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@compositor/x0": "^5.0.0"
|
"@compositor/x0": "^5.0.0"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@compositor/x0",
|
"name": "@compositor/x0",
|
||||||
"version": "6.0.0-4",
|
"version": "6.0.0",
|
||||||
"description": "Document & develop React components without breaking a sweat",
|
"description": "Document & develop React components without breaking a sweat",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
@ -56,6 +56,8 @@ export const code = ({
|
|||||||
return (
|
return (
|
||||||
<Pre
|
<Pre
|
||||||
p={3}
|
p={3}
|
||||||
|
mt={4}
|
||||||
|
mb={4}
|
||||||
bg='gray'
|
bg='gray'
|
||||||
children={children}
|
children={children}
|
||||||
/>
|
/>
|
||||||
|
@ -20,7 +20,6 @@ import {
|
|||||||
|
|
||||||
browserEnv()
|
browserEnv()
|
||||||
|
|
||||||
// make sure this doesn't conflict with webpack tests
|
|
||||||
global.DIRNAME = 'beep'
|
global.DIRNAME = 'beep'
|
||||||
|
|
||||||
const renderJSON = el => render(el).toJSON()
|
const renderJSON = el => render(el).toJSON()
|
||||||
@ -221,7 +220,6 @@ test('SidebarLayout renders', t => {
|
|||||||
)
|
)
|
||||||
t.snapshot(json)
|
t.snapshot(json)
|
||||||
})
|
})
|
||||||
// console.log(require('util').inspect(json, { depth: null }))
|
|
||||||
|
|
||||||
const blacklist = {
|
const blacklist = {
|
||||||
pre: true
|
pre: true
|
||||||
|
@ -9,9 +9,3 @@ Generated by [AVA](https://ava.li).
|
|||||||
> Snapshot 1
|
> 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>'
|
'<!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
|
> Snapshot 1
|
||||||
|
|
||||||
<pre
|
<pre
|
||||||
className="sc-kGXeez YhsQM"
|
className="sc-kGXeez hIJWeT"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## scope.h1 renders
|
## scope.h1 renders
|
||||||
|
Binary file not shown.
Loading…
Reference in New Issue
Block a user