Developer Center

JavaScript Libraries

Saber uses the Datasilk Core JS library used for UI functionality along with Selector, a jQuery replacement library that weighs in at 5kb (gzipped). This documentation is focused on giving developers information on core features of Saber's JavaScript libraries as well as information on loading your own JavaScript libraries.


Vendor JavaScript Files

You are able to include JavaScript libraries within your Vendor plugin. All JavaScript files located within the root of your plugin folder will be copied to /wwwroot/editor/vendors/ when your plugin is first installed into the user's Saber website, or when the user updates your plugin to a newer version. Saber will not copy over gulpfile.js or any JavaScript files from within the node_modules folder.


Gzip Compression

All JavaScript files located within /wwwroot/editor/ are gzip compressed so when they are served through a web server, the user's web browser will receive the compressed JavaScript files. This saves around 2 MB of bandwidth when loading the Saber Editor and allows Saber's JavaScript libraries to load at 1/5th the size.

This means that all JavaScript files copied from your plugin folder to the /wwwroot/editor/vendors/ folder will be gzip compressed before being saved to disk.


Loading Script Files

When building your vendor plugin for Saber, there are various ways to load your JavaScript files into the web browser. In all cases, you should use the relative path /editor/vendors/ when referencing your JavaScript files.


vendors-editor.js

If you'd like to execute a script when the Saber Editor loads, include the file editor.js in your vendor plugin folder. Saber will automatically compile all editor.js files from all vendors into /wwwroot/editor/js/vendors-editor.js, which is loaded when the user loads Saber's Editor.


S.ajax.post

This function is used to call web APIs (IVendorService) and includes both OnComplete and OnError callback arguments.

S.ajax.post('ShoppingCart/AddToCart', {productId: id}, (response) => { //process response }, (err) => {//process error});