refactor: spilt context for better hmr (#33033)

web/app/components/plugins/plugin-page/__tests__/context.spec.tsx

@@ -3,7 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 // Import mocks
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
-import { PluginPageContext, PluginPageContextProvider, usePluginPageContext } from '../context'
+import { PluginPageContext, usePluginPageContext } from '../context'
+import { PluginPageContextProvider } from '../context-provider'
 
 // Mock dependencies
 vi.mock('nuqs', () => ({

web/app/components/plugins/plugin-page/context-provider.tsx

@@ -1,24 +1,20 @@
 'use client'
 
-import type { ReactNode, RefObject } from 'react'
+import type { ReactNode } from 'react'
+import type { PluginPageTab } from './context'
 import type { FilterState } from './filter-management'
-import { noop } from 'es-toolkit/function'
 import { parseAsStringEnum, useQueryState } from 'nuqs'
 import {
   useMemo,
   useRef,
   useState,
 } from 'react'
-import {
-  createContext,
-  useContextSelector,
-} from 'use-context-selector'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { PLUGIN_PAGE_TABS_MAP, usePluginPageTabs } from '../hooks'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
-
-export type PluginPageTab = typeof PLUGIN_PAGE_TABS_MAP[keyof typeof PLUGIN_PAGE_TABS_MAP]
-  | (typeof PLUGIN_TYPE_SEARCH_MAP)[keyof typeof PLUGIN_TYPE_SEARCH_MAP]
+import {
+  PluginPageContext,
+} from './context'
 
 const PLUGIN_PAGE_TAB_VALUES: PluginPageTab[] = [
   PLUGIN_PAGE_TABS_MAP.plugins,
@@ -29,42 +25,10 @@ const PLUGIN_PAGE_TAB_VALUES: PluginPageTab[] = [
 const parseAsPluginPageTab = parseAsStringEnum<PluginPageTab>(PLUGIN_PAGE_TAB_VALUES)
   .withDefault(PLUGIN_PAGE_TABS_MAP.plugins)
 
-export type PluginPageContextValue = {
-  containerRef: RefObject<HTMLDivElement | null>
-  currentPluginID: string | undefined
-  setCurrentPluginID: (pluginID?: string) => void
-  filters: FilterState
-  setFilters: (filter: FilterState) => void
-  activeTab: PluginPageTab
-  setActiveTab: (tab: PluginPageTab) => void
-  options: Array<{ value: string, text: string }>
-}
-
-const emptyContainerRef: RefObject<HTMLDivElement | null> = { current: null }
-
-export const PluginPageContext = createContext<PluginPageContextValue>({
-  containerRef: emptyContainerRef,
-  currentPluginID: undefined,
-  setCurrentPluginID: noop,
-  filters: {
-    categories: [],
-    tags: [],
-    searchQuery: '',
-  },
-  setFilters: noop,
-  activeTab: PLUGIN_PAGE_TABS_MAP.plugins,
-  setActiveTab: noop,
-  options: [],
-})
-
 type PluginPageContextProviderProps = {
   children: ReactNode
 }
 
-export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
-  return useContextSelector(PluginPageContext, selector)
-}
-
 export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {

web/app/components/plugins/plugin-page/context.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import type { RefObject } from 'react'
+import type { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
+import type { FilterState } from './filter-management'
+import { noop } from 'es-toolkit/function'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
+import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
+
+export type PluginPageTab = typeof PLUGIN_PAGE_TABS_MAP[keyof typeof PLUGIN_PAGE_TABS_MAP]
+  | (typeof PLUGIN_TYPE_SEARCH_MAP)[keyof typeof PLUGIN_TYPE_SEARCH_MAP]
+
+export type PluginPageContextValue = {
+  containerRef: RefObject<HTMLDivElement | null>
+  currentPluginID: string | undefined
+  setCurrentPluginID: (pluginID?: string) => void
+  filters: FilterState
+  setFilters: (filter: FilterState) => void
+  activeTab: PluginPageTab
+  setActiveTab: (tab: PluginPageTab) => void
+  options: Array<{ value: string, text: string }>
+}
+
+const emptyContainerRef: RefObject<HTMLDivElement | null> = { current: null }
+
+export const PluginPageContext = createContext<PluginPageContextValue>({
+  containerRef: emptyContainerRef,
+  currentPluginID: undefined,
+  setCurrentPluginID: noop,
+  filters: {
+    categories: [],
+    tags: [],
+    searchQuery: '',
+  },
+  setFilters: noop,
+  activeTab: PLUGIN_PAGE_TABS_MAP.plugins,
+  setActiveTab: noop,
+  options: [],
+})
+
+export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
+  return useContextSelector(PluginPageContext, selector)
+}

web/app/components/plugins/plugin-page/index.tsx

@@ -28,10 +28,8 @@ import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
-import {
-  PluginPageContextProvider,
-  usePluginPageContext,
-} from './context'
+import { usePluginPageContext } from './context'
+import { PluginPageContextProvider } from './context-provider'
 import DebugInfo from './debug-info'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import PluginTasks from './plugin-tasks'