Load orb.js in a custom component

App Building
1

Hey @domjammoo,

Any chance you're able to share how you managed to load orb.js with the custom component?

I'd be super grateful if you're able to share how you managed to load the library!

2

Hey @MiguelOrtiz,

We're you able to load orb.js after speaking with Paulo at office hours yesterday?

3

Hey @AbbeyHernandez,

Unfortunately no :frowning:

4

Oh no! I'll migrate this into a new post and we can help you there!

1 Like
5

I'm not sure what the issue is w orb.js is but you can try this odd way of i guess wrapping the component in 'package' of some sort? honestly, I've never done anything like this before or have even used browserify but I was curious if I could just copy/past minified code between 2 tags to use it that way since the cdns didn't seem to be working properly or I got impatient. the answer is yes you can, but enjoy 10mins of scrolling to get back to the top or bottom of the file :joy:

I was actually able to get browserify to create a bundle.js file which I was able to upload to Retool Storage, mark as public, grab the url, then use <script srt="public_url"></script> and actually wrap things up in a nice file. I think I had to something like domify or one of the browserify plugins to handle the html parts of react components since I couldn't get browserify to stop erroring out anytime it saw <

const MyComponent({params} => { 
  return (<><body><p></p></body></>)
});

had to be changed to something like:

return(domify('<><body><p></p></body></>'));

this is from memory but i think this was what finally ran and produced bundle.min.js:

browserify bundle_index.js --standalone mylib > bundle.min.js

i mistakenly left the '.min' on there when i removed the flag to actually perform minification or something similar sfor debugging so ignore that part of the filename/ext :face_with_open_eyes_and_hand_over_mouth: . i'll double check my cli history when i get back to the office on Friday but I'm fairly positive those are right files and the right command, I was in a rush to leave before I got locked in overnight though so :bowing_man: my bad if i got everything wrong.

Browserify resulting file:
bundle.min.js

  • this was the url used as the src for a script tag also

Input Files
MyCustomComponent.js
pre_bundle.js
bundle_index.js

if browserify keeps throwing errors about something to do with <, maybe try some of the cmd flags? I think using --standalone was what fixed that for me or maybe a combo w domify, i'm not sure but i do wish i had a door key so I could have stayed and found out without starving!! :rofl: :metal:

edit: I may have rushed to conclusions and an underlying error might still be there and I didn't notice. I don't remember seeing a bunch of red scroll across my screen, but who knows I pesonally don't usually trust my own memory so test away =)

when i think about it, i kinda feel like this could create a nasty attack vector by corrupting a file, uploading a duplicate name/overwriting or taking advantage of something that ends in unintended malicious js being blindly ran from an uploaded file location (I could see doing this dynamically making it worse w an 'off by 1' error or some weird js equivilant of pointer math resulting w writing in read only memory...? ). or i'm a paranoid nut overthinking everything instead of sleeping.