This repository has been archived by the owner on Jan 26, 2020. It is now read-only.
React Native Web Support, and new `renderToString` option
Breaking Changes
To make room for react-native-web support, we added a renderToString(app, ctx)
option so that you can have full control over how your app is rendered.
This can also be used to configure css-in-js
and so, ctx.markupRenderers
and the styled-components
and emotion
hocs are not necessary anymore, and have been deprecated.
Here's an example of using the renderToString
option to setup a css-in-js library:
const app = rogue(App, bundleUrl, {
renderToString(app, ctx) {
const markup = ReactDOM.renderToString(app)
const sheet = new ServerStyleSheet()
sheet.collectStyles(app)
ctx.app.headTags.push(sheet.getStyleTags())
return markup
}
})
New API / Exports
SSR React application:
// server.js
import rogue from '@roguejs/app/server'
import App from './App'
const app = rouge(App, process.env.BUNDLE_URL)
// client.js
import hydrate from '@roguejs/app/client'
import App from './App'
hydrate(App)
React native web application (add the .native
suffix)
// server.js
import rogue from '@roguejs/app/server.native'
import App from './App'
const app = rouge(App, process.env.BUNDLE_URL)
// client.js
import hydrate from '@roguejs/app/client.native'
import App from './App'
hydrate(App)
note: if you use webpack, there's currently caching issues that cause problems with server-rendering if you import application logic from multiple bundles (#78), so for now we recommend you set it up programmatically. checkout the with-react-native example.