New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Appear component does not function when placed in an MDX file #870
Comments
I've found a work around which is a bit hacky but at least it functions:
|
Great find! The MDX loader's main job is translating MD in MDX file to JSX and allowing existing JSX to work. The ---
import { Appear } from 'spectacle';
## Use Spectacle Appear Tag!
<Appear elementNum={0}>
Should appear later!
</Appear> The above does not work, so I think our best starting point is adding the above slide to https://github.com/FormidableLabs/spectacle-mdx-loader/blob/master/examples/mdx/slides.mdx and getting that working with some combination of work in |
It's looking more like something that may be primarily in function MDXContentWrapperSlide1(props) {
/* @jsx mdx */
const makeShortcode = name => function MDXDefaultShortcode(props) {
console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
return <div {...props}/>
};
const layoutProps = {
testProp
};
const MDXLayout = "wrapper";
function MDXContent({
components,
...props
}) {
return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
<h2>{`Use Spectacle Appear Tag!`}</h2>
<Appear elementNum={0} mdxType="Appear">
Should appear later!
</Appear>
</MDXLayout>;
}; |
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:
Install global dependencies
npm i typescript spectacle-cli -g
Create a new presentation
spectacle-boilerplate --mode mdx --dir "some-presentation"
Add TypeScript support
.babelrc
filewebpack.config.js
How was I able to even render an Appear component in MDX?
By updating the
mdxComponentMap
to include theAppear
tag and then mapping this to the Appear component:This allows markdown to be written like so:
And it is correctly rendering the expected HTML
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:spectacle/src/components/deck/index.js
Line 143 in ecd313b
Any assistance would be greatly appreciated 🙌
The text was updated successfully, but these errors were encountered: