Function SessionPage

packages/web/src/routes/session.tsx:50–110

()

};

function SessionPage() {
  const { config, srcbooks, session } = useLoaderData() as SessionLoaderDataType;

  // Because we use refs for our state, we need a way to trigger
  // component re-renders when the ref state changes.
  //
  // https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
  //
  const [, forceComponentRerender] = useReducer((x) => x + 1, 0);

  const channelRef = useRef(SessionChannel.create(session.id));
  const connectedSessionIdRef = useRef<SessionType['id'] | null>(null);
  const connectedSessionLanguageRef = useRef<SessionType['language'] | null>(null);
  const channel = channelRef.current;

  useEffect(() => {
    if (connectedSessionIdRef.current === session.id) {
      return;
    }

    const oldChannel = channelRef.current;

    // Disconnect from the previously connected session
    if (connectedSessionIdRef.current) {
      oldChannel.unsubscribe();

      if (connectedSessionLanguageRef.current === 'typescript') {
        oldChannel.push('tsserver:stop', {});
      }
    }

    // Reconnect to the new session
    channelRef.current = SessionChannel.create(session.id);
    connectedSessionIdRef.current = session.id;
    connectedSessionLanguageRef.current = session.language;

    const channel = channelRef.current;

    channel.subscribe();

    if (session.language === 'typescript') {
      channel.push('tsserver:start', {});
    }

    forceComponentRerender();
  }, [session.id, session.language, forceComponentRerender]);

  return (
    <CellsProvider cells={session.cells}>
      <PackageJsonProvider channel={channel}>
        <TsConfigProvider session={session} channel={channel}>
          {VITE_SRCBOOK_DEBUG_RENDER_SESSION_AS_READ_ONLY ? (
            <Session readOnly session={session} srcbooks={srcbooks} config={config} />
          ) : (
            <Session session={session} channel={channel} srcbooks={srcbooks} config={config} />
          )}
        </TsConfigProvider>
      </PackageJsonProvider>