Add Server and Client renderer

packages/client/src/index.tsx

@@ -1,25 +1,27 @@
-import ReactDOM from 'react-dom'
+export * from './renderer'
-import React from 'react'
-import {CComponent} from './components/Component'
-import {Provider} from 'react-redux'
-import {createStore} from './store'
 
-const state = (window as any).__PRELOADED_STATE__
+// import ReactDOM from 'react-dom'
+// import React from 'react'
+// import {CComponent} from './components/Component'
+// import {Provider} from 'react-redux'
+// import {createStore} from './store'
 
-if (state) {
+// const state = (window as any).__PRELOADED_STATE__
-  const store = createStore(state)
+
-  ReactDOM.hydrate(
+// if (state) {
-    <Provider store={store}>
+//   const store = createStore(state)
-      <CComponent />
+//   ReactDOM.hydrate(
-    </Provider>,
+//     <Provider store={store}>
-    document.body,
+//       <CComponent />
-  )
+//     </Provider>,
-} else {
+//     document.body,
-  const store = createStore()
+//   )
-  ReactDOM.render(
+// } else {
-    <Provider store={store}>
+//   const store = createStore()
-      <CComponent />
+//   ReactDOM.render(
-    </Provider>,
+//     <Provider store={store}>
-    document.body,
+//       <Component />
-  )
+//     </Provider>,
-}
+//     document.body,
+//   )
+// }

packages/client/src/renderer/ClientRenderer.tsx

@@ -0,0 +1,37 @@
+import ReactDOM from 'react-dom'
+import React, {Component} from 'react'
+import {Provider} from 'react-redux'
+import {IStoreFactory} from './IStoreFactory'
+import {IRenderer} from './IRenderer'
+
+export class ClientRenderer implements IRenderer {
+  constructor(
+    readonly createStore: IStoreFactory,
+    readonly Component: Component,
+    readonly target = document.body,
+  ) {}
+
+  render() {
+    const state = (window as any).__PRELOADED_STATE__
+    const {Component} = this
+
+    if (state) {
+      const store = this.createStore(state)
+      ReactDOM.hydrate(
+        <Provider store={store}>
+          <Component />
+        </Provider>,
+        this.target,
+      )
+    } else {
+      const store = this.createStore()
+      ReactDOM.render(
+        <Provider store={store}>
+          <Component />
+        </Provider>,
+        this.target,
+      )
+    }
+  }
+}
+

packages/client/src/renderer/IRenderer.ts

@@ -0,0 +1,3 @@
+export interface IRenderer {
+  render(): any
+}

packages/client/src/renderer/IStoreFactory.ts

@@ -0,0 +1,4 @@
+import {Store} from 'redux'
+
+// TODO maybe Store should also be typed
+export type IStoreFactory<T> = (state?: T) => Store

packages/client/src/renderer/ServerRenderer.tsx

@@ -0,0 +1,20 @@
+import {IRenderer} from './IRenderer'
+import {renderToNodeStream} from 'react-dom/server'
+
+export class ServerRenderer implements IRenderer {
+  constructor(
+    readonly createStore: IStoreFactory,
+    readonly Component: Component,
+  ) {}
+  render() {
+    const {Component} = this
+    const store = this.createStore(state)
+
+    const stream = renderToNodeStream(
+      <Provider store={store}>
+        <Component />
+      </Provider>,
+    )
+    return stream
+  }
+}

packages/client/src/renderer/index.ts

@@ -0,0 +1,4 @@
+export * from './ClientRenderer'
+export * from './IRenderer'
+export * from './IStoreFactory'
+export * from './ServerRenderer'

packages/server/package.json

@@ -33,5 +33,7 @@
     "typeorm": "^0.2.11",
     "uuid": "^3.3.2",
     "winston": "^3.1.0"
-  }
+  },
+  "main": "src/index.js",
+  "types": "src/index.d.ts"
 }