feat(demos): use addUrlForHydration for preloading in ssr demo (#322)

feature-hub · Jan 31, 2019 · 770090a · 770090a
1 parent c661c58
commit 770090a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 16 deletions.
diff --git a/packages/demos/src/server-side-rendering/app.tsx b/packages/demos/src/server-side-rendering/app.tsx
@@ -0,0 +1,15 @@
+import {FeatureAppLoader} from '@feature-hub/react';
+import * as React from 'react';
+
+export interface AppProps {
+  readonly port?: number;
+}
+
+export function App({port}: AppProps): JSX.Element {
+  return (
+    <FeatureAppLoader
+      src="feature-app.umd.js"
+      serverSrc={port ? `http://localhost:${port}/feature-app.commonjs.js` : ''}
+    />
+  );
+}
diff --git a/packages/demos/src/server-side-rendering/integrator.node.tsx b/packages/demos/src/server-side-rendering/integrator.node.tsx
@@ -4,14 +4,18 @@ import {
 } from '@feature-hub/async-ssr-manager';
 import {FeatureAppManager, FeatureServiceRegistry} from '@feature-hub/core';
 import {loadCommonJsModule} from '@feature-hub/module-loader-commonjs';
-import {FeatureAppLoader, FeatureHubContextProvider} from '@feature-hub/react';
+import {
+  FeatureHubContextProvider,
+  FeatureHubContextValue
+} from '@feature-hub/react';
 import {
   SerializedStateManagerV0,
   serializedStateManagerDefinition
 } from '@feature-hub/serialized-state-manager';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';
 import {AppRendererOptions, AppRendererResult} from '../start-server';
+import {App} from './app';
 
 export default async function renderApp({
   port
@@ -45,13 +49,21 @@ export default async function renderApp({
     moduleLoader: loadCommonJsModule
   });
 
+  const urlsForHydration = new Set<string>();
+
+  const featureHubContextValue: FeatureHubContextValue = {
+    featureAppManager,
+    asyncSsrManager,
+
+    addUrlForHydration(url: string): void {
+      urlsForHydration.add(url);
+    }
+  };
+
   const html = await asyncSsrManager.renderUntilCompleted(() =>
     ReactDOM.renderToString(
-      <FeatureHubContextProvider value={{featureAppManager, asyncSsrManager}}>
-        <FeatureAppLoader
-          src=""
-          serverSrc={`http://localhost:${port}/feature-app.commonjs.js`}
-        />
+      <FeatureHubContextProvider value={featureHubContextValue}>
+        <App port={port} />
       </FeatureHubContextProvider>
     )
   );
@@ -62,5 +74,5 @@ export default async function renderApp({
 
   const serializedStates = serializedStateManager.serializeStates();
 
-  return {html, serializedStates};
+  return {html, serializedStates, urlsForHydration};
 }
diff --git a/packages/demos/src/server-side-rendering/integrator.tsx b/packages/demos/src/server-side-rendering/integrator.tsx
@@ -1,15 +1,14 @@
 import {FeatureAppManager, FeatureServiceRegistry} from '@feature-hub/core';
 import {defineExternals, loadAmdModule} from '@feature-hub/module-loader-amd';
-import {FeatureAppLoader, FeatureHubContextProvider} from '@feature-hub/react';
+import {FeatureHubContextProvider} from '@feature-hub/react';
 import {
   SerializedStateManagerV0,
   serializedStateManagerDefinition
 } from '@feature-hub/serialized-state-manager';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import '../blueprint-css';
-
-const featureAppUrl = 'feature-app.umd.js';
+import {App} from './app';
 
 function getSerializedStatesFromDom(): string | undefined {
   const scriptElement = document.querySelector(
@@ -19,6 +18,18 @@ function getSerializedStatesFromDom(): string | undefined {
   return (scriptElement && scriptElement.textContent) || undefined;
 }
 
+function getUrlsForHydrationFromDom(): string[] {
+  const scriptElement = document.querySelector(
+    'script[type="x-feature-hub/urls-for-hydration"]'
+  );
+
+  if (!scriptElement || !scriptElement.textContent) {
+    return [];
+  }
+
+  return JSON.parse(scriptElement.textContent);
+}
+
 (async () => {
   const integratorDefinition = {
     id: 'test:integrator',
@@ -46,8 +57,6 @@ function getSerializedStatesFromDom(): string | undefined {
 
   defineExternals({react: React});
 
-  await featureAppManager.preloadFeatureApp(featureAppUrl);
-
   const serializedStateManager = featureServices[
     serializedStateManagerDefinition.id
   ] as SerializedStateManagerV0;
@@ -58,9 +67,15 @@ function getSerializedStatesFromDom(): string | undefined {
     serializedStateManager.setSerializedStates(serializedStates);
   }
 
+  await Promise.all(
+    getUrlsForHydrationFromDom().map(async url =>
+      featureAppManager.preloadFeatureApp(url)
+    )
+  );
+
   ReactDOM.hydrate(
     <FeatureHubContextProvider value={{featureAppManager}}>
-      <FeatureAppLoader src={featureAppUrl} />
+      <App />
     </FeatureHubContextProvider>,
     document.querySelector('main')
   );

diff --git a/packages/demos/src/start-server.ts b/packages/demos/src/start-server.ts
@@ -12,6 +12,7 @@ export interface AppRendererOptions {
 export interface AppRendererResult {
   html: string;
   serializedStates?: string;
+  urlsForHydration?: Set<string>;
 }
 
 export type AppRenderer = (
@@ -20,12 +21,20 @@ export type AppRenderer = (
 
 function createDocumentHtml(
   bodyHtml: string,
-  serializedStates?: string
+  serializedStates?: string,
+  urlsForHydration?: Set<string>
 ): string {
   const serializedStatesScript = serializedStates
     ? `<script type="x-feature-hub/serialized-states">${serializedStates}</script>`
     : '';
 
+  const urlsForHydrationScript =
+    urlsForHydration && urlsForHydration.size
+      ? `<script type="x-feature-hub/urls-for-hydration">${JSON.stringify(
+          Array.from(urlsForHydration)
+        )}</script>`
+      : '';
+
   return `
     <html>
       <head>
@@ -34,6 +43,7 @@ function createDocumentHtml(
       <body>
         ${bodyHtml}
         ${serializedStatesScript}
+        ${urlsForHydrationScript}
         <script src="integrator.js"></script>
       </body>
     </html>
@@ -51,10 +61,18 @@ export async function startServer(
   app.get('/', async (req, res) => {
     try {
       if (renderApp) {
-        const {html: appHtml, serializedStates} = await renderApp({port, req});
+        const {
+          html: appHtml,
+          serializedStates,
+          urlsForHydration
+        } = await renderApp({port, req});
 
         res.send(
-          createDocumentHtml(`<main>${appHtml}</main>`, serializedStates)
+          createDocumentHtml(
+            `<main>${appHtml}</main>`,
+            serializedStates,
+            urlsForHydration
+          )
         );
       } else {
         res.send(createDocumentHtml(`<main></main>`));