Skip to content
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

Compare
Choose a tag to compare
@alidcast alidcast released this 23 Dec 17:32
· 27 commits to master since this release

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.