@adobe/uix-core 0.7.0 → 0.7.1-nightly.20230115

package/src/object-simulator.test.ts

@@ -120,6 +120,199 @@ describe("function simulator exchanges functions and tickets", () => {
     await expect(loneFn()).resolves.not.toThrowError();
     expect(called).toBe(true);
   });
+  it("Unwraps prototypes and exchange all functions to tickets", async () => {
+    class ca {
+      pa: number;
+      constructor() {
+        this.pa = 4;
+      }
+      getPa() {
+        return this.pa;
+      }
+    }
+    class cb {
+      pb: number;
+      ca: ca;
+      constructor(aa: number) {
+        this.pb = aa;
+        this.ca = new ca();
+      }
+      getNumber() {
+        return this.pb;
+      }
+      giftOne() {
+        this.pb--;
+      }
+    }
+    class cd extends cb {
+      giftOne() {
+        this.pb++;
+      }
+      robOne() {
+        this.pb--;
+      }
+    }
+
+    const toBeTicketed = new cd(5);
+    const ticketed = objectSimulator.simulate(toBeTicketed);
+    expect(ticketed).toMatchInlineSnapshot(`
+      {
+        "ca": {
+          "getPa": {
+            "_\$pg": {
+              "fnId": "getPa_1",
+            },
+          },
+          "pa": 4,
+        },
+        "getNumber": {
+          "_\$pg": {
+            "fnId": "getNumber_4",
+          },
+        },
+        "giftOne": {
+          "_\$pg": {
+            "fnId": "giftOne_2",
+          },
+        },
+        "pb": 5,
+        "robOne": {
+          "_\$pg": {
+            "fnId": "robOne_3",
+          },
+        },
+      }
+    `);
+    const unticketed = objectSimulator.materialize(ticketed);
+    expect(unticketed).toMatchInlineSnapshot(`
+      {
+        "ca": {
+          "getPa": [Function],
+          "pa": 4,
+        },
+        "getNumber": [Function],
+        "giftOne": [Function],
+        "pb": 5,
+        "robOne": [Function],
+      }
+    `);
+
+    await expect(unticketed.getNumber()).resolves.toBe(5);
+    await unticketed.giftOne();
+    await expect(unticketed.getNumber()).resolves.toBe(6);
+    await unticketed.robOne();
+    await expect(unticketed.getNumber()).resolves.toBe(5);
+    await expect(unticketed.ca.getPa()).resolves.toBe(4);
+  });
+
+  it("Ignores circular dependencies in properties, but relove them through the methods", async () => {
+    class ca {
+      pa: ca;
+      constructor() {
+        this.pa = this;
+      }
+      getPa() {
+        return this.pa;
+      }
+    }
+
+    const toBeTicketed = new ca();
+    const ticketed = objectSimulator.simulate(toBeTicketed);
+    expect(ticketed).toMatchInlineSnapshot(`
+      {
+        "getPa": {
+          "_$pg": {
+            "fnId": "getPa_1",
+          },
+        },
+        "pa": "[[Circular]]",
+      }
+    `);
+    const unticketed = objectSimulator.materialize(ticketed);
+    expect(unticketed).toMatchInlineSnapshot(`
+      {
+        "getPa": [Function],
+        "pa": "[[Circular]]",
+      }
+    `);
+    expect(
+      Reflect.has(
+        await (await (await unticketed.getPa()).getPa()).getPa(),
+        "getPa"
+      )
+    ).toBeTruthy();
+  });
+  it("Supports classes wrapped in other classes", async () => {
+    class ca {
+      pa: number;
+      constructor() {
+        this.pa = 5;
+      }
+      getPa() {
+        return this.pa;
+      }
+    }
+    class cb {
+      pb: ca;
+      constructor() {
+        this.pb = new ca();
+      }
+      getCaValue() {
+        return this.pb.getPa();
+      }
+    }
+    const toBeTicketed = new cb();
+    const ticketed = objectSimulator.simulate(toBeTicketed);
+    expect(ticketed).toMatchInlineSnapshot(`
+      {
+        "getCaValue": {
+          "_$pg": {
+            "fnId": "getCaValue_2",
+          },
+        },
+        "pb": {
+          "getPa": {
+            "_$pg": {
+              "fnId": "getPa_1",
+            },
+          },
+          "pa": 5,
+        },
+      }
+    `);
+    const unticketed = objectSimulator.materialize(ticketed);
+    expect(unticketed).toMatchInlineSnapshot(`
+      {
+        "getCaValue": [Function],
+        "pb": {
+          "getPa": [Function],
+          "pa": 5,
+        },
+      }
+    `);
+    await expect(unticketed.pb.getPa()).resolves.toBe(5);
+  });
+
+  it("Supports objects with null prototypes", async () => {
+    const toBeTicketed = Object.create(null);
+    toBeTicketed["key1"] = "val1";
+    toBeTicketed["key2"] = "val2";
+    const ticketed = objectSimulator.simulate(toBeTicketed);
+    expect(ticketed).toMatchInlineSnapshot(`
+      {
+        "key1": "val1",
+        "key2": "val2",
+      }
+    `);
+    const unticketed = objectSimulator.materialize(ticketed);
+    expect(unticketed).toMatchInlineSnapshot(`
+      {
+        "key1": "val1",
+        "key2": "val2",
+      }
+    `);
+  });
+
   it("notifies remote when FinalizationRegistry calls cleanup handler", async () => {
     const willBeGCed = objectSimulator.simulate(() => {}) as DefMessage;
     objectSimulator.materialize(willBeGCed);

package/src/object-simulator.ts

@@ -86,7 +86,7 @@ export class ObjectSimulator implements Simulator {
 
   // #region Public Methods
 
-  makeReceiver(fn: CallableFunction) {
+  makeReceiver(fn: CallableFunction, parent?: Object) {
     if (typeof fn !== "function") {
       return NOT_TRANSFORMED;
     }
@@ -95,9 +95,18 @@ export class ObjectSimulator implements Simulator {
       fnTicket = {
         fnId: `${fn.name || "<anonymous>"}_${++this.fnCounter}`,
       };
-      const cleanup = receiveCalls(fn, fnTicket, new WeakRef(this.subject));
+      // Bind function to parent object if it exists
+      let boundFunction = fn;
+      if (parent) {
+        boundFunction = fn.bind(parent);
+      }
+      const cleanup = receiveCalls(
+        boundFunction,
+        fnTicket,
+        new WeakRef(this.subject)
+      );
       this.subject.onOutOfScope(fnTicket, cleanup);
-      this.receiverTicketCache.set(fn, fnTicket);
+      this.receiverTicketCache.set(boundFunction, fnTicket);
     }
     return wrap(fnTicket);
   }

package/src/object-walker.ts

@@ -5,6 +5,7 @@ import {
   isPlainObject,
   isPrimitive,
   isIterable,
+  isObjectWithPrototype,
 } from "./value-assertions";
 
 /**
@@ -58,35 +59,74 @@ export type Simulated<T> = {
 };
 
 export const NOT_TRANSFORMED = Symbol.for("NOT_TRANSFORMED");
+export const CIRCULAR = "[[Circular]]";
 
 export function transformRecursive<To>(
-  transform: (source: unknown) => To | typeof NOT_TRANSFORMED,
-  value: unknown
+  transform: (source: unknown, parent?: Object) => To | typeof NOT_TRANSFORMED,
+  value: unknown,
+  parent?: Object,
+  _refs: WeakSet<object> = new WeakSet()
 ): To {
   if (isPrimitive(value)) {
     return value as To;
   }
-  const transformed = transform(value);
+  const transformed = transform(value, parent);
   if (transformed !== NOT_TRANSFORMED) {
     return transformed;
   }
   if (isIterable(value)) {
     const outArray = [];
     for (const item of value) {
-      outArray.push(transformRecursive(transform, item));
+      outArray.push(transformRecursive(transform, item, undefined, _refs));
     }
     return outArray as To;
   }
   if (isPlainObject(value)) {
+    if (_refs.has(value)) {
+      return CIRCULAR as To;
+    }
+    _refs.add(value);
     const outObj = {};
     for (const key of Reflect.ownKeys(value)) {
       Reflect.set(
         outObj,
         key,
-        transformRecursive(transform, Reflect.get(value, key))
+        transformRecursive(transform, Reflect.get(value, key), undefined, _refs)
       );
     }
     return outObj as To;
   }
+  if (isObjectWithPrototype(value)) {
+    if (_refs.has(value)) {
+      return CIRCULAR as To;
+    }
+    _refs.add(value);
+    const getObjectKeys = (obj: Object): (string | symbol)[] => {
+      const result: Set<string | symbol> = new Set();
+      do {
+        if (Reflect.getPrototypeOf(obj) !== null) {
+          for (const prop of Object.getOwnPropertyNames(obj)) {
+            if (prop === "constructor") {
+              continue;
+            }
+            result.add(prop);
+          }
+        }
+      } while ((obj = Reflect.getPrototypeOf(obj)));
+
+      return [...result];
+    };
+    const outObj = {};
+    const properties = getObjectKeys(value);
+    for (const key of properties) {
+      Reflect.set(
+        outObj,
+        key,
+        transformRecursive(transform, Reflect.get(value, key), value, _refs)
+      );
+    }
+    return outObj as To;
+  }
+
   throw new Error(`Bad value! ${Object.prototype.toString.call(value)}`);
 }

package/src/tunnel/tunnel-messenger.test.ts

@@ -0,0 +1,183 @@
+import { NS_ROOT, VERSION } from "../constants";
+import { TunnelMessenger } from "./tunnel-messenger";
+
+const fakeConsole = {
+  error: jest.fn(),
+  warn: jest.fn(),
+} as unknown as jest.Mocked<Console>;
+
+describe("tunnel negotiation message factory", () => {
+  let messenger: TunnelMessenger;
+  beforeEach(() => {
+    messenger = new TunnelMessenger({
+      myOrigin: "https://me",
+      targetOrigin: "https://you",
+      logger: fakeConsole,
+    });
+    jest.clearAllMocks();
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it("makeAccepted", () => {
+    expect(messenger.makeAccepted("test1")).toMatchObject({
+      [NS_ROOT]: {
+        accepts: "test1",
+        version: VERSION,
+      },
+    });
+  });
+  it("makeOffered", () => {
+    expect(messenger.makeOffered("test1")).toMatchObject({
+      [NS_ROOT]: {
+        offers: "test1",
+        version: VERSION,
+      },
+    });
+  });
+  it("isHandshakeOffer", () => {
+    expect(
+      messenger.isHandshakeOffer({
+        [NS_ROOT]: {
+          offers: "test2",
+          version: VERSION,
+        },
+      })
+    ).toBeTruthy();
+    expect(
+      messenger.isHandshakeOffer({
+        [NS_ROOT]: {
+          accepts: "test2",
+          version: VERSION,
+        },
+      })
+    ).toBeFalsy();
+    expect(messenger.isHandshakeOffer({})).toBeFalsy();
+  });
+  it("isHandshakeAccepting(message, id) matches on id", () => {
+    expect(
+      messenger.isHandshakeAccepting(
+        {
+          [NS_ROOT]: {
+            accepts: "test3",
+            version: VERSION,
+          },
+        },
+        "test3"
+      )
+    ).toBeTruthy();
+    expect(
+      messenger.isHandshakeAccepting(
+        {
+          accepts: "test3",
+          version: VERSION,
+        },
+        "mismatch"
+      )
+    ).toBeFalsy();
+    expect(messenger.isHandshakeAccepting({}, "test3")).toBeFalsy();
+  });
+  describe("isHandshake rejects malformed messages", () => {
+    it("non-plain-objects", () => {
+      expect(messenger.isHandshake([])).toBeFalsy();
+      expect(messenger.isHandshake("")).toBeFalsy();
+      expect(messenger.isHandshake(true)).toBeFalsy();
+      expect(fakeConsole.error).toHaveBeenCalledTimes(3);
+      expect(fakeConsole.error.mock.calls.map(([msg]) => msg))
+        .toMatchInlineSnapshot(`
+        [
+          "Malformed tunnel message sent from SDK at https://you to https://me:
+        []
+        Message must be an object with "_$pg" property, which must be an object with a "version" string and an either an "accepts" or "offers" property containing an ID string.",
+          "Malformed tunnel message sent from SDK at https://you to https://me:
+        ""
+        Message must be an object with "_$pg" property, which must be an object with a "version" string and an either an "accepts" or "offers" property containing an ID string.",
+          "Malformed tunnel message sent from SDK at https://you to https://me:
+        true
+        Message must be an object with "_$pg" property, which must be an object with a "version" string and an either an "accepts" or "offers" property containing an ID string.",
+        ]
+      `);
+    });
+    it("without a sub-object at the expected root property", () => {
+      expect(
+        messenger.isHandshakeOffer({
+          someOtherRoot: false,
+        })
+      ).toBeFalsy();
+      expect(
+        messenger.isHandshake({
+          [NS_ROOT]: 5,
+        })
+      ).toBeFalsy();
+      expect(fakeConsole.error.mock.calls.map(([msg]) => msg))
+        .toMatchInlineSnapshot(`
+        [
+          "Malformed tunnel message sent from SDK at https://you to https://me:
+        {
+          "someOtherRoot": false
+        }
+        Message must be an object with "_$pg" property, which must be an object with a "version" string and an either an "accepts" or "offers" property containing an ID string.",
+          "Malformed tunnel message sent from SDK at https://you to https://me:
+        {
+          "_$pg": 5
+        }
+        Message must be an object with "_$pg" property, which must be an object with a "version" string and an either an "accepts" or "offers" property containing an ID string.",
+        ]
+      `);
+    });
+    it("without accept or offers properties", () => {
+      expect(
+        messenger.isHandshake({
+          [NS_ROOT]: {
+            version: VERSION,
+          },
+        })
+      ).toBeFalsy();
+    });
+    it("with no version string", () => {
+      expect(
+        messenger.isHandshake({
+          [NS_ROOT]: {
+            offers: "test4",
+          },
+        })
+      ).toBeFalsy();
+    });
+  });
+  describe("version mismatch handling", () => {
+    const withVersion = (version: string) => ({
+      [NS_ROOT]: {
+        offers: "test5",
+        version,
+      },
+    });
+    it("warns in console, once for each version", () => {
+      expect(messenger.isHandshake(withVersion("bad-version"))).toBeTruthy();
+      expect(messenger.isHandshake(withVersion("worse-version"))).toBeTruthy();
+      expect(messenger.isHandshake(withVersion("bad-version"))).toBeTruthy();
+      expect(fakeConsole.warn).toHaveBeenCalledTimes(2);
+      expect(fakeConsole.warn.mock.calls.map(([msg]) => msg))
+        .toMatchInlineSnapshot(`
+        [
+          "SDK version mismatch. https://me is using v0.0.1-test, but received message from https://you using SDK vbad-version. Extensions may be broken or unresponsive.",
+          "SDK version mismatch. https://me is using v0.0.1-test, but received message from https://you using SDK vworse-version. Extensions may be broken or unresponsive.",
+        ]
+      `);
+    });
+    it("resetWarnings() resets seen version warnings so they'll log again", () => {
+      messenger.resetWarnings();
+      expect(
+        messenger.isHandshake(withVersion("same-bad-version"))
+      ).toBeTruthy();
+      expect(
+        messenger.isHandshake(withVersion("same-bad-version"))
+      ).toBeTruthy();
+      expect(fakeConsole.warn).toHaveBeenCalledTimes(1);
+      messenger.resetWarnings();
+      expect(
+        messenger.isHandshake(withVersion("same-bad-version"))
+      ).toBeTruthy();
+      expect(fakeConsole.warn).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/src/tunnel/tunnel-messenger.ts

@@ -0,0 +1,99 @@
+import { NS_ROOT, VERSION } from "../constants";
+import { isPlainObject } from "../value-assertions";
+import { WrappedMessage, isWrapped, wrap, unwrap } from "../message-wrapper";
+import { HandshakeAcceptedTicket, HandshakeOfferedTicket } from "../tickets";
+
+type Handshake = HandshakeAcceptedTicket | HandshakeOfferedTicket;
+type HandshakeAccepted = WrappedMessage<HandshakeAcceptedTicket>;
+type HandshakeOffered = WrappedMessage<HandshakeOfferedTicket>;
+type HandshakeMessage = HandshakeAccepted | HandshakeOffered;
+
+export class TunnelMessenger {
+  private myOrigin: string;
+  private remoteOrigin: string;
+  private logger: Console;
+  private versionWarnings = new Set<string>();
+  constructor(opts: {
+    myOrigin: string;
+    targetOrigin: string;
+    logger: Console;
+  }) {
+    this.myOrigin = opts.myOrigin;
+    this.remoteOrigin =
+      opts.targetOrigin === "*" ? "remote document" : opts.targetOrigin;
+    this.logger = opts.logger;
+  }
+  resetWarnings() {
+    this.versionWarnings.clear();
+  }
+
+  makeAccepted(id: string): HandshakeAccepted {
+    return wrap({
+      accepts: id,
+      version: VERSION,
+    });
+  }
+  makeOffered(id: string): HandshakeOffered {
+    return wrap({
+      offers: id,
+      version: VERSION,
+    });
+  }
+  isHandshakeAccepting(
+    message: unknown,
+    id: string
+  ): message is HandshakeAccepted {
+    return (
+      this.isHandshake(message) &&
+      unwrap(message as HandshakeAccepted).accepts === id
+    );
+  }
+  isHandshakeOffer(message: unknown): message is HandshakeOffered {
+    return (
+      this.isHandshake(message) &&
+      typeof unwrap(message as HandshakeOffered).offers === "string"
+    );
+  }
+  isHandshake(message: unknown): message is HandshakeMessage {
+    if (!isWrapped(message)) {
+      this.logMalformed(message);
+      return false;
+    }
+    const tunnelData: Handshake = unwrap<Handshake>(
+      message as HandshakeMessage
+    );
+    if (
+      !isPlainObject(tunnelData) ||
+      typeof tunnelData.version !== "string" ||
+      !(Reflect.has(tunnelData, "accepts") || Reflect.has(tunnelData, "offers"))
+    ) {
+      this.logMalformed(message);
+      return false;
+    }
+    const { version } = tunnelData;
+    if (version !== VERSION && !this.versionWarnings.has(version)) {
+      this.versionWarnings.add(version);
+      this.logger.warn(
+        `SDK version mismatch. ${this.myOrigin} is using v${VERSION}, but received message from ${this.remoteOrigin} using SDK v${version}. Extensions may be broken or unresponsive.`
+      );
+    }
+    return true;
+  }
+  private logMalformed(message: unknown) {
+    let inspectedMessage: string;
+    try {
+      inspectedMessage = JSON.stringify(message, null, 2);
+    } catch (_) {
+      try {
+        inspectedMessage = message.toString();
+      } catch (e) {
+        inspectedMessage = Object.prototype.toString.call(message);
+      }
+    }
+    this.logger.error(
+      `Malformed tunnel message sent from SDK at ${this.remoteOrigin} to ${this.myOrigin}:
+${inspectedMessage}
+Message must be an object with "${NS_ROOT}" property, which must be an object with a "version" string and an either an "accepts" or "offers" property containing an ID string.`
+    );
+  }
+}

package/src/tunnel/tunnel.test.ts

@@ -1,11 +1,17 @@
 import { fireEvent } from "@testing-library/dom";
 import { wait } from "../promises/wait";
 import { Tunnel } from "./tunnel";
-import { makeAccepted, makeOffered } from "./tunnel-message";
+import { TunnelMessenger } from "./tunnel-messenger";
+
+const fakeConsole = {
+  error: jest.fn(),
+  warn: jest.fn(),
+} as unknown as jest.Mocked<Console>;
 
 const defaultTunnelConfig = {
   targetOrigin: "*",
   timeout: 4000,
+  logger: fakeConsole,
 };
 type TunnelHarness = { tunnel: Tunnel; port: MessagePort };
 const openPorts: MessagePort[] = [];
@@ -163,20 +169,26 @@ describe("static Tunnel.toIframe(iframe, options)", () => {
       let remoteTunnel: Tunnel;
       const connectMessageHandler = jest.fn();
       const acceptListener = jest.fn();
+      const targetOrigin = "https://example.com:4001";
       const loadedFrame = document.createElement("iframe");
-      loadedFrame.src = "https://example.com:4001";
+      loadedFrame.src = targetOrigin;
       document.body.appendChild(loadedFrame);
       loadedFrame.contentWindow.addEventListener("message", acceptListener);
       const localTunnel = Tunnel.toIframe(loadedFrame, {
-        targetOrigin: "https://example.com:4001",
+        targetOrigin,
         timeout: 9999,
       });
+      const messenger = new TunnelMessenger({
+        myOrigin: "https://example.com",
+        targetOrigin,
+        logger: fakeConsole,
+      });
       localTunnel.on("connected", connectMessageHandler);
       await wait(100);
       fireEvent(
         window,
         new MessageEvent("message", {
-          data: makeOffered("iframe-test-1"),
+          data: messenger.makeOffered("iframe-test-1"),
           origin: loadedFrame.src,
           source: loadedFrame.contentWindow,
         })
@@ -184,7 +196,10 @@ describe("static Tunnel.toIframe(iframe, options)", () => {
       await wait(100);
       expect(acceptListener).toHaveBeenCalled();
       const acceptEvent = acceptListener.mock.lastCall[0];
-      expect(acceptEvent).toHaveProperty("data", makeAccepted("iframe-test-1"));
+      expect(acceptEvent).toHaveProperty(
+        "data",
+        messenger.makeAccepted("iframe-test-1")
+      );
       expect(acceptEvent.ports).toHaveLength(1);
       remoteTunnel = new Tunnel(defaultTunnelConfig);
       remoteTunnel.connect(acceptEvent.ports[0]);