refactor(blog): theme-common shouldn't depend on blog content plugins (…

…#10313)

.eslintrc.js

@@ -9,16 +9,18 @@ const OFF = 0;
 const WARNING = 1;
 const ERROR = 2;
 
-const ClientRestrictedImportPatterns = [
-  // Prevent importing lodash in client bundle for bundle size
-  'lodash',
-  'lodash.**',
-  'lodash/**',
-  // Prevent importing server code in client bundle
-  '**/../babel/**',
-  '**/../server/**',
-  '**/../commands/**',
-  '**/../webpack/**',
+// Prevent importing lodash, usually for browser bundle size reasons
+const LodashImportPatterns = ['lodash', 'lodash.**', 'lodash/**'];
+
+// Prevent importing content plugins, usually for coupling reasons
+const ContentPluginsImportPatterns = [
+  '@docusaurus/plugin-content-blog',
+  '@docusaurus/plugin-content-blog/**',
+  // TODO fix theme-common => docs dependency issue
+  // '@docusaurus/plugin-content-docs',
+  // '@docusaurus/plugin-content-docs/**',
+  '@docusaurus/plugin-content-pages',
+  '@docusaurus/plugin-content-pages/**',
 ];
 
 module.exports = {
@@ -408,7 +410,33 @@ module.exports = {
         'no-restricted-imports': [
           'error',
           {
-            patterns: ClientRestrictedImportPatterns,
+            patterns: [
+              ...LodashImportPatterns,
+              ...ContentPluginsImportPatterns,
+              // Prevent importing server code in client bundle
+              '**/../babel/**',
+              '**/../server/**',
+              '**/../commands/**',
+              '**/../webpack/**',
+            ],
+          },
+        ],
+      },
+    },
+    {
+      files: [
+        'packages/docusaurus-theme-common/src/**/*.{js,ts,tsx}',
+        'packages/docusaurus-utils-common/src/**/*.{js,ts,tsx}',
+      ],
+      excludedFiles: '*.test.{js,ts,tsx}',
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              ...LodashImportPatterns,
+              ...ContentPluginsImportPatterns,
+            ],
           },
         ],
       },
@@ -420,7 +448,7 @@ module.exports = {
         'no-restricted-imports': [
           'error',
           {
-            patterns: ClientRestrictedImportPatterns.concat(
+            patterns: LodashImportPatterns.concat(
               // Prevents relative imports between React theme components
               [
                 '../**',

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

@@ -34,6 +34,7 @@
     "@docusaurus/core": "3.4.0",
     "@docusaurus/logger": "3.4.0",
     "@docusaurus/mdx-loader": "3.4.0",
+    "@docusaurus/theme-common": "3.4.0",
     "@docusaurus/types": "3.4.0",
     "@docusaurus/utils": "3.4.0",
     "@docusaurus/utils-common": "3.4.0",

packages/docusaurus-theme-common/src/contexts/blogPost.tsx → packages/docusaurus-plugin-content-blog/src/client/contexts.tsx

@@ -6,9 +6,24 @@
  */
 
 import React, {useMemo, type ReactNode, useContext} from 'react';
-import {ReactContextError} from '../utils/reactUtils';
+import {ReactContextError} from '@docusaurus/theme-common/internal';
+import useRouteContext from '@docusaurus/useRouteContext';
 
-import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';
+import type {
+  PropBlogPostContent,
+  BlogMetadata,
+} from '@docusaurus/plugin-content-blog';
+
+export function useBlogMetadata(): BlogMetadata {
+  const routeContext = useRouteContext();
+  const blogMetadata = routeContext?.data?.blogMetadata;
+  if (!blogMetadata) {
+    throw new Error(
+      "useBlogMetadata() can't be called on the current route because the blog metadata could not be found in route context",
+    );
+  }
+  return blogMetadata as BlogMetadata;
+}
 
 /**
  * The React context value returned by the `useBlogPost()` hook.

packages/docusaurus-plugin-content-blog/src/client/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+export {
+  BlogPostProvider,
+  type BlogPostContextValue,
+  useBlogPost,
+  useBlogMetadata,
+} from './contexts';
+
+export {
+  useBlogListPageStructuredData,
+  useBlogPostStructuredData,
+} from './structuredDataUtils';
+
+export {
+  BlogSidebarItemList,
+  groupBlogSidebarItemsByYear,
+  useVisibleBlogSidebarItems,
+} from './sidebarUtils';

packages/docusaurus-theme-common/src/utils/__tests__/blogUtils.test.ts → packages/docusaurus-plugin-content-blog/src/client/sidebarUtils.test.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {groupBlogSidebarItemsByYear} from '../blogUtils';
+import {groupBlogSidebarItemsByYear} from './sidebarUtils';
 import type {BlogSidebarItem} from '@docusaurus/plugin-content-blog';
 
 describe('groupBlogSidebarItemsByYear', () => {

packages/docusaurus-theme-common/src/utils/blogUtils.tsx → packages/docusaurus-plugin-content-blog/src/client/sidebarUtils.tsx

@@ -8,8 +8,8 @@
 import React, {type ReactNode, useMemo} from 'react';
 import {useLocation} from '@docusaurus/router';
 import Link from '@docusaurus/Link';
-import {isSamePath} from './routesUtils';
-import {groupBy} from './jsUtils';
+import {groupBy} from '@docusaurus/theme-common';
+import {isSamePath} from '@docusaurus/theme-common/internal';
 import type {BlogSidebarItem} from '@docusaurus/plugin-content-blog';
 
 function isVisible(item: BlogSidebarItem, pathname: string): boolean {

packages/docusaurus-theme-common/src/utils/structuredDataUtils.ts → packages/docusaurus-plugin-content-blog/src/client/structuredDataUtils.ts

@@ -9,7 +9,8 @@ import {useBaseUrlUtils, type BaseUrlUtils} from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useBlogMetadata} from '@docusaurus/plugin-content-blog/client';
 import type {Props as BlogListPageStructuredDataProps} from '@theme/BlogListPage/StructuredData';
-import {useBlogPost} from '../contexts/blogPost';
+import {useBlogPost} from './contexts';
+
 import type {
   Blog,
   BlogPosting,

packages/docusaurus-theme-classic/src/theme/BlogListPage/StructuredData/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogListPageStructuredData} from '@docusaurus/theme-common';
+import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogListPage/StructuredData';
 
 export default function BlogListPageStructuredData(props: Props): JSX.Element {

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Content/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {blogPostContainerID} from '@docusaurus/utils-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import MDXContent from '@theme/MDXContent';
 import type {Props} from '@theme/BlogPostItem/Content';
 

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Authors/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
 import type {Props} from '@theme/BlogPostItem/Header/Authors';
 import styles from './styles.module.css';

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -9,10 +9,8 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
-import {
-  useBlogPost,
-  useDateTimeFormat,
-} from '@docusaurus/theme-common/internal';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogPostItem/Header/Info';
 
 import styles from './styles.module.css';

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogPostItem/Header/Title';
 
 import styles from './styles.module.css';

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemContainer from '@theme/BlogPostItem/Container';
 import BlogPostItemHeader from '@theme/BlogPostItem/Header';
 import BlogPostItemContent from '@theme/BlogPostItem/Content';

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {BlogPostProvider} from '@docusaurus/theme-common/internal';
+import {BlogPostProvider} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogPostItems';
 

packages/docusaurus-theme-classic/src/theme/BlogPostPage/Metadata/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {PageMetadata} from '@docusaurus/theme-common';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
 export default function BlogPostPageMetadata(): JSX.Element {
   const {assets, metadata} = useBlogPost();

packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useBlogPostStructuredData} from '@docusaurus/theme-common';
+import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client';
 
 export default function BlogPostStructuredData(): JSX.Element {
   const structuredData = useBlogPostStructuredData();

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

@@ -8,7 +8,10 @@
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
-import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  BlogPostProvider,
+  useBlogPost,
+} from '@docusaurus/plugin-content-blog/client';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';

packages/docusaurus-theme-classic/src/theme/BlogSidebar/Content/index.tsx

@@ -6,7 +6,7 @@
  */
 import React, {memo, type ReactNode} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import {groupBlogSidebarItemsByYear} from '@docusaurus/theme-common/internal';
+import {groupBlogSidebarItemsByYear} from '@docusaurus/plugin-content-blog/client';
 import Heading from '@theme/Heading';
 import type {Props} from '@theme/BlogSidebar/Content';
 

packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx

@@ -11,7 +11,7 @@ import {translate} from '@docusaurus/Translate';
 import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
-} from '@docusaurus/theme-common/internal';
+} from '@docusaurus/plugin-content-blog/client';
 import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Desktop';

packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx

@@ -9,7 +9,7 @@ import React, {memo} from 'react';
 import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
-} from '@docusaurus/theme-common/internal';
+} from '@docusaurus/plugin-content-blog/client';
 import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
 import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Mobile';

packages/docusaurus-theme-common/package.json

@@ -32,7 +32,6 @@
   "dependencies": {
     "@docusaurus/mdx-loader": "3.4.0",
     "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/plugin-content-blog": "3.4.0",
     "@docusaurus/plugin-content-docs": "3.4.0",
     "@docusaurus/plugin-content-pages": "3.4.0",
     "@docusaurus/utils": "3.4.0",

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

@@ -39,11 +39,6 @@ export {
   filterDocCardListItems,
 } from './utils/docsUtils';
 
-export {
-  useBlogListPageStructuredData,
-  useBlogPostStructuredData,
-} from './utils/structuredDataUtils';
-
 export {usePluralForm} from './utils/usePluralForm';
 
 export {useCollapsible, Collapsible} from './components/Collapsible';

packages/docusaurus-theme-common/src/internal.ts

@@ -26,11 +26,6 @@ export {DocsVersionProvider, useDocsVersion} from './contexts/docsVersion';
 export {DocsSidebarProvider, useDocsSidebar} from './contexts/docsSidebar';
 
 export {DocProvider, useDoc, type DocContextValue} from './contexts/doc';
-export {
-  BlogPostProvider,
-  useBlogPost,
-  type BlogPostContextValue,
-} from './contexts/blogPost';
 
 export {
   useDocsPreferredVersionByPluginId,
@@ -113,11 +108,6 @@ export {
   type TOCHighlightConfig,
 } from './hooks/useTOCHighlight';
 
-export {
-  useVisibleBlogSidebarItems,
-  groupBlogSidebarItemsByYear,
-  BlogSidebarItemList,
-} from './utils/blogUtils';
 export {useDateTimeFormat} from './utils/IntlUtils';
 
 export {useHideableNavbar} from './hooks/useHideableNavbar';

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

@@ -6,6 +6,4 @@
  */
 
 /// <reference types="@docusaurus/module-type-aliases" />
-/// <reference types="@docusaurus/plugin-content-blog" />
 /// <reference types="@docusaurus/plugin-content-docs" />
-/// <reference types="@docusaurus/plugin-content-pages" />

website/src/plugins/changelog/theme/ChangelogItem/Header/Authors/index.tsx

@@ -7,7 +7,7 @@
 
 import React, {useState} from 'react';
 import clsx from 'clsx';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import ChangelogItemHeaderAuthor from '@theme/ChangelogItem/Header/Author';
 import IconExpand from '@theme/Icon/Expand';
 import type {Props} from '@theme/BlogPostItem/Header/Authors';

website/src/plugins/changelog/theme/ChangelogItem/Header/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {useBlogPost} from '@docusaurus/theme-common/internal';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
 import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
 import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info';

website/src/plugins/changelog/theme/ChangelogPage/index.tsx

@@ -10,7 +10,10 @@ import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
-import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
+import {
+  BlogPostProvider,
+  useBlogPost,
+} from '@docusaurus/plugin-content-blog/client';
 import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
 import BlogLayout from '@theme/BlogLayout';
 import ChangelogItem from '@theme/ChangelogItem';