mirror of
https://github.com/c8r/x0.git
synced 2024-10-27 07:29:15 +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
|
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
11
docs/Root.js
@ -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,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 }))
|
||||||
),
|
),
|
||||||
|
@ -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,
|
||||||
|
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 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,
|
||||||
|
@ -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
|
||||||
|
@ -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": []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user