<Background> generating parameters twice for width and height

[JorgeSivil]

Based on the code I had to send imgixParams{ w: X, h: Y } to use the forced values.

But this would result in two parameters w and h appended to the URL.

Expected result: Only one parameter should be sent for a given key.

[sherwinski]

Hey @JorgeSivil, thanks for bringing this issue to our attention. Our team will look into this and get back to you here. We'd also be happy to accept a PR that fixes this issue if anyone is interested in opening one.

[ericdeansanchez]

Reproduced.

Steps to reproduce:

• create react app
• use the Background component like so:

import { Background } from "react-imgix";

function App() {
  return (
    <Background
      src="https://assets.imgix.net/dam-marketing/Updates_2020_Launch/Summer/Image_Tags.png?fm=jpg&q=90&ixlib=imgixjs-3.4.1"
      className="blog-title"
      imgixParams={{ w: 100, h: 100 }}
    >
      <h2>Blog Title</h2>
    </Background>
  );
}

export default App;

Options:

• we could change how this works here (e.g. transform params that need it and letting "the last width/w win")
• there's also this here, but...
• of course, there are other options; there may be problems with the first suggestion (i.e. what if the wrong width wins?)

Test to catch this error:

    describe("when both w and h provided", () => {
    it("does not duplicate query params for height and width", () => {
      const sut = renderIntoContainer(
        <Background
          src="https://assets.imgix.net/examples/pione.jpg"
          imgixParams={{
            w: 300,
            h: 350,
          }}
          className="bg-img"
        ></Background>
      );

      const bgImageSrcURL = findURIfromSUT(sut);
      const seen = new Set();
      for (const [k, _v] of bgImageSrcURL.queryPairs) {
        if (seen.has(k)) {
          throw new Error(
            `duplicate keys for '${k}' found in query parameters`
          );
        } else {
          seen.add(k);
        }
      }
    });
  });

[sherwinski]

We could also deduplicate any w and h in in imgixParams since we're just going to include a determined width and height right afterwards.

[ericdeansanchez]

Yeah, ideally I'd like to set things up in a way where the duplication doesn't happen to begin with. Hmm...

[imgix-git-robot]

🎉 This issue has been resolved in version 9.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀