search

xzdarcy / react-timeline-editor

react-timeline-editor is a react component used to quickly build a timeline animation editor.
https://zdarcy.com/
MIT License
284 stars 82 forks source link

fix(emitter): make offAll() keep events names #18

Closed acdcjunior closed 1 year ago

acdcjunior commented 1 year ago

What

Change the logic of Emitter#offAll() to keep the names of events (instead of resetting them all).

Why

I was getting the following error when trying to run locally the engine-basic demo:

image

Text version:

       Uncaught Error: The event play does not exist
    at index.esm.js:224:17
    at Array.forEach (<anonymous>)
    at TimelineEngine2.on (index.esm.js:222:14)
    at player.tsx:21:21
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25154:13)
    at invokeEffectsInDev (react-dom.development.js:27351:11)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:7)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
    at flushPassiveEffects (react-dom.development.js:26984:14)

       Uncaught Error: The event setTimeByTick does not exist
    at index.esm.js:224:17
    at Array.forEach (<anonymous>)
    at TimelineEngine2.on (index.esm.js:222:14)
    at index.esm.js:2697:23
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25154:13)
    at invokeEffectsInDev (react-dom.development.js:27351:11)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:7)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
    at flushPassiveEffects (react-dom.development.js:26984:14)

       The above error occurred in the <TimelinePlayer> component:

    at TimelinePlayer (http://localhost:5174/src/engineBasic/player.tsx:27:3)
    at div
    at TimelineEditor (http://localhost:5174/src/engineBasic/index.tsx:28:27)
    at div
    at App (http://localhost:5174/src/App.tsx:40:27)

       The above error occurred in the <ForwardRef> component:

    at http://localhost:5174/node_modules/.vite/deps/@xzdarcy_react-timeline-editor.js?v=96caccdc:12742:22
    at div
    at TimelineEditor (http://localhost:5174/src/engineBasic/index.tsx:28:27)
    at div
    at App (http://localhost:5174/src/App.tsx:40:27)

       Uncaught Error: The event play does not exist
    at index.esm.js:224:17
    at Array.forEach (<anonymous>)
    at TimelineEngine2.on (index.esm.js:222:14)
    at player.tsx:21:21
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25154:13)
    at invokeEffectsInDev (react-dom.development.js:27351:11)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:7)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
    at flushPassiveEffects (react-dom.development.js:26984:14)

Root cause

I believe this happened because the .offAll() was called in the cleanup callback of the effect at TimelinePlayer:

https://github.com/xzdarcy/react-timeline-editor/blob/9079b723a4f9c3eb5e97fe805cd8a8ee8a760be4/docs/engine/engine-basic/player.tsx#L34-L40

And this cleanup was being called due to React's strict mode.