1
1
mirror of https://github.com/c8r/x0.git synced 2024-10-26 23:21:46 +03:00

Small tweaks

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

View File

@ -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: {}
}
]
```

View File

@ -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 (
<Html css={css}>
{children}
</Html>
<Html
{...props}
css={css}
/>
)
}

View File

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

View File

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

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
)

View File

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

View File

@ -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 => '<!DOCTYPE html>' + 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

View File

@ -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": []
}
}