Repository: remix-run/react-router
File: packages/react-router-dev/vite/plugin.ts (TypeScript)

Code before:

function addRefreshWrapper(
  reactRouterConfig: ResolvedReactRouterConfig,
  code: string,
  id: string
): string {
  let route = getRoute(reactRouterConfig, id);
  let acceptExports =
    route || isRouteEntry(id)
      ? [
          "clientAction",
          "clientLoader",
          "handle",
          "meta",
          "links",
          "shouldRevalidate",
        ]
      : [];
  return (
    REACT_REFRESH_HEADER.replaceAll("__SOURCE__", JSON.stringify(id)) +
    code +
    REACT_REFRESH_FOOTER.replaceAll("__SOURCE__", JSON.stringify(id))
      .replaceAll("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports))
      .replaceAll("__ROUTE_ID__", JSON.stringify(route?.id))
  );
}

const REACT_REFRESH_HEADER = `
import RefreshRuntime from "${hmrRuntimeId}";

const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
let prevRefreshReg;
let prevRefreshSig;

if (import.meta.hot && !inWebWorker) {
  if (!window.__vite_plugin_react_preamble_installed__) {
    throw new Error(
      "React Router Vite plugin can't detect preamble. Something is wrong."
    );
  }

  prevRefreshReg = window.$RefreshReg$;
  prevRefreshSig = window.$RefreshSig$;
  window.$RefreshReg$ = (type, id) => {
    RefreshRuntime.register(type, __SOURCE__ + " " + id)
  };
  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}`.replace(/\n+/g, "");

const REACT_REFRESH_FOOTER = `
if (import.meta.hot && !inWebWorker) {

Review comment (suggestion):
Should this one be left off? When reading the compiled source code, typically I'm looking for this bit — it's only the other blocks I'm trying to ignore, which is where the comments are nice.

Code after:

function addRefreshWrapper(
  reactRouterConfig: ResolvedReactRouterConfig,
  code: string,
  id: string
): string {
  let route = getRoute(reactRouterConfig, id);
  let acceptExports =
    route || isRouteEntry(id)
      ? [
          "clientAction",
          "clientLoader",
          "handle",
          "meta",
          "links",
          "shouldRevalidate",
        ]
      : [];
  return (
    "\n\n" +
    withCommentBoundaries(
      "REACT REFRESH HEADER",
      REACT_REFRESH_HEADER.replaceAll("__SOURCE__", JSON.stringify(id))
    ) +
    "\n\n" +
    withCommentBoundaries("REACT REFRESH BODY", code) +
    "\n\n" +
    withCommentBoundaries(
      "REACT REFRESH FOOTER",
      REACT_REFRESH_FOOTER.replaceAll("__SOURCE__", JSON.stringify(id))
        .replaceAll("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports))
        .replaceAll("__ROUTE_ID__", JSON.stringify(route?.id))
    ) +
    "\n"
  );
}

function withCommentBoundaries(label: string, text: string) {
  let begin = `// [BEGIN] ${label} `;
  begin += "-".repeat(80 - begin.length);
  let end = `// [END] ${label} `;
  end += "-".repeat(80 - end.length);
  return `${begin}\n${text}\n${end}`;
}

const REACT_REFRESH_HEADER = `
import RefreshRuntime from "${hmrRuntimeId}";

const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
let prevRefreshReg;
let prevRefreshSig;