Rogue.js Versions Save

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 (https://github.com/alidcastano/rogue.js/issues/78), so for now we recommend you set it up programmatically. checkout the with-react-native example.

Breaking Changes

• removed loadable-components dependency since new version compatable with React 16.7 requires Webpack and Rogue is independent of any build setup (plus, React.lazy and Suspense makes it less necessary to have this built-in)
• removed @roguejs/cli package. it was never finished (partly because we were waiting for Parcel to progress, partly due to time constraints) and there's already great ssr built tools like Razzle that solve this decently enough

Other than that, just simplified logic and added basic tests to app middleware. :)

Breaking changes

• exposed way of adding head/body tags to Rogue class, which replaced bundleUrl option (#68 #66 )

Before:

const app = new Rogue(App, { bundleUrl })

Now:

const app = new Rogue(App, { 
  bodyTags: [`<script src="${bundleUrl}" defer></script>`]
})

A bit more code, but gives you more control over the tags added to your html document.

Other Improvements

• Eliminated wallking of tree - realized it was uncessary (#65)
• Removed uncessary initialRender flag causing hydration problems (#62)

• upgraded rogue-cli to @roguejs/app@^6.0.0 (#58, thanks to @Kanuny)
• upgraded styled-components hoc to @roguejs/app@^6.0.0
• added defaults to server options

roguejs/app:

• added listen method to app

• fixed loading of simple dom nodes (i.e. such as in with-razzle example)
• fixed with-razzle example #52

Fixes:

• fixed redirect error caused by allowing data from component we use to walk the tree to persist #51
• made isServer a variable (was incorrectly a function before)

• fixed client-server mismatch in dev mode #50

Ultra Breaking Changes

• No longer calling getInitialProps for Routes #42 #6. It's primarily meant for querying data or redirecting, both of which are handled by Apollo Graphql and React Router, respectively. This change simplified codebase since we only have to walk component tree to App.js component.

Fixes / Changes

• Hocs now wrap each other's getInitialProp methods. This fixes problem with initilizing hocs before App.js component. #47
• Now bundling code #46 #2, so we don't need to pass Helmet or LoadableComponents anymore as params
• Handle router redirects in server #48

Other Improvements

• Since we now bundle roguejs/app code, we also refactored it to typescript

Quick glance at new API:

// App.js
export default () => 'Hello World!'

// client.js
import { hydrate } from '@roguejs/app'
import App from './App'

hydrate(App)

// server.js
import Rogue from '@roguejs/app/server'
import http from 'http'
import App from './App'

const app = new Rogue(App)

http.createServer(app.render).listen(3000)