fix 2021.2 build errors

Author: KurtGokhan

public/Unity/injectable/Build/WebInjectable.data

@@ -27,8 +27,8 @@ export const UnityCardridge = forwardRef<UnityCardridgeRef, Props>(
     const setRef = useCallback((el) => {
       if (el) unityContainer.current = el;
     }, [unityContainer]);
-    const { loadUnity, instance, insertTo, insertedToRef } = useGlobalUnity();
-    useEffect(() => loadUnity(undefined), [loadUnity]);
+    const { instance, insertTo, insertedToRef, setLoaded } = useGlobalUnity();
+    useEffect(() => setLoaded(true), [setLoaded]);
 
     const instanceRef = useLatest(instance);
 

public/Unity/injectable/Build/WebInjectable.framework.js

@@ -7,72 +7,59 @@ import { defaultUnityInstanceName, UnityAPI } from './types';
 export interface UnityContextType {
   instance?: UnityAPI;
   component: React.ReactElement | null;
-  loadedId?: string;
-  loadUnity: (id?: string, className?: string) => void;
-  unloadUnity: () => void;
+  setLoaded: React.Dispatch<React.SetStateAction<boolean>>;
   insertTo: (el: HTMLElement | undefined) => void;
   insertedTo?: HTMLElement;
   insertedToRef: MutableRefObject<HTMLElement | undefined>;
 }
 
 const UnityContext = React.createContext<UnityContextType>({
   component: null,
-  loadUnity: () => null,
-  unloadUnity: () => null,
+  setLoaded: () => null,
   insertTo: () => null,
   insertedToRef: { current: undefined },
 });
 
-export function GlobalUnityProvider({ children }: { children?: React.ReactNode }) {
-  const [loadedId, setLoadedId] = React.useState<string | undefined>();
-  const [className, setClassName] = React.useState<string | undefined>();
+export function GlobalUnityProvider(
+  { children, instanceClassName = '', loadedId = defaultUnityInstanceName }:
+    { children?: React.ReactNode, loadedId?: string, instanceClassName?: string }) {
   const [instance, setInstance] = React.useState<UnityAPI>();
+  const [loaded, setLoaded] = React.useState<boolean>(false);
   const [insertedTo, setInsertedTo] = React.useState<HTMLElement>();
   const insertedToRef = React.useRef<HTMLElement>();
 
-  const loadUnity = useCallback((id?: string, className?: string) => {
-    setLoadedId(id || defaultUnityInstanceName);
-    setClassName(className);
-  }, [setLoadedId, setClassName]);
-
-  const unloadUnity = useCallback(() => {
-    setLoadedId(undefined);
-    setClassName(undefined);
-  }, [setLoadedId, setClassName]);
-
-  const component = React.useMemo(() => loadedId == null ? null :
-    <Unity unityRef={setInstance} sampleName={loadedId} className={className} />,
-    [setInstance, loadedId, className]);
-
+  const component = React.useMemo(() => !loaded ? null :
+    <Unity unityRef={setInstance} sampleName={loadedId} className={instanceClassName} />,
+    [setInstance, instanceClassName, loadedId, loaded]);
 
   const container = React.useMemo<HTMLDivElement>(() => {
     const el = typeof document !== 'undefined' && document.createElement('div');
     if (el) el.className = style.globalUnityContainer;
     return el as HTMLDivElement;
   }, []);
 
-  useEffect(() => {
-    return () => container?.remove();
-  }, [container]);
-
   useEffect(() => {
     if (!container) return;
-    if (insertedTo) insertedTo.appendChild(container);
-    else container.remove();
-
-    return () => container.remove();
+    if (insertedTo) {
+      insertedTo.appendChild(container);
+      container.style.display = '';
+    }
+    else {
+      container.style.display = 'none';
+      document.body.appendChild(container);
+    }
   }, [container, insertedTo]);
 
-  const unityPortal = !!container && createPortal(component, container, 'unity-instance');
+  const unityPortal = useMemo(() => !!container && !!component && createPortal(component, container, 'unity-instance'), [container, component]);
 
   const insertTo = useCallback((el?: HTMLElement) => {
     insertedToRef.current = el;
     setInsertedTo(el);
   }, [insertedToRef, setInsertedTo]);
 
   const value = useMemo(() =>
-    ({ loadedId, component, instance, loadUnity, unloadUnity, insertedTo, insertTo, insertedToRef }),
-    [loadedId, component, instance, loadUnity, unloadUnity, insertedTo, insertTo, insertedToRef]);
+    ({ component, instance, insertedTo, insertTo, insertedToRef, setLoaded }),
+    [component, instance, insertedTo, insertTo, insertedToRef, setLoaded]);
 
   return <>
     {unityPortal}

public/Unity/injectable/Build/WebInjectable.wasm

@@ -1,7 +1,8 @@
 
 import cn from 'classnames';
 import Head from 'next/head';
-import React, { LegacyRef, useCallback, useEffect, useState } from 'react';
+import React, { LegacyRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 import style from './index.module.scss';
 import { defaultUnityInstanceName, isLoaderScriptLoaded, UnityAPI, UnityInstance } from './types';
 
@@ -17,6 +18,12 @@ export function Unity({ className, sampleName = defaultUnityInstanceName, unityR
   const [scriptLoaded, setScriptLoaded] = useState(isLoaderScriptLoaded());
   const [unityInstance, setUnityInstance] = useState<UnityAPI>();
 
+  const id = useMemo(() => `unity-canvas-ref-${Math.round(Math.random() * 10000)}`, []);
+
+  const portal = useMemo(() => {
+    return createPortal(<div style={{ width: 0, height: 0 }} id={id} />, document.body, id);
+  }, [id])
+
   const setCanvasRef = useCallback(async canvas => {
     if (!canvas || !scriptLoaded) { return; }
 
@@ -76,13 +83,15 @@ export function Unity({ className, sampleName = defaultUnityInstanceName, unityR
     </Head>
 
     <div className={cn(className, style.host, 'unity')} ref={innerRef}>
-      <canvas className={style.canvas} ref={setCanvasRef} tabIndex={-1} />
+      <canvas id={id} className={style.canvas} ref={setCanvasRef} tabIndex={-1} />
 
       {progress < 1 &&
         <div className={style.progress}>
           <div className={style.spinner}></div>
           <div className={style.progressBar} style={{ paddingRight: ((1 - progress) * 80) + '%' }}></div>
         </div>}
     </div>
+
+    {portal}
   </>;
 }

src/components/unity/cartridge.tsx

@@ -35,10 +35,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     }
   }, []);
   return (
-    <AppShell>
-      <GlobalUnityProvider>
+    <GlobalUnityProvider>
+      <AppShell>
         <Component {...pageProps} />
-      </GlobalUnityProvider>
-    </AppShell>
+      </AppShell>
+    </GlobalUnityProvider>
   );
 }