Skip to content

CHANGELOG.md

Latest commit

 

History

History
86 lines (50 loc) · 4.83 KB

CHANGELOG.md

File metadata and controls

86 lines (50 loc) · 4.83 KB

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[1.0.0] - 2022-01-04

Added

  • Tests! Of everything!

  • The act of "observing" an iframe has been broken out of the Framer class into its own function — observeIframe! This makes it possible to observe @newswire/frames compatible-iframes that have been created independent of this library. This means it is now possible to use your own code to create iframes (perhaps lazy load them with IntersectionObserver!), have them added via your CMS/templating engine, etc.

It's important to remember however that this method does not add any attributes to the existing iframe. It just sets up the observer and stops there. This means it's on you to use CSS or other methods to style the iframe. (Set width to 100%, etc.)

// grab a reference to an existing iframe, assuming there's already a "src" on this
const iframe = document.getElementById('my-embed');

// returns a `unobserve()` function if you need to stop listening
const unobserve = observeIframe(iframe);

// later, if you need to disconnect from the iframe
unobserve();

As the example shows above, you can also now disable the observer using the unobserve function observeIframe returns. Unlike the remove() method on Framer, this will not remove the iframe from the DOM.

  • On the frames side there is a new method for notifying the parent Framer of an embed's size - sendHeightOnFramerInit. Once an iframe is observed (with either observeIframe or Framer), the parent page will notify the iframe it is now ready to receive height updates. In response, the iframe will send a message back to the parent Framer with the initial height of the iframe. This should help get the correct iframe height to the parent page sooner.

sendHeightOnFramerInit has been added to both initFrame and initFrameAndPoll.

  • @newswire/frames now has legacy support for Pym.js child frames. This means you can now use @newswire/frames to resize iframes that have been built with Pym.js. However - @newswire/frames only recognizes Pym.js' height events. All other events will be ignored.

Changed

  • Framer still exists but its interface has changed. Because the container was never optional it is now the first expected parameter when creating a new instance. The second parameter is now an object with two optional properties - src and attributes. src does what you expect and sets the src attribute on the iframe, but the attributes object is the new way to configure any other attributes on the iframe that's created. It's now just a convienient way to loop over an object and call setAttribute.

Why the change? The most common request to this library has been to add additional attributes that Framer can apply to the iframe it creates. (Or the ability to not set one, like src!) Instead of having to add support to Framer for every attribute you want to set on the iframe, it's now just a matter of adding a new property to the attributes object.

  • Framer is no longer a class and instead just a function that returns an object. It was never really intended to be subclassed and this makes it a bit more compact when bundled, but it is still compatible with new if you prefer that.

  • The auto loader now expects attributes to be set on containers using the data-frame-attribute- prefix. This is to match the new way of passing attributes to Framer.

<!-- NO LONGER WORKS -->
<div data-frame-src="embed.html" data-frame-sandbox="allow-scripts"></div>

<!-- THIS WORKS! -->
<div
	data-frame-src="embed.html"
	data-frame-attribute-sandbox="allow-scripts"
></div>

[0.3.1] - 2019-02-25

Fixed

  • Previous release did not actually contain changes. 😣

[0.3.0] - 2019-02-25

Added

  • Added support for title attribute.

Changed

  • The name of the library for the UMD build is now newswireFrames instead of frames. This change was necessary to prevent a clash with the native Window.frames.

[0.2.0] - 2019-02-12

Changed

  • We no longer use spread in object literals, which was adding an Object.assign call in the compiled library. This breaks @newswire/frames in IE 11. We've moved to a tiny built-in extend implementation that restores IE 11 support.

[0.1.0] - 2018-12-30

Added

  • Initial release!