Add example using JS rather than just MDX

examples/JS/TestJS.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Deck from '../../src/components/Deck.js';
+import Slide, { SlideElementWrapper } from '../../src/components/Slide.js';
+
+const TestJs = () => (
+  <Deck loop={true}>
+    <Slide>
+      <div>Hi</div>
+      <b>b</b>
+    </Slide>
+    <Slide>
+      <p> Slide 3! </p>
+      <SlideElementWrapper elementNum={0}>
+        Hey, just one "animated" slide element here
+      </SlideElementWrapper>
+    </Slide>
+    <Slide>
+      <p>I'm a static slide element that should always show</p>
+      <p>This means that we don't need a SlideElementWrapper</p>
+      <SlideElementWrapper elementNum={0}>
+        <p slide-element="true"> ZERO Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <SlideElementWrapper elementNum={1}>
+        <p slide-element="true"> ONE Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <SlideElementWrapper elementNum={2}>
+        <p slide-element="true"> TWO Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <p>I'm also a static non-animated "slide element"!</p>
+    </Slide>
+    <div>HEY PHIL. YOU DOUBTED US???</div>
+  </Deck>
+);
+
+export default TestJs;

index.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import { render } from 'react-dom';
+
+// START: test components to try rendering:
 import MDXDocument from './examples/MDX/test.mdx';
+import TestJs from './examples/JS/TestJS.js';
+// END: test components to try rendering
 
 /**
  * Experiment to test MDX -> JSX transpilation through babel.
@@ -9,4 +13,4 @@ import MDXDocument from './examples/MDX/test.mdx';
  * to hot-reload with new contents.
  */
 
-render(<MDXDocument />, document.getElementById('root'));
+render(<TestJs />, document.getElementById('root'));

src/components/Deck.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import useDeck, { DeckContext } from '../hooks/useDeck';
+import isComponentType from '../utils/isComponentType.js';
 
 /**
  * Provides top level state/context provider with useDeck hook
@@ -16,8 +17,19 @@ const Deck = props => {
   // Check for slides and then number slides.
   const Slides = Array.isArray(props.children)
     ? props.children
-        .filter(x => x.props.mdxType === 'Slide')
-        .map((x, i) => ({ ...x, props: { ...x.props, slideNum: i } }))
+        .filter(x => isComponentType(x, 'Slide'))
+        /** One idea is to remove the above filter, and use the `else`
+         * in the map below to allow non-Slide elements to always appear.
+         * At the moment, these break the slide navigation as this hook
+         * is only used by the slides...
+         */
+        .map((x, i) => {
+          if (isComponentType(x, 'Slide')) {
+            return { ...x, props: { ...x.props, slideNum: i } };
+          } else {
+            return x;
+          }
+        })
     : props.children;
 
   // Initialise useDeck hook and get state and dispatch off of it

src/components/Slide.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import useSlide, { SlideContext } from '../hooks/useSlide';
 import { DeckContext } from '../hooks/useDeck';
+import isComponentType from '../utils/isComponentType.js';
 
 /**
  *
@@ -30,9 +31,8 @@ const Slide = props => {
   const initialState = { currentSlideElement: 0 };
   const { children, slideNum } = props;
 
-  const numberOfSlideElements = Array.isArray(props.children)
-    ? props.children.filter(x => x.props.mdxType === 'SlideElementWrapper')
-        .length
+  const numberOfSlideElements = Array.isArray(children)
+    ? children.filter(x => isComponentType(x, 'SlideElementWrapper')).length
     : 0;
   const isActive = slideNum === state.currentSlide;
 
@@ -48,7 +48,7 @@ const Slide = props => {
       <SlideContext.Provider
         value={useSlide(initialState, isActive, numberOfSlideElements)}
       >
-        {props.children}
+        {children}
       </SlideContext.Provider>
     </div>
   );

src/utils/isComponentType.js

@@ -0,0 +1,10 @@
+/** isComponentType(Component, String)
+ * Takes Component and name (String) of component type you want to test for
+ * Returns a boolean
+ * Turned into a util to avoid having to repeatedly check:
+ * mdx or regular component types.
+ * May be unnecessary in future, if we treat MDX differently
+ */
+
+export default (component, name) =>
+  component.props.mdxType === name || component.type.name === name;