JavaScript libraries used for custom Brics


#1

Hi @Norm,

where to place JS libraries we want to use in the exported code? I guess inside the assets folder?
Custom JS code then inside the Bric builder in the HTML tab?

Are we needed for all custom Brics to include the jQuery library inside the js folder in order to be able to access it in edit mode? Aren’t we able to rely on a global jQuery include for edit mode?

Thanks, Jannis


#3

Add anything you want included in export in the includes Dir of your bric. As soon as the bric is added to a page this directories contents is added to the current pages head attachments.

Regarding jquery, blocs has jquery on export automatically but your custom Brics edit environment currently needs to add its own version with every bric, of course you don’t need to use jquery if you don’t want. I’ll most likely make a global jquery linker as that’s a good idea.


#4

Sure, includes dir, not assets dir :+1:

Maybe it would be good to have a blocs.js file, with its content generated into a global JS file (like bric.css file content generated in a global CSS file)?


#5

Yeah good idea


#6

Also remember you have the api ‘resource’ call to add and remove resources when your bric requires specifics based on the DOM state of your Bric.

window.webkit.messageHandlers.resource.postMessage('{"action":"add","name":"my-custom-resource.js"}'


#7

Yes, that’s a great feature. Have to get hold of that, promises great flexibility.


Where to put php files, which should be exportet
#8

Is that also possible with remote / CDN resources?

Like window.webkit.messageHandlers.resource.postMessage('{"action":"add","name":"https://cdn.asupercoolapi.com/library.js"}' ?

Would this handle CSS file import also correctly (so, either a stylesheet import or a script import)?


#9

I’ve never tried a URL it might poop it’s pants, I’m not sure. But I’ll add support.

JS and CSS files are managed and connected accordingly, you don’t need to do anything there.


#10

Wohoo :raised_hands: that will be fun :+1::smiley: