react-dev-inspector/es/Inspector/utils/inspect.d.ts

dev-tool for inspect react components and jump to local IDE for component code.

import type { Fiber } from 'react-reconciler';
export interface CodeInfo {
    lineNumber: string;
    columnNumber: string;
    /**
     * code source file relative path to dev-server cwd(current working directory)
     * need use with `react-dev-inspector/plugins/babel`
     */
    relativePath?: string;
    /**
     * code source file absolute path
     * just need use with `@babel/plugin-transform-react-jsx-source` which auto set by most framework
     */
    absolutePath?: string;
}
/**
 * props that injected into react nodes
 *
 * like <div data-inspector-line="2" data-inspector-column="3" data-inspector-relative-path="xxx/ooo" />
 * this props will be record in fiber
 */
export interface CodeDataAttribute {
    'data-inspector-line': string;
    'data-inspector-column': string;
    'data-inspector-relative-path': string;
}
/**
 * react fiber property `_debugSource` created by `@babel/plugin-transform-react-jsx-source`
 *     https://github.com/babel/babel/blob/v7.16.4/packages/babel-plugin-transform-react-jsx-source/src/index.js
 *
 * and injected `__source` property used by `React.createElement`, then pass to `ReactElement`
 *     https://github.com/facebook/react/blob/v18.0.0/packages/react/src/ReactElement.js#L189
 *     https://github.com/facebook/react/blob/v18.0.0/packages/react/src/ReactElement.js#L389
 *     https://github.com/facebook/react/blob/v18.0.0/packages/react/src/ReactElement.js#L447
 *
 * finally, used by `createFiberFromElement` to become a fiber property `_debugSource`.
 *     https://github.com/facebook/react/blob/v18.0.0/packages/react-reconciler/src/ReactFiber.new.js#L648-L649
 */
export declare const getCodeInfoFromDebugSource: (fiber?: Fiber) => CodeInfo | undefined;
/**
 * code location data-attribute props inject by `react-dev-inspector/plugins/babel`
 */
export declare const getCodeInfoFromProps: (fiber?: Fiber) => CodeInfo | undefined;
export declare const getCodeInfoFromFiber: (fiber?: Fiber) => CodeInfo | undefined;
/**
 * give a `base` dom fiber,
 * and will try to get the human friendly react component `reference` fiber from it;
 *
 * rules and examples see below:
 * *******************************************************
 *
 * if parent is html native tag, `reference` is considered to be as same as `base`
 *
 *  div                                       div
 *    └─ h1                                     └─ h1  (<--base) <--reference
 *      └─ span  (<--base) <--reference           └─ span
 *
 * *******************************************************
 *
 * if parent is NOT html native tag,
 *   and parent ONLY have one child (the `base` itself),
 *   then `reference` is considered to be the parent.
 *
 *  Title  <--reference                       Title
 *    └─ h1  (<--base)                          └─ h1  (<--base) <--reference
 *      └─ span                                 └─ span
 *                                              └─ div
 *
 * *******************************************************
 *
 * while follow the last one,
 *   "parent" is considered to skip continuous Provider/Customer/ForwardRef components
 *
 *  Title  <- reference                       Title  <- reference
 *    └─ TitleName [ForwardRef]                 └─ TitleName [ForwardRef]
 *      └─ Context.Customer                       └─ Context.Customer
 *         └─ Context.Customer                      └─ Context.Customer
 *          └─ h1  (<- base)                          └─ h1  (<- base)
 *            └─ span                             └─ span
 *                                                └─ div
 *
 *  Title
 *    └─ TitleName [ForwardRef]
 *      └─ Context.Customer
 *         └─ Context.Customer
 *          └─ h1  (<- base) <- reference
 *    └─ span
 *    └─ div
 */
export declare const getReferenceFiber: (baseFiber?: Fiber) => Fiber | undefined;
export declare const getElementCodeInfo: (element: HTMLElement) => CodeInfo | undefined;
export declare const getNamedFiber: (baseFiber?: Fiber) => Fiber | undefined;
export declare const getElementInspect: (element: HTMLElement) => {
    fiber?: Fiber | undefined;
    name?: string | undefined;
    title: string;
};