We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I was working on the bksy.app and found bugs. #85 #71
diff --git a/node_modules/click-to-react-component/src/ClickToComponent.js b/node_modules/click-to-react-component/src/ClickToComponent.js index 7ed3ea5..aa91e0d 100644 --- a/node_modules/click-to-react-component/src/ClickToComponent.js +++ b/node_modules/click-to-react-component/src/ClickToComponent.js @@ -9,7 +9,8 @@ import * as React from 'react' import { ContextMenu } from './ContextMenu.js' import { getPathToSource } from './getPathToSource.js' -import { getSourceForElement } from './getSourceForElement.js' +import { getReactInstancesForElement } from './getReactInstancesForElement.js' +import { getSourceForInstance } from './getSourceForInstance.js' import { getUrl } from './getUrl.js' export const State = /** @type {const} */ ({ @@ -40,7 +41,23 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) { event ) { if (state === State.HOVER && target instanceof HTMLElement) { - const source = getSourceForElement(target) + const instance = getReactInstancesForElement(target).find((instance) => + getSourceForInstance(instance) + ) + + if (!instance) { + return console.warn('Could not find React instance for element', target) + } + + const source = getSourceForInstance(instance) + + if (!source) { + return console.warn( + 'Could not find source for React instance', + instance + ) + } + const path = getPathToSource(source, pathModifier) const url = getUrl({ editor, diff --git a/node_modules/click-to-react-component/src/getDisplayNameFromReactInstance.js b/node_modules/click-to-react-component/src/getDisplayNameFromReactInstance.js index 50d8a3c..64ed8ea 100644 --- a/node_modules/click-to-react-component/src/getDisplayNameFromReactInstance.js +++ b/node_modules/click-to-react-component/src/getDisplayNameFromReactInstance.js @@ -3,8 +3,9 @@ * @param {Fiber} instance */ export function getDisplayNameForInstance(instance) { - const { elementType, tag } = instance + const {elementType, tag} = instance + // https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-reconciler/src/ReactWorkTags.js switch (tag) { case 0: // FunctionComponent case 1: // ClassComponent @@ -12,6 +13,12 @@ export function getDisplayNameForInstance(instance) { elementType.displayName || elementType.name || 'Anonymous Component' ) + case 3: + return 'HostRoot' + + case 4: + return 'HostPortal' + case 5: // HostComponent: return elementType @@ -21,6 +28,9 @@ export function getDisplayNameForInstance(instance) { case 7: // Fragment return 'React.Fragment' + case 8: + return 'Mode' + case 9: // ContextConsumer return 'Context.Consumer' @@ -30,13 +40,58 @@ export function getDisplayNameForInstance(instance) { case 11: // ForwardRef return 'React.forwardRef' - case 15: // MemoComponent + case 12: + return 'Profiler' + + case 13: + return 'SuspenseComponent' + + case 14: + return 'MemoComponent' + + case 15: // SimpleMemoComponent // Attempt to get name from wrapped component - return elementType.type.name || 'React.memo' + return elementType.type.name ?? 'MemoComponent' case 16: // LazyComponent return 'React.lazy' + case 17: + return 'IncompleteClassComponent' + + case 18: + return 'DehydratedFragment' + + case 19: + return 'SuspenseListComponent' + + case 21: + return 'ScopeComponent' + + case 22: + return 'OffscreenComponent' + + case 23: + return 'LegacyHiddenComponent' + + case 24: + return 'CacheComponent' + + case 25: + return 'TracingMarkerComponent' + + case 26: + return 'HostHoistable' + + case 27: + return 'HostSingleton' + + case 28: + return 'IncompleteFunctionComponent' + + case 29: + return 'Throw' + default: console.warn(`Unrecognized React Fiber tag: ${tag}`, instance) return 'Unknown Component' diff --git a/node_modules/click-to-react-component/src/getSourceForInstance.js b/node_modules/click-to-react-component/src/getSourceForInstance.js index a59e690..04adca7 100644 --- a/node_modules/click-to-react-component/src/getSourceForInstance.js +++ b/node_modules/click-to-react-component/src/getSourceForInstance.js @@ -8,7 +8,7 @@ */ export function getSourceForInstance({ _debugSource, _debugOwner }) { // source is sometimes stored on _debugOwner - const source = _debugSource || (_debugOwner && _debugOwner._debugSource) + const source = _debugSource ?? _debugOwner ? _debugOwner._debugSource : null if (!source) return
The text was updated successfully, but these errors were encountered:
3cbb570
ericclemmons
No branches or pull requests
I was working on the bksy.app and found bugs. #85 #71
The text was updated successfully, but these errors were encountered: