JS Component property, collapsible scopes or new resource type

In Custom Components that use lots of code (or just something that uses fetch on more than one API), having everything in one file can get annoying having to scroll around endlessly... even if you go all OCD w classes or nutty w React features, it doesn't help much and can make the code base longer creating an even larger scroll fest. So someway we can split up implementation a bit, just visually at least would be awesome!

I had a few of ideas for this.

Collapsible Code Blocks
-Just put a little collapse arrow next to the line number whenever the open and closing { }'s for a scope aren't on the same line (just ignore if it wraps text visually to another line, no need to recalculate on window resize). Then we can hide sections we don't currently need to see and save a bit of sanity from scrolling to far or not far enough every 10sec

Add feature to the Inspector window for Custom Components
-In the Inspector window for Custom Components and add a list w a button to add a new class or React Component... like adding an event to something, where you can click a class and open a Code Edit window. You could even just copy the contents of each class or component into the main IFrame behind the scenes and collapse it all into one script, basically just to visually mimic how multiple files look without any of the headache.

Add a new resource type of JS Class and/or React Component
-You could implement this the same as above and assign it to a single Custom Component the same way you select Link to Container for the tabs on Tabbed Containers. Since it's a resource that could be reused though and to prevent bloated code bases, implementing it where each class or component added is actually a new file that exports 1 class/name or whatever which we can then add as a script tag or import, I think it would also let them be usable in Workflows and Query Libraries (or maybe a new RScript Library to easily parse a return string back into html safely on the server side? :wink: Retool Script). Using them in a Form or as the Data Source for just about anything, where it gets added as an actual client React component (or for bonus points in a RPC as a React Server Component for SSR) instead of a script tag would be rather nifty too.

1 Like