Bug: Popcode console is not updating with console.log or errors

[wylieconlon]

Describe the bug
I think there is an issue with the Popcode console that prevents it from catching any messages from the iframe.

To Reproduce
Two different reproductions:

1. Type console.log('hello');

2. Notice that the browser console contains the message, but Popcode does not

3. Type throw new Error('hello');

4. The Popcode console does not update

@pwjablonski

[pwjablonski]

I think tracked it down to these lines in handleSourceUpdates.js

    document.open();
    document.write(source);
    document.close();

Haven't figured out the solution yet though :)

[pwjablonski]

So it looks like we are overwriting our preview support bundles when we update the source

[outoftime]

So it looks like we are overwriting our preview support bundles when we update the source

I wouldn’t expect this to have an effect on the JavaScript environment that’s already loaded onto the page—all we are doing is overwriting the <script> tags that load the preview support bundles, but that has already happened.

[outoftime]

But it looks like you weren’t far from the mark: document.open() erases all event handlers (look at item 10), including the message event handler set up by JS Channel.

[outoftime]

This shouldn’t be too difficult to fix in principle—all we have to do is re-add a message event listener after the call to document.close(). Unfortunately JS Channel adds a single global message event handler at load time, so it wouldn’t be easy to get it to do what we need it to do.

Might be worth looking into an alternative to JS Channel—JS Channel hasn’t been touched in seven years, I would be surprised if there weren’t other libraries attacking the same problem that might make this easier (although it’s a fairly obscure situation we are in).

[outoftime]

This looks pretty promising as a JS Channel alternative: https://github.com/dollarshaveclub/postmate

[pwjablonski]

@outoftime happy to take on looking into migrating to postmate. How do you suggest breaking down the PR's given the revert?

[outoftime]

Ehh the more I look into Postmate the less I am convinced it is a particularly good option—the code is a bit goofy and it only works by creating the iframe on the host window side, which is basically a deal-breaker.

A few other options come up—Penpal, post-robot, talker.js, and please.js. please.js is out because it has a jQuery dependency. Of the remaining three, talker.js does not seem to be very widely used; penpal and post-robot are probably worth exploring.

Anyway, as far as sequencing goes, I would:

• Pick a library and confirm that it allows us to work around the problem (probably just by looking in the library source and seeing when addEventListener is called; we want it to be in a code path that we can run at will). At a glance, it appears that Penpal will work and post-robot probably won’t.
• Migrate the current version of the code (post-revert) from JS Channel to that library
• In a followup pull request, revert the secure frame PR and add code to re-establish a connection after the document is written

Let me know what you think!