From 39fb0bde0808fa48cc16f01cd724f388040d22df Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Mon, 10 Feb 2025 20:08:56 +0100 Subject: [PATCH 1/3] Optimize deps --- package-lock.json | 8 ++++---- package.json | 2 +- src/vite/plugin.tsx | 16 ++++++++++++++++ 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1795ca4a..f052c156 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-select": "^2.1.5", "beautify": "^0.0.8", - "bippy": "^0.2.24", + "bippy": "^0.3.0", "chalk": "^5.4.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", @@ -3697,9 +3697,9 @@ } }, "node_modules/bippy": { - "version": "0.2.24", - "resolved": "https://registry.npmjs.org/bippy/-/bippy-0.2.24.tgz", - "integrity": "sha512-EZ8GSYSyPywsUmcOH2Kss/yhI8Auoku1WGKOK3/Ya7vukriRPJ2/8q+KApvh8LtX4KXNDBE5QD6furYz2Yei+Q==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/bippy/-/bippy-0.3.0.tgz", + "integrity": "sha512-yZ58v6kaE5m8gK0erDfHE9XB6PFxbKB/o6XmI37L560iM1faZTAAQ5by6qxbMei9SIjDhsDGsqrgpmChSPxcfA==", "dependencies": { "@types/react-reconciler": "^0.28.9" }, diff --git a/package.json b/package.json index 6d32fb06..f0288a9d 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,7 @@ "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-select": "^2.1.5", "beautify": "^0.0.8", - "bippy": "^0.2.24", + "bippy": "^0.3.0", "chalk": "^5.4.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index 5f542c1c..90b3a2b5 100644 --- a/src/vite/plugin.tsx +++ b/src/vite/plugin.tsx @@ -76,6 +76,22 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = ( return [ { name: "react-router-devtools", + config(config) { + config.optimizeDeps = { + ...config.optimizeDeps, + include: [ + ...(config.optimizeDeps?.include ?? []), + "beautify", + "react-diff-viewer-continued", + "react-d3-tree", + "classnames", + "@bkrem/react-transition-group", + "react-router-devtools/client", + "react-router-devtools/context", + "react-router-devtools/server", + ], + } + }, apply(config) { return shouldInject(config.mode, includeClient) }, From 2cc45cda18b2563e03d5c60f06d420c40f2a2635 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Mon, 10 Feb 2025 20:26:26 +0100 Subject: [PATCH 2/3] test --- src/client/hooks/useReactTreeListeners.ts | 17 ++++++++++++++--- src/vite/plugin.tsx | 4 ++-- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/client/hooks/useReactTreeListeners.ts b/src/client/hooks/useReactTreeListeners.ts index d21468cb..e84786c8 100644 --- a/src/client/hooks/useReactTreeListeners.ts +++ b/src/client/hooks/useReactTreeListeners.ts @@ -1,9 +1,9 @@ import { type Fiber, onCommitFiberRoot, traverseFiber } from "bippy" +import { getFiberSource } from "bippy/source" import { useCallback, useEffect, useRef } from "react" import { useNavigation } from "react-router" import type { HTMLError } from "../context/rdtReducer.js" import { useHtmlErrors } from "../context/useRDTContext.js" - export const ROUTE_CLASS = "outlet-route" const isSourceElement = (fiberNode: any) => { @@ -153,7 +153,7 @@ export function useReactTreeListeners() { useEffect(() => { if (navigation.state !== "idle") return - onCommitFiberRoot((root) => + onCommitFiberRoot((root) => { traverseFiber(root.current, (fiberNode) => { if (isSourceElement(fiberNode) && typeof import.meta.hot !== "undefined") { const originalSource = fiberNode?._debugSource @@ -166,6 +166,17 @@ export function useReactTreeListeners() { `${fileName}:::${line}` // ) } + getFiberSource(fiberNode) + .then((source) => { + const line = source?.lineNumber + const fileName = source?.fileName + + fiberNode.stateNode?.setAttribute?.( + "data-source", + `${fileName}:::${line}` // + ) + }) + .catch(console.error) if (fiberNode?.stateNode && fiberNode?.elementType === "form") { findIncorrectHtml(fiberNode.child, fiberNode, "form") @@ -183,7 +194,7 @@ export function useReactTreeListeners() { styleNearestElement(fiberNode) } }) - ) + }) setHtmlErrors(invalidHtmlCollection.current) invalidHtmlCollection.current = [] diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index 90b3a2b5..adb71715 100644 --- a/src/vite/plugin.tsx +++ b/src/vite/plugin.tsx @@ -81,11 +81,11 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = ( ...config.optimizeDeps, include: [ ...(config.optimizeDeps?.include ?? []), - "beautify", + /* "beautify", "react-diff-viewer-continued", "react-d3-tree", "classnames", - "@bkrem/react-transition-group", + "@bkrem/react-transition-group", */ "react-router-devtools/client", "react-router-devtools/context", "react-router-devtools/server", From e459fcc7564403b95b7fe293db5c905dad8201f0 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Mon, 10 Feb 2025 20:38:00 +0100 Subject: [PATCH 3/3] test2 --- src/vite/plugin.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx index adb71715..770e26f0 100644 --- a/src/vite/plugin.tsx +++ b/src/vite/plugin.tsx @@ -81,11 +81,11 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = ( ...config.optimizeDeps, include: [ ...(config.optimizeDeps?.include ?? []), - /* "beautify", - "react-diff-viewer-continued", - "react-d3-tree", - "classnames", - "@bkrem/react-transition-group", */ + "react-router-devtools > beautify", + "react-router-devtools > react-diff-viewer-continued", + "react-router-devtools > react-d3-tree", + "react-router-devtools > classnames", + "react-router-devtools > @bkrem/react-transition-group", "react-router-devtools/client", "react-router-devtools/context", "react-router-devtools/server",