feat(v2): implement ContentRenderer

[yangshun]

Motivation

Add a ContentRenderer component that will help a component fetch the modules it needs based on the path provided.

Approach

• Generate two files: registry.js and routesAsyncModules.json.
  • registry.js is simply a mapping of chunk names to their import statements.
  • routesAsyncModules.json is a mapping of routes to the chunks it needs, with the added benefit of having a shape
• How ContentRenderer works:
  • In each component, (e.g. BlogPost or BlogPage), pass ContentRenderer the current path.
  • Look up routesAsyncModules with that path to get the chunks that are needed
  • Use React Loadable to load the chunks in parallel and pass them back to the component.

End Result

• Cleaner and smaller routes file. The route files no longer have the import statements for modules. TODO: Make metadata use a similar approach. Eventually the routes file will be very clean and lean, as we're de-compiling the code and providing the dependent modules to React Loadable during runtime. Eventually for each route it will just be as simple as below, without any of the metadata/modules stuff.

{
  path: '/blog/2017/12/14/introducing-docusaurus',
  exact: true,
  component: Loadable({
    loader: () => import('./components/Bar'),
    loading: Loading,
  }),
}

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Netlify.

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit b26f8df

https://deploy-preview-1366--docusaurus-2.netlify.com

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit b26f8df

https://deploy-preview-1366--docusaurus-preview.netlify.com

[endiliey]

Unfortunately this broke the SSR because we're making a Loadable of Loadable.

If you go to https://deploy-preview-1366--docusaurus-2.netlify.com/blog/
or https://deploy-preview-1366--docusaurus-2.netlify.com/blog/2017/12/14/introducing-docusaurus/

The generated html file is also empty

Actually what it did is rendering the Loading screen in the static html file

If we change default-theme/Loading/index.js

export default props => {
  if (props.error) {
    console.log(props.error);
    return <div align="center">Error</div>;
  }

  if (props.pastDelay) {
    return (
      <div className={styles.loader}>
        <p>Please wait a moment</p>
        <div className={styles.loaderSpinning} />
      </div>
    );
  }

  // return null; Old code
  return 'This is a loading screen';
};

The HTML is actually a loading screen

If we go to https://deploy-preview-1366--docusaurus-2.netlify.com/blog/2017/12/14/introducing-docusaurus/

The error is not particularly useful,

I tried changing our webpack config devtool to be devtool: 'eval-source-map',

I suspect this is because we are initializing Loadable in render() when it shouldn't

I am not sure how to resolve this 😢