feat(mdx): add fragments syntax

Author: hiroppy

packages/client/src/components/Fragments.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+export const Fragments = ({ children }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const ref = useRef(currentStep);
+
+  const listener = (e) => {
+    e.stopImmediatePropagation();
+    if (e.key === 'ArrowRight') {
+      setCurrentStep(ref.current + 1);
+    }
+  };
+
+  useEffect(() => {
+    ref.current = currentStep;
+  }, [currentStep]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', listener, {
+      capture: false,
+      passive: false,
+    });
+    return () => {
+      document.removeEventListener('keydown', listener);
+    };
+  }, []);
+
+  return React.Children.map(children, (child, i) =>
+    React.cloneElement(child, { style: { visibility: i >= currentStep ? 'hidden' : 'initial' } })
+  );
+};

packages/client/src/index.js

@@ -1 +1,2 @@
 export * from './components/SlideCore';
+export * from './components/Fragments';

packages/mdx-loader/src/mdxPlugin.js

@@ -29,7 +29,7 @@ function mdxPlugin() {
         slides.push({ slide, props, background });
         slide = [];
         props = {};
-        background = 0; // why 0? null, undefined, '' are omitted at client side
+        background = 0; // why 0? because null, undefined, '' are omitted at client side
         return;
       }
 
@@ -68,6 +68,22 @@ function mdxPlugin() {
           props.contents = true;
           return;
         }
+        if (prefix === 'fragments-start') {
+          slide.push({
+            ...n,
+            type: 'jsx',
+            value: '<Client.Fragments>',
+          });
+          return;
+        }
+        if (prefix === 'fragments-end') {
+          slide.push({
+            ...n,
+            type: 'jsx',
+            value: '</ Client.Fragments>',
+          });
+          return;
+        }
         if (prefix === 'note') {
           props.note = valueStr.replace(/[&<>"']/gim, (m) => escapeMap[m]).replace(/\n/g, '\\n');
           return;
@@ -196,6 +212,9 @@ function mdxPlugin() {
       value: `
         import React from 'react';
         import { mdx } from '@mdx-js/react';
+        // 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 fusumaProps = [${res.fusumaProps.join(',\n')}];`,

samples/debug/slides/06-blocks.md

@@ -19,3 +19,17 @@ middle
 outer
 
 <!-- block-end -->
+
+---
+
+<!-- fragments-start -->
+
+1
+
+2
+
+3
+
+4
+
+<!-- fragments-end -->