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

Add basic routing support

Browse Source
This commit is contained in:
Brent Jackson 2017-09-14 19:12:22 -04:00
parent 883f4f7597
commit 7177d2a476
8 changed files with 70 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/App.js
View File

@ -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
View 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">{
&quot;title&quot;: &quot;X0&quot;,
&quot;count&quot;: 2,
&quot;routes&quot;: [
&quot;/&quot;,
&quot;/about&quot;
],
&quot;html&quot;: &quot;docs/Root.js&quot;,
&quot;d&quot;: &quot;docs&quot;,
&quot;outDir&quot;: &quot;docs&quot;,
&quot;pathname&quot;: &quot;/about&quot;
}</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>

2
docs/bundle.js
View File

File diff suppressed because one or more lines are too long

12
docs/index.html
View File

@ -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">{
&quot;title&quot;: &quot;X0&quot;,
&quot;count&quot;: 2,
&quot;routes&quot;: [],
&quot;routes&quot;: [
&quot;/&quot;,
&quot;/about&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,"routes":[],"html":"docs/Root.js","d":"docs","outDir":"docs"}</script><script src="bundle.js" data-reactid="11"></script></body></html>
&quot;outDir&quot;: &quot;docs&quot;,
&quot;pathname&quot;: &quot;/&quot;
}</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>

11
docs/pages/about.js
View File

@ -1,11 +0,0 @@
import React from 'react'
const About = props => (
<div>
<h1>
About
</h1>
</div>
)
export default About

11
docs/pages/home.js
View File

@ -1,11 +0,0 @@
import React from 'react'
const Home = props => (
<div>
<h1>
Home
</h1>
</div>
)
export default Home

69
lib/static/index.js
View File

@ -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
}

5
package.json
View File

@ -38,6 +38,9 @@
"x0": {
"title": "X0",
"count": 2,
"routes": []
"routes": [
"/",
"/about"
]
}
}