mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 21:57:26 +03:00
Adjust docs and api
This commit is contained in:
parent
d6b58afe86
commit
336adbfb6e
26
README.md
26
README.md
@ -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
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -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
|
||||
|
@ -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">{
|
||||
"count": 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">{
|
||||
"title": "X0",
|
||||
"count": 2,
|
||||
"pages": [],
|
||||
"html": "docs/Root.js",
|
||||
"d": "docs",
|
||||
"outDir": "docs"
|
||||
}</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>
|
@ -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)
|
||||
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
@ -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
|
||||
|
@ -36,9 +36,7 @@
|
||||
},
|
||||
"x0": {
|
||||
"title": "X0",
|
||||
"props": {
|
||||
"count": 2
|
||||
},
|
||||
"pages": []
|
||||
"count": 2,
|
||||
"routes": []
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user