class ReactFiber { private selector: string; private debug: boolean; private messageIdCounter: number = 0; // Counter for unique message IDs constructor( selector: string, options: { debug?: boolean; } = {}, ) { this.selector = selector; this.debug = options.debug || false; } static find( selector: string, options: { debug?: boolean; } = {}, ) { return new ReactFiber(selector, options); } private async sendMessage(action: string, payload: any = {}): Promise { return new Promise((resolve, _) => { const messageId = this.messageIdCounter++; const message = { type: "reactFiberRequest", selector: this.selector, action, payload, debug: this.debug, messageId, }; const listener = (response: any) => { if ( response.data?.type === "reactFiberResponse" && response.data?.messageId === messageId ) { if (this.debug) { console.log("Content Received Response:", response.data.response); } resolve(response.data.response); window.removeEventListener("message", listener); } }; window.addEventListener("message", listener); window.postMessage(message, "*"); }); } async getState(key?: string | string[]): Promise { return this.sendMessage("getState", { key, }); } async setState(update: any | ((prevState: any) => any)): Promise { const updateFnString = typeof update === "function" ? update.toString() : null; const updateObject = typeof update !== "function" ? update : null; await this.sendMessage("setState", { updateFn: updateFnString, updateObject, }); return this; } async getProps(propName?: string): Promise { return this.sendMessage("getProp", { propName, }); } async setProp(propName: string, value: any): Promise { await this.sendMessage("setProp", { propName, value, }); return this; } async forceUpdate(): Promise { await this.sendMessage("forceUpdate"); return this; } } export default ReactFiber;