rossipedia/entry.server.tsx Secret

## entry.server.tsx
...

renderToPipeableStream(
  <HandoffProvider value={{ htmlClasses: 'dark' }}>
    <RemixServer
      context={remixContext}
      url={request.url}
      abortDelay={ABORT_DELAY}
    />
  </HandoffProvider>,
  { ... }
);

...

## handoff.tsx
import stableStringify from 'fast-json-stable-stringify';
import { createContext, useContext } from 'react';
import invariant from 'tiny-invariant';

interface HandoffData {
  htmlClasses: string;
}

declare global {
  interface Window {
    __handoff: HandoffData;
  }
}

const HandoffContext = createContext<HandoffData | undefined>(
  typeof window !== 'undefined' && window.__handoff
    ? window.__handoff
    : undefined
);

export const HandoffProvider = HandoffContext.Provider;

export function Handoff() {
  const data = useHandoff();
  const escapedJson = stableStringify(data).replace(/\\/g, '\\\\');
  const script = `window.__handoff = JSON.parse('${escapedJson}');`;
  return <script dangerouslySetInnerHTML={{ __html: script }} />;
}

export function useHandoff(): HandoffData {
  const data = useContext(HandoffContext);
  invariant(data, 'No handoff data found.');
  return data;
}

## root.tsx
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react';
import { Handoff, useHandoff } from './handoff';

export default function App() {
  const { htmlClasses } = useHandoff();
  return (
    <html lang="en" className={htmlClasses}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        <Handoff />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}
	...

	renderToPipeableStream(
	<HandoffProvider value={{ htmlClasses: 'dark' }}>
	<RemixServer
	context={remixContext}
	url={request.url}
	abortDelay={ABORT_DELAY}
	/>
	</HandoffProvider>,
	{ ... }
	);

	...
	import stableStringify from 'fast-json-stable-stringify';
	import { createContext, useContext } from 'react';
	import invariant from 'tiny-invariant';

	interface HandoffData {
	htmlClasses: string;
	}

	declare global {
	interface Window {
	__handoff: HandoffData;
	}
	}

	const HandoffContext = createContext<HandoffData \| undefined>(
	typeof window !== 'undefined' && window.__handoff
	? window.__handoff
	: undefined
	);

	export const HandoffProvider = HandoffContext.Provider;

	export function Handoff() {
	const data = useHandoff();
	const escapedJson = stableStringify(data).replace(/\\/g, '\\\\');
	const script = `window.__handoff = JSON.parse('${escapedJson}');`;
	return <script dangerouslySetInnerHTML={{ __html: script }} />;
	}

	export function useHandoff(): HandoffData {
	const data = useContext(HandoffContext);
	invariant(data, 'No handoff data found.');
	return data;
	}
	import {
	Links,
	LiveReload,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration,
	} from '@remix-run/react';
	import { Handoff, useHandoff } from './handoff';

	export default function App() {
	const { htmlClasses } = useHandoff();
	return (
	<html lang="en" className={htmlClasses}>
	<head>
	<meta charSet="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<Meta />
	<Links />
	<Handoff />
	</head>
	<body>
	<Outlet />
	<ScrollRestoration />
	<Scripts />
	<LiveReload />
	</body>
	</html>
	);
	}