search

Aaronius / penpal

A promise-based library for securely communicating with iframes via postMessage.
MIT License
389 stars 56 forks source link

Help test v5! #43

Closed Aaronius closed 4 years ago

Aaronius commented 4 years ago

Good news! Version 5 is about ready to ship and I could use your help testing it out.

To install v5, run npm install penpal@next. For the updated readme, see https://github.com/Aaronius/penpal/blob/5.x/README.md

Breaking Changes

Importing Modules

The only breaking changes are in how connectToParent, connectToChild, and error codes are imported. Penpal no longer ships with ES5. The ES6 code is set up in such a way that your bundler of choice should properly tree shake unused code.

New Features

TypeScript

Penpal is now built using TypeScript, so if you're using TypeScript, you now get types for free!

Regex Support for parentOrigin

When using connectToParent, you can now specify a regular expression for parentOrigin. By providing a regular expression, you can now load the iframe onto multiple, different domains while ensuring that communication is secured to those domains only.

While this was not a breaking change, it did require significant changes to the handshake process as described in https://github.com/Aaronius/penpal/pull/32#issuecomment-613198637 and due to the higher risk of the change I decided to include it with other breaking changes in v5 rather than adding it to v4.

Comment Below

If you have feedback, please post a comment below. Thanks!

MisterPhilip commented 4 years ago

I did some testing this afternoon and couldn't find any issues or major requests. Love that it's in TS now! My only minor request would be the ability to attach an event listener or callback when a connection is destroyed in the event I need to do any clean up. It looks like the code is already there, just not exposed publicly. I don't have a real-world use case for it, but something to think about at least 😄

Aaronius commented 4 years ago

Thanks for testing @MisterPhilip! I really appreciate it. Yeah, that's a reasonable request. Since it wouldn't be a breaking change to add it, I'll probably wait until someone encounters an actual use case for it and add it then.

munichmule commented 4 years ago

Could you add an example of how it could be used with React? I tried to create a simple wrapper using iframe ref and useEffect hook to create/destroy connection on mount/unmount, and I see lots of 'connection disposed' errors... Thanks!

Aaronius commented 4 years ago

@h15ter I'll try to write something up when I get some time. I'd be curious to see your code so far. This may help: https://www.jayfreestone.com/writing/react-portals-with-hooks/ We're not creating "react portals" like the article is, but it's similar enough.

marlon-tucker commented 4 years ago

Don't suppose you have a rough ETA as to when v5 will be released, we've just updated to v4 from v3 and discovered there's no typescript typings. It's not the end of the world but if v5 is just around the corner it would make sense for us to wait for it.

Aaronius commented 4 years ago

Barring any issues, which there don't seem to be, I was planning on publishing v5 before the end of the week (end of May 10).

Aaronius commented 4 years ago

@marlon-tucker If you (or anyone else) could review my TypeScript and see if you spot any glaring issues (particularly regarding the public API), that would be great. I'm still pretty new to TypeScript. Code here: https://github.com/Aaronius/penpal/tree/5.x

Aaronius commented 4 years ago

v5 has been published. Thanks everyone!

marlon-tucker commented 4 years ago

Sorry was a public holiday here on Friday and I didn't check my emails. I had a brief look over the public API and couldn't see any issues.

Thank you for your continued support of this library, we migrated away from postmate to this as they seem to have abandoned it.