mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 21:57:26 +03:00
Add basic routing support
This commit is contained in:
parent
883f4f7597
commit
7177d2a476
@ -12,7 +12,6 @@ const App = props => (
|
||||
<Title>
|
||||
Hello {props.count}
|
||||
</Title>
|
||||
<Debug {...props} />
|
||||
<button
|
||||
onClick={e => props.update(dec)}
|
||||
children='-'
|
||||
@ -21,6 +20,7 @@ const App = props => (
|
||||
onClick={e => props.update(inc)}
|
||||
children='+'
|
||||
/>
|
||||
<Debug {...props} />
|
||||
</div>
|
||||
)
|
||||
|
||||
|
12
docs/about/index.html
Normal file
12
docs/about/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="113220336"><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:tomato}</style></head><body data-reactid="8"><div id="app" data-reactid="9"><div data-reactroot="" data-reactid="1" data-react-checksum="1930868529"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><button data-reactid="5">-</button><button data-reactid="6">+</button><pre data-reactid="7">{
|
||||
"title": "X0",
|
||||
"count": 2,
|
||||
"routes": [
|
||||
"/",
|
||||
"/about"
|
||||
],
|
||||
"html": "docs/Root.js",
|
||||
"d": "docs",
|
||||
"outDir": "docs",
|
||||
"pathname": "/about"
|
||||
}</pre></div></div><script id="__initial-props__" type="application/json" data-reactid="10">{"title":"X0","count":2,"routes":["/","/about"],"html":"docs/Root.js","d":"docs","outDir":"docs","pathname":"/about"}</script><script src="/bundle.js" data-reactid="11"></script></body></html>
|
File diff suppressed because one or more lines are too long
@ -1,8 +1,12 @@
|
||||
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="1628992601"><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="1531157366"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><pre data-reactid="5">{
|
||||
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="1181324975"><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:tomato}</style></head><body data-reactid="8"><div id="app" data-reactid="9"><div data-reactroot="" data-reactid="1" data-react-checksum="-637946602"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><button data-reactid="5">-</button><button data-reactid="6">+</button><pre data-reactid="7">{
|
||||
"title": "X0",
|
||||
"count": 2,
|
||||
"routes": [],
|
||||
"routes": [
|
||||
"/",
|
||||
"/about"
|
||||
],
|
||||
"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,"routes":[],"html":"docs/Root.js","d":"docs","outDir":"docs"}</script><script src="bundle.js" data-reactid="11"></script></body></html>
|
||||
"outDir": "docs",
|
||||
"pathname": "/"
|
||||
}</pre></div></div><script id="__initial-props__" type="application/json" data-reactid="10">{"title":"X0","count":2,"routes":["/","/about"],"html":"docs/Root.js","d":"docs","outDir":"docs","pathname":"/"}</script><script src="/bundle.js" data-reactid="11"></script></body></html>
|
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const About = props => (
|
||||
<div>
|
||||
<h1>
|
||||
About
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default About
|
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Home = props => (
|
||||
<div>
|
||||
<h1>
|
||||
Home
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Home
|
@ -27,19 +27,13 @@ const getRoot = options => {
|
||||
return Root
|
||||
}
|
||||
|
||||
const renderPage = async ({
|
||||
filename,
|
||||
Root,
|
||||
Component,
|
||||
options
|
||||
}) => {
|
||||
const renderHTML = (Root, Component, options) => {
|
||||
const body = render(Component, options)
|
||||
const stats = await client(filename, options)
|
||||
|
||||
const base = options.basename || ''
|
||||
const script = base + '/bundle.js'
|
||||
const rootProps = Object.assign({}, options, {
|
||||
scripts: [
|
||||
'bundle.js'
|
||||
],
|
||||
scripts: [ script ],
|
||||
initialProps: options,
|
||||
children: body
|
||||
})
|
||||
@ -50,6 +44,30 @@ const renderPage = async ({
|
||||
return doc(html)
|
||||
}
|
||||
|
||||
const writePage = (Root, Component, options) => {
|
||||
const html = renderHTML(Root, Component, options)
|
||||
|
||||
if (options.outDir) {
|
||||
const dir = path.join(
|
||||
process.cwd(),
|
||||
options.outDir,
|
||||
options.pathname || ''
|
||||
)
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir)
|
||||
}
|
||||
const name = path.join(dir, 'index.html')
|
||||
fs.writeFileSync(name, html)
|
||||
}
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
const renderBundle = async (filename, options) => {
|
||||
const stats = await client(filename, options)
|
||||
return
|
||||
}
|
||||
|
||||
module.exports = async (filename, options = {}, cb) => {
|
||||
const { routes } = options
|
||||
const req = require(filename)
|
||||
@ -57,21 +75,22 @@ module.exports = async (filename, options = {}, cb) => {
|
||||
|
||||
const Root = getRoot(options)
|
||||
|
||||
// todo: handle options.routes array
|
||||
const html = await renderPage({
|
||||
filename,
|
||||
Root,
|
||||
Component,
|
||||
options,
|
||||
})
|
||||
|
||||
if (typeof cb === 'function') {
|
||||
if (options.outDir) {
|
||||
const name = path.join(process.cwd(), options.outDir, 'index.html')
|
||||
fs.writeFileSync(name, html)
|
||||
}
|
||||
cb(null, html)
|
||||
let result
|
||||
if (options.routes) {
|
||||
result = options.routes.map(pathname => {
|
||||
return writePage(Root, Component, Object.assign({}, options, {
|
||||
pathname
|
||||
}))
|
||||
})
|
||||
} else {
|
||||
result = writePage(Root, Component, options)
|
||||
}
|
||||
|
||||
return html
|
||||
await renderBundle(filename, options)
|
||||
|
||||
if (typeof cb === 'function') {
|
||||
cb(null, result)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
@ -38,6 +38,9 @@
|
||||
"x0": {
|
||||
"title": "X0",
|
||||
"count": 2,
|
||||
"routes": []
|
||||
"routes": [
|
||||
"/",
|
||||
"/about"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user