From c26429f9b2cfcbc7038e3fcba899a0b0639c83b4 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 13 Apr 2019 21:13:49 -0700
Subject: [PATCH 1/7] v2(feat): convert blog to view-driven content queries

---
 .../src/index.js                              | 22 +++++++-
 packages/docusaurus-utils/src/index.js        |  4 +-
 .../lib/client/exports/ContentRenderer.js     | 37 ++++++++++++++
 .../lib/default-theme/BlogPost/index.js       | 51 +++++++++++--------
 packages/docusaurus/lib/server/load/index.js  | 19 +++++--
 .../docusaurus/lib/server/load/plugins.js     |  7 +++
 packages/docusaurus/lib/server/load/routes.js | 42 +++++++++------
 7 files changed, 138 insertions(+), 44 deletions(-)
 create mode 100644 packages/docusaurus/lib/client/exports/ContentRenderer.js

diff --git a/packages/docusaurus-plugin-content-blog/src/index.js b/packages/docusaurus-plugin-content-blog/src/index.js
index 3227379059e3..620ad3faf375 100644
--- a/packages/docusaurus-plugin-content-blog/src/index.js
+++ b/packages/docusaurus-plugin-content-blog/src/index.js
@@ -121,7 +121,7 @@ class DocusaurusPluginContentBlog {
 
   async contentLoaded({content, actions}) {
     const {blogPageComponent, blogPostComponent} = this.options;
-    const {addRoute} = actions;
+    const {addContent, addRoute} = actions;
     content.forEach(metadataItem => {
       const {isBlogPage, permalink} = metadataItem;
       if (isBlogPage) {
@@ -136,6 +136,18 @@ class DocusaurusPluginContentBlog {
             },
           })),
         });
+
+        addContent(permalink, {
+          metadata: metadataItem,
+          posts: metadataItem.posts.map(item => ({
+            id: item.source,
+            query: {
+              truncated: true,
+            },
+            __async: true,
+          })),
+        });
+
         return;
       }
 
@@ -145,6 +157,14 @@ class DocusaurusPluginContentBlog {
         metadata: metadataItem,
         modules: [metadataItem.source],
       });
+
+      addContent(permalink, {
+        metadata: metadataItem,
+        contents: {
+          id: metadataItem.source,
+          __async: true,
+        },
+      });
     });
   }
 
diff --git a/packages/docusaurus-utils/src/index.js b/packages/docusaurus-utils/src/index.js
index df9025de2689..d933ccae1f1e 100644
--- a/packages/docusaurus-utils/src/index.js
+++ b/packages/docusaurus-utils/src/index.js
@@ -47,7 +47,7 @@ function encodePath(userpath) {
  */
 function docuHash(str) {
   if (str === '/') {
-    return 'Index';
+    return 'index';
   }
   const shortHash = createHash('md5')
     .update(str)
@@ -63,7 +63,7 @@ function docuHash(str) {
  */
 function genComponentName(pagePath) {
   if (pagePath === '/') {
-    return 'Index';
+    return 'index';
   }
   const pageHash = docuHash(pagePath);
   const pascalCase = _.flow(
diff --git a/packages/docusaurus/lib/client/exports/ContentRenderer.js b/packages/docusaurus/lib/client/exports/ContentRenderer.js
new file mode 100644
index 000000000000..5f6b17c982e4
--- /dev/null
+++ b/packages/docusaurus/lib/client/exports/ContentRenderer.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import routesAsyncModules from '@generated/routesAsyncModules';
+import Loadable from 'react-loadable';
+import Loading from '@theme/Loading';
+import registry from '@generated/registry';
+
+function ContentRenderer(props) {
+  const {query, render} = props;
+  const {id} = query;
+  const modules = routesAsyncModules[id];
+  const mappedModules = {};
+  Object.keys(modules).map(key => {
+    mappedModules[key] = registry[modules[key]];
+  });
+
+  const LoadableComponent = Loadable.Map({
+    loading: Loading,
+    loader: mappedModules,
+    render: loaded => {
+      Object.keys(loaded).map(key => {
+        loaded[key] = loaded[key].default;
+      });
+      return render(loaded, props);
+    },
+  });
+
+  return <LoadableComponent />;
+}
+
+export default ContentRenderer;
diff --git a/packages/docusaurus/lib/default-theme/BlogPost/index.js b/packages/docusaurus/lib/default-theme/BlogPost/index.js
index 7079073d63ed..ac0ac26182ef 100644
--- a/packages/docusaurus/lib/default-theme/BlogPost/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPost/index.js
@@ -8,6 +8,7 @@
 import React, {useContext} from 'react';
 
 import Head from '@docusaurus/Head';
+import ContentRenderer from '@docusaurus/ContentRenderer';
 import Layout from '@theme/Layout'; // eslint-disable-line
 import Footer from '@theme/Footer'; // eslint-disable-line
 import DocusaurusContext from '@docusaurus/context';
@@ -19,29 +20,37 @@ function BlogPost(props) {
   );
   const {baseUrl, favicon} = siteConfig;
   const {language, title} = contextMetadata;
-  const {modules, metadata} = props;
-  const BlogPostContents = modules[0];
 
   return (
-    <Layout>
-      <Head defaultTitle={siteConfig.title}>
-        {title && <title>{title}</title>}
-        {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
-        {language && <html lang={language} />}
-      </Head>
-      {BlogPostContents && (
-        <div className="container margin-vert-xl">
-          <div className="row">
-            <div className="col col-6 col-offset-3">
-              <Post metadata={metadata}>
-                <BlogPostContents />
-              </Post>
-            </div>
-          </div>
-        </div>
-      )}
-      <Footer />
-    </Layout>
+    <ContentRenderer
+      query={{
+        id: props.match.url,
+      }}
+      render={loaded => {
+        const {mod0: BlogPostContents, metadata} = loaded;
+        return (
+          <Layout>
+            <Head defaultTitle={siteConfig.title}>
+              {title && <title>{title}</title>}
+              {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
+              {language && <html lang={language} />}
+            </Head>
+            {BlogPostContents && (
+              <div className="container margin-vert-xl">
+                <div className="row">
+                  <div className="col col-6 col-offset-3">
+                    <Post metadata={metadata}>
+                      <BlogPostContents />
+                    </Post>
+                  </div>
+                </div>
+              </div>
+            )}
+            <Footer />
+          </Layout>
+        );
+      }}
+    />
   );
 }
 
diff --git a/packages/docusaurus/lib/server/load/index.js b/packages/docusaurus/lib/server/load/index.js
index 254dcb890b4c..53f5dec1bdca 100644
--- a/packages/docusaurus/lib/server/load/index.js
+++ b/packages/docusaurus/lib/server/load/index.js
@@ -42,6 +42,7 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   const pluginConfigs = siteConfig.plugins || [];
   const context = {env, siteDir, generatedFilesDir, siteConfig, cliOptions};
   const {
+    contentRegistry,
     plugins,
     pluginsRouteConfigs,
     pluginsLoadedContent,
@@ -58,6 +59,7 @@ module.exports = async function load(siteDir, cliOptions = {}) {
 
   // Routing
   const {
+    registry,
     routesAsyncModules,
     routesConfig,
     routesMetadata,
@@ -65,12 +67,21 @@ module.exports = async function load(siteDir, cliOptions = {}) {
     routesPaths,
   } = await loadRoutes(pluginsRouteConfigs);
 
-  // Mapping of routePath -> metadataPath. Example: '/blog' -> '@generated/metadata/blog-c06.json'
-  // Very useful to know which json metadata file is related to certain route
   await generate(
     generatedFilesDir,
-    'routesMetadataPath.json',
-    JSON.stringify(routesMetadataPath, null, 2),
+    'contentRegistry.json',
+    JSON.stringify(contentRegistry, null, 2),
+  );
+
+  await generate(
+    generatedFilesDir,
+    'registry.js',
+    `module.exports = {
+${Object.keys(registry)
+  .map(key => `  '${key}': ${registry[key]},`)
+  .join('\n')}
+}
+    `,
   );
 
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
diff --git a/packages/docusaurus/lib/server/load/plugins.js b/packages/docusaurus/lib/server/load/plugins.js
index 28a8efe7e294..af7f3aa2c317 100644
--- a/packages/docusaurus/lib/server/load/plugins.js
+++ b/packages/docusaurus/lib/server/load/plugins.js
@@ -63,8 +63,12 @@ module.exports = async function loadPlugins({pluginConfigs = [], context}) {
 
   // 3. Plugin lifecycle - contentLoaded
   const pluginsRouteConfigs = [];
+  const contentRegistry = {};
   const actions = {
     addRoute: config => pluginsRouteConfigs.push(config),
+    addContent: (id, node) => {
+      contentRegistry[id] = node;
+    },
   };
 
   await Promise.all(
@@ -80,7 +84,10 @@ module.exports = async function loadPlugins({pluginConfigs = [], context}) {
     }),
   );
 
+  console.log(contentRegistry);
+
   return {
+    contentRegistry,
     plugins,
     pluginsRouteConfigs,
     pluginsLoadedContent,
diff --git a/packages/docusaurus/lib/server/load/routes.js b/packages/docusaurus/lib/server/load/routes.js
index 6240893ed0a5..e30e5dd5b045 100644
--- a/packages/docusaurus/lib/server/load/routes.js
+++ b/packages/docusaurus/lib/server/load/routes.js
@@ -20,12 +20,14 @@ async function loadRoutes(pluginsRouteConfigs) {
   const addRoutesPath = routePath => {
     routesPaths.push(routePath);
   };
+
   // Mapping of routePath -> metadataPath. Example: '/blog' -> '@generated/metadata/blog-c06.json'
   const routesMetadataPath = {};
   const addRoutesMetadataPath = routePath => {
     const fileName = `${docuHash(routePath)}.json`;
     routesMetadataPath[routePath] = `@generated/metadata/${fileName}`;
   };
+
   // Mapping of routePath -> metadata. Example: '/blog' -> { isBlogPage: true, permalink: '/blog' }
   const routesMetadata = {};
   const addRoutesMetadata = (routePath, metadata) => {
@@ -33,13 +35,17 @@ async function loadRoutes(pluginsRouteConfigs) {
       routesMetadata[routePath] = metadata;
     }
   };
+
+  const registry = {};
+
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
   const routesAsyncModules = {};
-  const addRoutesAsyncModule = (routePath, module) => {
+  const addRoutesAsyncModule = (routePath, key, importChunk) => {
     if (!routesAsyncModules[routePath]) {
-      routesAsyncModules[routePath] = [];
+      routesAsyncModules[routePath] = {};
     }
-    routesAsyncModules[routePath].push(module);
+    routesAsyncModules[routePath][key] = importChunk.chunkName;
+    registry[importChunk.chunkName] = importChunk.importStatement;
   };
 
   // This is the higher level overview of route code generation
@@ -68,17 +74,22 @@ async function loadRoutes(pluginsRouteConfigs) {
       throw new Error(`path: ${routePath} need a component`);
     }
     const componentPath = getModulePath(component);
-    addRoutesAsyncModule(routePath, componentPath);
 
-    const genImportStr = (modulePath, prefix, name) => {
+    const genImportChunk = (modulePath, prefix, name) => {
       const chunkName = genChunkName(name || modulePath, prefix);
       const finalStr = JSON.stringify(modulePath);
-      return `() => import(/* webpackChunkName: '${chunkName}' */ ${finalStr})`;
+      return {
+        chunkName,
+        importStatement: `() => import(/* webpackChunkName: '${chunkName}' */ ${finalStr})`,
+      };
     };
 
+    const componentChunk = genImportChunk(componentPath, 'component');
+    addRoutesAsyncModule(routePath, 'component', componentChunk);
+
     if (routes) {
       const componentStr = `Loadable({
-    loader: ${genImportStr(componentPath, 'component')},
+    loader: ${componentChunk.importStatement},
     loading: Loading
   })`;
       return `
@@ -92,8 +103,9 @@ async function loadRoutes(pluginsRouteConfigs) {
     const modulesImportStr = modules
       .map((module, i) => {
         const modulePath = getModulePath(module);
-        addRoutesAsyncModule(routePath, modulePath);
-        return `Mod${i}: ${genImportStr(modulePath, i, routePath)},`;
+        const moduleChunk = genImportChunk(modulePath, i, routePath);
+        addRoutesAsyncModule(routePath, `mod${i}`, moduleChunk);
+        return `Mod${i}: ${moduleChunk.importStatement},`;
       })
       .join('\n');
     const modulesLoadedStr = modules
@@ -103,19 +115,16 @@ async function loadRoutes(pluginsRouteConfigs) {
     let metadataImportStr = '';
     if (metadata) {
       const metadataPath = routesMetadataPath[routePath];
-      addRoutesAsyncModule(routePath, metadataPath);
-      metadataImportStr = `metadata: ${genImportStr(
-        metadataPath,
-        'metadata',
-        routePath,
-      )},`;
+      const metadataChunk = genImportChunk(metadataPath, 'metadata', routePath);
+      addRoutesAsyncModule(routePath, 'metadata', metadataChunk);
+      metadataImportStr = `metadata: ${metadataChunk.importStatement},`;
     }
 
     const componentStr = `Loadable.Map({
   loader: {
     ${modulesImportStr}
     ${metadataImportStr}
-    Component: ${genImportStr(componentPath, 'component')},
+    Component: ${componentChunk.importStatement},
   },
   loading: Loading,
   render(loaded, props) {
@@ -152,6 +161,7 @@ export default [
 ];\n`;
 
   return {
+    registry,
     routesAsyncModules,
     routesConfig,
     routesMetadata,

From 8454d66db442ce4e5274f88a64027275a215c5ff Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 14 Apr 2019 23:15:39 -0700
Subject: [PATCH 2/7] feat(v2): port blog to use ContentRenderer

---
 .eslintrc.js                                  |  1 +
 .../src/index.js                              | 39 +++++--------
 .../lib/client/exports/ContentRenderer.js     | 47 ++++++++++++---
 .../lib/default-theme/BlogPage/index.js       | 58 ++++++++++++-------
 .../lib/default-theme/BlogPost/index.js       |  2 +-
 packages/docusaurus/lib/server/load/index.js  |  7 ---
 .../docusaurus/lib/server/load/plugins.js     |  8 +--
 packages/docusaurus/lib/server/load/routes.js | 37 ++++++++++--
 8 files changed, 124 insertions(+), 75 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 214c41daf331..9b5f97010824 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -45,6 +45,7 @@ module.exports = {
     'jsx-a11y/click-events-have-key-events': OFF, // Revisit in future™
     'jsx-a11y/no-noninteractive-element-interactions': OFF, // Revisit in future™
     'no-console': OFF,
+    'no-underscore-dangle': OFF,
     'react/jsx-closing-bracket-location': OFF, // Conflicts with Prettier.
     'react/jsx-filename-extension': OFF,
     'react/jsx-one-expression-per-line': OFF,
diff --git a/packages/docusaurus-plugin-content-blog/src/index.js b/packages/docusaurus-plugin-content-blog/src/index.js
index 620ad3faf375..fb708da8faf6 100644
--- a/packages/docusaurus-plugin-content-blog/src/index.js
+++ b/packages/docusaurus-plugin-content-blog/src/index.js
@@ -121,7 +121,7 @@ class DocusaurusPluginContentBlog {
 
   async contentLoaded({content, actions}) {
     const {blogPageComponent, blogPostComponent} = this.options;
-    const {addContent, addRoute} = actions;
+    const {addRoute} = actions;
     content.forEach(metadataItem => {
       const {isBlogPage, permalink} = metadataItem;
       if (isBlogPage) {
@@ -129,23 +129,16 @@ class DocusaurusPluginContentBlog {
           path: permalink,
           component: blogPageComponent,
           metadata: metadataItem,
-          modules: metadataItem.posts.map(post => ({
-            path: post.source,
-            query: {
-              truncated: true,
-            },
-          })),
-        });
-
-        addContent(permalink, {
-          metadata: metadataItem,
-          posts: metadataItem.posts.map(item => ({
-            id: item.source,
-            query: {
-              truncated: true,
-            },
-            __async: true,
-          })),
+          routeModules: {
+            entries: metadataItem.posts.map(post => ({
+              // To tell routes.js this is an import and not a nested object to recurse.
+              __import: true,
+              path: post.source,
+              query: {
+                truncated: true,
+              },
+            })),
+          },
         });
 
         return;
@@ -155,14 +148,8 @@ class DocusaurusPluginContentBlog {
         path: permalink,
         component: blogPostComponent,
         metadata: metadataItem,
-        modules: [metadataItem.source],
-      });
-
-      addContent(permalink, {
-        metadata: metadataItem,
-        contents: {
-          id: metadataItem.source,
-          __async: true,
+        routeModules: {
+          content: metadataItem.source,
         },
       });
     });
diff --git a/packages/docusaurus/lib/client/exports/ContentRenderer.js b/packages/docusaurus/lib/client/exports/ContentRenderer.js
index 5f6b17c982e4..0ba187bd04cd 100644
--- a/packages/docusaurus/lib/client/exports/ContentRenderer.js
+++ b/packages/docusaurus/lib/client/exports/ContentRenderer.js
@@ -6,9 +6,10 @@
  */
 
 import React from 'react';
-import routesAsyncModules from '@generated/routesAsyncModules';
 import Loadable from 'react-loadable';
 import Loading from '@theme/Loading';
+import cloneDeep from 'lodash/cloneDeep';
+import routesAsyncModules from '@generated/routesAsyncModules';
 import registry from '@generated/registry';
 
 function ContentRenderer(props) {
@@ -16,18 +17,50 @@ function ContentRenderer(props) {
   const {id} = query;
   const modules = routesAsyncModules[id];
   const mappedModules = {};
-  Object.keys(modules).map(key => {
-    mappedModules[key] = registry[modules[key]];
-  });
+  function traverseModules(module, path) {
+    if (Array.isArray(module)) {
+      module.forEach((value, index) => {
+        traverseModules(value, [...path, index]);
+      });
+      return;
+    }
+
+    if (typeof module === 'object') {
+      Object.keys(module).forEach(key => {
+        traverseModules(module[key], [...path, key]);
+      });
+      return;
+    }
+
+    mappedModules[path.join('.')] = registry[module];
+  }
+
+  // Transform an object of {a: 'foo', b: {c:'bar}, d: ['baz', 'qux']} into
+  // {
+  //   a: () => import('foo'),
+  //   b.c: () => import('foo'),
+  //   d.0: () => import('baz'),
+  //   d.1: () => import('qux'),
+  // }
+  // for React Loadable to process.
+  traverseModules(modules, []);
 
   const LoadableComponent = Loadable.Map({
     loading: Loading,
     loader: mappedModules,
     render: loaded => {
-      Object.keys(loaded).map(key => {
-        loaded[key] = loaded[key].default;
+      // Transform back loaded modules back into the nested format.
+      const loadedModules = cloneDeep(modules);
+      Object.keys(loaded).forEach(key => {
+        let val = loadedModules;
+        const keyPath = key.split('.');
+        for (let i = 0; i < keyPath.length - 1; i += 1) {
+          val = val[keyPath[i]];
+        }
+        val[keyPath[keyPath.length - 1]] = loaded[key].default;
       });
-      return render(loaded, props);
+
+      return render(loadedModules, props);
     },
   });
 
diff --git a/packages/docusaurus/lib/default-theme/BlogPage/index.js b/packages/docusaurus/lib/default-theme/BlogPage/index.js
index d96d4bdedd8c..b78225ce25a6 100644
--- a/packages/docusaurus/lib/default-theme/BlogPage/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPage/index.js
@@ -7,6 +7,7 @@
 
 import React, {useContext} from 'react';
 import Head from '@docusaurus/Head';
+import ContentRenderer from '@docusaurus/ContentRenderer';
 import Footer from '@theme/Footer'; // eslint-disable-line
 import Layout from '@theme/Layout'; // eslint-disable-line
 import DocusaurusContext from '@docusaurus/context';
@@ -18,32 +19,45 @@ function BlogPage(props) {
   const {baseUrl, favicon} = siteConfig;
   const {
     metadata: {posts = []},
-    modules: BlogPosts,
   } = props;
 
   return (
-    <Layout>
-      <Head>
-        <title>Blog</title>
-        {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
-        {language && <html lang={language} />}
-        {language && <meta name="docsearch:language" content={language} />}
-      </Head>
-      <div className="container margin-vert-xl">
-        <div className="row">
-          <div className="col col-6 col-offset-3">
-            {BlogPosts.map((PostContent, index) => (
-              <div className="margin-bottom-xl" key={index}>
-                <Post truncated metadata={posts[index]}>
-                  <PostContent />
-                </Post>
+    <ContentRenderer
+      query={{
+        id: props.match.url,
+      }}
+      render={loaded => {
+        const {entries: BlogPosts} = loaded;
+        return (
+          <Layout>
+            <Head>
+              <title>Blog</title>
+              {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
+              {language && <html lang={language} />}
+              {language && (
+                <meta name="docsearch:language" content={language} />
+              )}
+            </Head>
+            {BlogPosts && (
+              <div className="container margin-vert-xl">
+                <div className="row">
+                  <div className="col col-6 col-offset-3">
+                    {BlogPosts.map((PostContent, index) => (
+                      <div className="margin-bottom-xl" key={index}>
+                        <Post truncated metadata={posts[index]}>
+                          <PostContent />
+                        </Post>
+                      </div>
+                    ))}
+                  </div>
+                </div>
               </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </Layout>
+            )}
+            <Footer />
+          </Layout>
+        );
+      }}
+    />
   );
 }
 
diff --git a/packages/docusaurus/lib/default-theme/BlogPost/index.js b/packages/docusaurus/lib/default-theme/BlogPost/index.js
index ac0ac26182ef..e56fc4cf8029 100644
--- a/packages/docusaurus/lib/default-theme/BlogPost/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPost/index.js
@@ -27,7 +27,7 @@ function BlogPost(props) {
         id: props.match.url,
       }}
       render={loaded => {
-        const {mod0: BlogPostContents, metadata} = loaded;
+        const {content: BlogPostContents, metadata} = loaded;
         return (
           <Layout>
             <Head defaultTitle={siteConfig.title}>
diff --git a/packages/docusaurus/lib/server/load/index.js b/packages/docusaurus/lib/server/load/index.js
index 53f5dec1bdca..ddc4ff4ab382 100644
--- a/packages/docusaurus/lib/server/load/index.js
+++ b/packages/docusaurus/lib/server/load/index.js
@@ -42,7 +42,6 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   const pluginConfigs = siteConfig.plugins || [];
   const context = {env, siteDir, generatedFilesDir, siteConfig, cliOptions};
   const {
-    contentRegistry,
     plugins,
     pluginsRouteConfigs,
     pluginsLoadedContent,
@@ -67,12 +66,6 @@ module.exports = async function load(siteDir, cliOptions = {}) {
     routesPaths,
   } = await loadRoutes(pluginsRouteConfigs);
 
-  await generate(
-    generatedFilesDir,
-    'contentRegistry.json',
-    JSON.stringify(contentRegistry, null, 2),
-  );
-
   await generate(
     generatedFilesDir,
     'registry.js',
diff --git a/packages/docusaurus/lib/server/load/plugins.js b/packages/docusaurus/lib/server/load/plugins.js
index af7f3aa2c317..f74189bb396d 100644
--- a/packages/docusaurus/lib/server/load/plugins.js
+++ b/packages/docusaurus/lib/server/load/plugins.js
@@ -63,12 +63,9 @@ module.exports = async function loadPlugins({pluginConfigs = [], context}) {
 
   // 3. Plugin lifecycle - contentLoaded
   const pluginsRouteConfigs = [];
-  const contentRegistry = {};
+
   const actions = {
     addRoute: config => pluginsRouteConfigs.push(config),
-    addContent: (id, node) => {
-      contentRegistry[id] = node;
-    },
   };
 
   await Promise.all(
@@ -84,10 +81,7 @@ module.exports = async function loadPlugins({pluginConfigs = [], context}) {
     }),
   );
 
-  console.log(contentRegistry);
-
   return {
-    contentRegistry,
     plugins,
     pluginsRouteConfigs,
     pluginsLoadedContent,
diff --git a/packages/docusaurus/lib/server/load/routes.js b/packages/docusaurus/lib/server/load/routes.js
index e30e5dd5b045..6549f301813b 100644
--- a/packages/docusaurus/lib/server/load/routes.js
+++ b/packages/docusaurus/lib/server/load/routes.js
@@ -7,6 +7,7 @@
 
 const {genChunkName, docuHash} = require('@docusaurus/utils');
 const {stringify} = require('querystring');
+const _ = require('lodash');
 
 async function loadRoutes(pluginsRouteConfigs) {
   const routesImports = [
@@ -41,6 +42,7 @@ async function loadRoutes(pluginsRouteConfigs) {
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
   const routesAsyncModules = {};
   const addRoutesAsyncModule = (routePath, key, importChunk) => {
+    // TODO: Port other plugins to use routeModules and not rely on this.
     if (!routesAsyncModules[routePath]) {
       routesAsyncModules[routePath] = {};
     }
@@ -55,6 +57,7 @@ async function loadRoutes(pluginsRouteConfigs) {
       component,
       metadata,
       modules = [],
+      routeModules = {},
       routes,
     } = routeConfig;
 
@@ -64,8 +67,7 @@ async function loadRoutes(pluginsRouteConfigs) {
 
     // Given an input (object or string), get the import path str
     const getModulePath = target => {
-      const isObj = typeof target === 'object';
-      const importStr = isObj ? target.path : target;
+      const importStr = _.isObject(target) ? target.path : target;
       const queryStr = target.query ? `?${stringify(target.query)}` : '';
       return `${importStr}${queryStr}`;
     };
@@ -76,7 +78,7 @@ async function loadRoutes(pluginsRouteConfigs) {
     const componentPath = getModulePath(component);
 
     const genImportChunk = (modulePath, prefix, name) => {
-      const chunkName = genChunkName(name || modulePath, prefix);
+      const chunkName = genChunkName(name + modulePath || '', prefix);
       const finalStr = JSON.stringify(modulePath);
       return {
         chunkName,
@@ -85,7 +87,8 @@ async function loadRoutes(pluginsRouteConfigs) {
     };
 
     const componentChunk = genImportChunk(componentPath, 'component');
-    addRoutesAsyncModule(routePath, 'component', componentChunk);
+    // TODO: Enabling this line causes cyclic dependency, Idk why.
+    // addRoutesAsyncModule(routePath, 'component', componentChunk);
 
     if (routes) {
       const componentStr = `Loadable({
@@ -104,10 +107,34 @@ async function loadRoutes(pluginsRouteConfigs) {
       .map((module, i) => {
         const modulePath = getModulePath(module);
         const moduleChunk = genImportChunk(modulePath, i, routePath);
-        addRoutesAsyncModule(routePath, `mod${i}`, moduleChunk);
         return `Mod${i}: ${moduleChunk.importStatement},`;
       })
       .join('\n');
+
+    function genRouteAsyncModule(value) {
+      if (Array.isArray(value)) {
+        return value.map(genRouteAsyncModule);
+      }
+
+      if (_.isObject(value) && !value.__import) {
+        const newValue = {};
+        Object.keys(value).forEach(key => {
+          newValue[key] = genRouteAsyncModule(value[key]);
+        });
+        return newValue;
+      }
+
+      const importChunk = genImportChunk(
+        getModulePath(value),
+        'module',
+        routePath,
+      );
+      registry[importChunk.chunkName] = importChunk.importStatement;
+      return importChunk.chunkName;
+    }
+
+    routesAsyncModules[routePath] = genRouteAsyncModule(routeModules);
+
     const modulesLoadedStr = modules
       .map((module, i) => `loaded.Mod${i}.default,`)
       .join('\n');

From 06b505e294e4cdb07fe654a31bdb2fc4fcb67605 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 14 Apr 2019 23:40:38 -0700
Subject: [PATCH 3/7] misc(v2): fix test and change ContentRenderer url

---
 .../src/__tests__/index.test.js               |  4 +-
 .../lib/client/exports/ContentRenderer.js     | 37 +++++++++++--------
 .../lib/default-theme/BlogPage/index.js       |  2 +-
 .../lib/default-theme/BlogPost/index.js       |  2 +-
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/docusaurus-utils/src/__tests__/index.test.js b/packages/docusaurus-utils/src/__tests__/index.test.js
index 8d8e154d4417..a423f971049f 100644
--- a/packages/docusaurus-utils/src/__tests__/index.test.js
+++ b/packages/docusaurus-utils/src/__tests__/index.test.js
@@ -33,7 +33,7 @@ describe('load utils', () => {
 
   test('genComponentName', () => {
     const asserts = {
-      '/': 'Index',
+      '/': 'index',
       '/foo-bar': 'FooBar096',
       '/foo/bar': 'FooBar1Df',
       '/blog/2017/12/14/introducing-docusaurus':
@@ -51,7 +51,7 @@ describe('load utils', () => {
   test('docuHash', () => {
     const asserts = {
       '': '-d41',
-      '/': 'Index',
+      '/': 'index',
       '/foo-bar': 'foo-bar-096',
       '/foo/bar': 'foo-bar-1df',
       '/endi/lie': 'endi-lie-9fa',
diff --git a/packages/docusaurus/lib/client/exports/ContentRenderer.js b/packages/docusaurus/lib/client/exports/ContentRenderer.js
index 0ba187bd04cd..3eebc9edd4e4 100644
--- a/packages/docusaurus/lib/client/exports/ContentRenderer.js
+++ b/packages/docusaurus/lib/client/exports/ContentRenderer.js
@@ -14,42 +14,49 @@ import registry from '@generated/registry';
 
 function ContentRenderer(props) {
   const {query, render} = props;
-  const {id} = query;
-  const modules = routesAsyncModules[id];
+  const {path} = query;
+  const modules = routesAsyncModules[path];
   const mappedModules = {};
-  function traverseModules(module, path) {
+
+  // Transform an object of
+  // {
+  //   a: 'foo',
+  //   b: { c: 'bar' },
+  //   d: ['baz', 'qux']
+  // }
+  // into
+  // {
+  //   a: () => import('foo'),
+  //   b.c: () => import('bar'),
+  //   d.0: () => import('baz'),
+  //   d.1: () => import('qux'),
+  // }
+  // for React Loadable to process.
+  function traverseModules(module, keys) {
     if (Array.isArray(module)) {
       module.forEach((value, index) => {
-        traverseModules(value, [...path, index]);
+        traverseModules(value, [...keys, index]);
       });
       return;
     }
 
     if (typeof module === 'object') {
       Object.keys(module).forEach(key => {
-        traverseModules(module[key], [...path, key]);
+        traverseModules(module[key], [...keys, key]);
       });
       return;
     }
 
-    mappedModules[path.join('.')] = registry[module];
+    mappedModules[keys.join('.')] = registry[module];
   }
 
-  // Transform an object of {a: 'foo', b: {c:'bar}, d: ['baz', 'qux']} into
-  // {
-  //   a: () => import('foo'),
-  //   b.c: () => import('foo'),
-  //   d.0: () => import('baz'),
-  //   d.1: () => import('qux'),
-  // }
-  // for React Loadable to process.
   traverseModules(modules, []);
 
   const LoadableComponent = Loadable.Map({
     loading: Loading,
     loader: mappedModules,
     render: loaded => {
-      // Transform back loaded modules back into the nested format.
+      // Transform back loaded modules back into the original structure.
       const loadedModules = cloneDeep(modules);
       Object.keys(loaded).forEach(key => {
         let val = loadedModules;
diff --git a/packages/docusaurus/lib/default-theme/BlogPage/index.js b/packages/docusaurus/lib/default-theme/BlogPage/index.js
index b78225ce25a6..23c8b38e237d 100644
--- a/packages/docusaurus/lib/default-theme/BlogPage/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPage/index.js
@@ -24,7 +24,7 @@ function BlogPage(props) {
   return (
     <ContentRenderer
       query={{
-        id: props.match.url,
+        path: props.match.url,
       }}
       render={loaded => {
         const {entries: BlogPosts} = loaded;
diff --git a/packages/docusaurus/lib/default-theme/BlogPost/index.js b/packages/docusaurus/lib/default-theme/BlogPost/index.js
index e56fc4cf8029..e071d4861b6e 100644
--- a/packages/docusaurus/lib/default-theme/BlogPost/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPost/index.js
@@ -24,7 +24,7 @@ function BlogPost(props) {
   return (
     <ContentRenderer
       query={{
-        id: props.match.url,
+        path: props.match.url,
       }}
       render={loaded => {
         const {content: BlogPostContents, metadata} = loaded;

From 72fc0af0e8b1167c9431afd04263cd85f50e68f4 Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Mon, 15 Apr 2019 16:19:50 +0800
Subject: [PATCH 4/7] avoid chunkName collision

---
 .../docusaurus-utils/src/__tests__/index.test.js    |  5 +++++
 packages/docusaurus-utils/src/index.js              | 13 ++++++++++---
 packages/docusaurus/lib/server/load/routes.js       |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-utils/src/__tests__/index.test.js b/packages/docusaurus-utils/src/__tests__/index.test.js
index a423f971049f..32e26f35ce20 100644
--- a/packages/docusaurus-utils/src/__tests__/index.test.js
+++ b/packages/docusaurus-utils/src/__tests__/index.test.js
@@ -94,6 +94,11 @@ describe('load utils', () => {
     Object.keys(asserts).forEach(str => {
       expect(genChunkName(str)).toBe(asserts[str]);
     });
+
+    // Don't allow different chunk name for same path.
+    expect(genChunkName('path/is/similar', 'oldPrefix')).toEqual(
+      genChunkName('path/is/similar', 'newPrefix'),
+    );
   });
 
   test('idx', () => {
diff --git a/packages/docusaurus-utils/src/index.js b/packages/docusaurus-utils/src/index.js
index d933ccae1f1e..ce1a16770e3b 100644
--- a/packages/docusaurus-utils/src/index.js
+++ b/packages/docusaurus-utils/src/index.js
@@ -88,9 +88,16 @@ function posixPath(str) {
   return str.replace(/\\/g, '/');
 }
 
-function genChunkName(str, prefix) {
-  const name = str === '/' ? 'index' : docuHash(str);
-  return prefix ? `${prefix}---${name}` : name;
+const chunkNameCache = new Map();
+function genChunkName(modulePath, prefix, preferredName) {
+  let chunkName = chunkNameCache.get(modulePath);
+  const str = preferredName || modulePath;
+  if (!chunkName) {
+    const name = str === '/' ? 'index' : docuHash(str);
+    chunkName = prefix ? `${prefix}---${name}` : name;
+    chunkNameCache.set(modulePath, chunkName);
+  }
+  return chunkName;
 }
 
 function idx(target, keyPaths) {
diff --git a/packages/docusaurus/lib/server/load/routes.js b/packages/docusaurus/lib/server/load/routes.js
index 6549f301813b..efc06de1819b 100644
--- a/packages/docusaurus/lib/server/load/routes.js
+++ b/packages/docusaurus/lib/server/load/routes.js
@@ -78,7 +78,7 @@ async function loadRoutes(pluginsRouteConfigs) {
     const componentPath = getModulePath(component);
 
     const genImportChunk = (modulePath, prefix, name) => {
-      const chunkName = genChunkName(name + modulePath || '', prefix);
+      const chunkName = genChunkName(modulePath, prefix, name);
       const finalStr = JSON.stringify(modulePath);
       return {
         chunkName,

From 1f8146a829bfe8d00eccfecb538d4ad89314034d Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Mon, 15 Apr 2019 18:24:56 +0800
Subject: [PATCH 5/7] avoid chunkname collision more

---
 packages/docusaurus-utils/src/__tests__/index.test.js | 11 ++++++++++-
 packages/docusaurus-utils/src/index.js                |  9 ++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-utils/src/__tests__/index.test.js b/packages/docusaurus-utils/src/__tests__/index.test.js
index 32e26f35ce20..ad48fae6c006 100644
--- a/packages/docusaurus-utils/src/__tests__/index.test.js
+++ b/packages/docusaurus-utils/src/__tests__/index.test.js
@@ -81,7 +81,7 @@ describe('load utils', () => {
   });
 
   test('genChunkName', () => {
-    const asserts = {
+    let asserts = {
       '/docs/adding-blog': 'docs-adding-blog-062',
       '/docs/versioning': 'docs-versioning-8a8',
       '/': 'index',
@@ -99,6 +99,15 @@ describe('load utils', () => {
     expect(genChunkName('path/is/similar', 'oldPrefix')).toEqual(
       genChunkName('path/is/similar', 'newPrefix'),
     );
+
+    // Even with same preferred name, still different chunk name for different path
+    asserts = {
+      '/blog/1': 'blog-85-f-089',
+      '/blog/2': 'blog-353-489',
+    };
+    Object.keys(asserts).forEach(str => {
+      expect(genChunkName(str, undefined, 'blog')).toBe(asserts[str]);
+    });
   });
 
   test('idx', () => {
diff --git a/packages/docusaurus-utils/src/index.js b/packages/docusaurus-utils/src/index.js
index ce1a16770e3b..b682eea4ae6a 100644
--- a/packages/docusaurus-utils/src/index.js
+++ b/packages/docusaurus-utils/src/index.js
@@ -91,8 +91,15 @@ function posixPath(str) {
 const chunkNameCache = new Map();
 function genChunkName(modulePath, prefix, preferredName) {
   let chunkName = chunkNameCache.get(modulePath);
-  const str = preferredName || modulePath;
   if (!chunkName) {
+    let str = modulePath;
+    if (preferredName) {
+      const shortHash = createHash('md5')
+        .update(modulePath)
+        .digest('hex')
+        .substr(0, 3);
+      str = `${preferredName}${shortHash}`;
+    }
     const name = str === '/' ? 'index' : docuHash(str);
     chunkName = prefix ? `${prefix}---${name}` : name;
     chunkNameCache.set(modulePath, chunkName);

From 18e793d9ebb81eaae6dc5505b18a1c81f5248256 Mon Sep 17 00:00:00 2001
From: Endilie Yacop Sucipto <endiliey@gmail.com>
Date: Mon, 15 Apr 2019 23:02:35 +0700
Subject: [PATCH 6/7] fix(v2): fix content-renderer ssr problem (#1367)

* wip

* avoid chunk names collision

* ContentRenderer is a wrapper for Loadable

* convert docs and pages

* nits and rename

* rename routeModules -> modules

* remove lodash from component creator

* resolve chunk not being picked up correctly

* add comment for explanation
---
 .../src/index.js                              |  4 +-
 .../src/index.js                              |  4 +-
 .../src/index.js                              |  4 +-
 ...ContentRenderer.js => ComponentCreator.js} | 30 ++++++----
 .../lib/default-theme/BlogPage/index.js       | 58 +++++++------------
 .../lib/default-theme/BlogPost/index.js       | 51 +++++++---------
 .../lib/default-theme/DocBody/index.js        |  4 +-
 .../lib/default-theme/Pages/index.js          |  4 +-
 packages/docusaurus/lib/server/load/index.js  | 18 ++++++
 packages/docusaurus/lib/server/load/routes.js | 58 +++++--------------
 10 files changed, 105 insertions(+), 130 deletions(-)
 rename packages/docusaurus/lib/client/exports/{ContentRenderer.js => ComponentCreator.js} (65%)

diff --git a/packages/docusaurus-plugin-content-blog/src/index.js b/packages/docusaurus-plugin-content-blog/src/index.js
index fb708da8faf6..d299fd721c91 100644
--- a/packages/docusaurus-plugin-content-blog/src/index.js
+++ b/packages/docusaurus-plugin-content-blog/src/index.js
@@ -129,7 +129,7 @@ class DocusaurusPluginContentBlog {
           path: permalink,
           component: blogPageComponent,
           metadata: metadataItem,
-          routeModules: {
+          modules: {
             entries: metadataItem.posts.map(post => ({
               // To tell routes.js this is an import and not a nested object to recurse.
               __import: true,
@@ -148,7 +148,7 @@ class DocusaurusPluginContentBlog {
         path: permalink,
         component: blogPostComponent,
         metadata: metadataItem,
-        routeModules: {
+        modules: {
           content: metadataItem.source,
         },
       });
diff --git a/packages/docusaurus-plugin-content-docs/src/index.js b/packages/docusaurus-plugin-content-docs/src/index.js
index ce4d2894ecb9..5965771fcdf6 100644
--- a/packages/docusaurus-plugin-content-docs/src/index.js
+++ b/packages/docusaurus-plugin-content-docs/src/index.js
@@ -215,7 +215,9 @@ class DocusaurusPluginContentDocs {
         path: metadataItem.permalink,
         component: docItemComponent,
         metadata: metadataItem,
-        modules: [metadataItem.source],
+        modules: {
+          content: metadataItem.source,
+        },
       })),
     });
   }
diff --git a/packages/docusaurus-plugin-content-pages/src/index.js b/packages/docusaurus-plugin-content-pages/src/index.js
index 0b74e5ff78cf..d8657115668a 100644
--- a/packages/docusaurus-plugin-content-pages/src/index.js
+++ b/packages/docusaurus-plugin-content-pages/src/index.js
@@ -104,7 +104,9 @@ class DocusaurusPluginContentPages {
         path: permalink,
         component,
         metadata: metadataItem,
-        modules: [source],
+        modules: {
+          content: source,
+        },
       });
     });
   }
diff --git a/packages/docusaurus/lib/client/exports/ContentRenderer.js b/packages/docusaurus/lib/client/exports/ComponentCreator.js
similarity index 65%
rename from packages/docusaurus/lib/client/exports/ContentRenderer.js
rename to packages/docusaurus/lib/client/exports/ComponentCreator.js
index 3eebc9edd4e4..9d2aa5eedc9c 100644
--- a/packages/docusaurus/lib/client/exports/ContentRenderer.js
+++ b/packages/docusaurus/lib/client/exports/ComponentCreator.js
@@ -8,14 +8,15 @@
 import React from 'react';
 import Loadable from 'react-loadable';
 import Loading from '@theme/Loading';
-import cloneDeep from 'lodash/cloneDeep';
 import routesAsyncModules from '@generated/routesAsyncModules';
+import chunkPath from '@generated/chunkPath';
 import registry from '@generated/registry';
 
-function ContentRenderer(props) {
-  const {query, render} = props;
-  const {path} = query;
+function ComponentCreator(path) {
   const modules = routesAsyncModules[path];
+  const originalModules = modules;
+  const optsModules = [];
+  const optsWebpack = [];
   const mappedModules = {};
 
   // Transform an object of
@@ -48,16 +49,23 @@ function ContentRenderer(props) {
     }
 
     mappedModules[keys.join('.')] = registry[module];
+    optsModules.push(chunkPath[module].module);
+    optsWebpack.push(chunkPath[module].webpack);
   }
 
   traverseModules(modules, []);
 
-  const LoadableComponent = Loadable.Map({
+  return Loadable.Map({
     loading: Loading,
     loader: mappedModules,
-    render: loaded => {
+    // We need to provide opts.modules and opts.webpack to React Loadable
+    // Our loader is now dynamical, the react-loadable/babel won't do the heavy lifting for us.
+    // https://github.com/jamiebuilds/react-loadable#declaring-which-modules-are-being-loaded
+    modules: optsModules,
+    webpack: () => optsWebpack,
+    render: (loaded, props) => {
       // Transform back loaded modules back into the original structure.
-      const loadedModules = cloneDeep(modules);
+      const loadedModules = originalModules;
       Object.keys(loaded).forEach(key => {
         let val = loadedModules;
         const keyPath = key.split('.');
@@ -67,11 +75,11 @@ function ContentRenderer(props) {
         val[keyPath[keyPath.length - 1]] = loaded[key].default;
       });
 
-      return render(loadedModules, props);
+      const Component = loadedModules.component;
+      delete loadedModules.component;
+      return <Component {...loadedModules} {...props} />;
     },
   });
-
-  return <LoadableComponent />;
 }
 
-export default ContentRenderer;
+export default ComponentCreator;
diff --git a/packages/docusaurus/lib/default-theme/BlogPage/index.js b/packages/docusaurus/lib/default-theme/BlogPage/index.js
index 23c8b38e237d..e42899521cfe 100644
--- a/packages/docusaurus/lib/default-theme/BlogPage/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPage/index.js
@@ -7,7 +7,6 @@
 
 import React, {useContext} from 'react';
 import Head from '@docusaurus/Head';
-import ContentRenderer from '@docusaurus/ContentRenderer';
 import Footer from '@theme/Footer'; // eslint-disable-line
 import Layout from '@theme/Layout'; // eslint-disable-line
 import DocusaurusContext from '@docusaurus/context';
@@ -19,45 +18,32 @@ function BlogPage(props) {
   const {baseUrl, favicon} = siteConfig;
   const {
     metadata: {posts = []},
+    entries: BlogPosts,
   } = props;
 
   return (
-    <ContentRenderer
-      query={{
-        path: props.match.url,
-      }}
-      render={loaded => {
-        const {entries: BlogPosts} = loaded;
-        return (
-          <Layout>
-            <Head>
-              <title>Blog</title>
-              {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
-              {language && <html lang={language} />}
-              {language && (
-                <meta name="docsearch:language" content={language} />
-              )}
-            </Head>
-            {BlogPosts && (
-              <div className="container margin-vert-xl">
-                <div className="row">
-                  <div className="col col-6 col-offset-3">
-                    {BlogPosts.map((PostContent, index) => (
-                      <div className="margin-bottom-xl" key={index}>
-                        <Post truncated metadata={posts[index]}>
-                          <PostContent />
-                        </Post>
-                      </div>
-                    ))}
-                  </div>
-                </div>
+    <Layout>
+      <Head>
+        <title>Blog</title>
+        {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
+        {language && <html lang={language} />}
+        {language && <meta name="docsearch:language" content={language} />}
+      </Head>
+      <div className="container margin-vert-xl">
+        <div className="row">
+          <div className="col col-6 col-offset-3">
+            {BlogPosts.map((PostContent, index) => (
+              <div className="margin-bottom-xl" key={index}>
+                <Post truncated metadata={posts[index]}>
+                  <PostContent />
+                </Post>
               </div>
-            )}
-            <Footer />
-          </Layout>
-        );
-      }}
-    />
+            ))}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </Layout>
   );
 }
 
diff --git a/packages/docusaurus/lib/default-theme/BlogPost/index.js b/packages/docusaurus/lib/default-theme/BlogPost/index.js
index e071d4861b6e..072fa8419206 100644
--- a/packages/docusaurus/lib/default-theme/BlogPost/index.js
+++ b/packages/docusaurus/lib/default-theme/BlogPost/index.js
@@ -8,7 +8,6 @@
 import React, {useContext} from 'react';
 
 import Head from '@docusaurus/Head';
-import ContentRenderer from '@docusaurus/ContentRenderer';
 import Layout from '@theme/Layout'; // eslint-disable-line
 import Footer from '@theme/Footer'; // eslint-disable-line
 import DocusaurusContext from '@docusaurus/context';
@@ -20,37 +19,29 @@ function BlogPost(props) {
   );
   const {baseUrl, favicon} = siteConfig;
   const {language, title} = contextMetadata;
+  const {content, metadata} = props;
+  const BlogPostContents = content;
 
   return (
-    <ContentRenderer
-      query={{
-        path: props.match.url,
-      }}
-      render={loaded => {
-        const {content: BlogPostContents, metadata} = loaded;
-        return (
-          <Layout>
-            <Head defaultTitle={siteConfig.title}>
-              {title && <title>{title}</title>}
-              {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
-              {language && <html lang={language} />}
-            </Head>
-            {BlogPostContents && (
-              <div className="container margin-vert-xl">
-                <div className="row">
-                  <div className="col col-6 col-offset-3">
-                    <Post metadata={metadata}>
-                      <BlogPostContents />
-                    </Post>
-                  </div>
-                </div>
-              </div>
-            )}
-            <Footer />
-          </Layout>
-        );
-      }}
-    />
+    <Layout>
+      <Head defaultTitle={siteConfig.title}>
+        {title && <title>{title}</title>}
+        {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
+        {language && <html lang={language} />}
+      </Head>
+      {BlogPostContents && (
+        <div className="container margin-vert-xl">
+          <div className="row">
+            <div className="col col-6 col-offset-3">
+              <Post metadata={metadata}>
+                <BlogPostContents />
+              </Post>
+            </div>
+          </div>
+        </div>
+      )}
+      <Footer />
+    </Layout>
   );
 }
 
diff --git a/packages/docusaurus/lib/default-theme/DocBody/index.js b/packages/docusaurus/lib/default-theme/DocBody/index.js
index ccae3f62b97f..6835f2beb775 100644
--- a/packages/docusaurus/lib/default-theme/DocBody/index.js
+++ b/packages/docusaurus/lib/default-theme/DocBody/index.js
@@ -14,14 +14,14 @@ import Head from '@docusaurus/Head';
 import styles from './styles.module.css';
 
 function DocBody(props) {
-  const {metadata, modules} = props;
+  const {metadata, content} = props;
   const {language, version} = metadata;
   const context = useContext(DocusaurusContext);
   useEffect(() => {
     context.setContext({metadata});
   }, []);
 
-  const DocContents = modules[0];
+  const DocContents = content;
   return (
     <div className={styles.docBody}>
       <Head>
diff --git a/packages/docusaurus/lib/default-theme/Pages/index.js b/packages/docusaurus/lib/default-theme/Pages/index.js
index f7328cd2d724..ba26a08e7a32 100644
--- a/packages/docusaurus/lib/default-theme/Pages/index.js
+++ b/packages/docusaurus/lib/default-theme/Pages/index.js
@@ -12,12 +12,12 @@ import Layout from '@theme/Layout'; // eslint-disable-line
 
 import DocusaurusContext from '@docusaurus/context';
 
-function Pages({modules}) {
+function Pages({content}) {
   const context = useContext(DocusaurusContext);
   const {metadata = {}, siteConfig = {}} = context;
   const {baseUrl, favicon} = siteConfig;
   const {language} = metadata;
-  const PageContents = modules[0];
+  const PageContents = content;
 
   return (
     <Layout>
diff --git a/packages/docusaurus/lib/server/load/index.js b/packages/docusaurus/lib/server/load/index.js
index ddc4ff4ab382..cf4c1950a0fe 100644
--- a/packages/docusaurus/lib/server/load/index.js
+++ b/packages/docusaurus/lib/server/load/index.js
@@ -58,6 +58,7 @@ module.exports = async function load(siteDir, cliOptions = {}) {
 
   // Routing
   const {
+    chunkPath,
     registry,
     routesAsyncModules,
     routesConfig,
@@ -77,6 +78,23 @@ ${Object.keys(registry)
     `,
   );
 
+  // Needed for react loadable opts.webpack and opts.module
+  // https://github.com/jamiebuilds/react-loadable#optswebpack
+  await generate(
+    generatedFilesDir,
+    'chunkPath.js',
+    `export default {
+${Object.keys(chunkPath)
+  .map(
+    key => `  '${key}': {
+    'module': '${chunkPath[key]}',
+    'webpack': require.resolveWeak('${chunkPath[key]}')
+  },`,
+  )
+  .join('\n')} 
+};\n`,
+  );
+
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
   // Very useful to know what modules are async imported in a route
   await generate(
diff --git a/packages/docusaurus/lib/server/load/routes.js b/packages/docusaurus/lib/server/load/routes.js
index efc06de1819b..1581e830f7ca 100644
--- a/packages/docusaurus/lib/server/load/routes.js
+++ b/packages/docusaurus/lib/server/load/routes.js
@@ -12,9 +12,8 @@ const _ = require('lodash');
 async function loadRoutes(pluginsRouteConfigs) {
   const routesImports = [
     `import React from 'react';`,
-    `import Loadable from 'react-loadable';`,
-    `import Loading from '@theme/Loading';`,
     `import NotFound from '@theme/NotFound';`,
+    `import ComponentCreator from '@docusaurus/ComponentCreator';`,
   ];
   // Routes paths. Example: ['/', '/docs', '/blog/2017/09/03/test']
   const routesPaths = [];
@@ -38,16 +37,18 @@ async function loadRoutes(pluginsRouteConfigs) {
   };
 
   const registry = {};
+  const chunkPath = {};
 
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
   const routesAsyncModules = {};
   const addRoutesAsyncModule = (routePath, key, importChunk) => {
-    // TODO: Port other plugins to use routeModules and not rely on this.
+    // TODO: Port other plugins to use modules and not rely on this.
     if (!routesAsyncModules[routePath]) {
       routesAsyncModules[routePath] = {};
     }
     routesAsyncModules[routePath][key] = importChunk.chunkName;
     registry[importChunk.chunkName] = importChunk.importStatement;
+    chunkPath[importChunk.chunkName] = importChunk.modulePath;
   };
 
   // This is the higher level overview of route code generation
@@ -56,8 +57,7 @@ async function loadRoutes(pluginsRouteConfigs) {
       path: routePath,
       component,
       metadata,
-      modules = [],
-      routeModules = {},
+      modules = {},
       routes,
     } = routeConfig;
 
@@ -69,6 +69,7 @@ async function loadRoutes(pluginsRouteConfigs) {
     const getModulePath = target => {
       const importStr = _.isObject(target) ? target.path : target;
       const queryStr = target.query ? `?${stringify(target.query)}` : '';
+
       return `${importStr}${queryStr}`;
     };
 
@@ -82,35 +83,23 @@ async function loadRoutes(pluginsRouteConfigs) {
       const finalStr = JSON.stringify(modulePath);
       return {
         chunkName,
+        modulePath,
         importStatement: `() => import(/* webpackChunkName: '${chunkName}' */ ${finalStr})`,
       };
     };
 
     const componentChunk = genImportChunk(componentPath, 'component');
-    // TODO: Enabling this line causes cyclic dependency, Idk why.
-    // addRoutesAsyncModule(routePath, 'component', componentChunk);
+    addRoutesAsyncModule(routePath, 'component', componentChunk);
 
     if (routes) {
-      const componentStr = `Loadable({
-    loader: ${componentChunk.importStatement},
-    loading: Loading
-  })`;
       return `
 {
   path: '${routePath}',
-  component: ${componentStr},
+  component: ComponentCreator('${routePath}'),
   routes: [${routes.map(generateRouteCode).join(',')}],
 }`;
     }
 
-    const modulesImportStr = modules
-      .map((module, i) => {
-        const modulePath = getModulePath(module);
-        const moduleChunk = genImportChunk(modulePath, i, routePath);
-        return `Mod${i}: ${moduleChunk.importStatement},`;
-      })
-      .join('\n');
-
     function genRouteAsyncModule(value) {
       if (Array.isArray(value)) {
         return value.map(genRouteAsyncModule);
@@ -129,46 +118,24 @@ async function loadRoutes(pluginsRouteConfigs) {
         'module',
         routePath,
       );
+      chunkPath[importChunk.chunkName] = importChunk.modulePath;
       registry[importChunk.chunkName] = importChunk.importStatement;
       return importChunk.chunkName;
     }
 
-    routesAsyncModules[routePath] = genRouteAsyncModule(routeModules);
-
-    const modulesLoadedStr = modules
-      .map((module, i) => `loaded.Mod${i}.default,`)
-      .join('\n');
+    _.assign(routesAsyncModules[routePath], genRouteAsyncModule(modules));
 
-    let metadataImportStr = '';
     if (metadata) {
       const metadataPath = routesMetadataPath[routePath];
       const metadataChunk = genImportChunk(metadataPath, 'metadata', routePath);
       addRoutesAsyncModule(routePath, 'metadata', metadataChunk);
-      metadataImportStr = `metadata: ${metadataChunk.importStatement},`;
     }
 
-    const componentStr = `Loadable.Map({
-  loader: {
-    ${modulesImportStr}
-    ${metadataImportStr}
-    Component: ${componentChunk.importStatement},
-  },
-  loading: Loading,
-  render(loaded, props) {
-    const Component = loaded.Component.default;
-    const metadata = loaded.metadata || {};
-    const modules = [${modulesLoadedStr}];
-    return (
-      <Component {...props} metadata={metadata} modules={modules}/>
-    );
-  }
-})\n`;
-
     return `
 {
   path: '${routePath}',
   exact: true,
-  component: ${componentStr}
+  component: ComponentCreator('${routePath}')
 }`;
   }
 
@@ -188,6 +155,7 @@ export default [
 ];\n`;
 
   return {
+    chunkPath,
     registry,
     routesAsyncModules,
     routesConfig,

From b26f8df7b4b7e4c64117a1af9393a344bd13fe55 Mon Sep 17 00:00:00 2001
From: endiliey <endiliey@gmail.com>
Date: Tue, 16 Apr 2019 00:17:23 +0800
Subject: [PATCH 7/7] small refactoring

---
 .../lib/client/exports/ComponentCreator.js    |  7 +++---
 packages/docusaurus/lib/server/load/index.js  | 24 ++++---------------
 packages/docusaurus/lib/server/load/routes.js | 14 ++++++-----
 3 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/packages/docusaurus/lib/client/exports/ComponentCreator.js b/packages/docusaurus/lib/client/exports/ComponentCreator.js
index 9d2aa5eedc9c..5efc1dfe8f9c 100644
--- a/packages/docusaurus/lib/client/exports/ComponentCreator.js
+++ b/packages/docusaurus/lib/client/exports/ComponentCreator.js
@@ -9,7 +9,6 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import Loading from '@theme/Loading';
 import routesAsyncModules from '@generated/routesAsyncModules';
-import chunkPath from '@generated/chunkPath';
 import registry from '@generated/registry';
 
 function ComponentCreator(path) {
@@ -48,9 +47,9 @@ function ComponentCreator(path) {
       return;
     }
 
-    mappedModules[keys.join('.')] = registry[module];
-    optsModules.push(chunkPath[module].module);
-    optsWebpack.push(chunkPath[module].webpack);
+    mappedModules[keys.join('.')] = registry[module].importStatement;
+    optsModules.push(registry[module].module);
+    optsWebpack.push(registry[module].webpack);
   }
 
   traverseModules(modules, []);
diff --git a/packages/docusaurus/lib/server/load/index.js b/packages/docusaurus/lib/server/load/index.js
index cf4c1950a0fe..7ffb853c0ddb 100644
--- a/packages/docusaurus/lib/server/load/index.js
+++ b/packages/docusaurus/lib/server/load/index.js
@@ -58,7 +58,6 @@ module.exports = async function load(siteDir, cliOptions = {}) {
 
   // Routing
   const {
-    chunkPath,
     registry,
     routesAsyncModules,
     routesConfig,
@@ -70,29 +69,16 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   await generate(
     generatedFilesDir,
     'registry.js',
-    `module.exports = {
-${Object.keys(registry)
-  .map(key => `  '${key}': ${registry[key]},`)
-  .join('\n')}
-}
-    `,
-  );
-
-  // Needed for react loadable opts.webpack and opts.module
-  // https://github.com/jamiebuilds/react-loadable#optswebpack
-  await generate(
-    generatedFilesDir,
-    'chunkPath.js',
     `export default {
-${Object.keys(chunkPath)
+${Object.keys(registry)
   .map(
     key => `  '${key}': {
-    'module': '${chunkPath[key]}',
-    'webpack': require.resolveWeak('${chunkPath[key]}')
+    'importStatement': ${registry[key].importStatement},
+    'module': '${registry[key].modulePath}',
+    'webpack': require.resolveWeak('${registry[key].modulePath}'),
   },`,
   )
-  .join('\n')} 
-};\n`,
+  .join('\n')}};\n`,
   );
 
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
diff --git a/packages/docusaurus/lib/server/load/routes.js b/packages/docusaurus/lib/server/load/routes.js
index 1581e830f7ca..429862df7577 100644
--- a/packages/docusaurus/lib/server/load/routes.js
+++ b/packages/docusaurus/lib/server/load/routes.js
@@ -37,7 +37,6 @@ async function loadRoutes(pluginsRouteConfigs) {
   };
 
   const registry = {};
-  const chunkPath = {};
 
   // Mapping of routePath -> async imported modules. Example: '/blog' -> ['@theme/BlogPage']
   const routesAsyncModules = {};
@@ -47,8 +46,10 @@ async function loadRoutes(pluginsRouteConfigs) {
       routesAsyncModules[routePath] = {};
     }
     routesAsyncModules[routePath][key] = importChunk.chunkName;
-    registry[importChunk.chunkName] = importChunk.importStatement;
-    chunkPath[importChunk.chunkName] = importChunk.modulePath;
+    registry[importChunk.chunkName] = {
+      importStatement: importChunk.importStatement,
+      modulePath: importChunk.modulePath,
+    };
   };
 
   // This is the higher level overview of route code generation
@@ -118,8 +119,10 @@ async function loadRoutes(pluginsRouteConfigs) {
         'module',
         routePath,
       );
-      chunkPath[importChunk.chunkName] = importChunk.modulePath;
-      registry[importChunk.chunkName] = importChunk.importStatement;
+      registry[importChunk.chunkName] = {
+        importStatement: importChunk.importStatement,
+        modulePath: importChunk.modulePath,
+      };
       return importChunk.chunkName;
     }
 
@@ -155,7 +158,6 @@ export default [
 ];\n`;
 
   return {
-    chunkPath,
     registry,
     routesAsyncModules,
     routesConfig,