@lark-apaas/miaoda-inspector 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/types/Inspector/Inspector.d.ts

@@ -1,102 +1,105 @@
-import { type ReactNode } from 'react';
-import type { Fiber } from 'react-reconciler';
-import { type CodeInfo } from './utils';
+import { ReactNode } from 'react';
+import { Fiber } from 'react-reconciler';
+import { CodeInfo } from './utils/inspect.js';
+
 /**
  * the inspect meta info that is sent to the callback when an element is hovered over or clicked.
  */
-export interface InspectParams {
-  /** hover / click event target dom element */
-  element: HTMLElement;
-  /** nearest named react component fiber for dom element */
-  fiber?: Fiber;
-  /** source file line / column / path info for react component */
-  codeInfo?: CodeInfo;
-  /** react component name for dom element */
-  name?: string;
-  title?: string;
+interface InspectParams {
+    /** hover / click event target dom element */
+    element: HTMLElement;
+    /** nearest named react component fiber for dom element */
+    fiber?: Fiber;
+    /** source file line / column / path info for react component */
+    codeInfo?: CodeInfo;
+    /** react component name for dom element */
+    name?: string;
+    title?: string;
 }
 /**
  * `v2.0.0` changes:
  *   - make 'Ctrl + Shift + Alt + C' as default shortcut on Windows/Linux
  *   - export `defaultHotkeys`
  */
-export declare const defaultHotkeys: () => string[];
-export interface InspectorProps {
-  /**
-   * Inspector Component toggle hotkeys,
-   *
-   * supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys
-   *
-   * @default - `['Ctrl', 'Shift', 'Command', 'C']` on macOS, `['Ctrl', 'Shift', 'Alt', 'C']` on other platforms.
-   *
-   * Setting `keys={null}` explicitly means that disable use hotkeys to trigger it.
-   */
-  keys?: string[] | null;
-  /**
-   * If setting `active` prop, the Inspector will be a Controlled React Component,
-   *   you need to control the `true`/`false` state to active the Inspector.
-   *
-   * If not setting `active` prop, this only a Uncontrolled component that
-   *   will activate/deactivate by hotkeys.
-   *
-   * > add in version `v2.0.0`
-   */
-  active?: boolean;
-  /**
-   * Trigger by `active` state change, includes:
-   * - hotkeys toggle, before activate/deactivate Inspector
-   * - Escape / Click, before deactivate Inspector
-   *
-   * will NOT trigger by `active` prop change.
-   *
-   * > add in version `v2.0.0`
-   */
-  onActiveChange?: (active: boolean) => void;
-  /**
-   * Whether to disable all behavior include hotkeys listening or trigger,
-   * will automatically disable in production environment by default.
-   *
-   * @default `true` if `NODE_ENV` is 'production', otherwise is `false`.
-   * > add in version `v2.0.0`
-   */
-  disable?: boolean;
-  /**
-   * Callback when left-clicking on an element, with ensuring the source code info is found.
-   *
-   * By setting the `onInspectElement` prop, the default behavior ("open local IDE") will be disabled,
-   *   that means you want to manually handle the source info, or handle how to goto editor by yourself.
-   *
-   * You can also use builtin `gotoServerEditor` utils in `onInspectElement` to get origin behavior ("open local IDE on server-side"),
-   *   it looks like:
-   *
-   * ```tsx
-   * import { Inspector, gotoServerEditor } from 'react-dev-inspector'
-   *
-   * <Inspector
-   *   onInspectElement={({ codeInfo }) => {
-   *     ...; // your processing
-   *     gotoServerEditor(codeInfo)
-   *   }}
-   * </Inspector>
-   * ```
-   *
-   * > add in version `v2.0.0`
-   */
-  onInspectElement?: (params: Required<InspectParams>) => void;
-  /** Callback when hovering on an element */
-  onHoverElement?: (params: InspectParams) => void;
-  /**
-   * Callback when left-clicking on an element.
-   */
-  onClickElement?: (params: InspectParams) => void;
-  /** any children of react nodes */
-  children?: ReactNode;
-  /**
-   * custom handler for component name and info display
-   * @param name component name
-   * @param info component info (file path)
-   * @returns [displayName, displayInfo] tuple for display
-   */
-  handleCodeInfo?: (name: string, info?: string) => [string, string];
+declare const defaultHotkeys: () => string[];
+interface InspectorProps {
+    /**
+     * Inspector Component toggle hotkeys,
+     *
+     * supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys
+     *
+     * @default - `['Ctrl', 'Shift', 'Command', 'C']` on macOS, `['Ctrl', 'Shift', 'Alt', 'C']` on other platforms.
+     *
+     * Setting `keys={null}` explicitly means that disable use hotkeys to trigger it.
+     */
+    keys?: string[] | null;
+    /**
+     * If setting `active` prop, the Inspector will be a Controlled React Component,
+     *   you need to control the `true`/`false` state to active the Inspector.
+     *
+     * If not setting `active` prop, this only a Uncontrolled component that
+     *   will activate/deactivate by hotkeys.
+     *
+     * > add in version `v2.0.0`
+     */
+    active?: boolean;
+    /**
+     * Trigger by `active` state change, includes:
+     * - hotkeys toggle, before activate/deactivate Inspector
+     * - Escape / Click, before deactivate Inspector
+     *
+     * will NOT trigger by `active` prop change.
+     *
+     * > add in version `v2.0.0`
+     */
+    onActiveChange?: (active: boolean) => void;
+    /**
+     * Whether to disable all behavior include hotkeys listening or trigger,
+     * will automatically disable in production environment by default.
+     *
+     * @default `true` if `NODE_ENV` is 'production', otherwise is `false`.
+     * > add in version `v2.0.0`
+     */
+    disable?: boolean;
+    /**
+     * Callback when left-clicking on an element, with ensuring the source code info is found.
+     *
+     * By setting the `onInspectElement` prop, the default behavior ("open local IDE") will be disabled,
+     *   that means you want to manually handle the source info, or handle how to goto editor by yourself.
+     *
+     * You can also use builtin `gotoServerEditor` utils in `onInspectElement` to get origin behavior ("open local IDE on server-side"),
+     *   it looks like:
+     *
+     * ```tsx
+     * import { Inspector, gotoServerEditor } from 'react-dev-inspector'
+     *
+     * <Inspector
+     *   onInspectElement={({ codeInfo }) => {
+     *     ...; // your processing
+     *     gotoServerEditor(codeInfo)
+     *   }}
+     * </Inspector>
+     * ```
+     *
+     * > add in version `v2.0.0`
+     */
+    onInspectElement?: (params: Required<InspectParams>) => void;
+    /** Callback when hovering on an element */
+    onHoverElement?: (params: InspectParams) => void;
+    /**
+     * Callback when left-clicking on an element.
+     */
+    onClickElement?: (params: InspectParams) => void;
+    /** any children of react nodes */
+    children?: ReactNode;
+    /**
+     * custom handler for component name and info display
+     * @param name component name
+     * @param info component info (file path)
+     * @returns [displayName, displayInfo] tuple for display
+     */
+    handleCodeInfo?: (name: string, info?: string) => [string, string];
 }
-export declare const Inspector: (props: InspectorProps) => JSX.Element;
+declare const Inspector: (props: InspectorProps) => JSX.Element;
+
+export { type InspectParams, Inspector, type InspectorProps, defaultHotkeys };

package/dist/types/Inspector/Overlay.d.ts

@@ -1,71 +1,74 @@
+import { Rect, BoxSizing } from './utils/overlay.js';
+
 /**
  * mirror from https://github.com/facebook/react/blob/v16.13.1/packages/react-devtools-shared/src/backend/views/utils.js
  */
-import { type Rect, type BoxSizing } from './utils';
+
 interface Box {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
 }
 declare class OverlayRect {
-  node: HTMLElement;
-  border: HTMLElement;
-  padding: HTMLElement;
-  content: HTMLElement;
-  constructor(doc: Document, container: HTMLElement);
-  remove(): void;
-  update(box: Rect, dims: BoxSizing): void;
+    node: HTMLElement;
+    border: HTMLElement;
+    padding: HTMLElement;
+    content: HTMLElement;
+    constructor(doc: Document, container: HTMLElement);
+    remove(): void;
+    update(box: Rect, dims: BoxSizing): void;
 }
 declare class ClickOverlayRect {
-  node: HTMLElement;
-  border: HTMLElement;
-  constructor(doc: Document, container: HTMLElement);
-  remove(): void;
-  update(box: Rect, dims: BoxSizing): void;
+    node: HTMLElement;
+    border: HTMLElement;
+    constructor(doc: Document, container: HTMLElement);
+    remove(): void;
+    update(box: Rect, dims: BoxSizing): void;
 }
 declare class OverlayTip {
-  tip: HTMLElement;
-  nameSpan: HTMLElement;
-  titleDiv: HTMLElement;
-  constructor(doc: Document, container: HTMLElement);
-  remove(): void;
-  updateText(name: string): void;
-  updatePosition(dims: Box, bounds: Box): void;
-  invisible(): void;
+    tip: HTMLElement;
+    nameSpan: HTMLElement;
+    titleDiv: HTMLElement;
+    constructor(doc: Document, container: HTMLElement);
+    remove(): void;
+    updateText(name: string): void;
+    updatePosition(dims: Box, bounds: Box): void;
+    invisible(): void;
 }
-export declare class Overlay {
-  window: Window;
-  tipBoundsWindow: Window;
-  container: HTMLElement;
-  tip: OverlayTip;
-  rects: Array<OverlayRect>;
-  removeCallback: (this: Overlay) => void;
-  handleCodeInfo?: (name: string, info?: string) => [string, string];
-  resizeObserver: ResizeObserver;
-  currentElements?: HTMLElement[];
-  currentName?: string;
-  constructor(handleCodeInfo?: (name: string, info?: string) => [string, string]);
-  remove(): void;
-  setRemoveCallback(callback: () => void): void;
-  inspect(nodes: Array<HTMLElement>, name?: string, info?: string): void;
-  updatePositions(nodes: Array<HTMLElement>, name?: string, info?: string): void;
-  clearRect(): void;
+declare class Overlay {
+    window: Window;
+    tipBoundsWindow: Window;
+    container: HTMLElement;
+    tip: OverlayTip;
+    rects: Array<OverlayRect>;
+    removeCallback: (this: Overlay) => void;
+    handleCodeInfo?: (name: string, info?: string) => [string, string];
+    resizeObserver: ResizeObserver;
+    currentElements?: HTMLElement[];
+    currentName?: string;
+    constructor(handleCodeInfo?: (name: string, info?: string) => [string, string]);
+    remove(): void;
+    setRemoveCallback(callback: () => void): void;
+    inspect(nodes: Array<HTMLElement>, name?: string, info?: string): void;
+    updatePositions(nodes: Array<HTMLElement>, name?: string, info?: string): void;
+    clearRect(): void;
 }
-export declare class ClickOverlay {
-  window: Window;
-  container: HTMLElement;
-  rect: ClickOverlayRect | null;
-  tip: OverlayTip;
-  tipBoundsWindow: Window;
-  resizeObserver: ResizeObserver;
-  currentElement: HTMLElement | null;
-  currentName: string | undefined;
-  positionUpdate?: () => void;
-  constructor(positionUpdate?: () => void);
-  remove(): void;
-  highlight(element: HTMLElement, name?: string): void;
-  updatePosition(element: HTMLElement): void;
-  clearRect(): void;
+declare class ClickOverlay {
+    window: Window;
+    container: HTMLElement;
+    rect: ClickOverlayRect | null;
+    tip: OverlayTip;
+    tipBoundsWindow: Window;
+    resizeObserver: ResizeObserver;
+    currentElement: HTMLElement | null;
+    currentName: string | undefined;
+    positionUpdate?: () => void;
+    constructor(positionUpdate?: () => void);
+    remove(): void;
+    highlight(element: HTMLElement, name?: string): void;
+    updatePosition(element: HTMLElement): void;
+    clearRect(): void;
 }
-export {};
+
+export { ClickOverlay, Overlay };

package/dist/types/Inspector/hooks/index.d.ts

@@ -1,3 +1,4 @@
-export * from './use-layout-effect';
-export * from './use-effect-event';
-export * from './use-mouse';
+export { useLayoutEffect } from './use-layout-effect.js';
+export { useEffectEvent } from './use-effect-event.js';
+export { useMousePosition } from './use-mouse.js';
+import 'react';

package/dist/types/Inspector/hooks/use-effect-event.d.ts

@@ -6,4 +6,6 @@
  * - `useEvent` in https://github.com/scottrippey/react-use-event-hook
  * - `useMemoizedFn` in https://github.com/alibaba/hooks
  */
-export declare const useEffectEvent: <T extends (...args: any[]) => any>(callback?: T | undefined) => T;
+declare const useEffectEvent: <T extends (...args: any[]) => any>(callback?: T) => T;
+
+export { useEffectEvent };

package/dist/types/Inspector/hooks/use-layout-effect.d.ts

@@ -1,2 +1,5 @@
-import { useLayoutEffect as _useLayoutEffect } from 'react';
-export declare const useLayoutEffect: typeof _useLayoutEffect;
+import { useLayoutEffect as useLayoutEffect$1 } from 'react';
+
+declare const useLayoutEffect: typeof useLayoutEffect$1;
+
+export { useLayoutEffect };

package/dist/types/Inspector/hooks/use-mouse.d.ts

@@ -1,9 +1,10 @@
-import { type MutableRefObject } from 'react';
-export declare const useMousePosition: ({
-  disable
-}: {
-  disable?: boolean | undefined;
+import { MutableRefObject } from 'react';
+
+declare const useMousePosition: ({ disable, }: {
+    disable?: boolean;
 }) => MutableRefObject<{
-  x: number;
-  y: number;
-}>;
+    x: number;
+    y: number;
+}>;
+
+export { useMousePosition };

package/dist/types/Inspector/index.d.ts

@@ -1 +1,4 @@
-export { Inspector } from './Inspector';
+export { Inspector } from './Inspector.js';
+import 'react';
+import 'react-reconciler';
+import './utils/inspect.js';

package/dist/types/Inspector/utils/fiber.d.ts

@@ -1,28 +1,29 @@
-import type { Fiber } from 'react-reconciler';
+import { Fiber } from 'react-reconciler';
+
 /**
  * only native html tag fiber's type will be string,
  * all the others (component / functional component / context) type will be function or object
  */
-export declare const isNativeTagFiber: (fiber?: Fiber) => boolean;
+declare const isNativeTagFiber: (fiber?: Fiber) => boolean;
 /**
  * react fiber symbol types see:
  * https://github.com/facebook/react/blob/v17.0.0/packages/shared/ReactSymbols.js#L39-L58
  */
-export declare const isReactSymbolFiber: (fiber?: Fiber) => boolean;
-export declare const isForwardRef: (fiber?: Fiber) => boolean;
+declare const isReactSymbolFiber: (fiber?: Fiber) => boolean;
+declare const isForwardRef: (fiber?: Fiber) => boolean;
 type FiberHTMLElement = HTMLElement & {
-  [fiberKey: string]: Fiber | undefined;
+    [fiberKey: string]: Fiber | undefined;
 };
 /**
  * https://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging
  */
-export declare const getElementFiber: (element: FiberHTMLElement) => Fiber | undefined;
-export declare const getElementFiberUpward: (element: HTMLElement | null) => Fiber | undefined;
+declare const getElementFiber: (element: FiberHTMLElement) => Fiber | undefined;
+declare const getElementFiberUpward: (element: HTMLElement | null) => Fiber | undefined;
 /**
  * find first parent of native html tag or react component,
  * skip react Provider / Context / ForwardRef / Fragment etc.
  */
-export declare const getDirectParentFiber: (child: Fiber) => Fiber | null;
+declare const getDirectParentFiber: (child: Fiber) => Fiber | null;
 /**
  * The displayName property is not guaranteed to be a string.
  * It's only safe to use for our purposes if it's a string.
@@ -30,5 +31,6 @@ export declare const getDirectParentFiber: (child: Fiber) => Fiber | null;
  *
  * https://github.com/facebook/react/blob/v17.0.0/packages/react-devtools-shared/src/utils.js#L90-L112
  */
-export declare const getFiberName: (fiber?: Fiber) => string | undefined;
-export {};
+declare const getFiberName: (fiber?: Fiber) => string | undefined;
+
+export { getDirectParentFiber, getElementFiber, getElementFiberUpward, getFiberName, isForwardRef, isNativeTagFiber, isReactSymbolFiber };

package/dist/types/Inspector/utils/highlight.d.ts

@@ -1,8 +1,10 @@
 /**
  * mirror from https://github.com/facebook/react/blob/v16.13.1/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
  */
-export type StopFunction = () => void;
-export declare function setupHighlighter(handlers: {
-  onPointerOver?: (element: HTMLElement) => void;
-  onClick?: (element: HTMLElement) => void;
-}): StopFunction;
+type StopFunction = () => void;
+declare function setupHighlighter(handlers: {
+    onPointerOver?: (element: HTMLElement) => void;
+    onClick?: (element: HTMLElement) => void;
+}): StopFunction;
+
+export { type StopFunction, setupHighlighter };

package/dist/types/Inspector/utils/index.d.ts

@@ -1,3 +1,4 @@
-export * from './highlight';
-export * from './inspect';
-export * from './overlay';
+export { StopFunction, setupHighlighter } from './highlight.js';
+export { CodeDataAttribute, CodeInfo, getCodeInfoFromDebugSource, getCodeInfoFromFiber, getCodeInfoFromProps, getElementCodeInfo, getElementInspect, getNamedFiber, getReferenceFiber } from './inspect.js';
+export { BoxSizing, Rect, getElementDimensions, getNestedBoundingClientRect } from './overlay.js';
+import 'react-reconciler';

package/dist/types/Inspector/utils/inspect.d.ts

@@ -1,28 +1,29 @@
-import type { Fiber } from 'react-reconciler';
-export interface CodeInfo {
-  name?: string;
-  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;
-  /**
-   * metadata information from babel plugin
-   */
-  metadata?: {
-    elementStart: number;
-    elementEnd: number;
-    tagStart: number;
-    tagEnd: number;
-    classNameLiteral: boolean;
-  };
+import { Fiber } from 'react-reconciler';
+
+interface CodeInfo {
+    name?: string;
+    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;
+    /**
+     * metadata information from babel plugin
+     */
+    metadata?: {
+        elementStart: number;
+        elementEnd: number;
+        tagStart: number;
+        tagEnd: number;
+        classNameLiteral: boolean;
+    };
 }
 /**
  * props that injected into react nodes
@@ -30,12 +31,12 @@ export interface CodeInfo {
  * 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-miaoda-line': string;
-  'data-miaoda-column': string;
-  'data-miaoda-relative-path': string;
-  'data-miaoda-component-name'?: string;
-  'data-miaoda-metadata'?: string;
+interface CodeDataAttribute {
+    'data-miaoda-line': string;
+    'data-miaoda-column': string;
+    'data-miaoda-relative-path': string;
+    'data-miaoda-component-name'?: string;
+    'data-miaoda-metadata'?: string;
 }
 /**
  * react fiber property `_debugSource` created by `@babel/plugin-transform-react-jsx-source`
@@ -49,12 +50,12 @@ export interface CodeDataAttribute {
  * 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;
+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;
+declare const getCodeInfoFromProps: (fiber?: Fiber) => CodeInfo | undefined;
+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;
@@ -100,11 +101,13 @@ export declare const getCodeInfoFromFiber: (fiber?: Fiber) => CodeInfo | undefin
  *    └─ 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;
-};
+declare const getReferenceFiber: (baseFiber?: Fiber) => Fiber | undefined;
+declare const getElementCodeInfo: (element: HTMLElement) => CodeInfo | undefined;
+declare const getNamedFiber: (baseFiber?: Fiber) => Fiber | undefined;
+declare const getElementInspect: (element: HTMLElement) => {
+    fiber?: Fiber;
+    name?: string;
+    title: string;
+};
+
+export { type CodeDataAttribute, type CodeInfo, getCodeInfoFromDebugSource, getCodeInfoFromFiber, getCodeInfoFromProps, getElementCodeInfo, getElementInspect, getNamedFiber, getReferenceFiber };

package/dist/types/Inspector/utils/overlay.d.ts

@@ -4,27 +4,29 @@
  * remove all process for iframe, because iframe only need to think in chrome extension app,
  * which will deal multiple levels of nesting iframe.
  */
-export interface Rect {
-  bottom: number;
-  height: number;
-  left: number;
-  right: number;
-  top: number;
-  width: number;
+interface Rect {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
 }
-export interface BoxSizing {
-  borderTop: number;
-  borderBottom: number;
-  borderLeft: number;
-  borderRight: number;
-  paddingTop: number;
-  paddingBottom: number;
-  paddingLeft: number;
-  paddingRight: number;
-  marginTop: number;
-  marginBottom: number;
-  marginLeft: number;
-  marginRight: number;
+interface BoxSizing {
+    borderTop: number;
+    borderBottom: number;
+    borderLeft: number;
+    borderRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    marginTop: number;
+    marginBottom: number;
+    marginLeft: number;
+    marginRight: number;
 }
-export declare function getNestedBoundingClientRect(node: HTMLElement, boundaryWindow: Window | HTMLElement): Rect;
-export declare function getElementDimensions(domElement: Element): BoxSizing;
+declare function getNestedBoundingClientRect(node: HTMLElement, boundaryWindow: Window | HTMLElement): Rect;
+declare function getElementDimensions(domElement: Element): BoxSizing;
+
+export { type BoxSizing, type Rect, getElementDimensions, getNestedBoundingClientRect };