Effects are not typed with TypeScript

[HeyMarcy]

Regarding the note "All effect props are disabled by default", how does one enable them?
I don't seem to be able to use the border effect.

[colbyfayock]

hey @HeyMarcy the word "disabled" probably wasn't the best choice of word - what that means is that all of the effects default to nothing, they're not turned on. I'll make a change to the documentation to make that more clear

all effects props should work as shown either in the configuration page or on the examples page

as far as border goes, you can see an example here:

https://next-cloudinary.spacejelly.dev/components/cldimage/examples#border

<CldImage
  ...
  border="40px_solid_purple"
/>

If that's not working, can you share your code snippet and the resulting image URL?

[colbyfayock]

also of note - this is the documentation for how the border property currently works, it uses the standard Cloudinary transformation API: https://cloudinary.com/documentation/transformation_reference#bo_border

though my hope is to eventually make it more intuitive for the prop option

[HeyMarcy]

Thanks so much for your quick response, Colby!
When I tried using CldImage like this:

<CldImage
    width={180}
    height={120}
    crop='thumb'
    gravity='faces'
    border="40px_solid_purple"
    src={public_id}
 />

I get a TypeScript error:
ype '{ alt: string; width: number; height: number; crop: string; gravity: string; border: string; className: string; src: string; }' is not assignable to type 'IntrinsicAttributes & Omit<ImageProps, "src"> & ImageOptions & { src: string; preserveTransformations?: boolean; config?: ConfigOptions; }'. Property 'border' does not exist on type 'IntrinsicAttributes & Omit<ImageProps, "src"> & ImageOptions & { src: string; preserveTransformations?: boolean; config?: ConfigOptions; }'.ts(2322)

[HeyMarcy]

I was able to 'cheat' and add a border prop to ImageOptions. I got the border locally, but the build failed.

[HeyMarcy]

I was able to get the borders to work using the transformation API:

 <Image
  ...
  src={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_thumb,g_faces,h_140,w_200/bo_10px_solid_black/${public_id}.${format}`}
/>

thanks for your help!

[colbyfayock]

i pushed a change for the effects props but now im seeing a bigger issue with the border typescript error that somehow i overlooked and didnt come up yet, that it seems a lot of effect props are missing types

will be trying to figure out a solution for that as it's currently not simple to "just add". thanks for bringing this up

[HeyMarcy]

Thank you so much!!

…

On Tue, Jun 13, 2023 at 11:33 AM Colby Fayock ***@***.***> wrote: i pushed a change for the effects props but now im seeing a bigger issue with the border typescript error that somehow i overlooked and didnt come up yet, that it seems a lot of effect props are missing types will be trying to figure out a solution for that as it's currently not simple to "just add". thanks for bringing this up — Reply to this email directly, view it on GitHub <#214 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB4ZANYWF4BJFDWG2OQG32TXLCI37ANCNFSM6AAAAAAZBD5CWM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Marcy Montross www.heymarcy.com 773.398.3960

[danieltott]

I would love to take a crack at this if it's still available!

[colbyfayock]

hey @danieltott - this ticket is somewhat tied to work that needs to be done through the dependency that creates the URLs: cloudinary-community/cloudinary-util#53

However - because I've been slow to get that done because of other priorities, I wouldn't be opposed to adding those types here in the meantime, to make them available and improve the DX until the core work is completed.

I'll assign it to you, but I encourage giving it a quick look and seeing what you think in that regard

[danieltott]

@colbyfayock would it make sense for me to do the work there? It seems like it'd be better to have a single source of truth for that sort of thing

[colbyfayock]

my only concern is i think its a bit of a can of worms. i fully support and would love to see you contribute there, but let me lay it out quick so you're aware

the way that cloudinary Util works is I export a function that creates URLs. this is whats used in Next Cloudinary

through that I have a plugin system that allows us to create small chunks of transformation code to perform different actions

https://github.com/colbyfayock/cloudinary-util/blob/main/packages/url-loader/src/lib/cloudinary.ts#L86

this is where the problem lays as the effects are tied to this plugin system and it just makes it trickier to work with the types

example: https://github.com/colbyfayock/cloudinary-util/blob/main/packages/url-loader/src/plugins/effects.ts

i've started some work that is somewhat, but not totally related, converting some of the project to zod, but i can easily scrape that or rework it with new underlaying changes as ive been slow with it, learning while i've been working

cloudinary-community/cloudinary-util#52

with all of this said, if that feels comfortable for ryou to tackle, i'd be thrilled for you to help out with any part of the above, including figuring out a path forward and starting with the types, or you can add the types here for now :)

what do you think?

[danieltott]

@colbyfayock I think taking some time to dig through cloudinary-community/cloudinary-util#53 feels like the right call. It won't be done in a day 😂 but I'm down to take a crack at it! I reserve the right to change my answer if it seems impossible, but for now I'd say let's do it 👍🏼

[colbyfayock]

hahaha sounds great. looking forward to seeing what you come up with! (maybe 😄)