use dynamic

apps/app/src/components/Page/PageView.tsx

@@ -4,14 +4,12 @@ import React, {
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { isUsersHomepage } from '@growi/core/dist/utils/page-path-utils';
-import { parseSlideFrontmatterInMarkdown } from '@growi/presentation';
 import dynamic from 'next/dynamic';
 
 import { useShouldExpandContent } from '~/client/services/layout';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import { generateSSRViewOptions } from '~/services/renderer/renderer';
 import {
-  useIsEnabledMarp,
   useIsForbidden, useIsIdenticalPath, useIsNotCreatable,
 } from '~/stores/context';
 import { useSWRxCurrentPage, useIsNotFound } from '~/stores/page';
@@ -25,12 +23,9 @@ import { PageViewLayout } from '../Common/PageViewLayout';
 import { PageAlerts } from '../PageAlert/PageAlerts';
 import { PageContentFooter } from '../PageContentFooter';
 import type { PageSideContentsProps } from '../PageSideContents';
-import { SlideViewer } from '../ReactMarkdownComponents/SlideViewer';
 import { UserInfo } from '../User/UserInfo';
 import type { UsersHomepageFooterProps } from '../UsersHomepageFooter';
 
-import RevisionRenderer from './RevisionRenderer';
-
 import styles from './PageView.module.scss';
 
 
@@ -43,6 +38,7 @@ const Comments = dynamic<CommentsProps>(() => import('../Comments').then(mod =>
 const UsersHomepageFooter = dynamic<UsersHomepageFooterProps>(() => import('../UsersHomepageFooter')
   .then(mod => mod.UsersHomepageFooter), { ssr: false });
 const IdenticalPathPage = dynamic(() => import('../IdenticalPathPage').then(mod => mod.IdenticalPathPage), { ssr: false });
+const ViewRenderer = dynamic(() => import('./ViewRenderer').then(mod => mod.ViewRenderer), { ssr: false });
 
 
 type Props = {
@@ -76,8 +72,6 @@ export const PageView = (props: Props): JSX.Element => {
 
   const shouldExpandContent = useShouldExpandContent(page);
 
-  const { data: enabledMarp } = useIsEnabledMarp();
-
 
   // ***************************  Auto Scroll  ***************************
   useEffect(() => {
@@ -136,19 +130,13 @@ export const PageView = (props: Props): JSX.Element => {
     const rendererOptions = viewOptions ?? generateSSRViewOptions(rendererConfig, pagePath);
     const markdown = page.revision.body;
 
-    const [marp, useSlide] = viewOptions ? parseSlideFrontmatterInMarkdown(markdown) : [false, false];
-    const useMarp = (enabledMarp ?? false) && marp;
-
     return (
       <>
         <PageContentsUtilities />
 
         <div className="flex-expand-vert justify-content-between">
-          {
-            (useMarp || useSlide)
-              ? (<SlideViewer marp={useMarp}>{markdown}</SlideViewer>)
-              : (<RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />)
-          }
+
+          <ViewRenderer rendererOptions={rendererOptions} markdown={markdown}></ViewRenderer>
 
           { !isIdenticalPathPage && !isNotFound && (
             <div id="comments-container" ref={commentsContainerRef}>

apps/app/src/components/Page/ViewRenderer.tsx

@@ -0,0 +1,29 @@
+import { parseSlideFrontmatterInMarkdown } from '@growi/presentation';
+
+import type { RendererOptions } from '~/interfaces/renderer-options';
+import { useIsEnabledMarp } from '~/stores/context';
+
+import { SlideViewer } from '../ReactMarkdownComponents/SlideViewer';
+
+import RevisionRenderer from './RevisionRenderer';
+
+type ViewRendererProps = {
+  rendererOptions: RendererOptions,
+  markdown: string
+};
+
+export const ViewRenderer = (props: ViewRendererProps): JSX.Element => {
+
+  const { rendererOptions, markdown } = props;
+
+  const { data: enabledMarp } = useIsEnabledMarp();
+
+  const [marp, useSlide] = parseSlideFrontmatterInMarkdown(markdown);
+  const useMarp = (enabledMarp ?? false) && marp;
+
+  return (
+    (useMarp || useSlide)
+      ? (<SlideViewer marp={useMarp}>{markdown}</SlideViewer>)
+      : (<RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />)
+  );
+};

apps/app/src/components/ShareLinkPageView.tsx

@@ -1,24 +1,20 @@
 import React, { useMemo } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
-import { parseSlideFrontmatterInMarkdown } from '@growi/presentation';
 import dynamic from 'next/dynamic';
 
 import { useShouldExpandContent } from '~/client/services/layout';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { IShareLinkHasId } from '~/interfaces/share-link';
 import { generateSSRViewOptions } from '~/services/renderer/renderer';
-import { useIsEnabledMarp } from '~/stores/context';
 import { useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
 
 import { PagePathNavSticky } from './Common/PagePathNav';
 import { PageViewLayout } from './Common/PageViewLayout';
-import RevisionRenderer from './Page/RevisionRenderer';
 import ShareLinkAlert from './Page/ShareLinkAlert';
 import type { PageSideContentsProps } from './PageSideContents';
-import { SlideViewer } from './ReactMarkdownComponents/SlideViewer';
 
 
 const logger = loggerFactory('growi:Page');
@@ -26,7 +22,7 @@ const logger = loggerFactory('growi:Page');
 
 const PageSideContents = dynamic<PageSideContentsProps>(() => import('./PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
 const ForbiddenPage = dynamic(() => import('./ForbiddenPage'), { ssr: false });
-
+const ViewRenderer = dynamic(() => import('./Page/ViewRenderer').then(mod => mod.ViewRenderer), { ssr: false });
 
 type Props = {
   pagePath: string,
@@ -47,7 +43,6 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
   const { data: isNotFoundMeta } = useIsNotFound();
 
   const { data: viewOptions } = useViewOptions();
-  const { data: enabledMarp } = useIsEnabledMarp();
 
   const shouldExpandContent = useShouldExpandContent(page);
 
@@ -89,16 +84,9 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
     const rendererOptions = viewOptions ?? generateSSRViewOptions(rendererConfig, pagePath);
     const markdown = page.revision.body;
 
-    const [marp, useSlide] = viewOptions ? parseSlideFrontmatterInMarkdown(markdown) : [false, false];
-    const useMarp = (enabledMarp ?? false) && marp;
-
     return (
       <>
-        {
-          (useMarp || useSlide)
-            ? (<SlideViewer marp={useMarp}>{markdown}</SlideViewer>)
-            : (<RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />)
-        }
+        <ViewRenderer rendererOptions={rendererOptions} markdown={markdown}></ViewRenderer>
       </>
     );
   };