mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 21:57:26 +03:00
Add fela support for static rendering
This commit is contained in:
parent
f25d62d3a2
commit
5327e8e1e3
22
README.md
22
README.md
@ -17,7 +17,7 @@ npm install @compositor/x0
|
||||
- No confusing APIs
|
||||
- Renders static HTML
|
||||
- Renders JS bundles
|
||||
- Use any CSS-in-JS library
|
||||
- Works with CSS-in-JS libraries like [styled-components][sc] and [glamorous][glamorous]
|
||||
- Support for routing with [react-router][react-router]
|
||||
- Support for async data fetching
|
||||
|
||||
@ -88,9 +88,20 @@ App.getInitialProps = async ({
|
||||
|
||||
## CSS-in-JS
|
||||
|
||||
x0 supports server-side rendering for styled-components, glamor, and glamorous.
|
||||
x0 supports server-side rendering for [styled-components][sc], [glamor][glamor], [glamorous][glamorous], and [fela][fela].
|
||||
To enable CSS rendering for static output, use the `cssLibrary` option
|
||||
|
||||
```sh
|
||||
x0 build src/App.js --cssLibrary="styled-components"
|
||||
```
|
||||
|
||||
Available options:
|
||||
|
||||
- [`styled-components`][sc]
|
||||
- [`glamorous`][glamorous]
|
||||
- [`glamor`][glamor]
|
||||
- [`fela`][fela]
|
||||
|
||||
## Head content
|
||||
|
||||
Head elements such as `<title>`, `<meta>`, and `<style>` can be rendered at the beginning of a component.
|
||||
@ -120,6 +131,10 @@ Default props can be passed to x0 in a `package.json` field named `x0`.
|
||||
}
|
||||
```
|
||||
|
||||
<!--
|
||||
Custom .babelrc
|
||||
-->
|
||||
|
||||
## Routing
|
||||
|
||||
To render multiple pages and use routing, add a `routes` array to the `package.json` configuration object.
|
||||
@ -186,3 +201,6 @@ const App = props => (
|
||||
[nextjs]: https://github.com/zeit/next.js
|
||||
[react-router]: https://github.com/ReactTraining/react-router
|
||||
[sc]: https://github.com/styled-components/styled-components
|
||||
[glamorous]: https://github.com/paypal/glamorous
|
||||
[glamor]: https://github.com/threepointone/glamor
|
||||
[fela]: https://github.com/rofrischmann/fela
|
||||
|
12
docs/App.js
12
docs/App.js
@ -34,11 +34,7 @@ const App = connect(props => <React.Fragment>
|
||||
<Flex wrap align='center'>
|
||||
<BlockLink href='https://compositor.io'>
|
||||
<Flex ml={-1} align='center'>
|
||||
<Logo
|
||||
size={32}
|
||||
color='white'
|
||||
backgroundColor='black'
|
||||
/>
|
||||
<Logo size={32} />
|
||||
<Caps f='10px' fontWeight='600'>
|
||||
Compositor
|
||||
</Caps>
|
||||
@ -114,9 +110,9 @@ App.defaultProps = {
|
||||
'Static site generator',
|
||||
'Hot reloading',
|
||||
'Works with virtually any React component',
|
||||
'No convoluted APIs to learn',
|
||||
'No boilerplate required',
|
||||
'Routing with react-router',
|
||||
'No confusing APIs',
|
||||
'No boilerplate generators',
|
||||
'Supports routing with react-router',
|
||||
'Works with CSS-in-JS libraries like styled-components',
|
||||
'Support for async data fetching',
|
||||
]
|
||||
|
@ -12,8 +12,8 @@ const Btn = nano('a')({
|
||||
paddingBottom: '12px',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px',
|
||||
color: 'black',
|
||||
backgroundColor: 'white',
|
||||
color: 'white',
|
||||
backgroundColor: 'black',
|
||||
border: 0,
|
||||
borderRadius: '8px'
|
||||
}, space)
|
||||
|
@ -14,8 +14,8 @@ const base = `
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
background-color: black;
|
||||
color: #000;
|
||||
background-color: #f6f6f6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
`
|
||||
|
File diff suppressed because one or more lines are too long
@ -24,10 +24,26 @@ const getGlamor = (Component, props) => {
|
||||
return tag
|
||||
}
|
||||
|
||||
const getFela = (Component, props) => {
|
||||
if (!props.renderer) {
|
||||
console.log('Warning: Fela static rendering requires a `renderer` to be passed through the `getInitialProps()` method.')
|
||||
return ''
|
||||
}
|
||||
const fela = require('fela')
|
||||
const felaDOM = require('fela-dom')
|
||||
const renderer = props.renderer || fela.createRenderer()
|
||||
renderToString(
|
||||
React.createElement(Component, props)
|
||||
)
|
||||
const tag = felaDOM.renderToMarkup(renderer)
|
||||
return tag
|
||||
}
|
||||
|
||||
const libraries = {
|
||||
'styled-components': getSC,
|
||||
glamorous: getGlamor,
|
||||
glamor: getGlamor,
|
||||
fela: getFela,
|
||||
}
|
||||
|
||||
const noop = () => ''
|
||||
|
@ -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/App.js --static -d docs --cssLibrary='fela'",
|
||||
"client": "./bin/cli.js build docs/App.js -d docs",
|
||||
"test": "nyc ava",
|
||||
"cover": "nyc report --reporter=html --reporter=lcov"
|
||||
@ -27,6 +27,8 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"chalk": "^2.1.0",
|
||||
"fela": "^6.1.0",
|
||||
"fela-dom": "^7.0.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.11.0",
|
||||
"meow": "^3.7.0",
|
||||
@ -34,6 +36,7 @@
|
||||
"ora": "^1.3.0",
|
||||
"pkg-up": "^2.0.0",
|
||||
"react": "^16.2.0",
|
||||
"react-fela": "^6.1.1",
|
||||
"read-pkg-up": "^2.0.0",
|
||||
"update-notifier": "^2.2.0",
|
||||
"webpack": "^3.10.0",
|
||||
|
Loading…
Reference in New Issue
Block a user