c8r/x0
1
1
Fork 0
mirror of https://github.com/c8r/x0.git synced 2024-09-11 21:57:26 +03:00
Code Issues Projects Releases Wiki Activity

Adjust docs and api

Browse Source
This commit is contained in:
Brent Jackson 2017-09-13 18:44:53 -04:00
parent d6b58afe86
commit 336adbfb6e
7 changed files with 34 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -38,10 +38,16 @@ x0 dev src/App.js -op 8080
## Static Render
Render a static HTML page with client-side JS bundle
Render a static HTML page
```sh
x0 build src/App.js
x0 build src/App.js > docs/index.html
```
Render a static page with client-side bundle
```sh
x0 build src/App.js --out-dir docs
```
Render with a custom root HTML component to control CSS, routing, etc.
@ -53,27 +59,21 @@ x0 build src/App.js --html src/Html.js
Options
```
-h --html Root HTML component
-d --out-dir Directory to save index.html and bundle.js to
-s --static Only render static HTML (no client-side JS)
```
## Render Multiple Pages
## Configuration
```sh
x0 build src/pages/ --out-dir docs/
```
### Configuration
In `package.json`
Other configuration options can be passed to x0 in a `package.json`
field named `x0`.
```json
"x0": {
"title": "Hello",
"props": {
"count": 0
}
"count": 0
}
```

2
bin/cli.js
View File

@ -54,7 +54,7 @@ switch (cmd) {
if (!options.outDir) {
console.log(html)
} else {
console.log('Static page built')
console.log(`Static page rendered to ${options.outDir}`)
}
})
break

11
docs/index.html
View File

@ -1,3 +1,8 @@
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="-1053024280"><head data-reactid="2"><title data-reactid="3">X0</title><meta charset="utf-8" data-reactid="4"/><meta name="viewport" content="width=device-width, initial-scale=1" data-reactid="5"/><meta name="description" data-reactid="6"/><style data-reactid="7">.x0{color:lime}</style></head><body data-reactid="8"><div id="app" data-reactid="9"><div data-reactroot="" data-reactid="1" data-react-checksum="781606405"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><pre data-reactid="5">{
&quot;count&quot;: 2
}</pre><button data-reactid="6">-</button><button data-reactid="7">+</button></div></div><script id="__initial-props__" type="application/json" data-reactid="10">{"count":2}</script><script src="bundle.js" data-reactid="11"></script></body></html>
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="304051050"><head data-reactid="2"><title data-reactid="3">X0</title><meta charset="utf-8" data-reactid="4"/><meta name="viewport" content="width=device-width, initial-scale=1" data-reactid="5"/><meta name="description" data-reactid="6"/><style data-reactid="7">.x0{color:lime}</style></head><body data-reactid="8"><div id="app" data-reactid="9"><div data-reactroot="" data-reactid="1" data-react-checksum="-1927832860"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><pre data-reactid="5">{
&quot;title&quot;: &quot;X0&quot;,
&quot;count&quot;: 2,
&quot;pages&quot;: [],
&quot;html&quot;: &quot;docs/Root.js&quot;,
&quot;d&quot;: &quot;docs&quot;,
&quot;outDir&quot;: &quot;docs&quot;
}</pre><button data-reactid="6">-</button><button data-reactid="7">+</button></div></div><script id="__initial-props__" type="application/json" data-reactid="10">{"title":"X0","count":2,"pages":[],"html":"docs/Root.js","d":"docs","outDir":"docs"}</script><script src="bundle.js" data-reactid="11"></script></body></html>

5
lib/dev/index.js
View File

@ -17,8 +17,7 @@ module.exports = (filename, options = {}, cb) => {
const dirname = path.dirname(filename)
const {
port = 8000,
props = {}
port = 8000
} = options
config.resolve.modules.unshift(
@ -34,7 +33,7 @@ module.exports = (filename, options = {}, cb) => {
const defs = new webpack.DefinePlugin({
COMPONENT: JSON.stringify(filename),
PROPS: JSON.stringify(props),
PROPS: JSON.stringify(options)
})
config.plugins.push(defs)

10
lib/static/client.js
View File

@ -37,15 +37,11 @@ const config = {
}
module.exports = (filename, options = {}) => {
const {
outDir,
} = options
if (!outDir) return
if (!options.outDir) return
const dirname = path.dirname(filename)
config.output.path = path.join(process.cwd(), outDir)
config.output.path = path.join(process.cwd(), options.outDir)
config.entry.push()
@ -67,6 +63,7 @@ module.exports = (filename, options = {}) => {
config.plugins.push(
new webpack.optimize.UglifyJsPlugin()
)
config.plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
@ -82,7 +79,6 @@ module.exports = (filename, options = {}) => {
console.log(err)
reject(err)
}
console.log(stats)
resolve(stats)
})
})

13
lib/static/index.js
View File

@ -28,24 +28,21 @@ const getRoot = options => {
}
module.exports = async (filename, options = {}, cb) => {
const {
props = {},
routes
} = options
const { routes } = options
const req = require(filename)
const Component = req.default || req
const Root = getRoot(options)
const body = render(Component, props)
// todo: handle options.routes array
const body = render(Component, options)
const stats = await client(filename, options)
const rootProps = Object.assign({}, options, props, {
const rootProps = Object.assign({}, options, {
scripts: [
'bundle.js'
],
initialProps: JSON.stringify(props),
initialProps: JSON.stringify(options),
children: body
})
const html = Root

6
package.json
View File

@ -36,9 +36,7 @@
},
"x0": {
"title": "X0",
"props": {
"count": 2
},
"pages": []
"count": 2,
"routes": []
}
}