api.d.ts 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import type { ComponentBounds, Hookable } from './hooks.js';
  2. import type { Context } from './context.js';
  3. import type { ComponentInstance, ComponentState, StateBase } from './component.js';
  4. import type { App } from './app.js';
  5. import type { ID } from './util.js';
  6. export interface DevtoolsPluginApi<TSettings> {
  7. on: Hookable<Context>;
  8. notifyComponentUpdate(instance?: ComponentInstance): void;
  9. addTimelineLayer(options: TimelineLayerOptions): void;
  10. addTimelineEvent(options: TimelineEventOptions): void;
  11. addInspector(options: CustomInspectorOptions): void;
  12. sendInspectorTree(inspectorId: string): void;
  13. sendInspectorState(inspectorId: string): void;
  14. selectInspectorNode(inspectorId: string, nodeId: string): void;
  15. getComponentBounds(instance: ComponentInstance): Promise<ComponentBounds>;
  16. getComponentName(instance: ComponentInstance): Promise<string>;
  17. getComponentInstances(app: App): Promise<ComponentInstance[]>;
  18. highlightElement(instance: ComponentInstance): void;
  19. unhighlightElement(): void;
  20. getSettings(pluginId?: string): TSettings;
  21. now(): number;
  22. /**
  23. * @private Not implemented yet
  24. */
  25. setSettings(values: TSettings): void;
  26. }
  27. export interface AppRecord {
  28. id: string;
  29. name: string;
  30. instanceMap: Map<string, ComponentInstance>;
  31. rootInstance: ComponentInstance;
  32. }
  33. export interface TimelineLayerOptions<TData = any, TMeta = any> {
  34. id: string;
  35. label: string;
  36. color: number;
  37. skipScreenshots?: boolean;
  38. groupsOnly?: boolean;
  39. ignoreNoDurationGroups?: boolean;
  40. screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>;
  41. }
  42. export interface ScreenshotOverlayEvent {
  43. layerId: string;
  44. renderMeta: any;
  45. }
  46. export interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
  47. screenshot: ScreenshotData;
  48. events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[];
  49. index: number;
  50. }
  51. export declare type ScreenshotOverlayRenderResult = HTMLElement | string | false;
  52. export interface ScreenshotData {
  53. time: number;
  54. }
  55. export interface TimelineEventOptions {
  56. layerId: string;
  57. event: TimelineEvent;
  58. all?: boolean;
  59. }
  60. export interface TimelineEvent<TData = any, TMeta = any> {
  61. time: number;
  62. data: TData;
  63. logType?: 'default' | 'warning' | 'error';
  64. meta?: TMeta;
  65. groupId?: ID;
  66. title?: string;
  67. subtitle?: string;
  68. }
  69. export interface TimelineMarkerOptions {
  70. id: string;
  71. time: number;
  72. color: number;
  73. label: string;
  74. all?: boolean;
  75. }
  76. export interface CustomInspectorOptions {
  77. id: string;
  78. label: string;
  79. icon?: string;
  80. treeFilterPlaceholder?: string;
  81. stateFilterPlaceholder?: string;
  82. noSelectionText?: string;
  83. actions?: {
  84. icon: string;
  85. tooltip?: string;
  86. action: () => void | Promise<void>;
  87. }[];
  88. nodeActions?: {
  89. icon: string;
  90. tooltip?: string;
  91. action: (nodeId: string) => void | Promise<void>;
  92. }[];
  93. }
  94. export interface CustomInspectorNode {
  95. id: string;
  96. label: string;
  97. children?: CustomInspectorNode[];
  98. tags?: InspectorNodeTag[];
  99. }
  100. export interface InspectorNodeTag {
  101. label: string;
  102. textColor: number;
  103. backgroundColor: number;
  104. tooltip?: string;
  105. }
  106. export interface CustomInspectorState {
  107. [key: string]: (StateBase | Omit<ComponentState, 'type'>)[];
  108. }