chore: add dead-simple example of SSR

Redocly · Mar 6, 2018 · 29b0846 · 29b0846
1 parent 1428fb5
commit 29b0846
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 3 deletions.
diff --git a/demo/ssr/index.ts b/demo/ssr/index.ts
@@ -0,0 +1,71 @@
+import { renderToString } from 'react-dom/server';
+import * as React from 'react';
+import { ServerStyleSheet } from 'styled-components';
+import { Redoc, createStore } from '../../';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+const yaml = require('yaml-js');
+const http = require('http');
+const url = require('url');
+const fs = require('fs');
+
+const PORT = 9999;
+
+const server = http.createServer(async (request, response) => {
+  console.time('request ' + request.url);
+  if (request.url === '/redoc.standalone.js') {
+    fs.createReadStream('bundles/redoc.standalone.js', 'utf8').pipe(response);
+  } else if (request.url === '/') {
+    const spec = yaml.load(readFileSync(resolve(__dirname, '../openapi.yaml')));
+    let store = await createStore(spec, '', { nativeScrollbars: true });
+
+    const sheet = new ServerStyleSheet();
+
+    const html = renderToString(sheet.collectStyles(React.createElement(Redoc, { store })));
+    const css = sheet.getStyleTags();
+
+    const res = `<html>
+    <head>
+      <meta charset="utf8" />
+      <title>ReDoc</title>
+      <!-- needed for adaptive design -->
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <style>
+        body {
+          padding: 0;
+          margin: 0;
+        }
+      </style>
+      <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
+      <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+      <script src="redoc.standalone.js"></script>
+      <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
+      ${css}
+    </head>
+    <body>
+      <div id="redoc">${html}</div>
+      <script>
+        const state = ${JSON.stringify(await store.toJS())};
+        const store = Redoc.AppStore.fromJS(state);
+        document.addEventListener('DOMContentLoaded', function() {
+          console.time('ReDoc hydrate');
+          ReactDOM.hydrate(React.createElement(Redoc.Redoc, {store: store}), document.getElementById('redoc'));
+          console.timeEnd('ReDoc hydrate');
+        });
+      </script>
+    </body>
+    </html>`;
+    response.writeHead(200);
+    response.write(res);
+    response.end();
+  } else {
+    response.writeHead(404);
+    response.write('Not found');
+    response.end();
+  }
+
+  console.timeEnd('request ' + request.url);
+});
+
+server.listen(PORT, () => console.log(`Server started: http://127.0.0.1:${PORT}`));
diff --git a/src/services/SearchStore.ts b/src/services/SearchStore.ts
@@ -5,6 +5,7 @@ let worker;
 
 if (typeof URL !== 'undefined') {
   try {
+    // tslint:disable-next-line
     worker = require('workerize-loader?inline&fallback=false!./SearchWorker.worker').default;
   } catch (e) {
     worker = require('./SearchWorker.worker').default;
@@ -17,8 +18,8 @@ export class SearchStore {
   searchWorker = new worker();
 
   indexItems(groups: Array<IMenuItem | OperationModel>) {
-    const recurse = groups => {
-      groups.forEach(group => {
+    const recurse = items => {
+      items.forEach(group => {
         if (group.type !== 'group') {
           this.add(group.name, group.description || '', group.id);
         }

diff --git a/src/services/SearchWorker.worker.ts b/src/services/SearchWorker.worker.ts
@@ -47,7 +47,7 @@ export async function done() {
 
 export async function toJS() {
   return {
-    store: store,
+    store,
     index: (await index).toJSON(),
   };
 }

diff --git a/src/standalone.tsx b/src/standalone.tsx
@@ -4,6 +4,8 @@ import { render } from 'react-dom';
 import { RedocStandalone } from './components/RedocStandalone';
 import { querySelector } from './utils/dom';
 
+export { Redoc, AppStore } from './index';
+
 export const version = __REDOC_VERSION__;
 export const revision = __REDOC_REVISION__;