diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx index 17224d3..d210aab 100644 --- a/packages/client/src/index.tsx +++ b/packages/client/src/index.tsx @@ -1,25 +1,27 @@ -import ReactDOM from 'react-dom' -import React from 'react' -import {CComponent} from './components/Component' -import {Provider} from 'react-redux' -import {createStore} from './store' +export * from './renderer' -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 store = createStore(state) - ReactDOM.hydrate( - - - , - document.body, - ) -} else { - const store = createStore() - ReactDOM.render( - - - , - document.body, - ) -} +// const state = (window as any).__PRELOADED_STATE__ + +// if (state) { +// const store = createStore(state) +// ReactDOM.hydrate( +// +// +// , +// document.body, +// ) +// } else { +// const store = createStore() +// ReactDOM.render( +// +// +// , +// document.body, +// ) +// } diff --git a/packages/client/src/renderer/ClientRenderer.tsx b/packages/client/src/renderer/ClientRenderer.tsx new file mode 100644 index 0000000..e96000b --- /dev/null +++ b/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( + + + , + this.target, + ) + } else { + const store = this.createStore() + ReactDOM.render( + + + , + this.target, + ) + } + } +} + diff --git a/packages/client/src/renderer/IRenderer.ts b/packages/client/src/renderer/IRenderer.ts new file mode 100644 index 0000000..f63bcc9 --- /dev/null +++ b/packages/client/src/renderer/IRenderer.ts @@ -0,0 +1,3 @@ +export interface IRenderer { + render(): any +} diff --git a/packages/client/src/renderer/IStoreFactory.ts b/packages/client/src/renderer/IStoreFactory.ts new file mode 100644 index 0000000..c785beb --- /dev/null +++ b/packages/client/src/renderer/IStoreFactory.ts @@ -0,0 +1,4 @@ +import {Store} from 'redux' + +// TODO maybe Store should also be typed +export type IStoreFactory = (state?: T) => Store diff --git a/packages/client/src/renderer/ServerRenderer.tsx b/packages/client/src/renderer/ServerRenderer.tsx new file mode 100644 index 0000000..fcd7a27 --- /dev/null +++ b/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( + + + , + ) + return stream + } +} diff --git a/packages/client/src/renderer/index.ts b/packages/client/src/renderer/index.ts new file mode 100644 index 0000000..effcb69 --- /dev/null +++ b/packages/client/src/renderer/index.ts @@ -0,0 +1,4 @@ +export * from './ClientRenderer' +export * from './IRenderer' +export * from './IStoreFactory' +export * from './ServerRenderer' diff --git a/packages/server/package.json b/packages/server/package.json index 0f3bdc9..59eaa15 100644 --- a/packages/server/package.json +++ b/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" }