toasterTypes: change toaster to ref

Instead of rendering the toaster separate from the main index, add it
there so we can inherit all of the context providers. This requires
passing the ref object instead of the toaster instance itself, so
sagas have to be updated.

src/alerts/UnexpectedErrorAlert.tsx

@@ -12,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 import React, { useState } from 'react';
 import { useId } from 'react-aria';
-import { CreateToast } from '../i18nToaster';
+import type { CreateToast } from '../toasterTypes';
 import { useI18n } from './i18n';
 
 type UnexpectedErrorAlertProps = {

src/alerts/sagas.test.ts

@@ -54,7 +54,7 @@ describe('handleShowAlert', () => {
         toaster = new TestToaster();
         jest.spyOn(toaster, 'show');
         jest.spyOn(toaster, 'dismiss');
-        saga = new AsyncSaga(alerts, { toaster });
+        saga = new AsyncSaga(alerts, { toasterRef: { current: toaster } });
     });
 
     it('should show toast', async () => {

src/alerts/sagas.ts

@@ -1,17 +1,19 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { ToasterInstance } from '@blueprintjs/core';
 import { eventChannel } from 'redux-saga';
 import { delay, getContext, put, take, takeEvery } from 'typed-redux-saga/macro';
 import { getAlertProps } from '../alerts';
+import type { ToasterRef } from '../toasterTypes';
+import { defined } from '../utils';
 import { alertsDidShowAlert, alertsShowAlert } from './actions';
 
-export type AlertsSagaContext = { toaster: ToasterInstance };
+export type AlertsSagaContext = { toasterRef: ToasterRef };
 
 /** Shows an alert to the user and avoids duplicate alerts. */
 function* handleShowAlert(action: ReturnType<typeof alertsShowAlert>): Generator {
-    const toaster = yield* getContext<ToasterInstance>('toaster');
+    const toaster = (yield* getContext<ToasterRef>('toasterRef')).current;
+    defined(toaster);
 
     const key = `${action.domain}.${action.specific}.${JSON.stringify(action.props)}`;