v1 RC

With this, I believe the library is ready for v1.
In the meantime, the Release Candidate (RC) versions will be under the 1.0.0-rc.x npm version.

Features:

• Add experimentalDecode to allow using the off-main-thread img.decode() API. See https://www.chromestatus.com/feature/5637156160667648.

Breaking:

• Update to react-intersection-observer 6.x. This changes the API by requiring you to pass a {ref} prop to the component you are rendering. This is a bit verbose, but it allows you to drop the wrapping <div>! Should track this in the RC and see. I expect people to build their own components on top of LazyImage, so this shouldn't be a problem tbh.

• Add a "props collection" for imageProps. A bunch of the img props are given to the parent just to be forwarded. To make this easier, the callbacks now take those props bundled as one object, which you can spread over the render callback.

The API now looks as such:

<LazyImage
  src="/img/porto_buildings_large.jpg"
  alt="Buildings with tiled exteriors, lit by the sunset."
  // Pick part of imageProps, forward ref
  placeholder={
    ({imageProps, ref}) =>
      <img ref={ref} src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
  }
  // Spread imageProps
  actual={
    ({imageProps}) =>
      <img {...imageProps} />
  }
/>

Internal:

• microbundle has released their newer version, so we no longer need to use our own vendored one 🎉 This should make the repo more accessible to contributors.
• add eslint. Debatable utility, but helps examples.
• make Typescript stricter; Knowing when Typescript does not infer something is a bit more typing, but actually saves me headachese.
• add Prettier as a devDep.
• add pre-commit hooks for Prettier and eslint. Should make the repo more accessible to contributors.
• update devDeps as appropriate.
• update stories for new API.

1.0.0

The v1 of react-lazy-images 🎉

Changes over the 0.9.x version:

Features:

• Add experimentalDecode to allow using the off-main-thread img.decode() API. See https://www.chromestatus.com/feature/5637156160667648.

Breaking:

• Update to react-intersection-observer 6.x. This changes the API by requiring you to pass a {ref} prop to the component you are rendering. This is a bit verbose, but it allows you to drop the wrapping <div>! Should track this in the RC and see. I expect people to build their own components on top of LazyImage, so this shouldn't be a problem tbh.

• Add a "props collection" for imageProps. A bunch of the img props are given to the parent just to be forwarded. To make this easier, the callbacks now take those props bundled as one object, which you can spread over the render callback.

The API now looks as such:

<LazyImage
  src="/img/porto_buildings_large.jpg"
  alt="Buildings with tiled exteriors, lit by the sunset."
  // Pick part of imageProps, forward ref
  placeholder={
    ({imageProps, ref}) =>
      <img ref={ref} src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
  }
  // Spread imageProps
  actual={
    ({imageProps}) =>
      <img {...imageProps} />
  }
/>

Internal:

• microbundle has released their newer version, so we no longer need to use our own vendored one 🎉 This should make the repo more accessible to contributors.
• add eslint. Debatable utility, but helps examples.
• make Typescript stricter; Knowing when Typescript does not infer something is a bit more typing, but actually saves me headachese.
• add Prettier as a devDep.
• add pre-commit hooks for Prettier and eslint. Should make the repo more accessible to contributors.
• update devDeps as appropriate.
• update stories for new API.

0.9.1

Fixes:

• The loadEagerly prop was not respected when provided. It now works as documented. (Part of #5)

0.9.0

Features:

• The src and srcSet props given at the top-level component (LazyImage and LazyImageFull) now pass those props back in their render callbacks. The reasoning is to encourage consistency (if there is a mismatch, you can lose the benefits of the preloading).
• The alt attribute for the final image is now accepted at the top-level. It is passed down to the render callbacks alongside src and srcSet.

None of those should be breaking, but it is recommended to change your components to use them, as they can prevent accidental errors.

Breaking Changes:

• The Typescript types are correctly referenced in package.json. If you were using the library as described in the docs, you should be ok. But given that this wasn't enforced, I cannot safely describe this as non-breaking.

Docs/Infrastructure:

• Our storybook setup also uses Typescript now.

0.8.0

Features:

• Added a LazyImageFull component, for more fine-grained rendering based on state.
  This is particularly useful for css transitions and when re-rendering is undesirable.
  LazyImage has been reimplemented on top of this (essentially a refactor).

0.7.0

Features:

• placeholder is now optional
  This is motivated by the fact that more advanced placeholder strategies do not even put the placeholder inside the image, but rather use a background (or placeholder) that the image is overlaid upon. The placeholder component is intended to be a "faster" solution for those cases where you do not have any kind of intrinsic (box preserving the aspect ratio) component.

Fixes:

• Optional properties are properly marked as such in the types

Breaking:

• The ({cls}) render prop argument has been removed
  The cls property was not adding much, since we are not using it
  as a hook for styling in the library. There is an argument that
  we could use it for fallbacks, but that requires the user to
  set the style tag anyway. Thus, it is best to leave it undefined.
  It also bloated the syntax quite a bit, with a mess of squgglies
  that can easily be messed up; JSX prop, arrow function, and then
  destructuring. {({cls}) => ... } vs {() => ..}. I think this
  is more convenient for people to use, especially weighed against
  the lack of benefit to the library.

0.6.0

Features:

• Support preloading for images that use the srcset attribute, using the srcSet prop
• Support leaving src unspecified to omit preloading behaviour

Breaking:

• Only the react-intersection-observer props that are relevant are now exposed in the public API. Those are:

{
rootMargin: string;
threshold: number
}

Docs:

• Cleaned up eager loading section
• Added docs and stories for srcset and no preloading
• Added docs for IntersectionObserverProps