meshtastic-web/packages/web/src/index.tsx

import React from "react";
import "@app/index.css";
import { enableMapSet } from "immer";
import "maplibre-gl/dist/maplibre-gl.css";
import { Suspense } from "react";
import { createRoot } from "react-dom/client";
import "./i18n-config.ts";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { router } from "@app/routes.tsx";
import { useAppStore } from "@core/stores/appStore.ts";
import { useMessageStore } from "@core/stores/messageStore/index.ts";
import { useTranslation } from "react-i18next";

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

const container = document.getElementById("root") as HTMLElement;
const root = createRoot(container);

function IndexPage() {
  enableMapSet();
  const appStore = useAppStore();
  const messageStore = useMessageStore();
  const translation = useTranslation();

  const context = React.useMemo(() => ({
    stores: {
      app: appStore,
      message: messageStore,
    },
    i18n: translation,
  }), [appStore, messageStore]);

  return (
    <React.StrictMode>
      <Suspense fallback={null}>
        <RouterProvider router={router} context={context} />
      </Suspense>
    </React.StrictMode>
  );
}

root.render(<IndexPage />);