feat(v2): code-split metadata out of routes (#1359)

* move assets-manifest to generatedFilesDir

* rename generateChunkName -> genChunkName

* implement docuHash and genComponentName

* feat(v2): code-split routes and metadata

* don't code split component code out

* simplify metadata path

* nits

* fix test

* address review

packages/docusaurus-utils/src/__tests__/index.test.js

@@ -8,8 +8,9 @@
 import path from 'path';
 import {
   fileToPath,
-  fileToComponentName,
-  generateChunkName,
+  docuHash,
+  genComponentName,
+  genChunkName,
   idx,
   getSubFolder,
   normalizeUrl,
@@ -30,21 +31,36 @@ describe('load utils', () => {
     });
   });
 
-  test('fileToComponentName', () => {
+  test('genComponentName', () => {
     const asserts = {
-      'index.md': 'MDIndex',
-      'hello/index.md': 'MDHelloIndex',
-      'foo.md': 'MDFoo',
-      'foo-bar.md': 'MDFooBar',
-      'index.js': 'JSIndex',
-      'foobar.js': 'JSFoobar',
-      'docusaurus/index.js': 'JSDocusaurusIndex',
-      '234.md': 'MD234',
-      '2018-07-08-test.md': 'MD20180708Test',
-      '%asd.md': 'MDAsd',
+      '/': 'Index',
+      '/foo-bar': 'FooBar096',
+      '/foo/bar': 'FooBar1Df',
+      '/blog/2017/12/14/introducing-docusaurus':
+        'Blog20171214IntroducingDocusaurus8D2',
+      '/blog/2017/12/14-introducing-docusaurus':
+        'Blog20171214IntroducingDocusaurus0Bc',
+      '/blog/201712/14-introducing-docusaurus':
+        'Blog20171214IntroducingDocusaurusA93',
     };
     Object.keys(asserts).forEach(file => {
-      expect(fileToComponentName(file)).toBe(asserts[file]);
+      expect(genComponentName(file)).toBe(asserts[file]);
+    });
+  });
+
+  test('docuHash', () => {
+    const asserts = {
+      '': '-d41',
+      '/': 'Index',
+      '/foo-bar': 'foo-bar-096',
+      '/foo/bar': 'foo-bar-1df',
+      '/endi/lie': 'endi-lie-9fa',
+      '/endi-lie': 'endi-lie-fd3',
+      '/yangshun/tay': 'yangshun-tay-48d',
+      '/yangshun-tay': 'yangshun-tay-f3b',
+    };
+    Object.keys(asserts).forEach(file => {
+      expect(docuHash(file)).toBe(asserts[file]);
     });
   });
 
@@ -64,7 +80,7 @@ describe('load utils', () => {
     });
   });
 
-  test('generateChunkName', () => {
+  test('genChunkName', () => {
     const asserts = {
       '/docs/adding-blog': 'docs-adding-blog-062',
       '/docs/versioning': 'docs-versioning-8a8',
@@ -76,7 +92,7 @@ describe('load utils', () => {
       '/blog': 'blog-c06',
     };
     Object.keys(asserts).forEach(str => {
-      expect(generateChunkName(str)).toBe(asserts[str]);
+      expect(genChunkName(str)).toBe(asserts[str]);
     });
   });
 

packages/docusaurus-utils/src/index.js

@@ -7,8 +7,9 @@
 
 const path = require('path');
 const fm = require('front-matter');
+const {createHash} = require('crypto');
 
-const kebabHash = require('kebab-hash');
+const _ = require(`lodash`);
 const escapeStringRegexp = require('escape-string-regexp');
 const fs = require('fs-extra');
 
@@ -39,14 +40,37 @@ function encodePath(userpath) {
     .join('/');
 }
 
-function fileToComponentName(file) {
-  const ext = extRE.exec(file)[1];
-  let str = file.replace(extRE, '');
-  str = str.replace(/([A-Z])/g, ' $1');
-  str = str.replace(/^[\W_]+|[\W_]+$/g, '').toLowerCase();
-  str = str.charAt(0).toUpperCase() + str.slice(1);
-  str = str.replace(/[\W_]+(\w|$)/g, (_, ch) => ch.toUpperCase());
-  return ext ? ext.toUpperCase() + str : str;
+/**
+ * Given an input string, convert to kebab-case and append a hash. Avoid str collision
+ * @param {string} str input string
+ * @returns {string}
+ */
+function docuHash(str) {
+  if (str === '/') {
+    return 'Index';
+  }
+  const shortHash = createHash('md5')
+    .update(str)
+    .digest('hex')
+    .substr(0, 3);
+  return `${_.kebabCase(str)}-${shortHash}`;
+}
+
+/**
+ * Generate unique React Component Name. E.g: /foo-bar -> FooBar096
+ * @param {string} pagePath
+ * @returns {string} unique react component name
+ */
+function genComponentName(pagePath) {
+  if (pagePath === '/') {
+    return 'Index';
+  }
+  const pageHash = docuHash(pagePath);
+  const pascalCase = _.flow(
+    _.camelCase,
+    _.upperFirst,
+  );
+  return pascalCase(pageHash);
 }
 
 /**
@@ -64,8 +88,8 @@ function posixPath(str) {
   return str.replace(/\\/g, '/');
 }
 
-function generateChunkName(str, prefix) {
-  const name = str === '/' ? 'index' : kebabHash(str);
+function genChunkName(str, prefix) {
+  const name = str === '/' ? 'index' : docuHash(str);
   return prefix ? `${prefix}---${name}` : name;
 }
 
@@ -160,10 +184,11 @@ function normalizeUrl(rawUrls) {
 
 module.exports = {
   encodePath,
+  docuHash,
   generate,
   fileToPath,
-  fileToComponentName,
-  generateChunkName,
+  genComponentName,
+  genChunkName,
   getSubFolder,
   idx,
   normalizeUrl,