From e37142bd2c671d452d6e42557819dbc3ca11457d Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 18 Aug 2023 15:08:28 +0200 Subject: [PATCH 1/4] Detached mode support --- .prettierrc | 9 +- README.md | 20 +++ assets/remix-dev-tools.png | Bin 0 -> 4949 bytes package-lock.json | 102 +++++++------- package.json | 6 +- src/RemixDevTools/RemixDevTools.tsx | 22 ++- src/RemixDevTools/components/jsonRenderer.tsx | 30 +--- src/RemixDevTools/context/RDTContext.test.tsx | 130 +++++++++++++++++- src/RemixDevTools/context/RDTContext.tsx | 85 +++++++++--- src/RemixDevTools/context/rdtReducer.ts | 32 +++++ src/RemixDevTools/context/useRDTContext.ts | 49 ++++++- .../hooks/detached/useCheckIfStillDetached.ts | 37 +++++ .../hooks/detached/useListenToRouteChange.ts | 30 ++++ .../hooks/detached/useRefreshDetachedPanel.ts | 49 +++++++ .../hooks/detached/useRemoveBody.ts | 20 +++ .../useSetUnloadDetachedWindowChecks.ts | 8 ++ src/RemixDevTools/hooks/useAttachListener.ts | 83 +++++++++++ src/RemixDevTools/hooks/useDebounce.ts | 20 +++ .../hooks/useHorizontalScroll.ts | 4 - .../hooks/useSetRouteBoundaries.ts | 83 +++++++++++ src/RemixDevTools/hooks/useTabs.ts | 21 +-- src/RemixDevTools/hooks/useTimelineHandler.ts | 30 ++-- src/RemixDevTools/layout/ContentPanel.tsx | 9 +- src/RemixDevTools/layout/MainPanel.tsx | 25 +++- src/RemixDevTools/layout/Tabs.tsx | 115 +++++++++------- src/RemixDevTools/tabs/PageTab.tsx | 26 +--- src/RemixDevTools/tabs/RoutesTab.tsx | 56 +++----- src/RemixDevTools/utils/detached.ts | 11 ++ src/RemixDevTools/utils/storage.test.ts | 53 +++++++ src/RemixDevTools/utils/storage.ts | 15 ++ src/input.css | 5 +- 31 files changed, 925 insertions(+), 260 deletions(-) create mode 100644 assets/remix-dev-tools.png create mode 100644 src/RemixDevTools/hooks/detached/useCheckIfStillDetached.ts create mode 100644 src/RemixDevTools/hooks/detached/useListenToRouteChange.ts create mode 100644 src/RemixDevTools/hooks/detached/useRefreshDetachedPanel.ts create mode 100644 src/RemixDevTools/hooks/detached/useRemoveBody.ts create mode 100644 src/RemixDevTools/hooks/detached/useSetUnloadDetachedWindowChecks.ts create mode 100644 src/RemixDevTools/hooks/useAttachListener.ts create mode 100644 src/RemixDevTools/hooks/useDebounce.ts create mode 100644 src/RemixDevTools/hooks/useSetRouteBoundaries.ts create mode 100644 src/RemixDevTools/utils/detached.ts create mode 100644 src/RemixDevTools/utils/storage.test.ts create mode 100644 src/RemixDevTools/utils/storage.ts diff --git a/.prettierrc b/.prettierrc index 97cce81e..13710b70 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,11 @@ { - "plugins": ["prettier-plugin-tailwindcss"], + "plugins": [ + "prettier-plugin-tailwindcss" + ], "tabWidth": 2, "useTabs": false, "singleQuote": false, "trailingComma": "es5", - "semi": true -} + "semi": true, + "printWidth": 120 +} \ No newline at end of file diff --git a/README.md b/README.md index 6830f493..f38af483 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +
+ +
+ # Remix Development Tools ![GitHub Repo stars](https://img.shields.io/github/stars/Code-Forge-Net/Remix-Dev-Tools?style=social) @@ -16,6 +20,18 @@ Remix Development Tools is an open-source package designed to enhance your devel ### Timeline ![timeline](./assets/timeline.gif) +## What's new? + +### v2.1.0 + Detached mode support! + + +Json viewer improvements: +- Number of items in objects/arrays +- Copy to clipboard +- type of the value +- Doesn't close on revalidate anymore +- Different UI ## Features @@ -57,6 +73,10 @@ The terminal tab allows you to run terminal commands from the Remix Dev Tools. T - You can press `Ctrl + C` to cancel the current command. - You can press `Ctrl + L` to clear the terminal. +### Detached mode + +Detached mode allows you to un-dock the Remix Dev Tools from the browser and move it to a separate window. This is useful if you want to have the dev tools open on a separate monitor or if you want to have it open on a separate window on the same monitor. + ## Getting Started To install and utilize Remix Development Tools, follow these steps: diff --git a/assets/remix-dev-tools.png b/assets/remix-dev-tools.png new file mode 100644 index 0000000000000000000000000000000000000000..b3cb9186b907d307e29628e224f92eeedf7a2554 GIT binary patch literal 4949 zcmeHL`CpP*`^L#!YI4aO%cadG+pN?<6H}8h%n}W88JEzOi3Su?5fl^+ryLiuDa(aH zF-y$_DqIppvnDNd5OYCOAuAJ5G!xWRHZyvw%f z$A55{>PnbVqS>mR*^lkXk)Y>-RkjA`r4b&avr_^xI3dv3nZjIm0_3Kh0;1}HG&C(h z-|0X=ng;(4_;(-vFXQ2PJ1uEhT2^G5JU>0!_$n}A?(;t%mWS)3Op*iCp<&9oNg+E~ zy#OOFDWr8zp7h+dW{)qs&dB8|3VgDXH8(wtJ9BmR!z;p!hzCn{QLoIkt?EFuzrL|5 zI@H`zRzz9KR^!(5zB?P8{O#+negIhd?0wfTgSL$IpmmOZ{<) z^HcfQ4F~r~@RcqKY>DqlW^?BA#Zcrg7H()AaD~yeL!H>AQKGmOS>_FXAFjzL)*%}op**s z$$AA(tR1==f>KpR_}zVJlt>nrAP=_m7_I8J%(@rwUaSj2;6|Q3$-80YVd3H@tbt8= z+%*5~d6*IYL*JEYASkp$wWX`71u>nP*0M|D&c#b_mupw#3AZ$?7jIg6|zoI*d<-Au8RbU`Ca zD|*cHBdD5gXc%VCL^Y}*f_iCMlM&QFQIRZjX)#^-OuK_|IpqkFy^sCTKq`M~>%)mk z#td#G&&&-?$a*_bTo`fH>rm`&N!M)zsTqQp?kVxu9(c(fn4|*1)n7`q@+nk2+s&Dc zz9<$oCG>vYo6zyp-rG5G@$sM4|HTh^btNJ75_MIB|CeL$=L#67C~1D^f+^=FqS|o! z$;I{`ESZRYwYFPP+Pggqvi`~-QI6dXD!+M3F1Lm`j*oZd%HQ0v$}Bo4Gj4!)2|>{%Gk4YNO`{GYI2)j2R-J5=?-B?ExCniBgoEY9*V0PE5i0Qd9r z^5MDzU^Aq~AtkRFv-h&26K6#XQxJuX6e3ou!UVZWai*+1Q+;``XM1}5D3>9&v^mMLLQ z#Y_mSU!pAEh{`z5*{fss%(`Tz!sgorZLCwx!~rN3eqBC;`Qc4_Pd-WHhjfgygNR4-Z@{V~UI38UoZzSzh3 ziOPTH*X63npNTV2^jG#QUEgTJrBfYFTctBO0nS=UpHh8cz7BZsdU5aDOa#PJlTllt zuN*gg$}>-8fe2Ufd_<}yFj2oJ+SyQ{tSn!!RiUg*A(<&_R;4`@ZECFCPBD?) zz&%*de=Y|6;O7tJ1XCJFN{oq*OCG`M8k0jn1$Ow3jwGp+!bnW5BfrL}#0Vem%QJ^u zddKL|g>W2RguHmGyehf%8xdwDsX7EV8{87CazG$%K8G*pvzd-5JYS_(b=F8tN7a4QhW03I)yI}jo5&N+gUMrLbI{cK5T*s!mwUkj6Xi9xfX?Bge7ZOC-V^r%|#~;nw+|1&)47 zw_l>FWzp+KmP=hOlT#$im!JxE z+R^Ff@jUovv^zlc;~lombcZPWHk*FBP?KSp5J4MymaJ~RGp1!XekOQr^+SE9X2xEo zZQ6O4X#@ll;DFZhuN@3ST}Th6V;;}}LajcgVsft}>y#kf--i9?w;ZdR8daH0BhM~7 zFXiz?zsAY2otlhe%JYeU!q{kEJ}F4|WxH4Bh1hk6Tbs>yx7xaw@1G~}SERjVG;`$o z(Htks&G;Mj4Gq%7`Lo{W-vPXUg_y5bH3;h=(*K%9d7?2|(Pb;6j14P&?tD}d#gNYh))Sj6+%Gx>L z>J#_6-K{Tqu3k(T#)+DSBq9HldnFa7^f;CnDfEv{9Q7M)S^SXsYWWdBKhq=xD`LTXor1(5|feG8f4*#wjG#~ z3qIQFJe<{aW^6g;!QA`S)B#JkA{4D-GBE|!mv!4}=c!#1bFS&EVsTdx{bQatt%FSd zz!cJb7LNeLk6&4go`hRiW9pZe`VY^ey9?v$ZJxj;3Z2&kc{3O~6KTyG={~u=chx&fYNqaG$1sQ<}A}|!Y+@bPOsEnvd@0s{NdKZOI;G=aXy zx!w#S?e!#Y&XPy#9$xrgK6*>uu=EG}8Uw0wwpO!bo5*pSuv<`KkAz-PSOY+El0rbLL2Xe6gq98vT02KYl3qbL4_vsD3A7(U>Om1uq1$u?U z-o&r{!>d(vJBPxb)gayuY(ss$kU%7wsk?NXLoDQ^2|hzB)>5*ADcauOSnz@MTN~+{ z`w`2J!7sNU28wZ4oTK=m`7!!P?Xu9O_~_ZXgA@1EUeg501Ta?>ETkULr?C0(9R97R#wqqp4m5=&V7Z%sC z%IJNeOVYa(S0Ekgbhf{3(lTBx0OOhDS`>;d{@Z-D&=4Z1F1WyUD0NO=ZPHMC3Gywn zXKClL*ve6$5<5&7v~ttt`eMh8zXq~V;Bd93g#-#`ljZwYh*Ui<%(kyU?Usj1TW5d| z-wf4DJ0rMOO9HBR@|XA5z%j=zQTZK?`LvAqq;0g9GGLFbfKc^Hm3wOdF?t|OPW=z9ZY9A0 literal 0 HcmV?d00001 diff --git a/package-lock.json b/package-lock.json index 1e11a1f1..697d8551 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "remix-development-tools", - "version": "2.0.0", + "version": "2.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "remix-development-tools", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "workspaces": [ ".", @@ -16,9 +16,9 @@ "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-select": "^1.2.2", + "@uiw/react-json-view": "^1.8.4", "clsx": "^2.0.0", "lucide-react": "^0.263.1", - "react-json-view-lite": "^0.9.7", "react-use-websocket": "^4.3.1", "tailwind-merge": "^1.14.0" }, @@ -1846,11 +1846,11 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.22.10", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz", + "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -6194,6 +6194,19 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@uiw/react-json-view": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/@uiw/react-json-view/-/react-json-view-1.8.4.tgz", + "integrity": "sha512-XdvGhYTfCbsYumYs8dR6IuOzMa9TcmegaDQTbTax2wl1SgMIWh0VU750OGxOsTBSALNoR5lYjIh8Y56deBIKXg==", + "dependencies": { + "@babel/runtime": "^7.22.6" + }, + "peerDependencies": { + "@babel/runtime": ">=7.10.0", + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, "node_modules/@vanilla-extract/babel-plugin-debug-ids": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@vanilla-extract/babel-plugin-debug-ids/-/babel-plugin-debug-ids-1.0.3.tgz", @@ -17274,17 +17287,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/react-json-view-lite": { - "version": "0.9.7", - "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-0.9.7.tgz", - "integrity": "sha512-JWdrKYWac+sGO8aIFJ0tZw/cTSdgab7pS5Rnmv2yTjt/yEz2Ej4OvKYUe1ZXJlQDj7YaoZPUDF88NTk2Oubucg==", - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "react": "^16.13.1 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-property": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz", @@ -17561,9 +17563,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" }, "node_modules/regenerator-transform": { "version": "0.15.1", @@ -23017,11 +23019,11 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.22.10", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz", + "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==", "requires": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" } }, "@babel/template": { @@ -25893,6 +25895,14 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@uiw/react-json-view": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/@uiw/react-json-view/-/react-json-view-1.8.4.tgz", + "integrity": "sha512-XdvGhYTfCbsYumYs8dR6IuOzMa9TcmegaDQTbTax2wl1SgMIWh0VU750OGxOsTBSALNoR5lYjIh8Y56deBIKXg==", + "requires": { + "@babel/runtime": "^7.22.6" + } + }, "@vanilla-extract/babel-plugin-debug-ids": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@vanilla-extract/babel-plugin-debug-ids/-/babel-plugin-debug-ids-1.0.3.tgz", @@ -33987,12 +33997,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "react-json-view-lite": { - "version": "0.9.7", - "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-0.9.7.tgz", - "integrity": "sha512-JWdrKYWac+sGO8aIFJ0tZw/cTSdgab7pS5Rnmv2yTjt/yEz2Ej4OvKYUe1ZXJlQDj7YaoZPUDF88NTk2Oubucg==", - "requires": {} - }, "react-property": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz", @@ -34193,9 +34197,9 @@ } }, "regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" }, "regenerator-transform": { "version": "0.15.1", @@ -34502,6 +34506,7 @@ "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^5.57.1", "@typescript-eslint/parser": "^5.57.1", + "@uiw/react-json-view": "^1.8.4", "@vitejs/plugin-react": "^4.0.3", "@vitest/coverage-v8": "^0.33.0", "autoprefixer": "^10.4.14", @@ -34520,7 +34525,6 @@ "prettier-plugin-tailwindcss": "^0.4.1", "react-dom": "^18.2.0", "react-hook-form": "^7.45.2", - "react-json-view-lite": "^0.9.7", "react-use-websocket": "^4.3.1", "remix-app-for-testing": "file:src/remix-app-for-testing", "remix-development-tools": "file:", @@ -35722,11 +35726,11 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.22.10", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz", + "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==", "requires": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" } }, "@babel/template": { @@ -38598,6 +38602,14 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@uiw/react-json-view": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/@uiw/react-json-view/-/react-json-view-1.8.4.tgz", + "integrity": "sha512-XdvGhYTfCbsYumYs8dR6IuOzMa9TcmegaDQTbTax2wl1SgMIWh0VU750OGxOsTBSALNoR5lYjIh8Y56deBIKXg==", + "requires": { + "@babel/runtime": "^7.22.6" + } + }, "@vanilla-extract/babel-plugin-debug-ids": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@vanilla-extract/babel-plugin-debug-ids/-/babel-plugin-debug-ids-1.0.3.tgz", @@ -46692,12 +46704,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "react-json-view-lite": { - "version": "0.9.7", - "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-0.9.7.tgz", - "integrity": "sha512-JWdrKYWac+sGO8aIFJ0tZw/cTSdgab7pS5Rnmv2yTjt/yEz2Ej4OvKYUe1ZXJlQDj7YaoZPUDF88NTk2Oubucg==", - "requires": {} - }, "react-property": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz", @@ -46898,9 +46904,9 @@ } }, "regenerator-runtime": { - "version": "0.13.11", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" }, "regenerator-transform": { "version": "0.15.1", diff --git a/package.json b/package.json index 677717b8..e370024a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "remix-development-tools", "description": "Remix development tools.", "author": "Alem Tuzlak", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "keywords": [ "remix", @@ -98,10 +98,10 @@ "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-select": "^1.2.2", + "@uiw/react-json-view": "^1.8.4", "clsx": "^2.0.0", "lucide-react": "^0.263.1", - "react-json-view-lite": "^0.9.7", "react-use-websocket": "^4.3.1", "tailwind-merge": "^1.14.0" } -} +} \ No newline at end of file diff --git a/src/RemixDevTools/RemixDevTools.tsx b/src/RemixDevTools/RemixDevTools.tsx index 387ef594..34a50cf0 100644 --- a/src/RemixDevTools/RemixDevTools.tsx +++ b/src/RemixDevTools/RemixDevTools.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { RDTContextProvider } from "./context/RDTContext"; import { Tab } from "./tabs"; import { useTimelineHandler } from "./hooks/useTimelineHandler"; -import { usePersistOpen, useSettingsContext } from "./context/useRDTContext"; +import { useDetachedWindowControls, usePersistOpen, useSettingsContext } from "./context/useRDTContext"; import { useLocation } from "@remix-run/react"; import { Trigger } from "./components/Trigger"; import { MainPanel } from "./layout/MainPanel"; @@ -10,25 +10,34 @@ import { Tabs } from "./layout/Tabs"; import { ContentPanel } from "./layout/ContentPanel"; import rdtStylesheet from "../input.css?inline"; import { useOutletAugment } from "./hooks/useOutletAugment"; +import { useSetUnloadDetachedWindowChecks } from "./hooks/detached/useSetUnloadDetachedWindowChecks"; +import { useSetRouteBoundaries } from "./hooks/useSetRouteBoundaries"; +import { REMIX_DEV_TOOLS } from "./utils/storage"; type Props = RemixDevToolsProps; -const InjectedStyles = () => ( -