Implement renderer hooks

packages/app/src/stores/renderer.tsx

@@ -1,6 +1,6 @@
-import { SWRResponse } from 'swr';
+import { Key, SWRResponse } from 'swr';
 
-import GrowiRenderer from '~/client/util/GrowiRenderer';
+import GrowiRenderer, { generateCommentPreviewRenderer, generatePreviewRenderer, generateViewRenderer } from '~/client/util/GrowiRenderer';
 import { RendererSettings } from '~/interfaces/services/renderer';
 import { useStaticSWR } from '~/stores/use-static-swr';
 
@@ -9,25 +9,127 @@ export const useRendererSettings = (initialData?: RendererSettings): SWRResponse
 };
 
 export const useViewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  return useStaticSWR('');
+  let key: Key = 'viewRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generateViewRenderer(rendererSettings);
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
 };
 
 export const usePreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  return useStaticSWR('');
+  let key: Key = 'previewRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generatePreviewRenderer();
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
+};
+
+export const useCommentPreviewRenderer = (): SWRResponse<GrowiRenderer, any> => {
+  let key: Key = 'commentPreviewRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generateCommentPreviewRenderer(rendererSettings);
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
 };
 
 export const useSearchResultRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  return useStaticSWR('');
+  let key: Key = 'searchResultRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generateViewRenderer(rendererSettings);
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
 };
 
 export const useTimelineRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  return useStaticSWR('');
+  let key: Key = 'timelineRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generateViewRenderer(rendererSettings);
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
 };
 
 export const useDraftRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  return useStaticSWR('');
+  let key: Key = 'draftRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generateViewRenderer(rendererSettings);
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
 };
 
 export const useCustomSidebarRenderer = (): SWRResponse<GrowiRenderer, any> => {
-  return useStaticSWR('');
+  let key: Key = 'customSidebarRenderer';
+
+  const { data: renderer, mutate: mutateRenderer } = useStaticSWR(key);
+  const { data: rendererSettings } = useRendererSettings();
+
+  if (rendererSettings == null) {
+    key = null;
+  }
+  // Initialize renderer
+  else if (renderer == null) {
+    const generated = generateViewRenderer(rendererSettings);
+    mutateRenderer(generated);
+  }
+
+  return useStaticSWR(key);
 };