FormidableLabs / FormidableLabs/spectacle

Appear component does not function when placed in an MDX file

Open
#870 3 comments 1 reaction 1 assignee Claimed by @mhink View on GitHub
✓ Verified 🐛 Bug
Dominant language
TypeScript
Stars
10.2k
Forks
700
PR merge metrics
No merged PRs in 30d

Description

### Describe Your Environment

What version of Spectacle are you using?
`spectacle@6.0.1`

What version of React are you using?
`react@16.13.1`

What browser are you using?
Chrome 80.0.3987.149

What machine are you on?
MacBook Pro (15-inch 2017)

### Describe the Problem

Appear component does not function when placed in an MDX file.

**Expected behavior:**
Slide navigation should step through Appear steps before moving to next slide.

**Actual behavior:**
Slide navigation skips Appear steps and moves to next slide.

### Additional Information

#### These were the steps I took to setup a project:

1. Install global dependencies
```npm i typescript spectacle-cli -g```

2. Create a new presentation
```spectacle-boilerplate --mode mdx --dir "some-presentation"```

3. Add TypeScript support
```
yarn add typescript @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript -D
tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib
```

4. Add a `.babelrc` file
```
{
"presets": ["@babel/env", "@babel/typescript", "@babel/preset-react"],
"plugins": ["@babel/proposal-class-properties"]
}
```

5. Update `webpack.config.js`
```
// Add this to module.exports
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
}
// Change test: /\.(jsx)?$/, to
test: /\.(ts|js)x?$/,
```

#### How was I able to even render an Appear component in MDX?
By updating the `mdxComponentMap` to include the `Appear` tag and then mapping this to the Appear component:

```
const Presentation = () => (

}}
>

{slides
.map((MDXSlide, i) => [MDXSlide, notes[i]])
.map(([MDXSlide, MDXNote], i) => (






))}


);
```

This allows markdown to be written like so:
```

- Lorem ipsum
- Lorem ipsum
- Lorem ipsum

```

And it is correctly rendering the expected HTML

```



  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum



```

However, the component is not detected by the `searchChildrenForAppear` function and this results in the navigator not being able to step through these Appear steps. Here's where that function gets called:
https://github.com/FormidableLabs/spectacle/blob/ecd313b6ad02aa9a769a8dc46bb300613e26aea9/src/components/deck/index.js#L143

Any assistance would be greatly appreciated 🙌

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.