You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

108 lines
3.5 KiB

4 months ago
  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
  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 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. }