c8r/x0
1
1
Fork 0
mirror of https://github.com/c8r/x0.git synced 2024-10-27 07:29:15 +03:00
Code Issues Projects Releases Wiki Activity

Small tweaks

Browse Source
This commit is contained in:
Brent Jackson 2017-09-13 07:50:48 -04:00
parent ec6be941e3
commit f86b0b7166
9 changed files with 59 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -37,6 +37,9 @@ rx0 static src/App.js src/Html.js
Options Options
- css lib? - css lib?
- out-dir
- client-bundle
- json props
MIT License MIT License
@ -53,16 +56,28 @@ To do:
- [x] render static callback - [x] render static callback
- [ ] render css (yikes) - [ ] render css (yikes)
- [ ] render json - [x] render json
- [ ] rehydrate from json - [x] rehydrate from json
- [ ] out-dir option
- [ ] render bundle - [ ] render bundle
- [ ] rehydrate from json - [ ] rehydrate from json
- [ ] configurable (props) html render - [x] configurable (props) html render
- [x] default html render - [x] default html render
- [ ] merge options with package.json - [x] merge options with package.json
- [ ] render multiple routes - [ ] render multiple routes
- [ ] react router - [ ] react router
- [ ] update-notifier - [ ] update-notifier
---
```js
pages: [
{
path: '/',
component: 'docs/App.js',
props: {}
}
]
```

11
docs/Root.js
View File

@ -2,15 +2,14 @@ import React from 'react'
import Html from '../lib/Html' import Html from '../lib/Html'
import cxs from 'cxs' import cxs from 'cxs'
const Root = ({ const Root = props => {
children
}) => {
const css = cxs.css() const css = cxs.css()
return ( return (
<Html css={css}> <Html
{children} {...props}
</Html> css={css}
/>
) )
} }

9
lib/Html.js
View File

@ -9,6 +9,7 @@ module.exports = ({
js, js,
stylesheets = [], stylesheets = [],
scripts = [], scripts = [],
initialProps,
children children
}) => h('html', null, }) => h('html', null,
h('head', null, h('head', null,
@ -24,6 +25,14 @@ module.exports = ({
h('div', { id: 'app' }, h('div', { id: 'app' },
children children
), ),
// todo: boolean condition
h('script', {
id: '__initial-props__',
type: 'application/json',
dangerouslySetInnerHTML: {
__html: initialProps
}
}),
js && script(js), js && script(js),
scripts.map(src => h('script', { key: src, src })) scripts.map(src => h('script', { key: src, src }))
), ),

3
lib/config.js
View File

@ -1,10 +1,11 @@
const path = require('path') const path = require('path')
const webpack = require('webpack') const webpack = require('webpack')
// dev webpack config
module.exports = { module.exports = {
// devtool: 'eval', // devtool: 'eval',
entry: [ entry: [
path.join(__dirname, './entry'), path.join(__dirname, './entry.dev'),
], ],
output: { output: {
path: __dirname, path: __dirname,

0
lib/entry.js → lib/entry.dev.js
View File

12
lib/entry.static.js Normal file
View File

@ -0,0 +1,12 @@
const React = require('react')
const { render } = require('react-dom')
const App = require(COMPONENT).default || require(COMPONENT)
const data = document.getElementById('__initial-props__').innerHTML
const props = JSON.parse(data)
render(
React.createElement(App, props),
app
)

4
lib/server.js
View File

@ -4,6 +4,8 @@ const DevServer = require('webpack-dev-server')
const open = require('opn') const open = require('opn')
const config = require('./config') const config = require('./config')
const { pkg } = require('read-pkg-up').sync()
const devOptions = { const devOptions = {
hot: true, hot: true,
historyApiFallback: { historyApiFallback: {
@ -20,7 +22,7 @@ module.exports = (filename, options = {}, cb) => {
const { const {
port = 8000, port = 8000,
props = {} props = {}
} = options } = Object.assign({}, pkg.rx0, options)
config.resolve.modules.unshift( config.resolve.modules.unshift(
dirname, dirname,

8
lib/static.js
View File

@ -11,7 +11,7 @@ const { renderToString } = require('react-dom/server')
const Html = require('./Html') const Html = require('./Html')
const renderCSS = require('./css') const renderCSS = require('./css')
const pkg = require('pkg-up').sync() const { pkg } = require('read-pkg-up').sync()
const render = (Component, props) => renderToString( const render = (Component, props) => renderToString(
React.createElement(Component, props) React.createElement(Component, props)
@ -20,9 +20,10 @@ const render = (Component, props) => renderToString(
const doc = n => '<!DOCTYPE html>' + n const doc = n => '<!DOCTYPE html>' + n
module.exports = (filename, root, options = {}, cb) => { module.exports = (filename, root, options = {}, cb) => {
const opts = Object.assign({}, pkg.rx0, options)
const { const {
props = {} props = {}
} = options } = opts
const req = require(filename) const req = require(filename)
const Component = req.default || req const Component = req.default || req
@ -32,8 +33,9 @@ module.exports = (filename, root, options = {}, cb) => {
// const css = renderCSS(Component, props) // const css = renderCSS(Component, props)
const rootProps = Object.assign({}, props, { const rootProps = Object.assign({}, opts, props, {
// css, // css,
initialProps: JSON.stringify(props),
children: body children: body
}) })
const html = Root const html = Root

6
package.json
View File

@ -7,7 +7,8 @@
"rx0": "bin/cli.js" "rx0": "bin/cli.js"
}, },
"scripts": { "scripts": {
"_test": "./bin/cli.js dev docs/App.js", "start": "./bin/cli.js dev docs/App.js",
"build": "./bin/cli.js static docs/App.js",
"test": "./bin/cli.js static docs/App.js docs/Root.js" "test": "./bin/cli.js static docs/App.js docs/Root.js"
}, },
"keywords": [], "keywords": [],
@ -32,6 +33,7 @@
"cxs": "^6.0.0" "cxs": "^6.0.0"
}, },
"rx0": { "rx0": {
"title": "RX0" "title": "RX0",
"pages": []
} }
} }