bb-relay 0.0.32 → 0.0.33

package/dist/{EventReturn-CGAZ-l1W.d.mts → RequestReturn-ClPSkigo.d.mts}

@@ -1,8 +1,7 @@
 import { F as FileContent } from './FileContent-BWulmcoi.mjs';
 
 type Load = {
-    styles: string;
-    theme: "light" | "dark";
+    theme: string;
     languages: string[];
 };
 
@@ -11,7 +10,7 @@ type RelayEvent = {
      * Indicate change in theme
      */
     theme: {
-        response: "dark" | "light";
+        response: string;
     };
     /**
      * Indicate that the iframe is loaded and ready to receive instructions
@@ -22,12 +21,6 @@ type RelayEvent = {
     load: {
         response: Load;
     };
-    /**
-     * The style of the editor
-     */
-    style: {
-        response: string;
-    };
     /**
      * The language of the editor
      */
@@ -55,8 +48,33 @@ type RelayEvent = {
 interface EventReturn<K extends keyof RelayEvent> {
     type: K;
     response: RelayEvent[K]["response"];
-    responseId: string;
-    source: "event";
 }
 
-export type { EventReturn as E, RelayEvent as R };
+type RelayRequest = {
+    /**
+     * Updates the content of the current file
+     * Note, type is not stated, it would use the one stated in manifest
+     */
+    update: {
+        args: {
+            content: string;
+        };
+        response: {
+            error: string | null;
+        };
+    };
+    ping: {
+        args: unknown;
+        response: {
+            data: unknown | null;
+        };
+    };
+};
+
+interface RequestReturn<K extends keyof RelayRequest> {
+    type: K;
+    response: RelayRequest[K]["response"];
+    id: string;
+}
+
+export type { EventReturn as E, RelayEvent as R, RelayRequest as a, RequestReturn as b };

package/dist/{EventReturn-CXACStVQ.d.ts → RequestReturn-xCEiRgI1.d.ts}

@@ -1,8 +1,7 @@
 import { F as FileContent } from './FileContent-BWulmcoi.js';
 
 type Load = {
-    styles: string;
-    theme: "light" | "dark";
+    theme: string;
     languages: string[];
 };
 
@@ -11,7 +10,7 @@ type RelayEvent = {
      * Indicate change in theme
      */
     theme: {
-        response: "dark" | "light";
+        response: string;
     };
     /**
      * Indicate that the iframe is loaded and ready to receive instructions
@@ -22,12 +21,6 @@ type RelayEvent = {
     load: {
         response: Load;
     };
-    /**
-     * The style of the editor
-     */
-    style: {
-        response: string;
-    };
     /**
      * The language of the editor
      */
@@ -55,8 +48,33 @@ type RelayEvent = {
 interface EventReturn<K extends keyof RelayEvent> {
     type: K;
     response: RelayEvent[K]["response"];
-    responseId: string;
-    source: "event";
 }
 
-export type { EventReturn as E, RelayEvent as R };
+type RelayRequest = {
+    /**
+     * Updates the content of the current file
+     * Note, type is not stated, it would use the one stated in manifest
+     */
+    update: {
+        args: {
+            content: string;
+        };
+        response: {
+            error: string | null;
+        };
+    };
+    ping: {
+        args: unknown;
+        response: {
+            data: unknown | null;
+        };
+    };
+};
+
+interface RequestReturn<K extends keyof RelayRequest> {
+    type: K;
+    response: RelayRequest[K]["response"];
+    id: string;
+}
+
+export type { EventReturn as E, RelayEvent as R, RelayRequest as a, RequestReturn as b };

package/dist/api.d.mts

@@ -1,11 +1,17 @@
-import { R as RelayEvent } from './EventReturn-CGAZ-l1W.mjs';
-export { E as EventReturn } from './EventReturn-CGAZ-l1W.mjs';
+import { R as RelayEvent, a as RelayRequest } from './RequestReturn-ClPSkigo.mjs';
+export { E as EventReturn, b as RequestReturn } from './RequestReturn-ClPSkigo.mjs';
 import './FileContent-BWulmcoi.mjs';
 
 type EventParam<K extends keyof RelayEvent> = {
-    id: string;
     type: K;
     source: "event";
 };
 
-export { type EventParam, RelayEvent };
+type RequestParam<K extends keyof RelayRequest> = {
+    type: K;
+    source: "request";
+    id: string;
+    arg: RelayRequest[K]["args"];
+};
+
+export { type EventParam, RelayEvent, RelayRequest, type RequestParam };

package/dist/api.d.ts

@@ -1,11 +1,17 @@
-import { R as RelayEvent } from './EventReturn-CXACStVQ.js';
-export { E as EventReturn } from './EventReturn-CXACStVQ.js';
+import { R as RelayEvent, a as RelayRequest } from './RequestReturn-xCEiRgI1.js';
+export { E as EventReturn, b as RequestReturn } from './RequestReturn-xCEiRgI1.js';
 import './FileContent-BWulmcoi.js';
 
 type EventParam<K extends keyof RelayEvent> = {
-    id: string;
     type: K;
     source: "event";
 };
 
-export { type EventParam, RelayEvent };
+type RequestParam<K extends keyof RelayRequest> = {
+    type: K;
+    source: "request";
+    id: string;
+    arg: RelayRequest[K]["args"];
+};
+
+export { type EventParam, RelayEvent, RelayRequest, type RequestParam };

package/dist/index.d.mts

@@ -1,18 +1,9 @@
-import { R as RelayEvent, E as EventReturn } from './EventReturn-CGAZ-l1W.mjs';
 import { F as FileContent } from './FileContent-BWulmcoi.mjs';
 export { R as Result } from './Result-BLbZLEgX.mjs';
 import { P as Plugin } from './Plugin-Db_XUKx0.mjs';
+import { R as RelayEvent, E as EventReturn, a as RelayRequest, b as RequestReturn } from './RequestReturn-ClPSkigo.mjs';
 import './Wrapper-DWhYVa7F.mjs';
 
-declare class Relay {
-    private eventCallbacks;
-    handleEvent<K extends keyof RelayEvent>(data: EventReturn<K>): void;
-    init: () => void;
-    constructor();
-    subscribe<K extends keyof RelayEvent>(type: K, callback: (response: RelayEvent[K]["response"]) => void): () => void;
-    destroy(): void;
-}
-
 /**
  * This is the function to inject styles to the iframe from the parent window
  * @param css the css styles from parent window
@@ -43,10 +34,7 @@ type Manifest = {
     author?: string;
     homepage?: string;
     repository?: string;
-    theme?: {
-        name: string;
-        path: string;
-    };
+    theme?: string;
     [key: string]: unknown;
 };
 
@@ -78,4 +66,11 @@ declare function validateUpload(manifest: Manifest, plugin: Plugin["doc"]): bool
 type BBEventKey = keyof RelayEvent;
 declare function postEventResponse<K extends BBEventKey>(window: Window, response: Omit<EventReturn<K>, "source" | "responseId">): void;
 
-export { type FileNode, type Manifest, type Zip, Relay as default, extractStyles, injectStyles, postEventResponse, validateManifest, validateUpload };
+declare function subscribe<K extends keyof RelayEvent>(type: K, callback: (response: RelayEvent[K]["response"]) => void): void;
+
+type BBRequestKey = keyof RelayRequest;
+declare function postRequestResponse<K extends BBRequestKey>(window: Window, response: RequestReturn<K>): void;
+
+declare function request<K extends keyof RelayRequest>(type: K, arg: RelayRequest[K]["args"], callback?: (response: RelayRequest[K]["response"]) => void): void;
+
+export { type FileNode, type Manifest, type Zip, extractStyles, injectStyles, postEventResponse, postRequestResponse, request, subscribe, validateManifest, validateUpload };

package/dist/index.d.ts

@@ -1,18 +1,9 @@
-import { R as RelayEvent, E as EventReturn } from './EventReturn-CXACStVQ.js';
 import { F as FileContent } from './FileContent-BWulmcoi.js';
 export { R as Result } from './Result-BLbZLEgX.js';
 import { P as Plugin } from './Plugin-t8StCIag.js';
+import { R as RelayEvent, E as EventReturn, a as RelayRequest, b as RequestReturn } from './RequestReturn-xCEiRgI1.js';
 import './Wrapper-DWhYVa7F.js';
 
-declare class Relay {
-    private eventCallbacks;
-    handleEvent<K extends keyof RelayEvent>(data: EventReturn<K>): void;
-    init: () => void;
-    constructor();
-    subscribe<K extends keyof RelayEvent>(type: K, callback: (response: RelayEvent[K]["response"]) => void): () => void;
-    destroy(): void;
-}
-
 /**
  * This is the function to inject styles to the iframe from the parent window
  * @param css the css styles from parent window
@@ -43,10 +34,7 @@ type Manifest = {
     author?: string;
     homepage?: string;
     repository?: string;
-    theme?: {
-        name: string;
-        path: string;
-    };
+    theme?: string;
     [key: string]: unknown;
 };
 
@@ -78,4 +66,11 @@ declare function validateUpload(manifest: Manifest, plugin: Plugin["doc"]): bool
 type BBEventKey = keyof RelayEvent;
 declare function postEventResponse<K extends BBEventKey>(window: Window, response: Omit<EventReturn<K>, "source" | "responseId">): void;
 
-export { type FileNode, type Manifest, type Zip, Relay as default, extractStyles, injectStyles, postEventResponse, validateManifest, validateUpload };
+declare function subscribe<K extends keyof RelayEvent>(type: K, callback: (response: RelayEvent[K]["response"]) => void): void;
+
+type BBRequestKey = keyof RelayRequest;
+declare function postRequestResponse<K extends BBRequestKey>(window: Window, response: RequestReturn<K>): void;
+
+declare function request<K extends keyof RelayRequest>(type: K, arg: RelayRequest[K]["args"], callback?: (response: RelayRequest[K]["response"]) => void): void;
+
+export { type FileNode, type Manifest, type Zip, extractStyles, injectStyles, postEventResponse, postRequestResponse, request, subscribe, validateManifest, validateUpload };

package/dist/index.js

@@ -1,52 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/relay/registerEvent.ts
-function registerEvent(event) {
-  if (!window) throw new Error("Window not found");
-  if (window === window.parent) throw new Error("No parent window available");
-  window.parent.postMessage({ ...event, source: "event" }, "*");
-}
-
-// src/relay/index.ts
-var Relay = class {
-  constructor() {
-    this.eventCallbacks = /* @__PURE__ */ new Map();
-    this.init = () => {
-      window.addEventListener("message", (event) => {
-        this.handleEvent(event.data);
-      });
-      window.addEventListener("unload", () => {
-        this.destroy();
-      });
-    };
-    this.init();
-  }
-  handleEvent(data) {
-    if (data.source !== "event") return;
-    for (const [, { type, callback }] of this.eventCallbacks) {
-      const { response } = data;
-      if (type === data.type) {
-        callback(response);
-        return;
-      }
-    }
-  }
-  subscribe(type, callback) {
-    const id = crypto.randomUUID();
-    this.eventCallbacks.set(id, {
-      type,
-      callback
-    });
-    registerEvent({ type, id, source: "event" });
-    return () => {
-      this.eventCallbacks.delete(id);
-    };
-  }
-  destroy() {
-    this.eventCallbacks.clear();
-    window.removeEventListener("message", this.init);
-  }
-};
-
-// src/utils/inject-styles.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/utils/inject-styles.ts
 function injectStyles(css) {
   const style = document.createElement("style");
   style.textContent = css;
@@ -80,8 +32,6 @@ var validateManifest = (manifestContent) => {
     errors.push("Manifest permissions is missing");
   } else if (!Array.isArray(content.permissions)) {
     errors.push("Manifest permissions is not an array");
-  } else if (content.permissions.length === 0) {
-    errors.push("Manifest permissions is empty");
   }
   if (content.main) {
     if (!content.main.path) {
@@ -116,9 +66,7 @@ var validateManifest = (manifestContent) => {
     } else fileChecks.push(content.entry);
   }
   if (content.theme) {
-    if (!content.theme.name) errors.push("No name for theme");
-    if (!content.theme.path) errors.push("No css file path provided");
-    else fileChecks.push(content.theme.path);
+    fileChecks.push(content.theme);
   }
   return {
     errors,
@@ -157,15 +105,59 @@ function validateUpload(manifest, plugin) {
 // src/relay/postEventResponse.ts
 function postEventResponse(window2, response) {
   const res = {
-    ...response,
-    source: "event",
-    responseId: crypto.randomUUID()
+    ...response
+  };
+  window2.postMessage(res, "*");
+}
+
+// src/relay/registerEvent.ts
+function registerEvent(event) {
+  if (!window) throw new Error("Window not found");
+  if (window === window.parent) throw new Error("No parent window available");
+  window.parent.postMessage({ ...event, source: "event" }, "*");
+}
+
+// src/relay/subscribe.ts
+function subscribe(type, callback) {
+  registerEvent({ type, source: "event" });
+  window.addEventListener("message", (ev) => {
+    const data = ev.data;
+    const { response } = data;
+    if (type === data.type) {
+      callback(response);
+    }
+  });
+}
+
+// src/relay/postRequestResponse.ts
+function postRequestResponse(window2, response) {
+  const res = {
+    ...response
   };
   window2.postMessage(res, "*");
 }
 
-// src/index.ts
-var index_default = Relay;
+// src/relay/registerRequest.ts
+function registerRequest(request2) {
+  if (!window) throw new Error("Window not found");
+  if (window === window.parent) throw new Error("No parent window available");
+  window.parent.postMessage({ ...request2, source: "request" }, "*");
+}
+
+// src/relay/request.ts
+function request(type, arg, callback) {
+  const id = crypto.randomUUID();
+  registerRequest({ type, id, arg, source: "request" });
+  window.addEventListener("message", (ev) => {
+    const data = ev.data;
+    const { response } = data;
+    if (type === data.type && id === data.id) {
+      _optionalChain([callback, 'optionalCall', _ => _(response)]);
+    }
+  });
+}
+
+
 
 
 
@@ -173,4 +165,4 @@ var index_default = Relay;
 
 
 
-exports.default = index_default; exports.extractStyles = extract_styles_default; exports.injectStyles = injectStyles; exports.postEventResponse = postEventResponse; exports.validateManifest = validate_manifest_default; exports.validateUpload = validateUpload;
+exports.extractStyles = extract_styles_default; exports.injectStyles = injectStyles; exports.postEventResponse = postEventResponse; exports.postRequestResponse = postRequestResponse; exports.request = request; exports.subscribe = subscribe; exports.validateManifest = validate_manifest_default; exports.validateUpload = validateUpload;

package/dist/index.mjs

@@ -1,51 +1,3 @@
-// src/relay/registerEvent.ts
-function registerEvent(event) {
-  if (!window) throw new Error("Window not found");
-  if (window === window.parent) throw new Error("No parent window available");
-  window.parent.postMessage({ ...event, source: "event" }, "*");
-}
-
-// src/relay/index.ts
-var Relay = class {
-  constructor() {
-    this.eventCallbacks = /* @__PURE__ */ new Map();
-    this.init = () => {
-      window.addEventListener("message", (event) => {
-        this.handleEvent(event.data);
-      });
-      window.addEventListener("unload", () => {
-        this.destroy();
-      });
-    };
-    this.init();
-  }
-  handleEvent(data) {
-    if (data.source !== "event") return;
-    for (const [, { type, callback }] of this.eventCallbacks) {
-      const { response } = data;
-      if (type === data.type) {
-        callback(response);
-        return;
-      }
-    }
-  }
-  subscribe(type, callback) {
-    const id = crypto.randomUUID();
-    this.eventCallbacks.set(id, {
-      type,
-      callback
-    });
-    registerEvent({ type, id, source: "event" });
-    return () => {
-      this.eventCallbacks.delete(id);
-    };
-  }
-  destroy() {
-    this.eventCallbacks.clear();
-    window.removeEventListener("message", this.init);
-  }
-};
-
 // src/utils/inject-styles.ts
 function injectStyles(css) {
   const style = document.createElement("style");
@@ -80,8 +32,6 @@ var validateManifest = (manifestContent) => {
     errors.push("Manifest permissions is missing");
   } else if (!Array.isArray(content.permissions)) {
     errors.push("Manifest permissions is not an array");
-  } else if (content.permissions.length === 0) {
-    errors.push("Manifest permissions is empty");
   }
   if (content.main) {
     if (!content.main.path) {
@@ -116,9 +66,7 @@ var validateManifest = (manifestContent) => {
     } else fileChecks.push(content.entry);
   }
   if (content.theme) {
-    if (!content.theme.name) errors.push("No name for theme");
-    if (!content.theme.path) errors.push("No css file path provided");
-    else fileChecks.push(content.theme.path);
+    fileChecks.push(content.theme);
   }
   return {
     errors,
@@ -157,20 +105,64 @@ function validateUpload(manifest, plugin) {
 // src/relay/postEventResponse.ts
 function postEventResponse(window2, response) {
   const res = {
-    ...response,
-    source: "event",
-    responseId: crypto.randomUUID()
+    ...response
+  };
+  window2.postMessage(res, "*");
+}
+
+// src/relay/registerEvent.ts
+function registerEvent(event) {
+  if (!window) throw new Error("Window not found");
+  if (window === window.parent) throw new Error("No parent window available");
+  window.parent.postMessage({ ...event, source: "event" }, "*");
+}
+
+// src/relay/subscribe.ts
+function subscribe(type, callback) {
+  registerEvent({ type, source: "event" });
+  window.addEventListener("message", (ev) => {
+    const data = ev.data;
+    const { response } = data;
+    if (type === data.type) {
+      callback(response);
+    }
+  });
+}
+
+// src/relay/postRequestResponse.ts
+function postRequestResponse(window2, response) {
+  const res = {
+    ...response
   };
   window2.postMessage(res, "*");
 }
 
-// src/index.ts
-var index_default = Relay;
+// src/relay/registerRequest.ts
+function registerRequest(request2) {
+  if (!window) throw new Error("Window not found");
+  if (window === window.parent) throw new Error("No parent window available");
+  window.parent.postMessage({ ...request2, source: "request" }, "*");
+}
+
+// src/relay/request.ts
+function request(type, arg, callback) {
+  const id = crypto.randomUUID();
+  registerRequest({ type, id, arg, source: "request" });
+  window.addEventListener("message", (ev) => {
+    const data = ev.data;
+    const { response } = data;
+    if (type === data.type && id === data.id) {
+      callback?.(response);
+    }
+  });
+}
 export {
-  index_default as default,
   extract_styles_default as extractStyles,
   injectStyles,
   postEventResponse,
+  postRequestResponse,
+  request,
+  subscribe,
   validate_manifest_default as validateManifest,
   validateUpload
 };

package/dist/plugin.d.mts

@@ -46,7 +46,7 @@ interface InputInstruction extends BaseInstruction<"input"> {
     value: string;
     change?: string;
     label?: string;
-    type: HTMLInputElement["type"];
+    type?: HTMLInputElement["type"];
     disabled?: boolean;
 }
 
@@ -233,7 +233,7 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
      *    return null
      * }
      */
-    abstract renderSidebar(): ElementInstruction | null;
+    renderSidebar?(): ElementInstruction | null;
     private onSidebarLoad;
     /**
      * This will be like a dialog that will cover the main view.
@@ -266,6 +266,7 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
     protected on(event: "file-created", callback: (filePath: string) => void): void;
     protected on(event: "file-changed", callback: (filePath: string) => void): void;
     protected on(event: "file-deleted", callback: (filePath: string) => void): void;
+    protected on(event: "ping", callback: (arg: unknown) => void): void;
     protected setState(param: SetState<T>): void;
     protected getState(): T;
     selectFile(filePath: string): void;

package/dist/plugin.d.ts

@@ -46,7 +46,7 @@ interface InputInstruction extends BaseInstruction<"input"> {
     value: string;
     change?: string;
     label?: string;
-    type: HTMLInputElement["type"];
+    type?: HTMLInputElement["type"];
     disabled?: boolean;
 }
 
@@ -233,7 +233,7 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
      *    return null
      * }
      */
-    abstract renderSidebar(): ElementInstruction | null;
+    renderSidebar?(): ElementInstruction | null;
     private onSidebarLoad;
     /**
      * This will be like a dialog that will cover the main view.
@@ -266,6 +266,7 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
     protected on(event: "file-created", callback: (filePath: string) => void): void;
     protected on(event: "file-changed", callback: (filePath: string) => void): void;
     protected on(event: "file-deleted", callback: (filePath: string) => void): void;
+    protected on(event: "ping", callback: (arg: unknown) => void): void;
     protected setState(param: SetState<T>): void;
     protected getState(): T;
     selectFile(filePath: string): void;

package/dist/plugin.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/lib/plugin/getPluginChannel.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/lib/plugin/getPluginChannel.ts
 var getPluginChannel = (event, pluginId) => {
   return `plugin:${pluginId}:${event}`;
 };
@@ -54,7 +54,7 @@ var Plugin = class {
       this.index = -1;
       this.eventIds.forEach((event) => this.off(event));
       this.eventIds = [];
-      const sidebar = this.renderSidebar();
+      const sidebar = _optionalChain([this, 'access', _ => _.renderSidebar, 'optionalCall', _2 => _2()]) || null;
       if (sidebar) this.render("sidebar", sidebar);
     });
     this.onSidebarLoad();
@@ -90,7 +90,7 @@ var Plugin = class {
   onSidebarLoad() {
     this.index = -1;
     this.registerHandler("sidebar-load", () => {
-      return this.renderSidebar();
+      return _optionalChain([this, 'access', _3 => _3.renderSidebar, 'optionalCall', _4 => _4()]) || null;
     });
   }
   // -----------------------------

package/dist/plugin.mjs

@@ -54,7 +54,7 @@ var Plugin = class {
       this.index = -1;
       this.eventIds.forEach((event) => this.off(event));
       this.eventIds = [];
-      const sidebar = this.renderSidebar();
+      const sidebar = this.renderSidebar?.() || null;
       if (sidebar) this.render("sidebar", sidebar);
     });
     this.onSidebarLoad();
@@ -90,7 +90,7 @@ var Plugin = class {
   onSidebarLoad() {
     this.index = -1;
     this.registerHandler("sidebar-load", () => {
-      return this.renderSidebar();
+      return this.renderSidebar?.() || null;
     });
   }
   // -----------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bb-relay",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "For managing bb-editor extension",
   "license": "ISC",
   "author": "Ade Adeola",

package/src/api.ts

@@ -1,5 +1,15 @@
 import RelayEvent from "./types/api/RelayEvent";
 import EventParam from "./types/api/EventParam";
 import EventReturn from "./types/api/EventReturn";
+import RequestParam from "./types/api/RequestParam";
+import RequestReturn from "./types/api/RequestReturn";
+import { RelayRequest } from "./relay/registerRequest";
 
-export type { RelayEvent, EventReturn, EventParam };
+export type {
+  RelayEvent,
+  EventReturn,
+  EventParam,
+  RequestParam,
+  RequestReturn,
+  RelayRequest,
+};

package/src/index.ts

@@ -1,4 +1,3 @@
-import Relay from "./relay";
 import injectStyles from "./utils/inject-styles";
 import validateManifest from "./lib/validate-manifest";
 import { Manifest } from "./types/editor/Manifest";
@@ -7,12 +6,13 @@ import Result from "./types/editor/Result";
 import extractStyles from "./utils/extract-styles";
 import validateUpload from "./lib/validate-upload";
 import { postEventResponse } from "./relay/postEventResponse";
+import subscribe from "./relay/subscribe";
+import { postRequestResponse } from "./relay/postRequestResponse";
+import request from "./relay/request";
 
-export default Relay;
-
-export { injectStyles, extractStyles };
+export { injectStyles, extractStyles, subscribe, request };
 export { validateManifest, validateUpload };
-export { postEventResponse };
+export { postEventResponse, postRequestResponse };
 
 export type { Result, FileNode, Zip };
 

package/src/lib/plugin/ElementInstruction/InputInstruction.ts

@@ -5,6 +5,6 @@ export interface InputInstruction extends BaseInstruction<"input"> {
   value: string;
   change?: string;
   label?: string;
-  type: HTMLInputElement["type"];
+  type?: HTMLInputElement["type"];
   disabled?: boolean;
 }

package/src/lib/plugin/index.ts

@@ -54,7 +54,8 @@ type EventSubs =
   | "file-selected"
   | "file-created"
   | "file-changed"
-  | "file-deleted";
+  | "file-deleted"
+  | "ping";
 
 export type SetState<T extends Record<string, unknown>> =
   | Partial<T>
@@ -122,7 +123,7 @@ export abstract class Plugin<T extends Record<string, unknown>> {
       this.index = -1;
       this.eventIds.forEach((event) => this.off(event));
       this.eventIds = [];
-      const sidebar = this.renderSidebar();
+      const sidebar = this.renderSidebar?.() || null;
       if (sidebar) this.render("sidebar", sidebar);
     });
 
@@ -212,12 +213,12 @@ export abstract class Plugin<T extends Record<string, unknown>> {
    *    return null
    * }
    */
-  abstract renderSidebar(): ElementInstruction | null;
+  renderSidebar?(): ElementInstruction | null;
 
   private onSidebarLoad(): void {
     this.index = -1;
     this.registerHandler("sidebar-load", () => {
-      return this.renderSidebar();
+      return this.renderSidebar?.() || null;
     });
   }
   // -----------------------------
@@ -332,9 +333,12 @@ export abstract class Plugin<T extends Record<string, unknown>> {
     callback: (filePath: string) => void,
   ): void;
 
+  protected on(event: "ping", callback: (arg: unknown) => void): void;
+
   protected on(event: EventSubs, callback: (arg: any) => void): void {
     this.registerSubscription(event, callback);
   }
+
   // -----------------------------
   // Status Bar
   // -----------------------------

package/src/lib/validate-manifest/index.ts

@@ -25,8 +25,6 @@ const validateManifest = (manifestContent: string) => {
     errors.push("Manifest permissions is missing");
   } else if (!Array.isArray(content.permissions)) {
     errors.push("Manifest permissions is not an array");
-  } else if (content.permissions.length === 0) {
-    errors.push("Manifest permissions is empty");
   }
 
   if (content.main) {
@@ -66,9 +64,7 @@ const validateManifest = (manifestContent: string) => {
   }
 
   if (content.theme) {
-    if (!content.theme.name) errors.push("No name for theme");
-    if (!content.theme.path) errors.push("No css file path provided");
-    else fileChecks.push(content.theme.path);
+    fileChecks.push(content.theme);
   }
   return {
     errors,

package/src/relay/postEventResponse.ts

@@ -8,8 +8,6 @@ export function postEventResponse<K extends BBEventKey>(
 ): void {
   const res: EventReturn<K> = {
     ...response,
-    source: "event",
-    responseId: crypto.randomUUID(),
   };
   window.postMessage(res, "*");
 }

package/src/relay/postRequestResponse.ts

@@ -0,0 +1,14 @@
+import RequestReturn from "@/types/api/RequestReturn";
+import { RelayRequest } from "./registerRequest";
+
+type BBRequestKey = keyof RelayRequest;
+
+export function postRequestResponse<K extends BBRequestKey>(
+  window: Window,
+  response: RequestReturn<K>,
+): void {
+  const res: RequestReturn<K> = {
+    ...response,
+  };
+  window.postMessage(res, "*");
+}

package/src/relay/registerRequest.ts

@@ -0,0 +1,35 @@
+import RequestParam from "@/types/api/RequestParam";
+
+export type RelayRequest = {
+  /**
+   * Updates the content of the current file
+   * Note, type is not stated, it would use the one stated in manifest
+   */
+  update: {
+    args: {
+      content: string;
+    };
+    response: {
+      error: string | null;
+    };
+  };
+  ping: {
+    args: unknown;
+    response: {
+      data: unknown | null;
+    };
+  };
+};
+
+/**
+ * This will be used to send message (request) from the iframe to editor
+ * @param request the params that will be sent to the editor
+ */
+export default function registerRequest<K extends keyof RelayRequest>(
+  request: RequestParam<K>,
+) {
+  if (!window) throw new Error("Window not found");
+  if (window === window.parent) throw new Error("No parent window available");
+
+  window.parent.postMessage({ ...request, source: "request" }, "*");
+}

package/src/relay/request.ts

@@ -0,0 +1,19 @@
+import registerRequest, { RelayRequest } from "./registerRequest";
+import RequestReturn from "@/types/api/RequestReturn";
+
+export default function request<K extends keyof RelayRequest>(
+  type: K,
+  arg: RelayRequest[K]["args"],
+  callback?: (response: RelayRequest[K]["response"]) => void,
+) {
+  const id = crypto.randomUUID();
+  registerRequest({ type, id, arg, source: "request" });
+  window.addEventListener("message", (ev: MessageEvent) => {
+    const data = ev.data as RequestReturn<K>;
+
+    const { response } = data as RequestReturn<K>;
+    if (type === data.type && id === data.id) {
+      callback?.(response);
+    }
+  });
+}

package/src/relay/subscribe.ts

@@ -0,0 +1,17 @@
+import { EventReturn, RelayEvent } from "@/api";
+import registerEvent from "./registerEvent";
+
+export default function subscribe<K extends keyof RelayEvent>(
+  type: K,
+  callback: (response: RelayEvent[K]["response"]) => void,
+) {
+  registerEvent({ type: type, source: "event" });
+  window.addEventListener("message", (ev: MessageEvent) => {
+    const data = ev.data as EventReturn<K>;
+
+    const { response } = data as EventReturn<K>;
+    if (type === data.type) {
+      callback(response);
+    }
+  });
+}

package/src/types/api/EventParam.ts

@@ -1,7 +1,6 @@
 import RelayEvent from "./RelayEvent";
 
 type EventParam<K extends keyof RelayEvent> = {
-  id: string;
   type: K;
   source: "event";
 };

package/src/types/api/EventReturn.ts

@@ -3,8 +3,6 @@ import RelayEvent from "./RelayEvent";
 interface EventReturn<K extends keyof RelayEvent> {
   type: K;
   response: RelayEvent[K]["response"];
-  responseId: string;
-  source: "event";
 }
 
 export default EventReturn;

package/src/types/api/RelayEvent.ts

@@ -6,7 +6,7 @@ type RelayEvent = {
    * Indicate change in theme
    */
   theme: {
-    response: "dark" | "light";
+    response: string;
   };
   /**
    * Indicate that the iframe is loaded and ready to receive instructions
@@ -17,12 +17,6 @@ type RelayEvent = {
   load: {
     response: Load;
   };
-  /**
-   * The style of the editor
-   */
-  style: {
-    response: string;
-  };
   /**
    * The language of the editor
    */

package/src/types/api/RequestParam.ts

@@ -0,0 +1,10 @@
+import { RelayRequest } from "@/relay/registerRequest";
+
+type RequestParam<K extends keyof RelayRequest> = {
+  type: K;
+  source: "request";
+  id: string;
+  arg: RelayRequest[K]["args"];
+};
+
+export default RequestParam;

package/src/types/api/RequestReturn.ts

@@ -0,0 +1,9 @@
+import { RelayRequest } from "@/relay/registerRequest";
+
+interface RequestReturn<K extends keyof RelayRequest> {
+  type: K;
+  response: RelayRequest[K]["response"];
+  id: string;
+}
+
+export default RequestReturn;

package/src/types/editor/Load.ts

@@ -1,6 +1,5 @@
 type Load = {
-  styles: string;
-  theme: "light" | "dark";
+  theme: string;
   languages: string[];
 };
 

package/src/types/editor/Manifest.ts

@@ -31,9 +31,6 @@ export type Manifest = {
   author?: string;
   homepage?: string;
   repository?: string;
-  theme?: {
-    name: string;
-    path: string;
-  };
+  theme?: string;
   [key: string]: unknown;
 };

package/src/relay/index.ts

@@ -1,61 +0,0 @@
-import RelayEvent from "../types/api/RelayEvent";
-import EventReturn from "../types/api/EventReturn";
-import registerEvent from "./registerEvent";
-
-export default class Relay {
-  private eventCallbacks = new Map<
-    string,
-    {
-      type: keyof RelayEvent;
-      callback: <K extends keyof RelayEvent>(
-        response: RelayEvent[K]["response"],
-      ) => void;
-    }
-  >();
-
-  handleEvent<K extends keyof RelayEvent>(data: EventReturn<K>) {
-    if (data.source !== "event") return;
-    for (const [, { type, callback }] of this.eventCallbacks) {
-      const { response } = data as EventReturn<typeof data.type>;
-      if (type === data.type) {
-        callback(response);
-        return;
-      }
-    }
-  }
-
-  init = () => {
-    window.addEventListener("message", (event: MessageEvent) => {
-      this.handleEvent(event.data as EventReturn<any>);
-    });
-
-    window.addEventListener("unload", () => {
-      this.destroy();
-    });
-  };
-
-  constructor() {
-    this.init();
-  }
-
-  subscribe<K extends keyof RelayEvent>(
-    type: K,
-    callback: (response: RelayEvent[K]["response"]) => void,
-  ) {
-    const id = crypto.randomUUID();
-    this.eventCallbacks.set(id, {
-      type,
-      callback: callback as (response: RelayEvent[K]["response"]) => void,
-    });
-    registerEvent({ type, id, source: "event" });
-
-    return () => {
-      this.eventCallbacks.delete(id);
-    };
-  }
-
-  destroy() {
-    this.eventCallbacks.clear();
-    window.removeEventListener("message", this.init);
-  }
-}