Image props for code components

Been working with custom code components for a while now, not sure how feasible this would be but if there was some way to type the registered code components so plasmic could know this code component will need image settings. I find myself often having to pass extra fit props on every custom component that uses images because the image settings are not available

That’s definitely an interesting idea, we are generally interested in introducing more prop types.

For images and their accompanying positioning, how would you be passing this in in code? What are the actual props on your component currently?

Say for instance a code component is custom logic for fetching a piece a data, in this case a picture. When the image is returned by the code component theres currently no way to let plasmic know it will be an image so you can access the image settings shown below. you can access all the other right hand styling tools in the editor besides the image settings. An image prop might suffice but would become difficult to use if multiple images with different settings in the same component were required in some special case. Currently my workaround is simply adding these three props to any component that needs an image

Screen Shot 2021-09-15 at 2.18.49 AM.png

Ah, I guess my question is, if you pretended that plasmic didn’t exist for a second, what would you prefer your React code component props look like (instead of the three props)?

More props could be added to introduce additional picture types like Lotties and GIFS with controls like play, pause, autoplay, play on hover, etc. this would expand the editor’s reach using built-in tools. However after thinking this idea over a bit more, could you expand the PLASMIC.registerComponent to accept an interface as the props? Would be an incredible time saver for larger code components that contain 25+ props inside. Every JS primitive type you already have covered with “boolean, number, object, slot, string” the only addition this would require is adding arrays for nested primitive values. Using a system like this in just a few steps you could fetch some data that you already have the interface for. For example, a profile fetch that contains a username:string, password:string, and an array of objects that this person owns; Each object has maybe a name:String, price:number, isSelling:boolean as properties. If I build an interface named “UsrData” then I would love to set the props of the code componenet to match these props. Usually this data will have to be used in multiple locations on a page, so it is passed into a context provider that uses that same interface and is consumed in spots throughout the page. With basically an auto-prop generator based on an interface, control over this data would be massively easier in the editor when handling a lot props