Improve compatibility with older browsers (#227)

- Avoid using top-level await to improve compatibility with older browsers. - Change build target for better browser support. - Fix i18n tests - Check Bluetooth availability asynchronously
microbit-foundation · Feb 22, 2024 · 254bb4c · 254bb4c
1 parent 17c9ea8
commit 254bb4c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 58 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -30,6 +30,7 @@
     ConnectDialogStates,
     connectionDialogState,
   } from './script/stores/connectDialogStore';
+  import { isLoading } from 'svelte-i18n';
 
   onMount(() => {
     const { bluetooth, usb } = $compatibility;
@@ -51,50 +52,51 @@
   }
 </script>
 
-<Router>
-  <div class="sr-only" bind:this={routeAnnouncementEl} aria-live="polite" />
-  {#if !$compatibility.platformAllowed}
-    <!-- Denies mobile users access to the platform -->
-    <IncompatiblePlatformView />
-  {:else}
-    <div class="h-full w-full m-0 relative flex">
-      <OverlayView />
-      <!-- Wait for consent dialog to avoid a clash -->
-      {#if $consent}
-        <CompatibilityWarningDialog />
-      {/if}
-
-      <div class="w-full flex flex-col bg-backgrounddark">
-        <ControlBar>
-          <div class="flex items-center divide-x h-full">
-            <div class="h-32px flex items-center">
-              <img class="pr-3 w-166px" src={microbitLogoImage} alt="micro:bit" />
+{#if !$isLoading}
+  <Router>
+    <div class="sr-only" bind:this={routeAnnouncementEl} aria-live="polite" />
+    {#if !$compatibility.platformAllowed}
+      <!-- Denies mobile users access to the platform -->
+      <IncompatiblePlatformView />
+    {:else}
+      <div class="h-full w-full m-0 relative flex">
+        <OverlayView />
+        <!-- Wait for consent dialog to avoid a clash -->
+        {#if $consent}
+          <CompatibilityWarningDialog />
+        {/if}
+        <div class="w-full flex flex-col bg-backgrounddark">
+          <ControlBar>
+            <div class="flex items-center divide-x h-full">
+              <div class="h-32px flex items-center">
+                <img class="pr-3 w-166px" src={microbitLogoImage} alt="micro:bit" />
+              </div>
+              <div class="h-32px flex items-center">
+                <img
+                  class="pl-3 mt-2px w-253px"
+                  src={appNameImage}
+                  alt={$t('content.index.title')} />
+              </div>
             </div>
-            <div class="h-32px flex items-center">
-              <img
-                class="pl-3 mt-2px w-253px"
-                src={appNameImage}
-                alt={$t('content.index.title')} />
+            <div class="flex gap-5">
+              <a
+                class="text-xl p-2 rounded-full outline-none focus-visible:ring-ringBright focus-visible:ring-4 focus-visible:ring-offset-1"
+                href={Paths.HOME}
+                on:click|preventDefault={() => navigate(Paths.HOME)}>
+                <span class="sr-only">{$t('homepage.Link')}</span>
+                <HomeIcon class="text-white" aria-hidden />
+              </a>
+              <SettingsMenu />
+              <HelpMenu />
             </div>
-          </div>
-          <div class="flex gap-5">
-            <a
-              class="text-xl p-2 rounded-full outline-none focus-visible:ring-ringBright focus-visible:ring-4 focus-visible:ring-offset-1"
-              href={Paths.HOME}
-              on:click|preventDefault={() => navigate(Paths.HOME)}>
-              <span class="sr-only">{$t('homepage.Link')}</span>
-              <HomeIcon class="text-white" aria-hidden />
-            </a>
-            <SettingsMenu />
-            <HelpMenu />
-          </div>
-        </ControlBar>
+          </ControlBar>
 
-        <div class="relative flex-1 flex-row">
-          <PageContentView />
+          <div class="relative flex-1 flex-row">
+            <PageContentView />
+          </div>
         </div>
       </div>
-    </div>
-  {/if}
-</Router>
-<ConnectDialogContainer />
+    {/if}
+  </Router>
+  <ConnectDialogContainer />
+{/if}
diff --git a/src/__tests__/i18n.test.ts b/src/__tests__/i18n.test.ts
@@ -32,11 +32,11 @@ describe('Initialization tests', () => {
         search: '',
       },
     }));
-    const i18n = await import('../i18n');
-    const getText = get(i18n.t);
+    const { t, waitLocale } = await import('../i18n');
+    await waitLocale();
+    const getText = get(t);
 
     const translatedText = getText('alert.isRecording');
-
     expect(translatedText).toBe("Rydych chi'n recordio ar hyn o bryd!");
   });
 
@@ -49,11 +49,11 @@ describe('Initialization tests', () => {
         search: '',
       },
     }));
-    const i18n = await import('../i18n');
-    const getText = get(i18n.t);
+    const { t, waitLocale } = await import('../i18n');
+    await waitLocale();
+    const getText = get(t);
 
     const translatedText = getText('alert.isRecording');
-
     expect(translatedText).toBe('You are currently recording!');
   });
 
@@ -66,11 +66,11 @@ describe('Initialization tests', () => {
         search: '?l=cy',
       },
     }));
-    const i18n = await import('../i18n');
-    const getText = get(i18n.t);
+    const { t, waitLocale } = await import('../i18n');
+    await waitLocale();
+    const getText = get(t);
 
     const translatedText = getText('alert.isRecording');
-
     expect(translatedText).toBe("Rydych chi'n recordio ar hyn o bryd!");
   });
 });
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -9,7 +9,8 @@ import { FormatXMLElementFn } from 'intl-messageformat';
 import { getLocaleFromQueryString, init, locale, register } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { persistantWritable } from './script/stores/storeUtil';
-export { t } from 'svelte-i18n';
+// waitLocale is exported for testing.
+export { t, waitLocale } from 'svelte-i18n';
 
 type InterpolationValues =
   | Record<
@@ -69,7 +70,7 @@ locale.subscribe(newLocal => {
   }
 });
 
-await init({
+init({
   fallbackLocale: 'en',
   initialLocale: get(persistantLocale),
   // Needed to format <link> style tags.

diff --git a/src/script/compatibility/CompatibilityChecker.ts b/src/script/compatibility/CompatibilityChecker.ts
@@ -15,7 +15,7 @@ export type CompatibilityStatus = {
   webGL: boolean;
 };
 
-export async function checkCompatibility(): Promise<CompatibilityStatus> {
+export function checkCompatibility(): CompatibilityStatus {
   if (localStorage.getItem('isTesting')) {
     return { bluetooth: true, usb: true, platformAllowed: true, webGL: true };
   }
@@ -37,10 +37,9 @@ export async function checkCompatibility(): Promise<CompatibilityStatus> {
     platformType = 'desktop';
   }
   const isPlatformAllowed = isDevMode || !nonAllowedPlatforms.includes(platformType);
-  const bluetooth = navigator.bluetooth && (await navigator.bluetooth.getAvailability());
 
   return {
-    bluetooth,
+    bluetooth: !!navigator.bluetooth,
     usb: !!navigator.usb,
     platformAllowed: isPlatformAllowed,
     webGL: webGL,

diff --git a/src/script/stores/uiStore.ts b/src/script/stores/uiStore.ts
@@ -14,13 +14,26 @@ import MBSpecs from '../microbit-interfacing/MBSpecs';
 import { gestures } from './Stores';
 import { HexOrigin } from '../../StaticConfiguration';
 import { DeviceRequestStates } from '../microbit-interfacing/MicrobitConnection';
+import { logError } from '../utils/logging';
 
 // TODO: Rename? Split up further?
 
 let text: (key: string, vars?: object) => string;
 t.subscribe(t => (text = t));
 
-export const compatibility = writable<CompatibilityStatus>(await checkCompatibility());
+const compatibilityResult = checkCompatibility();
+export const compatibility = writable<CompatibilityStatus>(compatibilityResult);
+if (compatibilityResult.bluetooth) {
+  navigator.bluetooth
+    .getAvailability()
+    .then(bluetoothAvailable => {
+      compatibility.update(s => {
+        s.bluetooth = s.bluetooth && bluetoothAvailable;
+        return s;
+      });
+    })
+    .catch(e => logError('Failed to get Bluetooth availability', e));
+}
 
 export const isCompatibilityWarningDialogOpen = writable<boolean>(false);
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -31,7 +31,7 @@ export default defineConfig({
     'import.meta.env.VITE_APP_VERSION': JSON.stringify(process.env.npm_package_version),
   },
   build: {
-    target: 'esnext',
+    target: 'es2017',
     rollupOptions: {
       input: 'index.html',
     },