fix(v2): fix theme validation for prism field and add tests (#3210)

* fix(v2): fix theme validation for prism field

* chore(v2): minor changes

* chore(v2): remove unused dependencies

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js

@@ -27,60 +27,139 @@ function testValidateThemeConfig(themeConfig) {
   return validateThemeConfig({themeConfig, validate});
 }
 
-describe('color mode config', () => {
+describe('themeConfig', () => {
-  test('minimal config', () => {
+  test('should accept valid theme config', () => {
-    const colorMode = {
+    const userConfig = {
-      switchConfig: {
+      prism: {
-        darkIcon: '🌙',
+        theme: require('prism-react-renderer/themes/github'),
+        darkTheme: require('prism-react-renderer/themes/dracula'),
+        defaultLanguage: 'javascript',
+        additionalLanguages: ['kotlin', 'java'],
+      },
+      announcementBar: {
+        id: 'supportus',
+        content: 'pls support',
+        backgroundColor: '#fff',
+        textColor: '#000',
+      },
+      image: 'img/docusaurus-soc.png',
+      navbar: {
+        hideOnScroll: true,
+        title: 'Docusaurus',
+        logo: {
+          alt: 'Docusaurus Logo',
+          src: 'img/docusaurus.svg',
+          srcDark: 'img/docusaurus_keytar.svg',
+        },
+        items: [
+          {
+            type: 'docsVersionDropdown',
+            position: 'left',
+            nextVersionLabel: '2.0.0-next',
+          },
+          {
+            to: 'docs/next/support',
+            label: 'Community',
+            position: 'left',
+            activeBaseRegex: `docs/next/(support|team|resources)`,
+            'aria-label': 'Community',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Learn',
+            items: [
+              {
+                label: 'Introduction',
+                to: 'docs',
+              },
+            ],
+          },
+        ],
+        logo: {
+          alt: 'Facebook Open Source Logo',
+          src: 'img/oss_logo.png',
+          href: 'https://opensource.facebook.com',
+        },
+        copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
       },
     };
-    expect(testValidateThemeConfig({colorMode})).toEqual({
+    expect(testValidateThemeConfig(userConfig)).toEqual({
-      colorMode: mergeDefault(colorMode),
+      colorMode: DEFAULT_COLOR_MODE_CONFIG,
+      ...userConfig,
     });
   });
 
-  test('max config', () => {
+  test('should accept valid prism config', () => {
-    const colorMode = {
+    const prismConfig = {
-      defaultMode: 'dark',
+      prism: {
-      disableSwitch: false,
+        additionalLanguages: ['kotlin', 'java'],
-      respectPrefersColorScheme: true,
-      switchConfig: {
-        darkIcon: '🌙',
-        darkIconStyle: {
-          marginTop: '1px',
-          marginLeft: '2px',
-        },
-        lightIcon: '☀️',
-        lightIconStyle: {
-          marginLeft: '1px',
-        },
       },
     };
-    expect(testValidateThemeConfig({colorMode})).toEqual({
+    expect(testValidateThemeConfig(prismConfig)).toEqual({
-      colorMode: mergeDefault(colorMode),
+      colorMode: DEFAULT_COLOR_MODE_CONFIG,
+      ...prismConfig,
     });
   });
 
-  test('undefined config', () => {
+  describe('color mode config', () => {
-    const colorMode = undefined;
+    test('minimal config', () => {
-    expect(testValidateThemeConfig({colorMode})).toEqual({
+      const colorMode = {
-      colorMode: mergeDefault(colorMode),
+        switchConfig: {
+          darkIcon: '🌙',
+        },
+      };
+      expect(testValidateThemeConfig({colorMode})).toEqual({
+        colorMode: mergeDefault(colorMode),
+      });
     });
-  });
 
-  test('empty config', () => {
+    test('max config', () => {
-    const colorMode = {};
+      const colorMode = {
-    expect(testValidateThemeConfig({colorMode})).toEqual({
+        defaultMode: 'dark',
-      colorMode: mergeDefault(colorMode),
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
+        switchConfig: {
+          darkIcon: '🌙',
+          darkIconStyle: {
+            marginTop: '1px',
+            marginLeft: '2px',
+          },
+          lightIcon: '☀️',
+          lightIconStyle: {
+            marginLeft: '1px',
+          },
+        },
+      };
+      expect(testValidateThemeConfig({colorMode})).toEqual({
+        colorMode: mergeDefault(colorMode),
+      });
     });
-  });
 
-  test('empty switch config', () => {
+    test('undefined config', () => {
-    const colorMode = {
+      const colorMode = undefined;
-      switchConfig: {},
+      expect(testValidateThemeConfig({colorMode})).toEqual({
-    };
+        colorMode: mergeDefault(colorMode),
-    expect(testValidateThemeConfig({colorMode})).toEqual({
+      });
-      colorMode: mergeDefault(colorMode),
+    });
+
+    test('empty config', () => {
+      const colorMode = {};
+      expect(testValidateThemeConfig({colorMode})).toEqual({
+        colorMode: mergeDefault(colorMode),
+      });
+    });
+
+    test('empty switch config', () => {
+      const colorMode = {
+        switchConfig: {},
+      };
+      expect(testValidateThemeConfig({colorMode})).toEqual({
+        colorMode: mergeDefault(colorMode),
+      });
     });
   });
 });

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

@@ -203,6 +203,18 @@ const ThemeConfigSchema = Joi.object({
       }),
     ),
   }),
+  prism: Joi.object({
+    theme: Joi.object({
+      plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
+      styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
+    }),
+    darkTheme: Joi.object({
+      plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
+      styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
+    }),
+    defaultLanguage: Joi.string(),
+    additionalLanguages: Joi.array().items(Joi.string()),
+  }).unknown(),
 });
 
 exports.validateThemeConfig = ({validate, themeConfig}) => {

packages/docusaurus-theme-live-codeblock/package.json

@@ -8,7 +8,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@hapi/joi": "^17.1.1",
     "@philpl/buble": "^0.19.7",
     "clsx": "^1.1.1",
     "parse-numeric-range": "^0.0.2",
@@ -22,8 +21,5 @@
   },
   "engines": {
     "node": ">=10.15.1"
-  },
-  "devDependencies": {
-    "@types/hapi__joi": "^17.1.2"
   }
 }

packages/docusaurus-theme-live-codeblock/src/index.js

@@ -6,7 +6,6 @@
  */
 
 const path = require('path');
-const Joi = require('@hapi/joi');
 
 module.exports = function () {
   return {
@@ -30,21 +29,3 @@ module.exports = function () {
     },
   };
 };
-
-const ThemeConfigSchema = Joi.object({
-  prism: Joi.object({
-    theme: Joi.object({
-      plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
-      styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
-    }),
-    darkTheme: Joi.object({
-      plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
-      styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
-    }),
-    defaultLanguage: Joi.string(),
-  }),
-});
-
-module.exports.validateThemeConfig = ({validate, themeConfig}) => {
-  return validate(ThemeConfigSchema, themeConfig);
-};