In the SPEC tab of the Component Editor you'll configure your component and load dependencies. This article walks you through how to configure your Javascript component to specify a layout container element, use your favorite CSS framework and load any necessary Javascript dependencies.


(For a primer on what it's like working with Javascript in the Exaptive Studio, check out the Javascript in General article and the other javascript framework articles in our Working with Your Favorite Technology section.)




HTML/Layout Elements


If your component has an HTML element, then your spec will have something resembling the following in it.


blob1476888274474.png


This specifies the type of element: div, span, svg, etc. The attributes are the HTML element attributes. Given the above spec, our HTML element would look something like this:

<div class="my-component-spec" data-node="my-component-id_0"></div>

 

To remove the div (if your component is just an algorithm and doesn't need a layout element), remove the layout and layoutSpec key/values.


CSS Dependencies


CSS dependencies allow a user to style the component's layout element with external CSS stylesheets. 


A CSS dependency is a file dependency of type "css". The CSS files are loaded in the order they are provided, prior to loading the component script.


Example:

"dependencies": {
  "file": [
     // specify by path
     {"type": "css", "path": "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.css"},
     {"type": "css", "path": "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/addon/lint/lint.css"},
     
     // specify by asset uuid 
     {"type": "css", "asset": "ac4c2250-335b-11e6-ab4a-b521dd0ca3a0"}
  ]
}

 


JavaScript Dependencies


JavaScript dependencies allow a user to leverage external scripts, such as third-party libraries.


A JavaScript dependency is a file dependency of type "js".


The "name" property is used to indicate what modules are imported when the script is loaded. The dependency loader will look for a corresponding global window[<name>] and attach it to  

this.api.imports[<name>]. Multiple names may be defined per script.


While the component is loading, the global module at window[<name>] will be left intact, as it may be needed by other scripts loaded by the component, such as plugins. However, once the component finishes loading, the module will be deleted from the global namespace. This is important in order to prevent conflicts with modules loaded by other components, such as different versions of the same library.


NOTE: Popular modern libraries and libraries supporting AMD should work out of the box. However, some smaller libraries and old libraries which depend on global variables may have issues loading or running or both. In such a case, you may need to tweak the library. Please see here for details.


NOTE: Many libraries use a common abbreviation or character to represent their namespace. You cannot use two libraries with the same name in the component spec. For example, jQuery is most commonly used as '$', and bootstrap js also uses '$'. To load these dependencies, their spec names must be different.


In the SPEC file:

"dependencies": {
  "file": [
    {"type": "js", "name": "$", "path": "https://code.jquery.com/jquery-2.2.4.min.js"},
    // multiple imports
    {"type": "js", "name": ["mat3", "mat4"], "path": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.2/gl-matrix.js "}

    // specify by asset uuid
    {"type": "js", "name": "mylib", "asset": "ac4c2250-335b-11e6-ab4a-b521dd0ca3a0"}
  ]
}


In the SCRIPT:

export default {
  _init() {
      const $ = this.api.imports.$;
      const mat3 = this.api.imports.mat3;
      const mat4 = this.api.imports.mat4;
      const mylib = this.api.imports.mylib;
  }
}