feat(builder): add Builder.io

[steve8708]

I think I did things right - lmk anything I got wrong :D

[ascorbic]

Thanks! There seems to be an issue with how resizing is handled though, which seems to be down to the Builder API. See this example image: https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?format=webp&width=500&height=600

The image is meant to be 500x600, but is actually 500x333. Resizing should follow the requested aspect ratio, not the aspect ratio of the original image. Is this an option with the API? Something like "cover" or "fill".

[steve8708]

Ah so for our API these are max dimensions and not forced dimensions. We specifically recommend using the width param only and setting an aspect ratio on your image (though we do support height too to set a maximum possible height). This can be tweaked though if important

[ascorbic]

Aah, ok. This should actually be ok with unpic-img, because it uses object-fit: cover. The playground doesn't use the component though, so it gives the distorted appearance. The ideal would be if you had it as an option, like most CDNs do.

[ascorbic]

There are some test failures with the generated URLs. I'm not sure if the error is in the test or the transformer

[steve8708]

Dumb Q - how do I run the tests locally?

Also I realized I'm dumb - we do support width and height as expected, the default fit is 'inside', we also support fit='cover' which is the default behavior you expected. I can update this to be the default for what the image component sends, or I can just update the demo URL to use fit=cover too

[steve8708]

right now I'm flying blind both with TS types not working locally and unclear how to run the tests - will use the CI for now to debug

[steve8708]

Just updated to do the expected behavior (defaults to fit=cover) and should have TS and one test fixed, looking into the other test

[steve8708]

OK I think I fixed everything - gotta hop into some mtgs but will check on the CI results when back and clear up any remaining issues

[ascorbic]

I need to document this! This is a Deno project, so it expects to use Deno for typechecking and running tests

[ascorbic]

So if you're uising VSCode, you install the Deno plugin and that should handle everything for you. You can run tests in VS Code, or with deno test src

[steve8708]

Boom! working now, will have tests fixed in a bit 🙏

[ascorbic]

Awesome! Seems to mostly be just ordering of props.

[ascorbic]

I'm not sure why, but the URL in the playground isn;t working, though the tests are passing: https://deploy-preview-13--unpic-playground.netlify.app/

[steve8708]

Ah yes, found the issue (the playground was not able to find the parser, but should now)

Also how do I test that out locally? I'm sure it's staring me in the face

[steve8708]

@ascorbic I added this so that the img behavior matches the CDN ones

previously if you typed in a new value for width/height (esp one that the CDN needs to now generate) it would show a distorted image (stretch the image, which I think there is pretty much no case where people would want to do this in production - aka the default object-fit) and then it snaps into place when the CDN is updated

since all CDNs by default use cover, I changed the img behavior accordingly so when you change width/height it won't look distorted while the new one loads. in most cases you just see it be pixelated for a sec, and then it snaps to being nice and clear

felt more right/intuitive, but happy to remove if intentionally undesired

[ascorbic]

I was going to change that myself, so thanks!

[ascorbic]

Great! To test locally, run npm run dev in the demo directory.

[ascorbic]

Great stuff! Thanks for the addition.