v2.1.4 - Bug fix for route boundaries

package.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools.",
   "author": "Alem Tuzlak",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "license": "MIT",
   "keywords": [
     "remix",

src/RemixDevTools/hooks/useOutletAugment.tsx

@@ -1,24 +1,30 @@
 import { useEffect } from "react";
 import { InvisibleBoundary } from "../init/project";
 
-const isHooked = Symbol("isHooked");
+const isHooked = Symbol("isHooked") as any;
+
 export function useOutletAugment() {
   useEffect(() => {
-    if (window.__remixRouteModules[isHooked as any]) return;
+    if (window.__remixRouteModules[isHooked]) return;
 
     window.__remixRouteModules = new Proxy(window.__remixRouteModules, {
       get: function (target, property) {
-        if (property === isHooked) return target[property as any];
+        const key = property as any;
+        if (property === isHooked) return target[key];
         if (property === "root") return target[property];
-        const value = target[property as any];
+        const value = target[key];
 
         if (value?.default && value.default.name !== "hooked") {
           return {
             ...value,
             default: function hooked() {
+              // Does not pollute the DOM with invisible boundaries after the first render
+              if (document.getElementsByClassName(key).length) {
+                return <value.default />;
+              }
               return (
                 <>
-                  <InvisibleBoundary path={property as any} />
+                  <InvisibleBoundary path={key} />
                   <value.default />
                 </>
               );