Merge pull request #11956 from remix-run/pedro/comment-boundaries-for-react-refresh

comment boundaries for react refresh transforms

Author: pcattori

packages/react-router-dev/vite/plugin.ts

@@ -1646,14 +1646,32 @@ function addRefreshWrapper(
         ]
       : [];
   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))
+    "\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}";
 
@@ -1674,7 +1692,7 @@ if (import.meta.hot && !inWebWorker) {
     RefreshRuntime.register(type, __SOURCE__ + " " + id)
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
-}`.replace(/\n+/g, "");
+}`.trim();
 
 const REACT_REFRESH_FOOTER = `
 if (import.meta.hot && !inWebWorker) {
@@ -1689,7 +1707,7 @@ if (import.meta.hot && !inWebWorker) {
       if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
     });
   });
-}`;
+}`.trim();
 
 function getRoute(
   pluginConfig: ResolvedReactRouterConfig,