How To Use Velo and Wix Fetch To Extend Your Website Functionality

Velo supports working in JavaScript and some special features, including:

Support for JavaScript features
Support for modules
Support for the JavaScript Fetch API
Share JavaScript code naturally between the backend and front-end using web modules

JavaScript Feature Support (ECMAScript 2019)

Velo supports modern JavaScript features up through and including the ES2019 standard.

(And of course you can use promises, async/await, and arrow functions, which were introduced with ES2017.)

Browsers are gradually adopting the ES2019 standard. Until these standards are fully implemented, we transpile your code into ES5, so it can run in current browsers. Velo supports source maps, so that even though the browser runs transpiled ES5 code, you can debug your ES2019 source code in your browser's developer tools.

Module Support (ECMAScript 2015)

Note:
You can only export functions in files that are located in the Public or Backend sections of the Velo Sidebar. You cannot export functions from page or popup files.

Velo supports the native module functionality included in the ES2015 release of JavaScript.

To use ES2015 module functionality, you need to follow the ES2015 Module Syntax. Only those items specifically exported in a module are exposed to other files. All other items in your module are internal to the module only.

For example:

// Filename - public/amodule.js
export function aFunction() {
// Only this function is exposed to other files.
    return doSomething() + " or other";
}
function doSomething() {
// This function is internal to the amodule.js module.
    return "Do something";
}

To refer to an item in a module, you first need to

import

it:

import {aFunction} from 'public/amodule.js';

and then you can refer to it:

console.log(aFunction());
// Logs: "Do something or other"

You can export an item as

default

from a module:

// Filename - public/amodule.js
export default function aFunction() {
    return "Do Something";
}

To import a default item, use

import

with no curly braces, { }. You can assign the

default

function any name when importing it. In this case,

doSome

is assigned to

aFunction

because

aFunction

is the default exported item in

amodule.js

import doSome from 'public/amodule.js';

When you import an item from a module, the entire module file is executed. This means that if you have code that is not part of a function or variable declaration in your module, it will execute the first time you import a function from your module. For example, if you have this code in your module:

// Filename - public/lib.js
export function aFunction() {
};
export function bFunction() {
};
console.log("Hi");

When you import

aFunction

from lib.js, your code will also log "Hi" to the console. This will run only once regardless of how many times you import a function from a .js file. So if you import

bFunction

, "Hi" is not logged to the console again.

Exporting Objects

You can export an object from a module. For example:

// Filename - public/amodule.js
export let myObject = {
           prop1: "Here",
           prop2: "There"
       }

You can then import it and refer to its properties:

import {myObject} from 'public/amodule.js';
console.log(myObject.prop1)
// Logs: "Here"

Module Scope

The following is a list of guidelines that define how you can share modules and functions between, and within, the backend and public scopes:

A JavaScript file or script in backend can import a module from any file in backend or public.

A file in public can import a module from any file in public.
You can import functions from backend and use them in public, using a web module.
You can use relative paths to refer to files with the "." prefix.
You can import a module from backend with the backend/ prefix.
You can import a module from public with the public/ prefix.
Modules can import other modules.

Wix Fetch

Wix Fetch is an implementation of the standard JavaScript Fetch API and you work with it the same way, using standard Fetch syntax. You can see examples of using Fetch here, or check out the Standard Fetch specification.

You should use Fetch whenever you need an

http/s

request. You can use Fetch in both backend and front-end code. To use Fetch in your JavaScript code, add

import {fetch} from 'wix-fetch'

to the beginning of your JavaScript file.

Among its benefits, Fetch uses promises to handle asynchronous requests, which allows for easier handling of results and errors.

Previously published at https://support.wix.com/en/article/velo-javascript-support