mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 21:57:26 +03:00
Add glamor ssr support
This commit is contained in:
parent
a411bf685e
commit
bc646f0b50
11
docs/Root.js
11
docs/Root.js
@ -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='+'
|
||||
|
@ -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>
|
||||
|
@ -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,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",
|
||||
|
Loading…
Reference in New Issue
Block a user