diff --git a/package-lock.json b/package-lock.json index cd4ed21..6cef9a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "remix-development-tools", - "version": "2.1.3", + "version": "2.1.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "remix-development-tools", - "version": "2.1.3", + "version": "2.1.4", "license": "MIT", "workspaces": [ ".", diff --git a/package.json b/package.json index 9555915..bb849ee 100644 --- a/package.json +++ b/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", diff --git a/src/RemixDevTools/hooks/useOutletAugment.tsx b/src/RemixDevTools/hooks/useOutletAugment.tsx index 52e2399..1c94bca 100644 --- a/src/RemixDevTools/hooks/useOutletAugment.tsx +++ b/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 ; + } return ( <> - + );