feat(client): introduce fragments

Author: hiroppy

packages/client/src/components/ContentView/Base.js

@@ -1,34 +1,43 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 import { useSlides, updateCurrentIndex } from '../../context/slides';
 import { SlideCore } from '../SlideCore';
 
 export const Base = memo(() => {
   const {
-    state: { currentIndex },
+    state: { currentIndex, timeline },
     dispatch,
   } = useSlides();
+  const currentIndexRef = useRef(currentIndex);
 
   useEffect(() => {
     // TODO: swiper should be gone to context
     const { swiper } = document.querySelector('.swiper-container');
     swiper?.slideTo(currentIndex);
   }, [currentIndex]);
 
-  useEffect(() => {
-    const keyboardListener = ({ key }) => {
-      if (key === 'ArrowRight') {
-        dispatch(updateCurrentIndex('+'));
-      } else if (key === 'ArrowLeft') {
-        dispatch(updateCurrentIndex('-'));
-      }
-    };
+  const keyboardListener = ({ key }) => {
+    if (Array.isArray(timeline[currentIndexRef.current])) {
+      return;
+    }
 
+    if (key === 'ArrowRight') {
+      dispatch(updateCurrentIndex('+'));
+    } else if (key === 'ArrowLeft') {
+      dispatch(updateCurrentIndex('-'));
+    }
+  };
+
+  useEffect(() => {
     document.addEventListener('keydown', keyboardListener);
 
     return () => {
       document.removeEventListener('keydown', keyboardListener);
     };
   }, []);
 
+  useEffect(() => {
+    currentIndexRef.current = currentIndex;
+  }, [currentIndex]);
+
   return <SlideCore />;
 });

packages/client/src/components/Fragments.js

@@ -1,35 +1,57 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useSlides } from '../context/slides';
+import { useSlides, updateCurrentIndex } from '../context/slides';
 
-export const Fragments = ({ children }) => {
+export const Fragments = ({ children, id }) => {
   const [currentStep, setCurrentStep] = useState(0);
-  const ref = useRef(currentStep);
+  const [steps, setSteps] = useState(0);
+  const currentStepRef = useRef(currentStep);
+  const stepsRef = useRef(steps);
   const {
-    state: { currentIndex },
+    state: { currentIndex, timeline },
+    dispatch,
   } = useSlides();
 
   const listener = (e) => {
     e.stopPropagation();
-    e.preventDefault();
-    console.log('aaaa');
+
     if (e.key === 'ArrowRight') {
-      setCurrentStep(ref.current + 1);
+      const next = currentStepRef.current + 1;
+
+      if (next > stepsRef.current) {
+        dispatch(updateCurrentIndex('+'));
+        document.removeEventListener('keydown', listener);
+      } else {
+        setCurrentStep(next);
+      }
+    } else if (e.key === 'ArrowLeft') {
+      const next = currentStepRef.current - 1;
+
+      if (next < 0) {
+        dispatch(updateCurrentIndex('-'));
+        document.removeEventListener('keydown', listener);
+      } else {
+        setCurrentStep(next);
+      }
     }
   };
 
   useEffect(() => {
-    ref.current = currentStep;
-  }, [currentStep]);
+    currentStepRef.current = currentStep;
+    stepsRef.current = steps;
+  }, [currentStep, steps]);
 
   useEffect(() => {
-    // document.addEventListener('keydown', listener, {
-    //   capture: false,
-    //   passive: false,
-    // });
-    // return () => {
-    //   document.removeEventListener('keydown', listener);
-    // };
-  }, []);
+    const current = timeline[currentIndex];
+
+    if (Array.isArray(current) && current[0] === id) {
+      setSteps(current.length);
+
+      document.addEventListener('keydown', listener, {
+        capture: false,
+        passive: false,
+      });
+    }
+  }, [currentIndex]);
 
   return React.Children.map(children, (child, i) =>
     React.cloneElement(child, { style: { visibility: i >= currentStep ? 'hidden' : 'initial' } })

packages/client/src/components/SlideCore.js

@@ -72,7 +72,7 @@ export const SlideCore = () => {
       direction={process.env.UI.VERTICAL === 'true' ? 'vertical' : 'horizontal'}
       loop={/*TODO: respect to params to generate pdf */ process.env.LOOP}
       speed={350}
-      allowTouchMove={window.innerWidth <= 768}
+      allowTouchMove={false}
       slidesPerView={1}
       hashNavigation={{
         watchState: true,

packages/client/src/context/slides.js

@@ -8,6 +8,7 @@ const initialState = {
   currentIndex: getCurrentIndexFromUrl(),
   slides: [],
   contentsList: [],
+  timeline: [],
 };
 
 const SlidesContext = createContext(initialState);

packages/client/src/utils/createSlidesProps.js

@@ -12,7 +12,8 @@ export function createSlidesProps(slides) {
     slidesArr.push(...slides);
     propsArr.push(...fusumaProps);
     backgroundsArr.push(...backgrounds);
-    fragmentStepsArr.push(...fragmentSteps);
+    fragmentStepsArr.push(fragmentSteps);
+    slidesTimeline.push(...fragmentSteps);
   });
 
   propsArr.reduce((acc, { sectionTitle }, i) => {
@@ -42,23 +43,17 @@ export function createSlidesProps(slides) {
         ? props.classes[0].split(',') // for HMR
         : props.classes.split(',');
     }
-    if (fragmentStepsArr[i] === 0) {
-      slidesTimeline.push(0);
-    } else {
-      slidesTimeline.push(Array.from({ length: fragmentStepsArr[i] }, (_, i) => i + 1));
-    }
 
     return {
       slide: props.contents ? ToC({ list: res.contentsList }) : slide,
       fusumaProps: {
         ...props,
         background,
       },
-      fragmentSteps: fragmentStepsArr[i],
     };
   });
 
-  res.slidesTimeline = slidesTimeline;
+  res.timeline = slidesTimeline;
 
   return res;
 }

packages/mdx-loader/src/mdxPlugin.js

@@ -21,18 +21,35 @@ function mdxPlugin() {
     let mermaidId = 1;
     let isFragmentArea = false;
     let fragmentSteps = 0;
+    let fragmentId = 0;
+    let hasFragments = false;
+
+    function formatSlidesTimeline(fragmentSteps, fragmentId) {
+      if (fragmentSteps === 0) {
+        return [0];
+      } else {
+        hasFragments = true;
+        return [[...Array(fragmentSteps)].fill(fragmentId)];
+      }
+    }
 
     // TODO: refactor using visit
     tree.children.forEach((n, i) => {
       const { type, value, lang, meta } = n;
 
       // move to a new slide
       if (type === 'thematicBreak') {
-        slides.push({ slide, props, background, fragmentSteps });
+        slides.push({
+          slide,
+          props,
+          background,
+          fragmentSteps: formatSlidesTimeline(fragmentSteps, fragmentId),
+        });
         slide = [];
         props = {};
         background = 0; // why 0? because null, undefined, '' are omitted at client side
         fragmentSteps = 0;
+        fragmentId = 0;
         isFragmentArea = false;
         return;
       }
@@ -69,10 +86,11 @@ function mdxPlugin() {
           return;
         }
         if (prefix === 'fragments-start') {
+          fragmentId = Math.random();
           slide.push({
             ...n,
             type: 'jsx',
-            value: '<Client.Fragments>',
+            value: `<Client.Fragments id={${fragmentId}}>`,
           });
           isFragmentArea = true;
           return;
@@ -180,7 +198,12 @@ function mdxPlugin() {
     });
 
     // push last slide
-    slides.push({ slide, props, background, fragmentSteps });
+    slides.push({
+      slide,
+      props,
+      background,
+      fragmentSteps: formatSlidesTimeline(fragmentSteps, fragmentId),
+    });
 
     const res = {
       jsx: [],
@@ -212,7 +235,7 @@ function mdxPlugin() {
         res.jsx.push(template);
         res.fusumaProps.push(fusumaProps);
         res.background.push(background);
-        res.fragmentSteps.push(fragmentSteps);
+        res.fragmentSteps.push(...fragmentSteps);
       }
     });
 
@@ -224,12 +247,17 @@ function mdxPlugin() {
       value: `
         import React from 'react';
         import { mdx } from '@mdx-js/react';
+        ${
+          hasFragments &&
+          `
         // don't import as named to avoid using makeShortcode by mdx
         import * as Client from '@fusuma/client';
+        `
+        }
 
         export const slides = [${res.jsx.join(',\n')}];
         export const backgrounds = [${res.background.join(',\n')}];
-        export const fragmentSteps = [${res.fragmentSteps.join(',\n')}];
+        export const fragmentSteps = ${JSON.stringify(res.fragmentSteps)};
         export const fusumaProps = [${res.fusumaProps.join(',\n')}];`,
     });
   };

samples/debug/slides/06-blocks.md

@@ -22,6 +22,8 @@ outer
 
 ---
 
+### Fragments
+
 <!-- fragments-start -->
 
 1