Auto-Animate fails in React JSX

[pinkboid]

Bug: Auto Animate transitions are instantaneous and there is no syntax color highlighting.

Followed the minimum reproducible example from issue #2784 attempting to use Reveal.js into my vite react application.

Presentation.tsx

import * as React from "react";
import Reveal from 'reveal.js';

import '../node_modules/reveal.js/dist/reset.css'
import '../node_modules/reveal.js/dist/reveal.css'
import '../node_modules/reveal.js/dist/theme/black.css'

export function Presentation() {
    React.useEffect(() => {
        const deck = new Reveal({
            
         })
         deck.initialize();
    },[])

    return (
        <div className="reveal">
            <div className="slides">
                <section>
                    <section data-auto-animate>
                        <pre data-id="foo"><code data-trim data-line-numbers>
                            {`
                            class Main {
                                run() {

                                }
                            }`}
                        </code></pre>
                    </section>
                    <section data-auto-animate>
                        <pre data-id="foo"><code data-trim data-line-numbers="3">
                            {`
                            class Main {
                                run() {
                                    const input = prompt('Enter a command: >')
                                }
                            }`}
                        </code></pre>
                    </section>
                </section>
            </div>
        </div>
    );
}

App.tsx

function App() {
  return (
    <>
      <Presentation />
    </>
  )
}

index.ts

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

index.css

.reveal {
    height: 800px;
    width: 800px;
    border: 1px solid blue;
}

This does get Reveal.js slides rendered to the DOM, and I'm able to transition through the slides using arrow keys, but the transitions are instantaneous, instead of gradually adding the new lines of code. Can be seen here: https://imgur.com/a/q3yRPGp.gif

(also worth noting that the syntax highlighting is totally absent, just white text. Even if I try adding RevealHighlight as a plugin)

To reproduce and test locally, you can clone my repository at https://github.com/pinkboid/testrevealreact and run dev

git clone https://github.com/pinkboid/testrevealreact && cd testrevealreact && npm install && npm run dev

[pinkboid]

Got it working after more experimenting and talking with hakimel over at #3152

There are a few things you gotta do to get this working as an npm dependency in React

1. Manually add the Highlight plugin

import Highlight from 'reveal.js/plugin/highlight/highlight'

         deck.initialize({
            plugins: [ Highlight ] // <-- this line
         });

this solves the instantaneous animations, allowing data-auto-animate gradual transitions. I did not realize I imported it incorrectly the first time.

2. Import a css theme for the highlighting

import 'reveal.js/plugin/highlight/monokai.css'

This solves the all white text, allowing characters to be properly highlighted.

3. Turn off React Strict Mode to prevent component rerendering (if in development mode)

ReactDOM.createRoot(document.getElementById('root')).render(
//   <React.StrictMode>   <-- delete this
    <App />
//   </React.StrictMode>  <-- delete this
)

You either need to do this to prevent double rendering, or find a way to only initialize revealjs once and use deck.sync() on all subsequent rerenders, to avoid a bug where the code snippets shown are a bunch of table elements like shown in this image