refactor(v2): create common base theme

.eslintignore

@@ -26,6 +26,7 @@ packages/docusaurus-plugin-ideal-image/copyUntypedFiles.js
 packages/docusaurus-theme-classic/lib/
 packages/docusaurus-theme-bootstrap/lib/
 packages/docusaurus-migrate/lib/
+packages/docusaurus-theme-common/lib/
 
 packages/docusaurus-1.x/.eslintrc.js
 packages/docusaurus-init/templates/facebook/.eslintrc.js

.gitignore

@@ -30,6 +30,7 @@ packages/docusaurus-plugin-ideal-image/lib/
 packages/docusaurus-theme-classic/lib/
 packages/docusaurus-theme-bootstrap/lib/
 packages/docusaurus-migrate/lib/
+packages/docusaurus-theme-common/lib/
 
 website/netlifyDeployPreview
 !website/netlifyDeployPreview/index.html

.prettierignore

@@ -17,4 +17,5 @@ packages/docusaurus-plugin-sitemap/lib/
 packages/docusaurus-plugin-ideal-image/lib/
 packages/docusaurus-migrate/lib/
 packages/docusaurus-theme-classic/lib/
+packages/docusaurus-theme-common/lib/
 __fixtures__

packages/docusaurus-theme-classic/package.json

@@ -25,6 +25,7 @@
     "@docusaurus/plugin-content-docs": "2.0.0-alpha.66",
     "@docusaurus/plugin-content-pages": "2.0.0-alpha.66",
     "@docusaurus/types": "2.0.0-alpha.66",
+    "@docusaurus/theme-common": "2.0.0-alpha.66",
     "@docusaurus/utils-validation": "2.0.0-alpha.66",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",

packages/docusaurus-theme-classic/src/index.js

@@ -99,11 +99,6 @@ module.exports = function (context, options) {
         .join('|');
 
       return {
-        resolve: {
-          alias: {
-            '@theme-utils': path.resolve(__dirname, 'utils'),
-          },
-        },
         stats: {
           warningsFilter: [
             // See https://github.com/facebook/docusaurus/pull/3382
@@ -149,3 +144,5 @@ const swizzleAllowedComponents = [
 module.exports.getSwizzleComponentList = () => swizzleAllowedComponents;
 
 module.exports.validateThemeConfig = validateThemeConfig;
+
+module.exports.getBaseTheme = () => '@docusaurus/theme-common';

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -9,7 +9,7 @@ import React, {useState, useCallback, useEffect, useRef} from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useThemeConfig from '@theme-utils/useThemeConfig';
-import {isSamePath} from '../../utils';
+import {isSamePath} from '@theme-utils';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
 import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';

packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import {useLocation} from '@docusaurus/router';
-import {isSamePath} from '../../utils';
+import {isSamePath} from '@theme-utils';
 import type {
   NavLinkProps,
   DesktopOrMobileNavBarItemProps,

packages/docusaurus-theme-classic/src/types.d.ts

@@ -11,8 +11,7 @@
 /// <reference types="@docusaurus/plugin-content-blog" />
 /// <reference types="@docusaurus/plugin-content-docs" />
 /// <reference types="@docusaurus/plugin-content-pages" />
-
-declare module '@theme-utils/*';
+/// <reference types="@docusaurus/theme-common" />
 
 declare module '@theme/AnnouncementBar' {
   const AnnouncementBar: () => JSX.Element | null;

packages/docusaurus-theme-common/README.md

@@ -0,0 +1,3 @@
+# Docusaurus Theme Common
+
+The common parts of Docusaurus themes.

packages/docusaurus-theme-common/babel.config.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  presets: [['@babel/preset-typescript', {isTSX: true, allExtensions: true}]],
+};

packages/docusaurus-theme-common/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@docusaurus/theme-common",
+  "version": "2.0.0-alpha.66",
+  "description": "Common parts for Docusaurus themes",
+  "main": "src/index.js",
+  "types": "src/types.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/docusaurus.git",
+    "directory": "packages/docusaurus-theme-common"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc --noEmit && yarn babel && yarn prettier",
+    "watch": "yarn babel --watch",
+    "babel": "babel src -d lib --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.{js,ts}\""
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-alpha.66"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-alpha.66"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=10.15.1"
+  }
+}

packages/docusaurus-theme-common/src/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+
+module.exports = function () {
+  return {
+    name: 'docusaurus-theme-common',
+
+    getThemePath() {
+      return path.join(__dirname, '..', 'lib', 'theme');
+    },
+
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    configureWebpack() {
+      return {
+        resolve: {
+          alias: {
+            '@theme-utils': path.resolve(__dirname, 'utils'),
+          },
+        },
+      };
+    },
+  };
+};

packages/docusaurus-theme-common/src/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable import/no-duplicates */
+/* eslint-disable spaced-comment */
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@theme-utils';
+
+declare module '@theme-utils/*';

packages/docusaurus-theme-common/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM"],
+    "module": "esnext",
+    "noEmit": true,
+    "noImplicitAny": false,
+    "jsx": "react",
+    "baseUrl": "src"
+  },
+  "include": ["src/"]
+}

packages/docusaurus/src/server/index.ts

@@ -31,6 +31,7 @@ import {loadHtmlTags} from './html-tags';
 import {getPackageJsonVersion} from './versions';
 import {handleDuplicateRoutes} from './duplicateRoutes';
 import chalk from 'chalk';
+import importFresh from 'import-fresh';
 
 export function loadContext(
   siteDir: string,
@@ -58,14 +59,32 @@ export function loadContext(
 
 export function loadPluginConfigs(context: LoadContext): PluginConfig[] {
   const {plugins: presetPlugins, themes: presetThemes} = loadPresets(context);
-  const {siteConfig} = context;
-  return [
+  const {
+    siteConfig: {plugins: sitePlugins = [], themes: siteThemes = []},
+  } = context;
+  const baseThemes = (themeConfigs) => {
+    return themeConfigs.reduce((themes, themeConfig) => {
+      const themePluginImport =
+        themeConfig instanceof Array ? themeConfig[0] : themeConfig;
+      const themePlugin: any = importFresh(themePluginImport);
+
+      if (typeof themePlugin.getBaseTheme === 'function') {
+        themes.push(themePlugin.getBaseTheme());
+      }
+
+      return themes;
+    }, []);
+  };
+
+  const pluginConfigs = [
     ...presetPlugins,
-    ...presetThemes,
+    ...baseThemes(presetThemes).concat(presetThemes),
     // Site config should be the highest priority.
-    ...(siteConfig.plugins || []),
-    ...(siteConfig.themes || []),
+    ...sitePlugins,
+    ...baseThemes(siteThemes).concat(siteThemes),
   ];
+
+  return pluginConfigs;
 }
 
 export async function load(