Builder Dependency Declaration JSON Files

Overview

Fluid Infusion's custom build system uses JSON files to declare dependencies. These files exist in the source hierarchy, typically one per "module." A module might consist of a component, a part of the framework or a collection of third-party files. They are used by the Builder to determine exactly which files need to be included in a custom build.

On This Page

Important

Developers who add or remove files from a module, or alter the dependencies of a module, must remember to update the dependency file. If they are introducing new dependencies into Infusion, they should create a new dependency declaration file.

File Location and Name

Builder dependencies should be placed in the root folder of a module, that is, the folder that is the top-level ancestor for any files used by the module.

The file name should be a concatenation of the module name and "Dependencies.json". For example:

jQueryDependencies.json
rendererDepenencies.json
inlineEditDependencies.json

Format

A dependency declaration object consists of one property, the modules's name. This property may contain five properties, as shown below:

{
    "<moduleName>": {
        "name": "<display version of module name>",
        "description": "<text description of module, for display>",
        "cssFiles": <list of CSS files required by module>,
        "files": <list of JavaScript files required by module>,
        "dependencies": <list of other modules required by this module>
    }
}

name
This is a string containing the name of the module. This string will be displayed in the Builder user interface, and so should be formatted as such: capitalized, with regular spacing.

description
This is a string containing a short description of the module. It will be displayed in the Builder user interface to inform users about just what the module is.

cssFiles
This a list of strings containing the names of the CSS files used by this module. It should either be

a single string if only one CSS file is used, or
an array of strings if more than one file is used.

files
This a list of strings containing the names of the JavaScript files used by this module. It should either be

a single string if only one JavaScript file is used, or
an array of strings if more than one file is used.

dependencies
This a list of strings containing the names of other modules used by this module. The names should be those specified as the key for that module (i.e. the moduleName, not the display name. As with the CSS files and the JavaScript files, this entry should be

a single string if there is only one dependency, or
an array of strings if more than one module is used.

Example

The following code snippet shows the contents of a sample dependency file:

{
    "inlineEdit": {
        "name": "Inline Edit",
        "description": "Edit text without changing context.",
        "cssFiles": "InlineEdit.css",
        "files": [
            "InlineEdit.js",
            "InlineEditIntegrations.js"
        ],
        "dependencies": [
            "jQuery",
            "jQueryUICore",
            "jQueryTooltipPlugin",
            "framework",
            "undo",
            "tooltip"
        ]
    }
}

This example shows

the difference between the "module name," inlineEdit, and the display name, "Inline Edit"
how to specify a single file as a single string (shown in the cssFiles field)
how to specify multiple files as an array of strings (shown in the files field)

Note also:

The dependencies contain the 'camel-case' module names of other modules, not the display names.
The file contains JSON, not JavaScript, and so all fields must be enclosed in quotation marks. (You may wish to validate your JSON using JSONLint.