Merge pull request #12 from macabeus/fix/dispose-emulator

react-gbajs: fix when the emulator is disposed and mounted again

Author: macabeus

src/react/gba-context.ts

@@ -2,6 +2,7 @@ import React, { Ref } from 'react'
 
 const defaultValue = {
   gba: undefined as Gba,
+  clearGbaInstance: (() => {}) as ClearGbaInstance,
   setFpsCallback: (() => {}) as SetFpsCallback,
   canvasRef: undefined as unknown as Ref<HTMLCanvasElement>,
   play: (() => {}) as unknown as Play,

src/react/gba-provider.tsx

@@ -52,9 +52,13 @@ const GbaProvider: FunctionComponent = ({ children }) => {
   const saveState = () =>
     gba.freeze()
 
+  const clearGbaInstance = () =>
+    setGba(undefined)
+
   return (
     <GbaContext.Provider value={{
       gba,
+      clearGbaInstance,
       canvasRef,
       setFpsCallback: (newFpsCallback) => {
         setFpsCallback(newFpsCallback)

src/react/index.tsx

@@ -20,7 +20,12 @@ const ReactGbaJs: FunctionComponent<Props> = ({
   onLogReceived = () => {},
   scale = 1,
 }) => {
-  const { gba, setFpsCallback, canvasRef } = useContext(GbaContext)
+  const {
+    gba,
+    clearGbaInstance,
+    setFpsCallback,
+    canvasRef,
+  } = useContext(GbaContext)
 
   useEffect(() => {
     setFpsCallback(onFpsReported)
@@ -32,6 +37,12 @@ const ReactGbaJs: FunctionComponent<Props> = ({
     )
   }, [gba, JSON.stringify(watchLogLevels), onLogReceived])
 
+  useEffect(
+    () =>
+      () => clearGbaInstance(),
+    []
+  )
+
   useEffect(() => {
     if (gba === undefined) {
       return

src/types.d.ts

@@ -1,6 +1,8 @@
 type Gba = any
 type State = any
 
+type ClearGbaInstance = () => void
+
 type FpsCallback = (fps: number) => void
 
 type FrozenAddress = { size: 8 | 16 | 32, value: number }