Repository: FormidableLabs/spectacle (ts)

Issue:
Appear Doesn't Work if Not Directly a Child of Slide
I am using version 6.0.0. Here is a very simple example to replicate this.

```
<Slide>
  <Heading>Slide 1</Heading>
  <Box>
    <OrderedList>
      <Appear elementNum={0}>
        <ListItem>Item 1</ListItem>
      </Appear>
      <Appear elementNum={1}>
        <ListItem>Item 2</ListItem>
      </Appear>
    </OrderedList>
  </Box>
</Slide>
```
I've placed the `OrderedList` inside a box and the Appear doesn't seem to work. However, if I move the `OrderedList` to be directly a child of `Slide`, then it works as expected.

Thanks

Pull request description:
Fixes Nested Appear Elements Not Being Discovered
Fixes #863

Patch:
diff --git a/src/components/code-pane.js b/src/components/code-pane.js
index 6248834..a95fbc0 100644
--- a/src/components/code-pane.js
+++ b/src/components/code-pane.js
@@ -97,7 +97,7 @@ export default function CodePane(props) {
         {...defaultProps}
         code={props.children}
         language={props.language}
-        theme={printMode ? lightTheme : theme}
+        theme={printMode ? lightTheme : props.theme}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre
diff --git a/src/utils/search-children-appear.js b/src/utils/search-children-appear.js
index fb4d524..a32f954 100644
--- a/src/utils/search-children-appear.js
+++ b/src/utils/search-children-appear.js
@@ -2,14 +2,17 @@ import isComponentType from '../utils/is-component-type';
 import Appear from '../components/appear';
 
 export default function searchChildrenForAppear(children) {
-  if (!Array.isArray(children)) {
+  const isSingleChild = children?.props?.children ?? false;
+
+  if (!Array.isArray(children) && !isSingleChild) {
     return 0;
   }
-  return children.reduce((memo, current) => {
+
+  return (isSingleChild ? [children] : children).reduce((memo, current) => {
     if (isComponentType(current, Appear.name)) {
       memo += 1;
-    } else if (current?.props?.children?.length > 0) {
-      memo += searchChildrenForAppear(current.props.children);
+    } else {
+      memo += searchChildrenForAppear(current?.props?.children);
     }
     return memo;
   }, 0);


Test patch:
diff --git a/src/utils/search-children-appear.test.js b/src/utils/search-children-appear.test.js
index dc4617f..805e5d9 100644
--- a/src/utils/search-children-appear.test.js
+++ b/src/utils/search-children-appear.test.js
@@ -36,4 +36,17 @@ describe('search children for appear', () => {
       ])
     ).toEqual(2);
   });
+
+  it('returns the amount of nested appear elements', () => {
+    expect(
+      searchChildrenForAppear(
+        <div>
+          <Appear elementNum={1}>I am nested</Appear>
+          <div>
+            <Appear elementNum={2}>I am deeply nested</Appear>
+          </div>
+        </div>
+      )
+    ).toEqual(2);
+  });
 });