@caido/sdk-frontend 0.49.1-beta.3 → 0.49.1-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caido/sdk-frontend",
-  "version": "0.49.1-beta.3",
+  "version": "0.49.1-beta.5",
   "description": "Typing for the Caido Frontend SDK",
   "author": "Caido Labs Inc. <dev@caido.io>",
   "license": "MIT",

package/src/types/index.d.ts

@@ -1,11 +1,11 @@
-export { FooterSlot } from "./types/footer";
+export { FooterSlot, type FooterSlotContent } from "./types/footer";
 export type { DialogOptions } from "./types/window";
 export type { CommandContext } from "./types/commands";
 export type { MenuItem } from "./types/menu";
-export { type ReplayTab, type ReplaySession, type ReplayCollection, ReplaySlot, } from "./types/replay";
+export { type ReplayTab, type ReplaySession, type ReplayCollection, ReplaySlot, type ReplaySlotContent, } from "./types/replay";
 export type { HostedFile } from "./types/files";
 export type { Filter } from "./types/filter";
-export type { HTTPQL, ID } from "./types/utils";
+export type { HTTPQL, ID, ComponentDefinition } from "./types/utils";
 export type { JSONValue, JSONCompatible } from "./types/json";
 export type { SlotContent, ButtonSlotContent, CustomSlotContent, CommandSlotContent, } from "./types/slots";
 export type { RequestViewModeOptions } from "./types/request";

package/src/types/sdks/commandPalette.d.ts

@@ -6,7 +6,6 @@ import { type CommandID } from "../types/commands";
 export type CommandPaletteSDK = {
     /**
      * Register a command.
-     * @deprecated Use `sdk.commandPalette.addToSlot` instead.
      * @param commandId The id of the command to register.
      */
     register: (commandId: CommandID) => void;

package/src/types/sdks/replay.d.ts

@@ -1,6 +1,6 @@
 import { type Extension } from "@codemirror/state";
-import { type ReplayCollection, type ReplaySession, type ReplaySlot, type ReplayTab } from "../types/replay";
-import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent, type DefineAddToSlotFn } from "../types/slots";
+import { type ReplayCollection, type ReplaySession, type ReplaySlotContent, type ReplayTab } from "../types/replay";
+import { type DefineAddToSlotFn } from "../types/slots";
 import type { ID } from "../types/utils";
 /**
  * Utilities to interact with Replay.
@@ -96,11 +96,7 @@ export type ReplaySDK = {
      * });
      * ```
      */
-    addToSlot: DefineAddToSlotFn<{
-        [ReplaySlot.SessionToolbarPrimary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
-        [ReplaySlot.SessionToolbarSecondary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
-        [ReplaySlot.Topbar]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
-    }>;
+    addToSlot: DefineAddToSlotFn<ReplaySlotContent>;
     /**
      * Add an extension to the request editor.
      * @param extension The extension to add.

package/src/types/sdks/window.d.ts

@@ -1,6 +1,6 @@
 import type { Editor } from "../types/editor";
-import type { CustomSlotContent } from "../types/slots";
-import { type DialogOptions } from "../types/window";
+import type { ComponentDefinition } from "../types/utils";
+import { type Dialog, type DialogOptions } from "../types/window";
 /**
  * Utilities to interact with the active page.
  * @category Window
@@ -32,6 +32,7 @@ export type WindowSDK = {
      * @param options.modal Whether the dialog is modal. Defaults to true
      * @param options.position The position of the dialog on the screen. Defaults to center
      * @param options.closable Whether the close icon is hidden . Defaults to false
+     * @returns A dialog object that can be used to close the dialog.
      */
-    showDialog: (component: CustomSlotContent, options?: DialogOptions) => void;
+    showDialog: (component: ComponentDefinition, options?: DialogOptions) => Dialog;
 };

package/src/types/types/replay.d.ts

@@ -1,3 +1,4 @@
+import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent } from "./slots";
 import { type ID } from "./utils";
 export declare const ReplaySlot: {
     readonly SessionToolbarPrimary: "session-toolbar-primary";
@@ -5,6 +6,11 @@ export declare const ReplaySlot: {
     readonly Topbar: "topbar";
 };
 export type ReplaySlot = (typeof ReplaySlot)[keyof typeof ReplaySlot];
+export type ReplaySlotContent = {
+    [ReplaySlot.SessionToolbarPrimary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+    [ReplaySlot.SessionToolbarSecondary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+    [ReplaySlot.Topbar]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+};
 /**
  * A replay tab.
  * @category Replay

package/src/types/types/request.d.ts

@@ -1,4 +1,4 @@
-import { type Component } from "vue";
+import { type ComponentDefinition } from "./utils";
 export type RequestViewModeOptions = {
     /**
      * The label of the view mode.
@@ -7,5 +7,5 @@ export type RequestViewModeOptions = {
     /**
      * The component to render when the view mode is selected.
      */
-    component: Component;
+    view: ComponentDefinition;
 };

package/src/types/types/slots.d.ts

@@ -1,5 +1,5 @@
-import { type Component } from "vue";
 import { type CommandID } from "./commands";
+import { type ComponentDefinition } from "./utils";
 type DefineSlotContent<TType extends string, P extends Record<string, unknown>> = {
     type: TType;
 } & P;
@@ -8,8 +8,8 @@ export type ButtonSlotContent = DefineSlotContent<"Button", {
     icon?: string;
     onClick: () => void;
 }>;
-export type CustomSlotContent<TProps extends Record<string, unknown> = Record<string, unknown>> = DefineSlotContent<"Custom", {
-    component: Component<TProps>;
+export type CustomSlotContent = DefineSlotContent<"Custom", {
+    definition: ComponentDefinition;
 }>;
 export type CommandSlotContent = DefineSlotContent<"Command", {
     commandId: CommandID;

package/src/types/types/utils.d.ts

@@ -1,3 +1,4 @@
+import { type Component as VueComponent } from "vue";
 /**
  * A unique Caido identifier per type.
  */
@@ -18,6 +19,15 @@ export type HTTPQL = string & {
 export type Icon = string & {
     __icon?: never;
 };
+/**
+ * A custom component that will be rendered in the UI.
+ *
+ */
+export type ComponentDefinition = {
+    component: VueComponent;
+    props?: Record<string, unknown>;
+    events?: Record<string, (...args: unknown[]) => void>;
+};
 export type PromisifiedReturnType<T extends (...args: unknown[]) => unknown> = ReturnType<T> extends Promise<infer U> ? Promise<U> : Promise<ReturnType<T>>;
 /**
  * A handle for a listener.

package/src/types/types/window.d.ts

@@ -6,3 +6,6 @@ export type DialogOptions = {
     modal?: boolean;
     position?: "left" | "right" | "top" | "bottom" | "center" | "topleft" | "topright" | "bottomleft" | "bottomright";
 };
+export type Dialog = {
+    close: () => void;
+};