fix(v2): refactor routes.ts + add route hash for chunkNames key

packages/docusaurus-plugin-content-docs/src/index.ts

@@ -381,23 +381,18 @@ Available document ids=
       // (/docs, /docs/next, /docs/1.0 etc...)
       // The component applies the layout and renders the appropriate doc
       const addBaseRoute = async (
-        docsBaseRoute: string,
+        docsBasePath: string,
         docsBaseMetadata: DocsBaseMetadata,
         routes: RouteConfig[],
         priority?: number,
       ) => {
         const docsBaseMetadataPath = await createData(
-          `${docuHash(normalizeUrl([docsBaseRoute, ':route']))}.json`,
+          `${docuHash(normalizeUrl([docsBasePath, ':route']))}.json`,
           JSON.stringify(docsBaseMetadata, null, 2),
         );
 
-        // Important: the layout component should not end with /,
-        // as it conflicts with the home doc
-        // Workaround fix for https://github.com/facebook/docusaurus/issues/2917
-        const docsPath = docsBaseRoute === '/' ? '' : docsBaseRoute;
-
         addRoute({
-          path: docsPath,
+          path: docsBasePath,
           exact: false, // allow matching /docs/* as well
           component: docLayoutComponent, // main docs component (DocPage)
           routes, // subroute for each doc

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

@@ -8,6 +8,7 @@
 import path from 'path';
 import {
   fileToPath,
+  simpleHash,
   docuHash,
   genComponentName,
   genChunkName,
@@ -70,6 +71,21 @@ describe('load utils', () => {
     });
   });
 
+  test('simpleHash', () => {
+    const asserts = {
+      '': 'd41',
+      '/foo-bar': '096',
+      '/foo/bar': '1df',
+      '/endi/lie': '9fa',
+      '/endi-lie': 'fd3',
+      '/yangshun/tay': '48d',
+      '/yangshun-tay': 'f3b',
+    };
+    Object.keys(asserts).forEach((file) => {
+      expect(simpleHash(file, 3)).toBe(asserts[file]);
+    });
+  });
+
   test('docuHash', () => {
     const asserts = {
       '': '-d41',

packages/docusaurus-utils/src/index.ts

@@ -80,6 +80,10 @@ export function encodePath(userpath: string): string {
     .join('/');
 }
 
+export function simpleHash(str: string, length: number): string {
+  return createHash('md5').update(str).digest('hex').substr(0, length);
+}
+
 /**
  * Given an input string, convert to kebab-case and append a hash.
  * Avoid str collision.
@@ -88,7 +92,7 @@ export function docuHash(str: string): string {
   if (str === '/') {
     return 'index';
   }
-  const shortHash = createHash('md5').update(str).digest('hex').substr(0, 3);
+  const shortHash = simpleHash(str, 3);
   return `${kebabCase(str)}-${shortHash}`;
 }
 
@@ -139,17 +143,11 @@ export function genChunkName(
   let chunkName: string | undefined = chunkNameCache.get(modulePath);
   if (!chunkName) {
     if (shortId) {
-      chunkName = createHash('md5')
-        .update(modulePath)
-        .digest('hex')
-        .substr(0, 8);
+      chunkName = simpleHash(modulePath, 8);
     } else {
       let str = modulePath;
       if (preferredName) {
-        const shortHash = createHash('md5')
-          .update(modulePath)
-          .digest('hex')
-          .substr(0, 3);
+        const shortHash = simpleHash(modulePath, 3);
         str = `${preferredName}${shortHash}`;
       }
       const name = str === '/' ? 'index' : docuHash(str);

packages/docusaurus/src/client/exports/ComponentCreator.tsx

@@ -12,7 +12,10 @@ import routesChunkNames from '@generated/routesChunkNames';
 import registry from '@generated/registry';
 import flat from '../flat';
 
-function ComponentCreator(path: string): ReturnType<typeof Loadable> {
+function ComponentCreator(
+  path: string,
+  hash: string,
+): ReturnType<typeof Loadable> {
   // 404 page
   if (path === '*') {
     return Loadable({
@@ -21,7 +24,8 @@ function ComponentCreator(path: string): ReturnType<typeof Loadable> {
     });
   }
 
-  const chunkNames = routesChunkNames[path];
+  const chunkNamesKey = `${path}-${hash}`;
+  const chunkNames = routesChunkNames[chunkNamesKey];
   const optsModules: string[] = [];
   const optsWebpack: string[] = [];
   const optsLoader = {};

packages/docusaurus/src/server/__tests__/__snapshots__/routes.test.ts.snap

@@ -21,7 +21,7 @@ Object {
     },
   },
   "routesChunkNames": Object {
-    "/blog": Object {
+    "/blog-94e": Object {
       "component": "component---theme-blog-list-pagea-6-a-7ba",
       "items": Array [
         Object {
@@ -38,20 +38,16 @@ Object {
   "routesConfig": "
 import React from 'react';
 import ComponentCreator from '@docusaurus/ComponentCreator';
-
 export default [
-
 {
   path: '/blog',
-  component: ComponentCreator('/blog'),
+  component: ComponentCreator('/blog','94e'),
   exact: true,
-
 },
-
-  {
-    path: '*',
-    component: ComponentCreator('*')
-  }
+{
+  path: '*',
+  component: ComponentCreator('*')
+}
 ];
 ",
   "routesPaths": Array [
@@ -94,16 +90,16 @@ Object {
     },
   },
   "routesChunkNames": Object {
-    "/docs/hello": Object {
+    "/docs/hello-f94": Object {
       "component": "component---theme-doc-item-178-a40",
       "content": "content---docs-helloaff-811",
       "metadata": "metadata---docs-hello-956-741",
     },
-    "/docs:route": Object {
+    "/docs:route-838": Object {
       "component": "component---theme-doc-page-1-be-9be",
       "docsMetadata": "docsMetadata---docs-routef-34-881",
     },
-    "docs/foo/baz": Object {
+    "docs/foo/baz-f88": Object {
       "component": "component---theme-doc-item-178-a40",
       "content": "content---docs-foo-baz-8-ce-61e",
       "metadata": "metadata---docs-foo-baz-2-cf-fa7",
@@ -112,32 +108,28 @@ Object {
   "routesConfig": "
 import React from 'react';
 import ComponentCreator from '@docusaurus/ComponentCreator';
-
 export default [
-
 {
   path: '/docs:route',
-  component: ComponentCreator('/docs:route'),
+  component: ComponentCreator('/docs:route','838'),
 
   routes: [
 {
   path: '/docs/hello',
-  component: ComponentCreator('/docs/hello'),
+  component: ComponentCreator('/docs/hello','f94'),
   exact: true,
-
 },
 {
   path: 'docs/foo/baz',
-  component: ComponentCreator('docs/foo/baz'),
-
+  component: ComponentCreator('docs/foo/baz','f88'),
 
-}],
 },
-
-  {
-    path: '*',
-    component: ComponentCreator('*')
-  }
+]
+},
+{
+  path: '*',
+  component: ComponentCreator('*')
+}
 ];
 ",
   "routesPaths": Array [
@@ -157,27 +149,23 @@ Object {
     },
   },
   "routesChunkNames": Object {
-    "": Object {
+    "-b2a": Object {
       "component": "component---hello-world-jse-0-f-b6c",
     },
   },
   "routesConfig": "
 import React from 'react';
 import ComponentCreator from '@docusaurus/ComponentCreator';
-
 export default [
-
 {
   path: '',
-  component: ComponentCreator(''),
-
+  component: ComponentCreator('','b2a'),
 
 },
-
-  {
-    path: '*',
-    component: ComponentCreator('*')
-  }
+{
+  path: '*',
+  component: ComponentCreator('*')
+}
 ];
 ",
   "routesPaths": Array [