app/index.tsx

Rama main · réplica de lectura del repositorio original.

import "vite/modulepreload-polyfill";
// Keep ahead of the other imports so polyfills apply before they evaluate.
import "~/utils/polyfills";
import { LazyMotion, domMax } from "framer-motion";
import { KBarProvider } from "kbar";
import { Provider } from "mobx-react";
import { configure as configureMobx } from "mobx";
import { StrictMode } from "react";
import type { Root } from "react-dom/client";
import { createRoot } from "react-dom/client";
import { Router } from "react-router-dom";
import stores from "~/stores";
import Analytics from "~/components/Analytics";
import Dialogs from "~/components/Dialogs";
import Presentation from "~/components/Presentation";
import ErrorBoundary from "~/components/ErrorBoundary";
import PageTheme from "~/components/PageTheme";
import ScrollToTop from "~/components/ScrollToTop";
import Theme from "~/components/Theme";
import Toasts from "~/components/Toasts";
import env from "~/env";
import { initI18n } from "~/utils/i18n";
import Desktop from "./components/DesktopEventHandler";
import PageScroll from "./components/PageScroll";
import Routes, { preloadShared } from "./routes";
import Logger from "./utils/Logger";
import { PluginManager } from "./utils/PluginManager";
import history from "./utils/history";
import { initSentry } from "./utils/sentry";
import { initSplitViewNavigation } from "./utils/splitView";
import { ActionContextProvider } from "./hooks/useActionContext";

// Load plugins as soon as possible
void PluginManager.loadPlugins();

initI18n(env.DEFAULT_LANGUAGE);

// Register ahead of rendering so the capture-phase listeners run before any
// React-mounted listener, such as kbar's Enter handler.
initSplitViewNavigation(history);

// The dev server can evaluate this module twice (plain and HMR-timestamped
// URL). Unlike ReactDOM.render, createRoot must not be called twice on the
// same container, so the root is stored on the element and reused.
interface RootElement extends HTMLElement {
  __reactRoot?: Root;
}

const element: RootElement | null = window.document.getElementById("root");

if (env.SENTRY_DSN) {
  initSentry(history);
}

configureMobx({
  enforceActions: env.isDevelopment ? "observed" : "never",
  computedRequiresReaction: true,
  isolateGlobalState: true,
});

const commandBarOptions = {
  animations: {
    enterMs: 250,
    exitMs: 200,
  },
};

if (element) {
  const App = () => (
    <StrictMode>
      <Provider rootStore={stores}>
        <Analytics>
          <Router history={history}>
            <Theme>
              <ActionContextProvider>
                <ErrorBoundary showTitle>
                  <KBarProvider actions={[]} options={commandBarOptions}>
                    <LazyMotion features={domMax}>
                      <PageScroll>
                        <PageTheme />
                        <ScrollToTop>
                          <Routes />
                        </ScrollToTop>
                        <Toasts />
                        <Dialogs />
                        <Presentation />
                        <Desktop />
                      </PageScroll>
                    </LazyMotion>
                  </KBarProvider>
                </ErrorBoundary>
              </ActionContextProvider>
            </Theme>
          </Router>
        </Analytics>
      </Provider>
    </StrictMode>
  );

  // A lazy chunk that suspends the first render holds back the content for
  // 300ms after it loads, so share pages wait for their chunks before render.
  const ready = env.isShare
    ? preloadShared().catch(() => undefined)
    : Promise.resolve();

  void ready.then(() => {
    element.__reactRoot ??= createRoot(element);
    element.__reactRoot.render(<App />);
  });
}

window.addEventListener("load", async () => {
  // installation does not use Google Analytics, or tracking is blocked on client
  // no point loading the rest of the analytics bundles
  if (!env.GOOGLE_ANALYTICS_ID || !window.ga) {
    return;
  }
  await import("~/utils/autotrack");
  window.ga("require", "outboundLinkTracker");
  window.ga("require", "urlChangeTracker");
  window.ga("require", "eventTracker", {
    attributePrefix: "data-",
  });
});

// Skip registration on public share views, anonymous visitors gain nothing
// from having the app precached.
if (
  "serviceWorker" in navigator &&
  env.ENVIRONMENT !== "development" &&
  !env.isShare
) {
  window.addEventListener("load", () => {
    // see: https://bugs.chromium.org/p/chromium/issues/detail?id=1097616
    // In some rare (<0.1% of cases) this call can return `undefined`
    const maybePromise = navigator.serviceWorker.register("/static/sw.js", {
      scope: "/",
    });

    if (maybePromise?.then) {
      maybePromise
        .then((registration) => {
          Logger.debug(
            "lifecycle",
            "[ServiceWorker] Registered.",
            registration
          );
        })
        .catch((registrationError) => {
          Logger.debug(
            "lifecycle",
            "[ServiceWorker] Registration failed.",
            registrationError
          );
        });
    }
  });
}