Merge pull request #6237 from weseek/support/refactor-useRendererBase

support: Refactor growi renderer using hooks 2

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

@@ -35,19 +35,19 @@ type MarkdownSettings = {
 
 export default class GrowiRenderer {
 
-  preProcessors: any[]
+  preProcessors: any[];
 
-  postProcessors: any[]
+  postProcessors: any[];
 
-  md: any
+  md: any;
 
-  isMarkdownItConfigured: boolean
+  isMarkdownItConfigured: boolean;
 
-  markdownItConfigurers: any[]
+  markdownItConfigurers: any[];
 
-  growiRendererConfig: GrowiRendererConfig
+  growiRendererConfig: GrowiRendererConfig;
 
-  pagePath?: Nullable<string>
+  pagePath?: Nullable<string>;
 
   /**
    *
@@ -234,13 +234,14 @@ export const generatePreviewRenderer: RendererGenerator = (
     new TableConfigurer(),
   ]);
 
+  renderer.setMarkdownSettings({ breaks: rendererSettings?.isEnabledLinebreaks });
   renderer.configure();
 
   return renderer;
 };
 
-const generateRendererWithTableConfigurer: RendererGenerator = (
-    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings | null, pagePath?: Nullable<string>,
+export const generateCommentPreviewRenderer: RendererGenerator = (
+    growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings, pagePath?: Nullable<string>,
 ): GrowiRenderer => {
   const renderer = new GrowiRenderer(growiRendererConfig, pagePath);
   renderer.init();
@@ -249,17 +250,23 @@ const generateRendererWithTableConfigurer: RendererGenerator = (
     new TableConfigurer(),
   ]);
 
+  renderer.setMarkdownSettings({ breaks: rendererSettings.isEnabledLinebreaksInComments });
   renderer.configure();
 
   return renderer;
 };
 
-export const generateCommentPreviewRenderer: RendererGenerator = (
+export const generateOthersRenderer: RendererGenerator = (
     growiRendererConfig: GrowiRendererConfig, rendererSettings: RendererSettings, pagePath?: Nullable<string>,
 ): GrowiRenderer => {
-  const renderer = generateRendererWithTableConfigurer(growiRendererConfig, null, pagePath);
+  const renderer = new GrowiRenderer(growiRendererConfig, pagePath);
+  renderer.init();
 
-  renderer.setMarkdownSettings({ breaks: rendererSettings.isEnabledLinebreaksInComments });
+  renderer.addConfigurers([
+    new TableConfigurer(),
+  ]);
+
+  renderer.setMarkdownSettings({ breaks: rendererSettings.isEnabledLinebreaks });
   renderer.configure();
 
   return renderer;

packages/app/src/stores/renderer.tsx

@@ -1,76 +1,70 @@
 import { Key, SWRResponse } from 'swr';
+import useSWRImmutable from 'swr/immutable';
 
 import { RendererSettings } from '~/interfaces/services/renderer';
 import GrowiRenderer, {
-  generateCommentPreviewRenderer, generatePreviewRenderer, generateViewRenderer, RendererGenerator,
+  generateViewRenderer, generatePreviewRenderer, generateCommentPreviewRenderer, generateOthersRenderer, RendererGenerator,
 } from '~/services/renderer/growi-renderer';
 import { useStaticSWR } from '~/stores/use-static-swr';
 
 import { useCurrentPagePath, useGrowiRendererConfig } from './context';
 
-export const useRendererSettings = (initialData?: RendererSettings): SWRResponse<RendererSettings, any> => {
+export const useRendererSettings = (initialData?: RendererSettings): SWRResponse<RendererSettings, Error> => {
   return useStaticSWR('rendererSettings', initialData);
 };
 
 // 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 _useRendererBase = (key: string, generator: RendererGenerator): SWRResponse<GrowiRenderer, Error> => {
   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 = generator(growiRendererConfig, rendererSettings, currentPath);
-    mutateRenderer(generated);
-  }
-
-  return useStaticSWR(_key);
+  return useSWRImmutable(
+    (rendererSettings == null || growiRendererConfig == null || currentPath == null)
+      ? null
+      : [key, rendererSettings, growiRendererConfig, currentPath],
+    (key, rendererSettings, growiRendererConfig, currentPath) => generator(growiRendererConfig, rendererSettings, currentPath),
+  );
 };
 
-export const useViewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  const key: Key = 'viewRenderer';
+export const useViewRenderer = (): SWRResponse<GrowiRenderer, Error> => {
+  const key = 'viewRenderer';
 
   return _useRendererBase(key, generateViewRenderer);
 };
 
-export const usePreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  const key: Key = 'previewRenderer';
+export const usePreviewRenderer = (): SWRResponse<GrowiRenderer, Error> => {
+  const key = 'previewRenderer';
 
   return _useRendererBase(key, generatePreviewRenderer);
 };
 
-export const useCommentPreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  const key: Key = 'commentPreviewRenderer';
+export const useCommentPreviewRenderer = (): SWRResponse<GrowiRenderer, Error> => {
+  const key = 'commentPreviewRenderer';
 
   return _useRendererBase(key, generateCommentPreviewRenderer);
 };
 
-export const useSearchResultRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  const key: Key = 'searchResultRenderer';
+export const useSearchResultRenderer = (): SWRResponse<GrowiRenderer, Error> => {
+  const key = 'searchResultRenderer';
 
-  return _useRendererBase(key, generateViewRenderer);
+  return _useRendererBase(key, generateOthersRenderer);
 };
 
-export const useTimelineRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  const key: Key = 'timelineRenderer';
+export const useTimelineRenderer = (): SWRResponse<GrowiRenderer, Error> => {
+  const key = 'timelineRenderer';
 
-  return _useRendererBase(key, generateViewRenderer);
+  return _useRendererBase(key, generateOthersRenderer);
 };
 
-export const useDraftRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  const key: Key = 'draftRenderer';
+export const useDraftRenderer = (): SWRResponse<GrowiRenderer, Error> => {
+  const key = 'draftRenderer';
 
-  return _useRendererBase(key, generateViewRenderer);
+  return _useRendererBase(key, generateOthersRenderer);
 };
 
-export const useCustomSidebarRenderer = (): SWRResponse<GrowiRenderer, any> => {
+export const useCustomSidebarRenderer = (): SWRResponse<GrowiRenderer, Error> => {
   const key: Key = 'customSidebarRenderer';
 
-  return _useRendererBase(key, generateViewRenderer);
+  return _useRendererBase(key, generateOthersRenderer);
 };