From 8ad074773a85e6329b6da21a9c5adf9e3b0de8a2 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Thu, 16 May 2024 09:41:34 +0200 Subject: [PATCH] wip routeContext --- .../src/client/index.ts | 33 ++++++ .../src/theme/Showcase/ShowcaseCard/index.tsx | 4 +- .../theme/Showcase/ShowcaseCards/index.tsx | 2 +- .../theme/Showcase/ShowcaseFilters/index.tsx | 4 +- .../src/contexts/showcase.tsx | 111 ++++-------------- .../docusaurus-theme-common/src/internal.ts | 7 +- 6 files changed, 63 insertions(+), 98 deletions(-) diff --git a/packages/docusaurus-plugin-content-showcase/src/client/index.ts b/packages/docusaurus-plugin-content-showcase/src/client/index.ts index 552e32011e..e44bb0b6e7 100644 --- a/packages/docusaurus-plugin-content-showcase/src/client/index.ts +++ b/packages/docusaurus-plugin-content-showcase/src/client/index.ts @@ -13,10 +13,12 @@ import { useQueryStringList, type ListUpdateFunction, } from '@docusaurus/theme-common'; +import useRouteContext from '@docusaurus/useRouteContext'; import type { TagType, Operator, ShowcaseItem, + TagsOption, } from '@docusaurus/plugin-content-showcase'; export function filterItems({ @@ -130,3 +132,34 @@ export function sortItems(params: ShowcaseItem[]): ShowcaseItem[] { result = sortBy(result, (user) => !user.tags.includes('favorite')); return result; } + +export interface ShowcaseContextType { + items: ShowcaseItem[]; + tags: TagsOption; + screenshotApi: string; +} + +function useShowcase() { + const routeContext = useRouteContext(); + console.log('routeContext:', routeContext); + const showcase = routeContext?.data?.showcase; + console.log('showcase:', showcase); + if (!showcase) { + throw new Error( + 'showcase-related hooks can only be called on the showcase page', + ); + } + return showcase as ShowcaseContextType; +} + +export function useShowcaseItems(): ShowcaseItem[] { + return useShowcase().items; +} + +export function useShowcaseApiScreenshot(): string { + return useShowcase().screenshotApi; +} + +export function useShowcaseTags(): TagsOption { + return useShowcase().tags; +} diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx index c8d04aec2e..7355682d8b 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx @@ -9,11 +9,11 @@ import React from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; -import {sortBy} from '@docusaurus/plugin-content-showcase/client'; import { + sortBy, useShowcaseTags, useShowcaseApiScreenshot, -} from '@docusaurus/theme-common/internal'; +} from '@docusaurus/plugin-content-showcase/client'; import Heading from '@theme/Heading'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import type {ShowcaseItem, TagType} from '@docusaurus/plugin-content-showcase'; diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx index a7db839bda..dcd785598a 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx @@ -11,8 +11,8 @@ import Translate from '@docusaurus/Translate'; import { useFilteredItems, sortItems, + useShowcaseItems, } from '@docusaurus/plugin-content-showcase/client'; -import {useShowcaseItems} from '@docusaurus/theme-common/internal'; import Heading from '@theme/Heading'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import ShowcaseCard from '@theme/Showcase/ShowcaseCard'; diff --git a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx index 13a65443b0..f0dc3c9e4d 100644 --- a/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseFilters/index.tsx @@ -11,11 +11,9 @@ import Translate from '@docusaurus/Translate'; import { useFilteredItems, useSiteCountPlural, -} from '@docusaurus/plugin-content-showcase/client'; -import { useShowcaseItems, useShowcaseTags, -} from '@docusaurus/theme-common/internal'; +} from '@docusaurus/plugin-content-showcase/client'; import FavoriteIcon from '@theme/Showcase/FavoriteIcon'; import Heading from '@theme/Heading'; import ShowcaseTagSelect from '@theme/Showcase/ShowcaseTagSelect'; diff --git a/packages/docusaurus-theme-common/src/contexts/showcase.tsx b/packages/docusaurus-theme-common/src/contexts/showcase.tsx index 617f5fae8e..6207ddba88 100644 --- a/packages/docusaurus-theme-common/src/contexts/showcase.tsx +++ b/packages/docusaurus-theme-common/src/contexts/showcase.tsx @@ -5,8 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useMemo, type ReactNode, useContext} from 'react'; -import {ReactContextError} from '../utils/reactUtils'; +import React, {createContext, useMemo, type ReactNode} from 'react'; import type { ShowcaseItem, TagsOption, @@ -20,100 +19,40 @@ type Props = { children: ReactNode; }; -const ItemsContext = React.createContext(null); -const ApiContext = React.createContext(null); -const TagsContext = React.createContext(null); - -function useItemsContextValue(content: ShowcaseItem[]): ShowcaseItem[] { - return useMemo(() => content, [content]); -} - -function useApiScreenshotContextValue(content: string): string { - return useMemo(() => content, [content]); -} - -function useTagsContextValue(tags: TagsOption): TagsOption { - return useMemo(() => tags, [tags]); -} - -function ItemsProvider({ - children, - items, -}: { - children: ReactNode; +export interface ShowcaseContextType { items: ShowcaseItem[]; -}): JSX.Element { - const contextValue = useItemsContextValue(items); - return ( - - {children} - - ); -} - -function ApiScreenshotProvider({ - children, - api, -}: { - children: ReactNode; - api: string; -}): JSX.Element { - const contextValue = useApiScreenshotContextValue(api); - return ( - {children} - ); -} - -function TagsProvider({ - children, - tags, -}: { - children: ReactNode; tags: TagsOption; -}): JSX.Element { - const contextValue = useTagsContextValue(tags); - return ( - {children} - ); + screenshotApi: string; } +const ShowcaseContext = createContext( + undefined, +); + +// const useShowcaseContext = (): ShowcaseContextType => { +// const context = useContext(ShowcaseContext); +// if (!context) { +// throw new Error( +// 'useShowcaseContext must be used within a ShowcaseProvider', +// ); +// } +// return context; +// }; + export function ShowcaseProvider({ items, tags, screenshotApi, children, }: Props): JSX.Element { + const contextValue = useMemo( + () => ({items, tags, screenshotApi}), + [items, tags, screenshotApi], + ); + return ( - - - - {children} - - - + + {children} + ); } - -export function useShowcaseItems(): ShowcaseItem[] { - const showcaseItems = useContext(ItemsContext); - if (showcaseItems === null) { - throw new ReactContextError('ItemsProvider'); - } - return showcaseItems; -} - -export function useShowcaseApiScreenshot(): string { - const showcaseItems = useContext(ApiContext); - if (showcaseItems === null) { - throw new ReactContextError('ItemsProvider'); - } - return showcaseItems; -} - -export function useShowcaseTags(): TagsOption { - const tags = useContext(TagsContext); - if (tags === null) { - throw new ReactContextError('TagsProvider'); - } - return tags; -} diff --git a/packages/docusaurus-theme-common/src/internal.ts b/packages/docusaurus-theme-common/src/internal.ts index 8602b04e04..302701f348 100644 --- a/packages/docusaurus-theme-common/src/internal.ts +++ b/packages/docusaurus-theme-common/src/internal.ts @@ -26,12 +26,7 @@ export {DocsVersionProvider, useDocsVersion} from './contexts/docsVersion'; export {DocsSidebarProvider, useDocsSidebar} from './contexts/docsSidebar'; export {DocProvider, useDoc, type DocContextValue} from './contexts/doc'; -export { - useShowcaseItems, - useShowcaseTags, - useShowcaseApiScreenshot, - ShowcaseProvider, -} from './contexts/showcase'; +export {ShowcaseProvider} from './contexts/showcase'; export { BlogPostProvider, useBlogPost,