mirror of
https://github.com/c8r/x0.git
synced 2024-10-26 23:21:46 +03:00
Small tweaks
This commit is contained in:
parent
ec6be941e3
commit
f86b0b7166
23
README.md
23
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: {}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
|
11
docs/Root.js
11
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 (
|
||||
<Html css={css}>
|
||||
{children}
|
||||
</Html>
|
||||
<Html
|
||||
{...props}
|
||||
css={css}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -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 }))
|
||||
),
|
||||
|
@ -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
12
lib/entry.static.js
Normal 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,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,
|
||||
|
@ -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
|
||||
|
@ -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": []
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user