Change compatablity checker from static class method to function

Author: JonAlexandra

src/App.svelte

@@ -29,9 +29,9 @@
   import BottomBarMenuView from './views/BottomBarMenuView.svelte';
   import CookieBanner from './components/cookie-bannner/CookieBanner.svelte';
   import { fade } from 'svelte/transition';
-  import { state } from './script/stores/uiStore';
+  import { compatibility, state } from './script/stores/uiStore';
   import LoadingSpinner from './components/LoadingSpinner.svelte';
-  import CompatibilityChecker from './script/compatibility/CompatibilityChecker';
+  import { checkCompatibility } from './script/compatibility/CompatibilityChecker';
   import IncompatiblePlatformView from './views/IncompatiblePlatformView.svelte';
   import BluetoothIncompatibilityWarningDialog from './components/BluetoothIncompatibilityWarningDialog.svelte';
   import CookieManager from './script/CookieManager';
@@ -47,10 +47,11 @@
     CookieManager.unsetReconnectFlag();
   }
 
+
   document.title = Environment.pageTitle;
 </script>
 
-{#if !CompatibilityChecker.checkCompatibility().platformAllowed}
+{#if !checkCompatibility().platformAllowed}
   <!-- Denies mobile users access to the platform -->
   <IncompatiblePlatformView />
 {:else}

src/components/connection-prompt/usb/FindUsbDialog.svelte

@@ -9,8 +9,7 @@
   function onFindUsbClick() {
     Microbits.linkMicrobit()
       .then(() => onFoundUsb())
-      .catch((e: Error) => {
-        console.log(e);
+      .catch(() => {
         onUsbLinkError();
       });
   }

src/script/compatibility/CompatibilityChecker.ts

@@ -12,50 +12,66 @@ export type CompatibilityStatus = {
   bluetooth: boolean;
   usb: boolean;
   platformAllowed: boolean;
-  webGL: boolean
+  webGL: boolean,
+  webUSB: boolean
 };
 
-// TODO: Why is this a class? No constructor, no internal state, and only
-// a single static method. Might as well just be a function?
-class CompatibilityChecker {
-  public static checkCompatibility(): CompatibilityStatus {
-    if (localStorage.getItem('isTesting')) {
-      return { bluetooth: true, usb: true, platformAllowed: true, webGL: true };
-    }
-    const browser = Bowser.getParser(window.navigator.userAgent);
-    const browserName = browser.getBrowser().name ?? 'unknown';
-    const osName = browser.getOS().name ?? 'unknown';
-
-    const canvas = document.createElement("canvas")
-    // TODO: Handle webgl1 vs webgl2 in relation to threejs
-    const webGL = canvas.getContext("webgl") instanceof WebGLRenderingContext
-
-    const browserVersion = browser.getBrowserVersion();
-    if (!browserVersion) {
-      return { bluetooth: false, usb: false, platformAllowed: true, webGL: webGL };
-    }
-    const majorVersion = browser.getBrowserVersion().split('.')[0];
-    const minorVersion = browser.getBrowserVersion().split('.')[1];
-    const semVer: SemVer = new SemVerImpl(majorVersion, minorVersion);
-    const isBluetoothSupported = BTComp.isVersionSupported(browserName, semVer, osName);
-
-    const isUsbSupported = USBComp.isVersionSupported(browserName, semVer, osName);
-    let platformType = browser.getPlatform().type;
-
-    // If platform won't report what it is, just assume desktop (ChromeOS doesnt report it)
-    if (platformType == undefined) {
-      platformType = 'desktop';
-    }
-    const isPlatformAllowed =
-      Environment.isInDevelopment || !nonAllowedPlatforms.includes(platformType);
-
-    return {
-      bluetooth: isBluetoothSupported,
-      usb: isUsbSupported,
-      platformAllowed: isPlatformAllowed,
-      webGL: webGL
-    };
+export function checkCompatibility(): CompatibilityStatus {
+  if (localStorage.getItem('isTesting')) {
+    return { bluetooth: true, usb: true, platformAllowed: true, webGL: true, webUSB: true };
+  }
+  const browser = Bowser.getParser(window.navigator.userAgent);
+  const browserName = browser.getBrowser().name ?? 'unknown';
+  const osName = browser.getOS().name ?? 'unknown';
+
+  const canvas = document.createElement("canvas")
+  // TODO: Handle webgl1 vs webgl2 in relation to threejs
+  const webGL = canvas.getContext("webgl") instanceof WebGLRenderingContext
+
+  const webUSB = false // Check for this is async, so another function is used
+  // try {
+  //   await navigator.usb.getDevices()
+  //   webUSB = true
+  // } catch {
+  //   webUSB = false
+  // }
+
+  const browserVersion = browser.getBrowserVersion();
+  if (!browserVersion) {
+    return { bluetooth: false, usb: false, platformAllowed: true, webGL: webGL, webUSB };
+  }
+  const majorVersion = browser.getBrowserVersion().split('.')[0];
+  const minorVersion = browser.getBrowserVersion().split('.')[1];
+  const semVer: SemVer = new SemVerImpl(majorVersion, minorVersion);
+  const isBluetoothSupported = BTComp.isVersionSupported(browserName, semVer, osName);
+
+  const isUsbSupported = USBComp.isVersionSupported(browserName, semVer, osName);
+  let platformType = browser.getPlatform().type;
+
+  // If platform won't report what it is, just assume desktop (ChromeOS doesnt report it)
+  if (platformType == undefined) {
+    platformType = 'desktop';
+  }
+  const isPlatformAllowed =
+    Environment.isInDevelopment || !nonAllowedPlatforms.includes(platformType);
+
+  return {
+    bluetooth: isBluetoothSupported,
+    usb: isUsbSupported,
+    platformAllowed: isPlatformAllowed,
+    webGL: webGL,
+    webUSB: webUSB
+  };
+}
+
+export async function checkUSBCompatibility(): Promise<boolean> {
+  try {
+    await navigator.usb.getDevices()
+    return true
+  } catch {
+    return false
   }
 }
+// }
 
-export default CompatibilityChecker;
+// export default CompatibilityChecker;

src/script/microbit-interfacing/MicrobitUSB.ts

@@ -24,7 +24,7 @@ class MicrobitUSB extends CortexM {
    * Open prompt for USB connection.
    * @returns {Promise<MicrobitUSB>} A promise that resolves to a new MicrobitUSB object.
    */
-  public static async requestConnection(): Promise<MicrobitUSB | undefined> {
+  public static async requestConnection(): Promise<MicrobitUSB> {
     const requestOptions: USBDeviceRequestOptions = {
       filters: [
         {

src/script/stores/uiStore.ts

@@ -1,18 +1,29 @@
 import { get, writable } from 'svelte/store';
-import CompatibilityChecker,  { type CompatibilityStatus } from '../compatibility/CompatibilityChecker';
+import { 
+  type CompatibilityStatus, 
+  checkCompatibility, 
+  checkUSBCompatibility 
+} from '../compatibility/CompatibilityChecker';
 import { t } from '../../i18n';
 import { gestures } from './mlStore';
 import { DeviceRequestStates } from './connectDialogStore';
-import exp from 'constants';
 
 // TODO: Rename? Split up further?
 
 let text: (key: string, vars?: object) => string;
 t.subscribe(t => (text = t));
 
 export const compatibility = writable<CompatibilityStatus>(
-  CompatibilityChecker.checkCompatibility(),
+  checkCompatibility(),
 );
+
+void checkUSBCompatibility().then(webUSB => 
+  compatibility.update(old => {
+    old.webUSB = webUSB
+    return old
+  })
+)
+
 export const isBluetoothWarningDialogOpen = writable<boolean>(
   get(compatibility) ? !get(compatibility).bluetooth : false,
 );