Refactored RendererGenerator & Commonized processes into _useRendererBase

packages/app/src/client/services/ContextExtractor.tsx

@@ -216,6 +216,7 @@ const ContextExtractorOnce: FC = () => {
         BLOCKDIAG_URI: configByContextHydrate.env.BLOCKDIAG_URI,
       },
     },
+    null,
     path,
   );
 

packages/app/src/services/renderer/growi-renderer.ts

@@ -196,9 +196,13 @@ export default class GrowiRenderer {
 
 }
 
+export interface RendererGenerator {
+  (growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings | null, pagePath?: Nullable<string>): GrowiRenderer
+}
 
-// eslint-disable-next-line max-len
-export const generateViewRenderer = (rendererSettings: RendererSettings, growiRendererConfig: GrowiRendererConfig, pagePath?: Nullable<string>): GrowiRenderer => {
+export const generateViewRenderer: RendererGenerator = (
+    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings, pagePath?: Nullable<string>,
+): GrowiRenderer => {
   const renderer = new GrowiRenderer(growiRendererConfig, pagePath);
   renderer.init();
 
@@ -217,7 +221,9 @@ export const generateViewRenderer = (rendererSettings: RendererSettings, growiRe
   return renderer;
 };
 
-export const generatePreviewRenderer = (growiRendererConfig: GrowiRendererConfig, pagePath?: Nullable<string>): GrowiRenderer => {
+export const generatePreviewRenderer: RendererGenerator = (
+    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings | null, pagePath?: Nullable<string>,
+): GrowiRenderer => {
   const renderer = new GrowiRenderer(growiRendererConfig, pagePath);
   renderer.init();
 
@@ -233,7 +239,9 @@ export const generatePreviewRenderer = (growiRendererConfig: GrowiRendererConfig
   return renderer;
 };
 
-const generateRendererWithTableConfigurer = (growiRendererConfig: GrowiRendererConfig, pagePath?: Nullable<string>): GrowiRenderer => {
+const generateRendererWithTableConfigurer: RendererGenerator = (
+    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings | null, pagePath?: Nullable<string>,
+): GrowiRenderer => {
   const renderer = new GrowiRenderer(growiRendererConfig, pagePath);
   renderer.init();
 
@@ -246,9 +254,10 @@ const generateRendererWithTableConfigurer = (growiRendererConfig: GrowiRendererC
   return renderer;
 };
 
-// eslint-disable-next-line max-len
-export const generateCommentPreviewRenderer = (rendererSettings: RendererSettings, growiRendererConfig: GrowiRendererConfig, pagePath?: Nullable<string>): GrowiRenderer => {
-  const renderer = generateRendererWithTableConfigurer(growiRendererConfig, pagePath);
+export const generateCommentPreviewRenderer: RendererGenerator = (
+    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings, pagePath?: Nullable<string>,
+): GrowiRenderer => {
+  const renderer = generateRendererWithTableConfigurer(growiRendererConfig, null, pagePath);
 
   renderer.setMarkdownSettings({ breaks: rendererSettings.isEnabledLinebreaksInComments });
   renderer.configure();

packages/app/src/stores/renderer.tsx

@@ -1,7 +1,9 @@
 import { Key, SWRResponse } from 'swr';
 
 import { RendererSettings } from '~/interfaces/services/renderer';
-import GrowiRenderer, { generateCommentPreviewRenderer, generatePreviewRenderer, generateViewRenderer } from '~/services/renderer/growi-renderer';
+import GrowiRenderer, {
+  generateCommentPreviewRenderer, generatePreviewRenderer, generateViewRenderer, RendererGenerator,
+} from '~/services/renderer/growi-renderer';
 import { useStaticSWR } from '~/stores/use-static-swr';
 
 import { useCurrentPagePath, useGrowiRendererConfig } from './context';
@@ -10,8 +12,9 @@ export const useRendererSettings = (initialData?: RendererSettings): SWRResponse
   return useStaticSWR('rendererSettings', initialData);
 };
 
-export const useViewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'viewRenderer';
+// The base hook with common processes
+const _useRendererBase = (key: Key, generator: RendererGenerator): SWRResponse<GrowiRenderer, any> => {
+  let _key = key;
 
   const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
   const { data: rendererSettings } = useRendererSettings();
@@ -19,133 +22,55 @@ export const useViewRenderer = (): SWRResponse<GrowiRenderer, any> => {
   const { data: growiRendererConfig } = useGrowiRendererConfig();
 
   if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
+    _key = null;
   }
   // Initialize renderer
   else if (renderer == null) {
-    const generated = generateViewRenderer(rendererSettings, growiRendererConfig, currentPath);
+    const generated = generator(growiRendererConfig, rendererSettings, currentPath);
     mutateRenderer(generated);
   }
 
-  return useStaticSWR(key);
+  return useStaticSWR(_key);
 };
 
-export const usePreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'previewRenderer';
+export const useViewRenderer = (): SWRResponse<GrowiRenderer, any> => {
+  const key: Key = 'viewRenderer';
 
-  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
+  return _useRendererBase(key, generateViewRenderer);
+};
 
-  if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
-  }
-  // Initialize renderer
-  else if (renderer == null) {
-    const generated = generatePreviewRenderer(growiRendererConfig, currentPath);
-    mutateRenderer(generated);
-  }
+export const usePreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
+  const key: Key = 'previewRenderer';
 
-  return useStaticSWR(key);
+  return _useRendererBase(key, generatePreviewRenderer);
 };
 
 export const useCommentPreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'commentPreviewRenderer';
-
-  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
-
-  if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
-  }
-  // Initialize renderer
-  else if (renderer == null) {
-    const generated = generateCommentPreviewRenderer(rendererSettings, growiRendererConfig, currentPath);
-    mutateRenderer(generated);
-  }
+  const key: Key = 'commentPreviewRenderer';
 
-  return useStaticSWR(key);
+  return _useRendererBase(key, generateCommentPreviewRenderer);
 };
 
 export const useSearchResultRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'searchResultRenderer';
+  const key: Key = 'searchResultRenderer';
 
-  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
-
-  if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
-  }
-  // Initialize renderer
-  else if (renderer == null) {
-    const generated = generateViewRenderer(rendererSettings, growiRendererConfig, currentPath);
-    mutateRenderer(generated);
-  }
-
-  return useStaticSWR(key);
+  return _useRendererBase(key, generateViewRenderer);
 };
 
 export const useTimelineRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'timelineRenderer';
-
-  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
+  const key: Key = 'timelineRenderer';
 
-  if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
-  }
-  // Initialize renderer
-  else if (renderer == null) {
-    const generated = generateViewRenderer(rendererSettings, growiRendererConfig, currentPath);
-    mutateRenderer(generated);
-  }
-
-  return useStaticSWR(key);
+  return _useRendererBase(key, generateViewRenderer);
 };
 
 export const useDraftRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'draftRenderer';
+  const key: Key = 'draftRenderer';
 
-  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
-
-  if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
-  }
-  // Initialize renderer
-  else if (renderer == null) {
-    const generated = generateViewRenderer(rendererSettings, growiRendererConfig, currentPath);
-    mutateRenderer(generated);
-  }
-
-  return useStaticSWR(key);
+  return _useRendererBase(key, generateViewRenderer);
 };
 
 export const useCustomSidebarRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  let key: Key = 'customSidebarRenderer';
-
-  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
-  const { data: rendererSettings } = useRendererSettings();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: growiRendererConfig } = useGrowiRendererConfig();
-
-  if (rendererSettings == null || growiRendererConfig == null) {
-    key = null;
-  }
-  // Initialize renderer
-  else if (renderer == null) {
-    const generated = generateViewRenderer(rendererSettings, growiRendererConfig, currentPath);
-    mutateRenderer(generated);
-  }
+  const key: Key = 'customSidebarRenderer';
 
-  return useStaticSWR(key);
+  return _useRendererBase(key, generateViewRenderer);
 };