c8r/x0
1
1
Fork 0
mirror of https://github.com/c8r/x0.git synced 2024-09-11 21:57:26 +03:00
Code Issues Projects Releases Wiki Activity

Add glamor ssr support

Browse Source
This commit is contained in:
Brent Jackson 2017-12-08 16:19:29 -05:00
parent a411bf685e
commit bc646f0b50
4 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/Root.js
View File

@ -1,8 +1,15 @@
import React from 'react'
import connect from 'refunk'
import styled from 'styled-components'
import glamorous from 'glamorous'
import { color } from 'styled-system'
const Heading = styled('h1')([], {
const SCHeading = styled('h1')([], {
fontFamily: 'sans-serif',
fontSize: 48
}, color)
const GHeading = glamorous('h1')({
fontFamily: 'sans-serif',
fontSize: 48,
color: 'tomato'
@ -15,7 +22,7 @@ const Root = connect(props => (
<title key='title'>Hello {props.count}</title>
<meta name='viewport' content='width=device-width,initial-scale=1' />
<meta name='description' content='Description for this page' />
<Heading>Hello {props.count}</Heading>
<SCHeading color='tomato'>Hello {props.count}</SCHeading>
<button
onClick={e => props.update(inc)}
children='+'

10
docs/index.html
View File

@ -1,14 +1,14 @@
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<style type="text/css" data-styled-components="ewjoPu" data-styled-components-is-local="true">/* sc-component-id: sc-bdVaJa */
<style type="text/css" data-styled-components="duEybs" data-styled-components-is-local="true">/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {}
.ewjoPu{font-family:sans-serif;font-size:48;color:tomato;}
.duEybs{font-family:sans-serif;font-size:48;color:tomato;}
</style>
</head>
<body>
<title>Hello <!-- -->0</title><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Description for this page"/><h1 class="sc-bdVaJa ewjoPu">Hello <!-- -->0</h1><button>+</button>
<script id='__initial-props__' type='application/json'>{"count":0,"title":"Compositor x0","cssLibrary":"styled-components","_basename":"/x0","d":"docs","outDir":"docs"}</script>
<script src='/bundle.js'></script>
<title>Hello 0</title><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Description for this page"/><h1 class="sc-bdVaJa duEybs" color="tomato">Hello 0</h1><button>+</button>
</body>

25
lib/static/getCSS.js
View File

@ -1,6 +1,7 @@
const React = require('react')
const { renderToString } = require('react-dom/server')
const SC = require('styled-components')
const glamor = require('glamor/server')
const getSC = (Component, props) => {
const sheet = new SC.ServerStyleSheet()
@ -10,12 +11,31 @@ const getSC = (Component, props) => {
)
)
const tags = sheet.getStyleTags()
return tags
}
const getGlamor = (Component, props) => {
const { css } = glamor.renderStatic(() => (
renderToString(
React.createElement(Component, props)
)
))
const tag = `<style>${css}</style>`
return tag
}
const getEmotion = (Component, props) => {
}
const getFela = (Component, props) => {
}
const libraries = {
'styled-components': getSC
'styled-components': getSC,
glamorous: getGlamor,
glamor: getGlamor,
// emotion: getEmotion,
// fela: getFela,
}
const noop = () => ''
@ -24,6 +44,7 @@ module.exports = (Component, props = {}) => {
const { cssLibrary } = props
const getCSS = libraries[cssLibrary] || noop
// style tag strings
const css = getCSS(Component, props)
return css

8
package.json
View File

@ -8,7 +8,7 @@
},
"scripts": {
"start": "./bin/cli.js dev docs/App.js -op 8888",
"build": "./bin/cli.js build docs/App.js --static -d docs",
"build": "./bin/cli.js build docs/Root.js --static -d docs",
"client": "./bin/cli.js build docs/Root.js -d docs",
"test": "nyc ava",
"cover": "nyc report --reporter=html --reporter=lcov"
@ -27,12 +27,18 @@
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
"emotion": "^8.0.12",
"fela": "^6.1.0",
"glamor": "^2.20.40",
"glamorous": "^4.11.0",
"meow": "^3.7.0",
"opn": "^5.1.0",
"ora": "^1.3.0",
"pkg-up": "^2.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-emotion": "^8.0.12",
"react-fela": "^6.1.1",
"react-router-dom": "^4.2.2",
"read-pkg-up": "^2.0.0",
"update-notifier": "^2.2.0",