devide parse frontmatter

packages/presentation/src/components/Presentation.tsx

@@ -1,18 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
-import remarkFrontmatter from 'remark-frontmatter';
-import remarkParse from 'remark-parse';
-import remarkStringify from 'remark-stringify';
 import Reveal from 'reveal.js';
-import { unified } from 'unified';
 
 import type { PresentationOptions } from '../consts';
+import { parseSlideFrontmatterInMarkdown } from '../services/parse-slide-frontmatter';
 
 import { MARP_CONTAINER_CLASS_NAME, Slides } from './Slides';
 
 import 'reveal.js/dist/reveal.css';
 import './Presentation.global.scss';
 
+
 import styles from './Presentation.module.scss';
 
 
@@ -44,7 +42,10 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   const { options, isEnabledMarp, children } = props;
   const { revealOptions } = options;
 
-  const [marp, setMarp] = useState<boolean>(false);
+  let marp = false;
+  if (isEnabledMarp) {
+    [marp] = parseSlideFrontmatterInMarkdown(children);
+  }
 
   useEffect(() => {
     let deck: Reveal.Api;
@@ -57,30 +58,11 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
       deck.on('slidechanged', removeAllHiddenElements);
     }
 
-    if (isEnabledMarp) {
-      unified()
-        .use(remarkParse)
-        .use(remarkStringify)
-        .use(remarkFrontmatter, ['yaml'])
-        .use(() => (obj) => {
-          if (obj.children[0]?.type === 'yaml') {
-            const lines = (obj.children[0]?.value as string).split('\n');
-            lines.forEach((line) => {
-              const [key, value] = line.split(':').map(part => part.trim());
-              if (key === 'marp' && value === 'true') {
-                setMarp(true);
-              }
-            });
-          }
-        })
-        .process(children as string);
-    }
-
     return function cleanup() {
       deck?.off('ready', removeAllHiddenElements);
       deck?.off('slidechanged', removeAllHiddenElements);
     };
-  }, [children, revealOptions, isEnabledMarp, setMarp]);
+  }, [children, revealOptions]);
 
   return (
     <div className={`grw-presentation ${styles['grw-presentation']} reveal ${MARP_CONTAINER_CLASS_NAME}`}>

packages/presentation/src/services/parse-slide-frontmatter.ts

@@ -0,0 +1,43 @@
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkParse from 'remark-parse';
+import remarkStringify from 'remark-stringify';
+import { unified } from 'unified';
+
+
+export const parseSlideFrontmatter = (frontmatter: string): [boolean, boolean] => {
+
+  let marp = false;
+  let slide = false;
+
+  const lines = frontmatter.split('\n');
+  lines.forEach((line) => {
+    const [key, value] = line.split(':').map(part => part.trim());
+    if (key === 'marp' && value === 'true') {
+      marp = true;
+    }
+    if (key === 'slide' && value === 'true') {
+      slide = true;
+    }
+  });
+
+  return [marp, slide];
+};
+
+export const parseSlideFrontmatterInMarkdown = (markdown?: string): [boolean, boolean] => {
+
+  let marp = false;
+  let slide = false;
+
+  unified()
+    .use(remarkParse)
+    .use(remarkStringify)
+    .use(remarkFrontmatter, ['yaml'])
+    .use(() => ((obj) => {
+      if (obj.children[0]?.type === 'yaml') {
+        [marp, slide] = parseSlideFrontmatter(obj.children[0]?.value as string);
+      }
+    }))
+    .process(markdown as string);
+
+  return [marp, slide];
+};

packages/presentation/src/services/renderer/slides.ts

@@ -7,30 +7,15 @@ import type { Plugin } from 'unified';
 import type { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
+import { parseSlideFrontmatter } from '../parse-slide-frontmatter';
+
 const SUPPORTED_ATTRIBUTES = ['children', 'marp'];
 
 const rewriteNode = (tree: Node, node: Node, isEnabledMarp: boolean) => {
-  let slide = false;
-  let marp = false;
-
-  const lines = (node.value as string).split('\n');
-
-  lines.forEach((line) => {
-    const [key, value] = line.split(':').map(part => part.trim());
 
-    if (key === 'slide' && value === 'true') {
-      slide = true;
-    }
-    else if (key === 'marp' && value === 'true') {
-      marp = true;
-    }
-  });
-
-  if (isEnabledMarp === false) {
-    marp = false;
-  }
+  const [marp, slide] = parseSlideFrontmatter(node.value as string);
 
-  if (marp || slide) {
+  if ((marp && isEnabledMarp) || slide) {
 
     const newNode: Node = {
       type: 'root',