feat(v2): implement theme component swizzling

packages/docusaurus-plugin-content-blog/package.json

@@ -16,6 +16,11 @@
     "loader-utils": "^1.2.3"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0"
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
   }
 }

packages/docusaurus-plugin-content-blog/src/index.js

@@ -158,6 +158,22 @@ class DocusaurusPluginContentBlog {
 
   configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
     return {
+      resolve: {
+        alias: {
+          '@theme/BlogListPage': path.resolve(
+            __dirname,
+            './theme/BlogListPage',
+          ),
+          '@theme/BlogPostItem': path.resolve(
+            __dirname,
+            './theme/BlogPostItem',
+          ),
+          '@theme/BlogPostPage': path.resolve(
+            __dirname,
+            './theme/BlogPostPage',
+          ),
+        },
+      },
       module: {
         rules: [
           {

packages/docusaurus/lib/default-theme/BlogListPage/index.js → packages/docusaurus-plugin-content-blog/src/theme/BlogListPage/index.js

@@ -8,7 +8,7 @@
 import React from 'react';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
-import BlogPostItem from '../BlogPostItem';
+import BlogPostItem from '@theme/BlogPostItem';
 
 function BlogListPage(props) {
   const {

packages/docusaurus/lib/default-theme/BlogPostPage/index.js → packages/docusaurus-plugin-content-blog/src/theme/BlogPostPage/index.js

@@ -8,7 +8,7 @@
 import React from 'react';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
-import BlogPostItem from '../BlogPostItem';
+import BlogPostItem from '@theme/BlogPostItem';
 
 function BlogPostPage(props) {
   const {content: BlogPostContents, metadata} = props;

packages/docusaurus-plugin-content-docs/package.json

@@ -18,6 +18,12 @@
     "loader-utils": "^1.2.3"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0"
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-router-config": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=8"
   }
 }

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

@@ -153,6 +153,17 @@ class DocusaurusPluginContentDocs {
 
   configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
     return {
+      resolve: {
+        alias: {
+          '@theme/DocItem': path.resolve(__dirname, './theme/DocItem'),
+          '@theme/DocPage': path.resolve(__dirname, './theme/DocPage'),
+          '@theme/DocPaginator': path.resolve(
+            __dirname,
+            './theme/DocPaginator',
+          ),
+          '@theme/DocSidebar': path.resolve(__dirname, './theme/DocSidebar'),
+        },
+      },
       module: {
         rules: [
           {

packages/docusaurus/lib/default-theme/DocItem/index.js → packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js

@@ -9,7 +9,7 @@ import React from 'react';
 
 import Head from '@docusaurus/Head';
 
-import DocPaginator from '../DocPaginator';
+import DocPaginator from '@theme/DocPaginator';
 
 import styles from './styles.module.css';
 

packages/docusaurus/lib/default-theme/DocPage/index.js → packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js

@@ -10,7 +10,7 @@ import {renderRoutes} from 'react-router-config';
 
 import Layout from '@theme/Layout'; // eslint-disable-line
 
-import DocSidebar from '../DocSidebar';
+import DocSidebar from '@theme/DocSidebar';
 
 function DocPage(props) {
   const {route, docsMetadata, location} = props;

packages/docusaurus-plugin-content-pages/package.json

@@ -12,6 +12,11 @@
     "globby": "^9.1.0"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0"
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
   }
 }

packages/docusaurus-preset-classic/package.json → packages/docusaurus-preset-default/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@docusaurus/preset-classic",
+  "name": "@docusaurus/preset-default",
   "version": "2.0.0-alpha.13",
-  "description": "Preset for classic Docusaurus",
+  "description": "Preset for default Docusaurus",
   "main": "src/index.js",
   "publishConfig": {
     "access": "public"

packages/docusaurus-preset-classic/src/index.js → packages/docusaurus-preset-default/src/index.js

@@ -7,6 +7,11 @@
 
 module.exports = function preset(context, opts = {}) {
   return {
+    themes: [
+      {
+        name: '@docusaurus/theme-default',
+      },
+    ],
     plugins: [
       {
         name: '@docusaurus/plugin-content-docs',

packages/docusaurus-theme-default/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@docusaurus/theme-default",
+  "version": "2.0.0-alpha.13",
+  "description": "Default theme for Docusaurus",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "docsearch.js": "^2.5.2"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "engines": {
+    "node": ">=8"
+  }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * 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');
+
+const DEFAULT_OPTIONS = {};
+
+class DocusaurusThemeDefault {
+  constructor(context, opts) {
+    this.options = {...DEFAULT_OPTIONS, ...opts};
+    this.context = context;
+  }
+
+  getName() {
+    return 'docusaurus-theme-default';
+  }
+
+  configureWebpack() {
+    return {
+      resolve: {
+        alias: {
+          '@theme/Footer': path.resolve(__dirname, './theme/Footer'),
+          '@theme/Layout': path.resolve(__dirname, './theme/Layout'),
+          '@theme/Loading': path.resolve(__dirname, './theme/Loading'),
+          '@theme/Navbar': path.resolve(__dirname, './theme/Navbar'),
+          '@theme/NotFound': path.resolve(__dirname, './theme/NotFound'),
+          '@theme/Search': path.resolve(__dirname, './theme/Search'),
+        },
+      },
+    };
+  }
+}
+
+module.exports = DocusaurusThemeDefault;

packages/docusaurus/lib/commands/build.js

@@ -84,7 +84,7 @@ module.exports = async function build(siteDir, cliOptions = {}) {
     );
   });
 
-  // Run webpack to build js bundle (client) and static html files (server) !!
+  // Run webpack to build JS bundle (client) and static html files (server).
   await compile([clientConfig, serverConfig]);
 
   // Remove server.bundle.js because it is useless

packages/docusaurus/lib/server/index.js

@@ -31,10 +31,18 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   const context = {siteDir, generatedFilesDir, siteConfig, cliOptions};
 
   // Process presets.
-  const presetPlugins = loadPresets(context);
+  const {plugins: presetPlugins, themes: presetThemes} = loadPresets(context);
+
+  // Process plugins and themes. Themes are also plugins, but they run after all
+  // the explicit plugins because they may override the resolve.alias(es)
+  // defined by the plugins.
+  const pluginConfigs = [
+    ...presetPlugins,
+    ...(siteConfig.plugins || []),
+    ...presetThemes,
+    ...(siteConfig.themes || []),
+  ];
 
-  // Process plugins.
-  const pluginConfigs = [...presetPlugins, ...siteConfig.plugins];
   const {plugins, pluginsRouteConfigs} = await loadPlugins({
     pluginConfigs,
     context,
@@ -43,8 +51,18 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   const outDir = path.resolve(siteDir, 'build');
   const {baseUrl} = siteConfig;
 
-  // Resolve theme. TBD (Experimental)
-  const themePath = loadTheme(siteDir);
+  // Resolve custom theme override aliases.
+  const themeAliases = await loadTheme(siteDir);
+  // Make a fake plugin to resolve user's theme overrides.
+  if (themeAliases != null) {
+    plugins.push({
+      configureWebpack: () => ({
+        resolve: {
+          alias: themeAliases,
+        },
+      }),
+    });
+  }
 
   // Routing
   const {
@@ -81,7 +99,6 @@ ${Object.keys(registry)
     siteConfig,
     siteDir,
     outDir,
-    themePath,
     baseUrl,
     generatedFilesDir,
     routesPaths,

packages/docusaurus/lib/server/load/__tests__/__fixtures__/preset-qux.js

@@ -0,0 +1,16 @@
+module.exports = function preset(context, opts = {}) {
+  return {
+    themes: [
+      {
+        name: '@docusaurus/theme-default',
+        options: opts.test,
+      },
+    ],
+    plugins: [
+      {
+        name: '@docusaurus/plugin-test',
+        options: opts.test,
+      },
+    ],
+  };
+};