Make onmessage event handlers execution async

Author: LosYear

package.json

@@ -41,6 +41,7 @@
     "pre-commit": "^1.2.2",
     "prettier": "^1.18.2",
     "rimraf": "^3.0.0",
+    "rxjs": "^6.5.3",
     "ts-jest": "^24.2.0",
     "typescript": "3.5.3"
   }

src/__tests__/postmessage.test.ts

@@ -1,4 +1,6 @@
 import { createParentPostMessage, createFigma } from "../stubs";
+import { Subject } from "rxjs";
+import { take } from "rxjs/operators";
 
 describe("postMessage", () => {
   beforeEach(() => {
@@ -8,19 +10,40 @@ describe("postMessage", () => {
     global.parent.postMessage = createParentPostMessage(global.figma);
   });
 
-  it("UI sends message and plugin receives it", () => {
-    figma.ui.onmessage = jest.fn();
+  it("UI sends message and plugin receives it", async () => {
+    const waiting = new Subject();
+    // @ts-ignore
+    figma.ui.onmessage = jest.fn().mockImplementation(() => waiting.next());
     parent.postMessage({ pluginMessage: "abc" }, "*");
 
-    expect(figma.ui.onmessage).toHaveBeenCalledTimes(1);
-    expect(figma.ui.onmessage).toHaveBeenCalledWith("abc", expect.any(Object));
+    return new Promise(resolve => {
+      waiting.pipe(take(1)).subscribe(() => {
+        // @ts-ignore
+        expect(figma.ui.onmessage).toHaveBeenCalledTimes(1);
+        // @ts-ignore
+        expect(figma.ui.onmessage).toHaveBeenCalledWith(
+          "abc",
+          expect.any(Object)
+        );
+        resolve();
+      });
+    });
   });
 
   it("Plugin sends message and UI receives it", () => {
+    const waiting = new Subject();
+
     //@ts-ignore
-    global.onmessage = jest.fn();
+    global.onmessage = jest.fn().mockImplementation(() => waiting.next());
+    // @ts-ignore
     figma.ui.postMessage("abc");
-    //@ts-ignore
-    expect(global.onmessage).toHaveBeenCalledTimes(1);
+
+    return new Promise(resolve => {
+      waiting.pipe(take(1)).subscribe(() => {
+        //@ts-ignore
+        expect(global.onmessage).toHaveBeenCalledTimes(1);
+        resolve();
+      });
+    });
   });
 });

src/stubs.ts

@@ -28,8 +28,10 @@ export const createFigma = (config: TConfig): PluginAPI => {
 
       // @ts-ignore
       if (global && global.onmessage) {
-        // @ts-ignore
-        global.onmessage(message);
+        setTimeout(() => {
+          // @ts-ignore
+          global.onmessage(message);
+        }, 0);
       }
     }
   }
@@ -343,6 +345,9 @@ export const createParentPostMessage = (figma: PluginAPI) => (
   target: string
 ) => {
   if (figma.ui.onmessage) {
-    figma.ui.onmessage(message.pluginMessage, { origin: null });
+    setTimeout(() => {
+      // @ts-ignore
+      figma.ui.onmessage(message.pluginMessage, { origin: null });
+    }, 0);
   }
 };

yarn.lock

@@ -2969,6 +2969,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rxjs@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
+  integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
@@ -3432,6 +3439,11 @@ ts-jest@^24.2.0:
     semver "^5.5"
     yargs-parser "10.x"
 
+tslib@^1.9.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"