feature: loading 3rd party javascript library about esfiddle

[joshghent]

Great idea @asiyani!

We should probably have an option to add libraries which will open a modal dialogue. We can then have the user put in a link to the JS file they want. In addition to this we can have some preset ones like Lodash etc.

Checkout codepen.io/pen and click on settings > javascript to see what I have in mind.

[asiyani]

yes, but problem with adding own library in like in codepen is you need to write some boilerplate code before you can actually do what you wanna do.
Atleast in most used library user should be able to just select library and start writing actual code.
e.g. -> user will select lodash -> then just write console.log( _.now() ) this should work.
So we will have to do all background work like requiring lodash and assigning it to _ var. runkit Link

[joshghent]

@asiyani Yeah that sounds a good idea. Yeah I think we can stick with the UI we have but skirt over the boilerplate that codepen requires.

[ejvelasco]

@joshghent I think we should use jQuery to handle this. This method is perfect for it: http://api.jquery.com/jQuery.getScript/

I can go ahead and implement it, if you want.

[joshghent]

Hmm, I'm not sure about including the entire jquery library for one method. Is there anyway we can require a single method of jquery like with lodash? I'd ideally like to make sure the site is as light weight as possible. How would you go about loading the library in? Perhaps we can checkout using the cdnjs API to get a CDN link to all the libraries we will support (lodash, underscore etc.) What are your thoughts?

…

-- Josh Ghent

On February 18, 2017 at 1:09:00 AM, Eduardo Velasco ( ***@***.***) wrote: @joshghent <https://github.com/joshghent> I think we should use jQuery to handle this. This method is perfect for it: http://api.jquery.com/jQuery.getScript/ I can go ahead and implement it, if you want. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#46 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACzIwC0qTnhMC0C7n3W-up1W79RRwjM7ks5rdkSsgaJpZM4Lx91K> .

[ejvelasco]

@joshghent I was thinking of doing something like this: http://codepen.io/velascoDev/pen/wgbZQL?editors=1111
but I'm not sure if it would work with the babel compiler.
Idk about just one method, but using this approach: http://developer.telerik.com/featured/jquery-using-only-what-you-need/
we can require only the jQuery AJAX module, which is 13K when compressed.

[ejvelasco]

As for using the cdnjs API, I'm not sure about how to execute the response file properly. How would you go about that?

[joshghent]

@velascoDev Sorry for not getting back to you. I would run a query for the library that the user requested and then get the URL of that library and load it in as a script element.

I'm not 100% sure however as in the case of some libraries there are multiple prerequisites. For example to load bootstrap.js you first need jquery.

I'll have a think about how best to go about this. It could be that we have a table of libraries and a link to their CDN file or something like that? Have you had any more thoughts.

Yeah we could require just that module. I'd prefer if we could do this all in JS but if it significantly helps then that would be the route to go (importing just the methods we need)

[asiyani]

found this blog it addes script tag to head and calls callback function
Implemented same using cdnjs Not sure how to load specific version for the best way we can implement that....code pen
I think if we do this way we might have to remove script tag from head once fiddle is done or new fiddle is loaded.

[joshghent]

@asiyani Yeah I'm happy with this approach. Is that something you or @velascoDev would be up for doing?

[humblefool1997]

@joshghent is it still open? I am up for it.

[joshghent]

@isaeef Yes this is still open, we would really appreciate you're help on this one! Let us know how you get on 👍

[phsantiago]

We can get a js file by xmlhttprequest and eval it, or create a dynamic script tag like @asiyani said

[joshghent]

@phsantiago I think a dynamic script tag would work best and be most safe. eval scares me.

Is this something you'd want to take on?

[jigar1101]

@joshghent Can you please check #174
Based on the discussion you and @asiyani had, I have added this which can be improved based on your inputs.

[joshghent]

@jigar1101 @asiyani Updated the PR with some comments. Looks like it will need catching up with the latest version of the develop branch where I have fixed babel but looks great! 💯 Thank you so much for this work! 🎉

[jigar1101]

Great 👍