@adobe/uix-core 0.7.1-nightly.20230226 → 0.7.1-nightly.20230228

package/src/logging-formatters.ts

@@ -0,0 +1,57 @@
+/**
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import type { HostMethodAddress } from "./types";
+import { isFunction, isIterable, isPrimitive } from "./value-assertions";
+
+/**
+ * Try and format any type of value for logging.
+ *
+ * @privateRemarks
+ * **WARNING**: This is an expensive operation due to the JSON.stringify, and
+ * should only be done when debugging or in error conditions.
+ * @internal
+ */
+export function formatHostMethodArgument(argument: unknown): string {
+  try {
+    return JSON.stringify(argument, null, 2);
+  } catch (e) {
+    if (isIterable(argument)) {
+      return `Iterable<${argument.length}>`;
+    }
+    if (isPrimitive(argument) || isFunction(argument)) {
+      return `${argument}`;
+    }
+    return Object.prototype.toString.call(argument);
+  }
+}
+
+/**
+ * Try and format a remote method call as it would appear during debugging.
+ *
+ * @privateRemarks
+ * **WARNING**: This is an expensive operation due to the JSON.stringify, and
+ * should only be done when debugging or in error conditions.  This Functions
+ * like {@link @adobe/uix-core/#timedPromise} which take logging strings also
+ * take callbacks for lazy evaluation of debugging messages. Use this only in
+ * such callbacks.
+ * @internal
+ */
+export function formatHostMethodAddress(address: HostMethodAddress) {
+  const path =
+    address.path?.length < 1
+      ? "<Missing method path!>"
+      : address.path.join(".");
+  const name = address.name || "<Missing method name!>";
+  const args = address.args?.map(formatHostMethodArgument).join(",");
+  return `host.${path}.${name}(${args})`;
+}

package/src/promises/timed.ts

@@ -3,7 +3,7 @@
  * the original Promise, but if it doesn't resolve within the timeout interval,
  * it will reject with a timeout error.
  *
- * @param description - Job description to be used in the timeout error
+ * @param describe - Job description to be used in the timeout error
  * @param promise - Original promise to set a timeout for
  * @param timeoutMs - Time to wait (ms) before rejecting
  * @param onReject - Run when promise times out to clean up handles
@@ -12,21 +12,29 @@
  * @internal
  */
 export function timeoutPromise<T>(
-  description: string,
+  describe: string | (() => string),
   promise: Promise<T>,
   ms: number,
-  onReject: (e: Error) => void
+  onReject?: (e: Error) => void
 ): Promise<T> {
   return new Promise((resolve, reject) => {
     const cleanupAndReject = async (e: Error) => {
       try {
-        await onReject(e);
+        if (onReject) {
+          await onReject(e);
+        }
       } finally {
         reject(e);
       }
     };
     const timeout = setTimeout(() => {
-      cleanupAndReject(new Error(`${description} timed out after ${ms}ms`));
+      cleanupAndReject(
+        new Error(
+          `${
+            typeof describe === "function" ? describe() : describe
+          } timed out after ${ms}ms`
+        )
+      );
     }, ms);
     promise
       .then((result) => {

package/src/tunnel/tunnel.test.ts

@@ -3,6 +3,22 @@ import { wait } from "../promises/wait";
 import { Tunnel } from "./tunnel";
 import { TunnelMessenger } from "./tunnel-messenger";
 
+class FakeIframe {
+  contentWindow: MessagePort;
+  isConnected: boolean;
+  src: string;
+  private channel = new MessageChannel();
+  nodeName = "IFRAME";
+  constructor() {
+    this.contentWindow = new MessageChannel().port1;
+  }
+  destroy() {
+    this.channel.port1.close();
+    this.channel.port2.close();
+    this.channel = null;
+  }
+}
+
 const fakeConsole = {
   error: jest.fn(),
   warn: jest.fn(),
@@ -20,7 +36,6 @@ function tunnelHarness(
   config = defaultTunnelConfig
 ): TunnelHarness {
   const tunnel = new Tunnel(config);
-  tunnel.connect(port);
   openPorts.push(port);
   return {
     tunnel,
@@ -52,6 +67,10 @@ describe("an EventEmitter dispatching and receiving from a MessagePort", () => {
     local = tunnelHarness(channel.port1);
     remote = tunnelHarness(channel.port2);
   });
+  const connectTunnels = () => {
+    local.tunnel.connect(local.port);
+    remote.tunnel.connect(remote.port);
+  };
   afterEach(() => {
     while (openPorts.length > 0) {
       openPorts.pop().close();
@@ -60,6 +79,7 @@ describe("an EventEmitter dispatching and receiving from a MessagePort", () => {
   it("receives MessageEvents and emits local events to listeners", async () => {
     const test1Handler = jest.fn();
     local.tunnel.on("test1", test1Handler);
+    connectTunnels();
     remote.port.postMessage({
       type: "test1",
       payload: {
@@ -75,6 +95,7 @@ describe("an EventEmitter dispatching and receiving from a MessagePort", () => {
     const remoteConnectHandler = jest.fn();
     local.tunnel.on("connected", localConnectHandler);
     remote.tunnel.on("connected", remoteConnectHandler);
+    connectTunnels();
     await wait(100);
     expect(localConnectHandler).toHaveBeenCalledTimes(1);
     expect(remoteConnectHandler).toHaveBeenCalledTimes(1);
@@ -82,22 +103,19 @@ describe("an EventEmitter dispatching and receiving from a MessagePort", () => {
   it("#emitRemote() sends remote events after connect", async () => {
     const messageListener = jest.fn();
     remote.port.addEventListener("message", messageListener);
+    connectTunnels();
     local.tunnel.emit("test2", { test2Payload: true });
     local.tunnel.emit("test3", { test3Payload: true });
     await wait(10);
-    expect(messageListener).toHaveBeenCalledTimes(3);
-    const connectMessageEvent = messageListener.mock.calls[0][0];
-    expect(connectMessageEvent).toHaveProperty("data", {
-      type: "connected",
-    });
-    const test2MessageEvent = messageListener.mock.calls[1][0];
+    expect(messageListener).toHaveBeenCalledTimes(2);
+    const test2MessageEvent = messageListener.mock.calls[0][0];
     expect(test2MessageEvent).toHaveProperty("data", {
       type: "test2",
       payload: {
         test2Payload: true,
       },
     });
-    const test3MessageEvent = messageListener.mock.calls[2][0];
+    const test3MessageEvent = messageListener.mock.calls[1][0];
     expect(test3MessageEvent).toHaveProperty("data", {
       type: "test3",
       payload: {
@@ -106,16 +124,17 @@ describe("an EventEmitter dispatching and receiving from a MessagePort", () => {
     });
   });
   it("exchanges events between two emitters sharing ports", async () => {
+    connectTunnels();
     await testEventExchange(local.tunnel, remote.tunnel);
   });
   it("#connect(port) accepts a new messageport", async () => {
     const connectHandler = jest.fn();
     local.tunnel.on("connected", connectHandler);
-    remote.tunnel.on("reconnect", connectHandler);
     const confirmHandler = jest.fn();
     local.tunnel.on("confirm", confirmHandler);
     const dispelHandler = jest.fn();
     remote.tunnel.on("dispel", dispelHandler);
+    connectTunnels();
     local.tunnel.emit("dispel", { dispelled: 1 });
     remote.tunnel.emit("confirm", { confirmed: 1 });
     await wait(10);
@@ -165,14 +184,13 @@ describe("static Tunnel.toIframe(iframe, options)", () => {
    * https://github.com/jsdom/jsdom/blob/22f7c3c51829a6f14387f7a99e5cdf087f72e685/lib/jsdom/living/post-message.js#L31-L37
    */
   describe.skip("creates a Tunnel connected to an iframe", () => {
-    it.only("listens for handshakes from the frame window", async () => {
+    it("listens for handshakes from the frame window", async () => {
       let remoteTunnel: Tunnel;
       const connectMessageHandler = jest.fn();
       const acceptListener = jest.fn();
       const targetOrigin = "https://example.com:4001";
-      const loadedFrame = document.createElement("iframe");
+      const loadedFrame = new FakeIframe() as unknown as HTMLIFrameElement;
       loadedFrame.src = targetOrigin;
-      document.body.appendChild(loadedFrame);
       loadedFrame.contentWindow.addEventListener("message", acceptListener);
       const localTunnel = Tunnel.toIframe(loadedFrame, {
         targetOrigin,
@@ -185,14 +203,18 @@ describe("static Tunnel.toIframe(iframe, options)", () => {
       });
       localTunnel.on("connected", connectMessageHandler);
       await wait(100);
-      fireEvent(
-        window,
-        new MessageEvent("message", {
-          data: messenger.makeOffered("iframe-test-1"),
-          origin: loadedFrame.src,
-          source: loadedFrame.contentWindow,
-        })
+      window.postMessage(
+        messenger.makeOffered("iframe-test-1"),
+        loadedFrame.src
       );
+      // fireEvent(
+      //   window,
+      //   new MessageEvent("message", {
+      //     data: messenger.makeOffered("iframe-test-1"),
+      //     origin: loadedFrame.src,
+      //     source: loadedFrame.contentWindow,
+      //   })
+      // );
       await wait(100);
       expect(acceptListener).toHaveBeenCalled();
       const acceptEvent = acceptListener.mock.lastCall[0];

package/src/tunnel/tunnel.ts

@@ -2,6 +2,7 @@ import EventEmitter from "eventemitter3";
 import { isIframe } from "../value-assertions";
 import { TunnelMessenger } from "./tunnel-messenger";
 import { unwrap } from "../message-wrapper";
+import { quietConsole } from "../debuglog";
 
 /**
  * Child iframe will send offer messages to parent at this frequency until one
@@ -81,6 +82,7 @@ export class Tunnel extends EventEmitter {
   private _messagePort: MessagePort;
 
   config: TunnelConfig;
+  isConnected: boolean;
 
   // #endregion Properties
 
@@ -120,24 +122,48 @@ export class Tunnel extends EventEmitter {
       );
     }
 
-    const source = target.contentWindow;
     const config = Tunnel._normalizeConfig(options);
     const tunnel = new Tunnel(config);
     const messenger = new TunnelMessenger({
       myOrigin: window.location.origin,
-      targetOrigin: options.targetOrigin,
-      logger: options.logger || console,
+      targetOrigin: config.targetOrigin,
+      logger: config.logger,
     });
+    tunnel.on("destroyed", () =>
+      config.logger.log(
+        `Tunnel to iframe at ${config.targetOrigin} destroyed!`,
+        tunnel,
+        target
+      )
+    );
+    tunnel.on("connected", () =>
+      config.logger.log(
+        `Tunnel to iframe at ${config.targetOrigin} connected!`,
+        tunnel,
+        target
+      )
+    );
+    tunnel.on("error", (e) =>
+      config.logger.log(
+        `Tunnel to iframe at ${config.targetOrigin} error!`,
+        tunnel,
+        target,
+        e
+      )
+    );
     let frameStatusCheck: number;
     let timeout: number;
     const offerListener = (event: MessageEvent) => {
       if (
-        isFromOrigin(event, source, config.targetOrigin) &&
+        !tunnel.isConnected &&
+        isFromOrigin(event, target.contentWindow, config.targetOrigin) &&
         messenger.isHandshakeOffer(event.data)
       ) {
         const accepted = messenger.makeAccepted(unwrap(event.data).offers);
         const channel = new MessageChannel();
-        source.postMessage(accepted, config.targetOrigin, [channel.port1]);
+        target.contentWindow.postMessage(accepted, config.targetOrigin, [
+          channel.port1,
+        ]);
         tunnel.connect(channel.port2);
       }
     };
@@ -147,13 +173,11 @@ export class Tunnel extends EventEmitter {
       window.removeEventListener("message", offerListener);
     };
     timeout = window.setTimeout(() => {
-      tunnel.emitLocal(
-        "error",
+      tunnel.abort(
         new Error(
-          `Timed out awaiting initial message from iframe after ${config.timeout}ms`
+          `Timed out awaiting initial message from target iframe after ${config.timeout}ms`
         )
       );
-      tunnel.destroy();
     }, config.timeout);
 
     tunnel.on("destroyed", cleanup);
@@ -165,7 +189,16 @@ export class Tunnel extends EventEmitter {
      */
     frameStatusCheck = window.setInterval(() => {
       if (!target.isConnected) {
-        tunnel.destroy();
+        cleanup();
+        if (tunnel.isConnected) {
+          const frameDisconnectError = new Error(
+            `Tunnel target iframe at ${tunnel.config.targetOrigin} was disconnected from the document!`
+          );
+          Object.assign(frameDisconnectError, { target });
+          tunnel.abort(frameDisconnectError);
+        } else {
+          tunnel.destroy();
+        }
       }
     }, STATUSCHECK_MS);
 
@@ -192,6 +225,15 @@ export class Tunnel extends EventEmitter {
     const key = makeKey();
     const config = Tunnel._normalizeConfig(opts);
     const tunnel = new Tunnel(config);
+    tunnel.on("destroyed", () =>
+      config.logger.log(`Tunnel ${key} to parent window destroyed!`, tunnel)
+    );
+    tunnel.on("connected", () =>
+      config.logger.log(`Tunnel ${key} to parent window connected!`, tunnel)
+    );
+    tunnel.on("error", (e) =>
+      config.logger.log(`Tunnel ${key} to parent window error!`, tunnel, e)
+    );
     const messenger = new TunnelMessenger({
       myOrigin: window.location.origin,
       targetOrigin: config.targetOrigin,
@@ -221,21 +263,31 @@ export class Tunnel extends EventEmitter {
     };
 
     timeout = window.setTimeout(() => {
-      tunnel.emitLocal(
-        "error",
-        new Error(
-          `Timed out waiting for initial response from parent after ${config.timeout}ms`
-        )
-      );
-      tunnel.destroy();
+      if (!timedOut) {
+        timedOut = true;
+        tunnel.abort(
+          new Error(
+            `Timed out waiting for initial response from parent after ${config.timeout}ms`
+          )
+        );
+      }
     }, config.timeout);
 
     window.addEventListener("message", acceptListener);
-    tunnel.on("destroyed", cleanup);
-    tunnel.on("connected", cleanup);
+    tunnel.on("destroyed", () => {
+      cleanup();
+    });
+    tunnel.on("connected", () => {
+      cleanup();
+    });
 
-    const sendOffer = () =>
-      source.postMessage(messenger.makeOffered(key), config.targetOrigin);
+    const sendOffer = () => {
+      if (tunnel.isConnected) {
+        clearInterval(retrying);
+      } else {
+        source.postMessage(messenger.makeOffered(key), config.targetOrigin);
+      }
+    };
     retrying = window.setInterval(sendOffer, RETRY_MS);
     sendOffer();
 
@@ -253,17 +305,26 @@ export class Tunnel extends EventEmitter {
     }
     this._messagePort = remote;
     remote.addEventListener("message", this._emitFromMessage);
-    this.emit("connected");
+    this.emitLocal("connected");
     this._messagePort.start();
+    this.isConnected = true;
+  }
+
+  abort(error: Error): void {
+    this.emitLocal("error", error);
+    this.destroy(error);
   }
 
-  destroy(): void {
+  destroy(e?: Error): void {
     if (this._messagePort) {
       this._messagePort.close();
       this._messagePort = null;
+      this.isConnected = false;
     }
-    this.emitLocal("destroyed");
-    this.emit("destroyed");
+    // don't add the argument to the logging if it doesn't exist; otherwise, on
+    // a normal destroy, it logs a confusing "undefined"
+    const context = e ? [e] : [];
+    this.emitLocal("destroyed", ...context);
     // this.removeAllListeners(); // TODO: maybe necessary for memory leaks
   }
 
@@ -289,8 +350,8 @@ export class Tunnel extends EventEmitter {
     let errorMessage = "";
     const config: Partial<TunnelConfig> = {
       timeout: 4000,
-      logger: console,
       ...options,
+      logger: options.logger || quietConsole,
     };
 
     const timeoutMs = Number(config.timeout);