mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 21:57:26 +03:00
Prototyping css static rendering
This commit is contained in:
Brent Jackson
parent
53bb2cbf31
commit
ec6be941e3
31
README.md
31
README.md
@ -23,12 +23,21 @@ npm install rx0
|
||||
rx0 dev src/Component.js
|
||||
```
|
||||
|
||||
Options:
|
||||
- open
|
||||
- port
|
||||
|
||||
|
||||
### Static Render
|
||||
|
||||
```sh
|
||||
rx0 static src/App.js
|
||||
rx0 static src/App.js src/Html.js
|
||||
```
|
||||
|
||||
Options
|
||||
- css lib?
|
||||
|
||||
|
||||
MIT License
|
||||
|
||||
@ -41,23 +50,19 @@ To do:
|
||||
- [x] test hot loading
|
||||
- [x] test outside dir
|
||||
- [x] render static
|
||||
- [ ] render static callback
|
||||
- [ ] returns html/css/json/bundle
|
||||
- [x] render static callback
|
||||
|
||||
- [ ] render css (yikes)
|
||||
- [ ] render json
|
||||
- [ ] rehydrate from json
|
||||
- [ ] render bundle
|
||||
- [ ] rehydrate from json
|
||||
- [ ] configurable html render
|
||||
- [ ] default html render
|
||||
- [ ] merge with package.json
|
||||
|
||||
- [ ] configurable (props) html render
|
||||
- [x] default html render
|
||||
- [ ] merge options with package.json
|
||||
- [ ] render multiple routes
|
||||
- [ ] react router
|
||||
- [ ] update-notifier
|
||||
|
||||
---
|
||||
|
||||
|
||||
Render static with css lib
|
||||
|
||||
```sh
|
||||
rx0 static src/App.js src/Html.js
|
||||
```
|
||||
|
||||
|
||||
17
docs/Root.js
17
docs/Root.js
@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import Html from '../lib/Html'
|
||||
import cxs from 'cxs'
|
||||
|
||||
const Root = ({
|
||||
@ -7,19 +8,9 @@ const Root = ({
|
||||
const css = cxs.css()
|
||||
|
||||
return (
|
||||
<html>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: css
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
id='app'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: children
|
||||
}}
|
||||
/>
|
||||
</html>
|
||||
<Html css={css}>
|
||||
{children}
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,9 @@ module.exports = ({
|
||||
stylesheets.map(href => h('link', { key: href, href, rel: 'stylesheet' })),
|
||||
),
|
||||
h('body', null,
|
||||
children,
|
||||
h('div', { id: 'app' },
|
||||
children
|
||||
),
|
||||
js && script(js),
|
||||
scripts.map(src => h('script', { key: src, src }))
|
||||
),
|
||||
|
||||
3
lib/client.js
Normal file
3
lib/client.js
Normal file
@ -0,0 +1,3 @@
|
||||
// todo:
|
||||
// - webpack bundle
|
||||
module.exports = (filename, options) => {}
|
||||
43
lib/css.js
Normal file
43
lib/css.js
Normal file
@ -0,0 +1,43 @@
|
||||
const { pkg } = require('read-pkg-up').sync()
|
||||
|
||||
const libs = [
|
||||
'styled-components',
|
||||
'cxs',
|
||||
'glamor',
|
||||
'glamorous',
|
||||
'fela',
|
||||
]
|
||||
|
||||
// todo: check semver
|
||||
module.exports = () => {
|
||||
const { dependencies = {} } = pkg
|
||||
let lib
|
||||
let version
|
||||
|
||||
libs.forEach(name => {
|
||||
if (Object.keys(dependencies).includes(name)) {
|
||||
lib = name
|
||||
version = dependencies[lib]
|
||||
}
|
||||
})
|
||||
|
||||
// all these libraries might be wildly too different to reasonably account for
|
||||
switch (lib) {
|
||||
case 'styled-components':
|
||||
// wtf this api is convoluted af
|
||||
const { ServerStyleSheet } = require('styled-components')
|
||||
const sheet = new ServerStyleSheet()
|
||||
// console.log('sheet instance', sheet.create)
|
||||
// const css = sheet.getStyleTags()
|
||||
// const css = sheet.getStyleElements()
|
||||
break
|
||||
// case 'glamorous':
|
||||
case 'cxs':
|
||||
const cxs = require('cxs')
|
||||
const css = cxs.css()
|
||||
return css
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
|
||||
}
|
||||
@ -8,6 +8,10 @@ require('babel-register')({
|
||||
|
||||
const React = require('react')
|
||||
const { renderToString } = require('react-dom/server')
|
||||
const Html = require('./Html')
|
||||
const renderCSS = require('./css')
|
||||
|
||||
const pkg = require('pkg-up').sync()
|
||||
|
||||
const render = (Component, props) => renderToString(
|
||||
React.createElement(Component, props)
|
||||
@ -26,11 +30,17 @@ module.exports = (filename, root, options = {}, cb) => {
|
||||
|
||||
const body = render(Component, props)
|
||||
|
||||
// const css = renderCSS(Component, props)
|
||||
|
||||
const rootProps = Object.assign({}, props, {
|
||||
// css,
|
||||
children: body
|
||||
})
|
||||
const html = Root
|
||||
? doc(render(Root, Object.assign({}, props, { children: body })))
|
||||
: body
|
||||
? render(Root, rootProps)
|
||||
: render(Html, rootProps)
|
||||
|
||||
if (typeof cb === 'function') cb(null, html)
|
||||
if (typeof cb === 'function') cb(null, doc(html))
|
||||
|
||||
return html
|
||||
return doc(html)
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"_test": "./bin/cli.js dev docs/App.js",
|
||||
"test": "./bin/cli.js static docs/App.js lib/Html.js"
|
||||
"test": "./bin/cli.js static docs/App.js docs/Root.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
@ -21,12 +21,17 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"meow": "^3.7.0",
|
||||
"pkg-up": "^2.0.0",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"read-pkg-up": "^2.0.0",
|
||||
"webpack": "^3.5.6",
|
||||
"webpack-dev-server": "^2.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cxs": "^6.0.0"
|
||||
},
|
||||
"rx0": {
|
||||
"title": "RX0"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user