diff --git a/README.md b/README.md index c456e27..3adf21e 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,9 @@ rx0 static src/App.js src/Html.js Options - css lib? +- out-dir +- client-bundle +- json props MIT License @@ -53,16 +56,28 @@ To do: - [x] render static callback - [ ] render css (yikes) -- [ ] render json -- [ ] rehydrate from json +- [x] render json +- [x] rehydrate from json +- [ ] out-dir option - [ ] render bundle - [ ] rehydrate from json -- [ ] configurable (props) html render +- [x] configurable (props) html render - [x] default html render -- [ ] merge options with package.json +- [x] merge options with package.json - [ ] render multiple routes - [ ] react router - [ ] update-notifier +--- + +```js +pages: [ + { + path: '/', + component: 'docs/App.js', + props: {} + } +] +``` diff --git a/docs/Root.js b/docs/Root.js index 59d090b..99261c2 100644 --- a/docs/Root.js +++ b/docs/Root.js @@ -2,15 +2,14 @@ import React from 'react' import Html from '../lib/Html' import cxs from 'cxs' -const Root = ({ - children -}) => { +const Root = props => { const css = cxs.css() return ( - - {children} - + ) } diff --git a/lib/Html.js b/lib/Html.js index 832b5f7..de2223a 100644 --- a/lib/Html.js +++ b/lib/Html.js @@ -9,6 +9,7 @@ module.exports = ({ js, stylesheets = [], scripts = [], + initialProps, children }) => h('html', null, h('head', null, @@ -24,6 +25,14 @@ module.exports = ({ h('div', { id: 'app' }, children ), + // todo: boolean condition + h('script', { + id: '__initial-props__', + type: 'application/json', + dangerouslySetInnerHTML: { + __html: initialProps + } + }), js && script(js), scripts.map(src => h('script', { key: src, src })) ), diff --git a/lib/config.js b/lib/config.js index 05f73cb..242e493 100644 --- a/lib/config.js +++ b/lib/config.js @@ -1,10 +1,11 @@ const path = require('path') const webpack = require('webpack') +// dev webpack config module.exports = { // devtool: 'eval', entry: [ - path.join(__dirname, './entry'), + path.join(__dirname, './entry.dev'), ], output: { path: __dirname, diff --git a/lib/entry.js b/lib/entry.dev.js similarity index 100% rename from lib/entry.js rename to lib/entry.dev.js diff --git a/lib/entry.static.js b/lib/entry.static.js new file mode 100644 index 0000000..9d6cd92 --- /dev/null +++ b/lib/entry.static.js @@ -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 +) diff --git a/lib/server.js b/lib/server.js index 376280a..ce61e51 100644 --- a/lib/server.js +++ b/lib/server.js @@ -4,6 +4,8 @@ const DevServer = require('webpack-dev-server') const open = require('opn') const config = require('./config') +const { pkg } = require('read-pkg-up').sync() + const devOptions = { hot: true, historyApiFallback: { @@ -20,7 +22,7 @@ module.exports = (filename, options = {}, cb) => { const { port = 8000, props = {} - } = options + } = Object.assign({}, pkg.rx0, options) config.resolve.modules.unshift( dirname, diff --git a/lib/static.js b/lib/static.js index e938b96..166245c 100644 --- a/lib/static.js +++ b/lib/static.js @@ -11,7 +11,7 @@ const { renderToString } = require('react-dom/server') const Html = require('./Html') const renderCSS = require('./css') -const pkg = require('pkg-up').sync() +const { pkg } = require('read-pkg-up').sync() const render = (Component, props) => renderToString( React.createElement(Component, props) @@ -20,9 +20,10 @@ const render = (Component, props) => renderToString( const doc = n => '' + n module.exports = (filename, root, options = {}, cb) => { + const opts = Object.assign({}, pkg.rx0, options) const { props = {} - } = options + } = opts const req = require(filename) const Component = req.default || req @@ -32,8 +33,9 @@ module.exports = (filename, root, options = {}, cb) => { // const css = renderCSS(Component, props) - const rootProps = Object.assign({}, props, { + const rootProps = Object.assign({}, opts, props, { // css, + initialProps: JSON.stringify(props), children: body }) const html = Root diff --git a/package.json b/package.json index 875b17f..f17718a 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "rx0": "bin/cli.js" }, "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" }, "keywords": [], @@ -32,6 +33,7 @@ "cxs": "^6.0.0" }, "rx0": { - "title": "RX0" + "title": "RX0", + "pages": [] } }