|<\/body>)/);
16 |
17 | const concatStreams = (streams: NodeJS.ReadableStream[]) => {
18 | const passThrough = new PassThrough();
19 | const next = (index: number) => {
20 | if (index < streams.length) {
21 | streams[index].pipe(passThrough, { end: false });
22 | streams[index].once('end', () => next(index + 1));
23 | } else {
24 | passThrough.end();
25 | }
26 | };
27 | next(0);
28 | return passThrough;
29 | };
30 |
31 | const compiler = webpack({
32 | mode: 'development',
33 | entry: {
34 | main: `./examples/${DIR}/src/index.${EXT}`,
35 | ssr: `./examples/${DIR}/src/ssr.${EXT}`,
36 | },
37 | output: {
38 | publicPath,
39 | libraryTarget: 'var',
40 | library: outputLibraryEntry,
41 | },
42 | node: {
43 | fs: 'empty',
44 | },
45 | plugins: [
46 | new HtmlWebpackPlugin({
47 | template,
48 | excludeChunks: ['ssr'],
49 | }) as any /* FIXME */,
50 | ],
51 | module: {
52 | rules: [{
53 | test: /\.[jt]sx?$/,
54 | exclude: /node_modules/,
55 | loader: 'ts-loader',
56 | options: {
57 | transpileOnly: true,
58 | },
59 | }],
60 | },
61 | stats: {
62 | warningsFilter: /export '.*' was not found in/,
63 | },
64 | resolve: {
65 | extensions: ['.js', '.jsx', '.ts', '.tsx'],
66 | alias: {
67 | 'react-suspense-router': `${__dirname}/../src`,
68 | 'react-dom/server': `${__dirname}/../node_modules/react-dom/server.node.js`,
69 | },
70 | },
71 | });
72 |
73 | const instance = middleware(compiler as any /* FIXME */, {
74 | publicPath,
75 | serverSideRender: true,
76 | });
77 |
78 | const app = express();
79 |
80 | app.use(instance);
81 |
82 | app.use((req, res) => {
83 | const {
84 | assetsByChunkName,
85 | outputPath,
86 | } = res.locals.webpackStats.toJson();
87 | const memFs = res.locals.fs;
88 |
89 | const jsAssets = ``;
90 |
91 | const userAgent = 'react-suspense-router (ServerSideRendering)';
92 | const routeDataMapCache = {};
93 | const windowMock = {
94 | navigator: { userAgent },
95 | __ROUTE_DATA_MAP_CACHE__: routeDataMapCache,
96 | };
97 | const documentMock = {
98 | createElement() {
99 | return {};
100 | },
101 | head: {
102 | appendChild(ele: { src: string; onload: () => void }) {
103 | const chunkCode = memFs.readFileSync(`${outputPath}/${ele.src}`, 'utf8');
104 | const loadChunk = requireFromString(`module.exports=function(window,document,fetch){${chunkCode}}`);
105 | loadChunk(windowMock, documentMock, fetch);
106 | ele.onload();
107 | },
108 | },
109 | };
110 |
111 | const ssrCode = memFs.readFileSync(`${outputPath}/${assetsByChunkName.ssr}`, 'utf8');
112 | // fs.writeFileSync('./ssrcode.js', ssrCode, 'utf8');
113 | // const ssrCode = fs.readFileSync('./ssrcode.js', 'utf8');
114 | const ssrFactory = requireFromString(`module.exports=function(window,document,fetch){${ssrCode};return ${outputLibraryEntry}}`);
115 | const ssr = ssrFactory(windowMock, documentMock, fetch).default;
116 |
117 | const getAppStream = () => {
118 | const htmlStream = new PassThrough();
119 | const dataStream = new PassThrough();
120 | let readable = false;
121 | const loop = (repeat: number) => {
122 | if (repeat > 5) {
123 | htmlStream.destroy(new Error('max render loop reached'));
124 | return;
125 | }
126 | const stream: NodeJS.ReadableStream = ssr(req.url);
127 | const onReadable = () => {
128 | readable = true;
129 | stream.pipe(htmlStream);
130 | };
131 | const onEnd = () => {
132 | // inject routeDataMapCache
133 | const data = ``;
134 | Readable.from(data).pipe(dataStream);
135 | };
136 | stream.once('readable', onReadable);
137 | stream.once('end', onEnd);
138 | stream.once('error', (err: Error) => {
139 | console.log('error while ssr', err.message);
140 | if (!readable && /not yet support lazy-loaded|invariant=295/.test(err.message)) {
141 | const timeout = 200 * repeat ** 2;
142 | // HACK until react-dom/server supports lazy and suspense
143 | console.log('retrying in', timeout, 'ms...');
144 | setTimeout(() => loop(repeat + 1), timeout);
145 | } else {
146 | htmlStream.destroy(err);
147 | }
148 | });
149 | };
150 | loop(0);
151 | return [htmlStream, dataStream];
152 | };
153 |
154 | const [htmlStream, dataStream] = getAppStream();
155 | const stream = concatStreams([
156 | Readable.from(templateChunks[0]),
157 | Readable.from(templateChunks[1]), //
158 | htmlStream,
159 | Readable.from(templateChunks[2]),
160 | dataStream,
161 | Readable.from(jsAssets),
162 | Readable.from(templateChunks[3]), //