Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 08:36:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: add dead-simple example of SSR

Browse Source
This commit is contained in:
Roman Hotsiy 2018-03-06 13:12:49 +02:00
parent 1428fb52e0
commit 29b0846e57
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
4 changed files with 77 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
demo/ssr/index.ts Normal file
View File

@ -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}`));

5
src/services/SearchStore.ts
View File

@ -5,6 +5,7 @@ let worker;
if (typeof URL !== 'undefined') { if (typeof URL !== 'undefined') {
try { try {
// tslint:disable-next-line
worker = require('workerize-loader?inline&fallback=false!./SearchWorker.worker').default; worker = require('workerize-loader?inline&fallback=false!./SearchWorker.worker').default;
} catch (e) { } catch (e) {
worker = require('./SearchWorker.worker').default; worker = require('./SearchWorker.worker').default;
@ -17,8 +18,8 @@ export class SearchStore {
searchWorker = new worker(); searchWorker = new worker();
indexItems(groups: Array<IMenuItem | OperationModel>) { indexItems(groups: Array<IMenuItem | OperationModel>) {
const recurse = groups => { const recurse = items => {
groups.forEach(group => { items.forEach(group => {
if (group.type !== 'group') { if (group.type !== 'group') {
this.add(group.name, group.description || '', group.id); this.add(group.name, group.description || '', group.id);
} }

2
src/services/SearchWorker.worker.ts
View File

@ -47,7 +47,7 @@ export async function done() {
export async function toJS() { export async function toJS() {
return { return {
store: store, store,
index: (await index).toJSON(), index: (await index).toJSON(),
}; };
} }

2
src/standalone.tsx
View File

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