Defer all code splitting to consumers

Author: alanchrt

package.json

@@ -21,6 +21,7 @@
     "image-type": "^4.1.0",
     "jest": "^24.8.0",
     "js-yaml": "^3.13.1",
+    "lodash.flatmap": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "markdown-it": "^9.1.0",
     "next": "^9.0.3",

pages/docs/[doc].jsx

@@ -1,20 +1,38 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import template from 'lodash/template';
+import markdownit from 'markdown-it';
+import flatMap from 'lodash.flatmap';
 
 import topics from '../../src/topics.json';
 import ContentBlock from '../../src/ContentBlock';
-import { getDoc } from '../../src/utils';
 
 import prismCss from 'raw-loader!prismjs/themes/prism-tomorrow.css';
 
+const md = new markdownit();
+
 const Page = () => {
   const [doc, setDoc] = useState(null);
+  const [highlight, setHighlight] = useState(false);
+
   const router = useRouter();
 
+  async function loadDoc(name) {
+    const mod = await import(`../../docs/${name}/config.yaml`);
+    const doc = mod.default;
+    setDoc(doc);
+
+    const contents = Object.values(doc.topics).map(topic => topic.content);
+    const languageImports = flatMap(contents, content =>
+      ContentBlock.parseLanguages(content)
+    ).map(lang => import(`prismjs/components/prism-${lang}`));
+    await Promise.all(languageImports);
+    setHighlight(true);
+  }
+
   useEffect(() => {
     if (router.query.doc) {
-      getDoc(router.query.doc).then(doc => setDoc(doc));
+      loadDoc(router.query.doc);
     }
   }, [router.query.doc]);
 
@@ -36,7 +54,10 @@ const Page = () => {
           <div key={topic.key}>
             <h2>{topic.name}</h2>
             {'content' in doc.topics[topic.key] ? (
-              <ContentBlock content={doc.topics[topic.key].content} />
+              <ContentBlock
+                content={doc.topics[topic.key].content}
+                highlight={highlight}
+              />
             ) : (
               'No content'
             )}

pages/index.jsx

@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import { listDocs } from '../src/utils';
 
-const Page = ({ docs }) => (
+const Page = () => (
   <div>
     <h1>Docs</h1>
     <ul>
-      {docs.map(doc => (
+      {listDocs().map(doc => (
         <li key={doc}>
           <Link href="/docs/[doc]" as={`/docs/${doc}`}>
             <a>{doc}</a>
@@ -16,6 +16,4 @@ const Page = ({ docs }) => (
   </div>
 );
 
-Page.getInitialProps = () => listDocs().then(docs => ({ docs }));
-
 export default Page;

src/ContentBlock.jsx

@@ -5,7 +5,20 @@ import markdownit from 'markdown-it';
 
 import { parseTemplate } from './utils';
 
-const toHTML = (content, data = {}, highlight = true) => {
+const ContentBlock = ({ content, data, highlight }) => {
+  const html = ContentBlock.toHTML(content, data, highlight);
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+ContentBlock.parseLanguages = content => {
+  const md = new markdownit();
+  return md
+    .parse(content)
+    .filter(token => token.type === 'fence')
+    .map(token => token.info);
+};
+
+ContentBlock.toHTML = (content, data = {}, highlight = false) => {
   const md = new markdownit({
     highlight: (str, lang) => {
       if (highlight && lang) {
@@ -23,35 +36,18 @@ const toHTML = (content, data = {}, highlight = true) => {
   });
 
   const markdown = parseTemplate(content, data);
-
-  if (highlight) {
-    const languageImports = md
-      .parse(markdown)
-      .filter(token => token.type === 'fence')
-      .map(token => import(`prismjs/components/prism-${token.info}`));
-    return Promise.all(languageImports).then(() => md.render(markdown));
-  }
-
   return md.render(markdown);
 };
 
-const ContentBlock = ({ content, data }) => {
-  const [html, setHtml] = useState(toHTML(content, data, false));
-
-  useEffect(() => {
-    toHTML(content, data).then(result => setHtml(result));
-  }, [content, data]);
-
-  return <div dangerouslySetInnerHTML={{ __html: html }} />;
-};
-
 ContentBlock.propTypes = {
   content: PropTypes.string.isRequired,
   data: PropTypes.object,
+  highlight: PropTypes.bool,
 };
 
 ContentBlock.defaultProps = {
   data: {},
+  highlight: false,
 };
 
 export default ContentBlock;

src/index.js

@@ -1,4 +1,4 @@
-import { listDocs, getDoc, parseTemplate } from './utils';
+import { listDocs, parseTemplate } from './utils';
 
-export { listDocs, getDoc, parseTemplate };
-export default { listDocs, getDoc, parseTemplate };
+export { listDocs, parseTemplate };
+export default { listDocs, parseTemplate };

src/topics.json

@@ -9,7 +9,7 @@
   },
   {
     "key": "client",
-    "name": "Client reqeusts"
+    "name": "Client requests"
   },
   {
     "key": "renewal",

src/utils.js

@@ -2,9 +2,7 @@ import template from 'lodash.template';
 
 import docs from './docs';
 
-export const listDocs = () => Promise.resolve(docs);
-export const getDoc = name =>
-  import(`../docs/${name}/config.yaml`).then(mod => mod.default);
+export const listDocs = () => docs;
 
 export const parseTemplate = (content, data = {}) => {
   const parse = template(content);

webpack/config.dist.js

@@ -41,8 +41,9 @@ module.exports = {
     ],
   },
   externals: {
-    React: 'react',
-    ReactDOM: 'react-dom',
-    Prism: 'prismjs',
+    react: 'react',
+    'react-dom': 'react-dom',
+    prismjs: 'prismjs',
+    'markdown-it': 'markdown-it',
   },
 };

yarn.lock

@@ -4137,6 +4137,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.flatmap@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz#ef8cbf408f6e48268663345305c6acc0b778702e"
+  integrity sha1-74y/QI9uSCaGYzRTBcaswLd4cC4=
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"