Documentation

Namespace

loader

kiss.loader

Load some .js and .css into the page header. This is mainly used in development mode, when the library is not yet bundled and minified

View Source client/core/kiss.js, line 306

Methods

# async static loadLibrary(config)

Load KissJS library dynamically from all its source files.

  • In development, KissJS is a collection of javascript and css files that must loaded separately
  • Ui eXtensions (UX) always need to be loaded manually and separately
  • In production, KissJS is bundled and doesn't require to load modules dynamically

Please note that dynamic loading of libraries is a bit tricky and hacky:

  • Because a librariy can depend on another one, they must be loaded in the right order
  • KissJS uses this technic because the native browser module system doesn't support file:// path (and KissJS does)
  • We couldn't use external dependencies (like requirejs, systemjs...) which don't work with file path (file://)
Parameters:
Name Type Description
config object
libraryPath object

The path to the library root folder
useDb object

If false, load the library without the db/data related scripts

View Source client/core/kiss.js, line 595

# static loadScript(path, optionsopt, paramsopt)

Load a script file asynchronously into the page.

Parameters:
Name Type Attributes Default Description
path string

Provide the path to the javascript file, without the extension .js
options object <optional>

Optional object to pass any custom attributes
params object <optional>

Optional object to change loader behavior
autoAddExtension string <optional>
 '.js'

The extension to auto append to the path url.

View Source client/core/kiss.js, line 494

Example
kiss.loader
 .loadScript("views/common/topbar")
 .then(() => {
     console.log("Javascript file loaded!")
 })

// With options. This is equivalent to:
// <script async type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="2tkajpbphy1m8dj"></script>
kiss.loader.loadScript("https://www.dropbox.com/static/api/2/dropins.js", {
 id: "dropboxjs",
 "data-app-key": "2tkajpbphy1m8dj"
})

# static loadScripts(paths)

Load many scripts asynchronously and resolve Promise when all scripts are loaded

Parameters:
Name Type Description
paths Array.<string>

Array of javascript file paths to load, without .js extension

View Source client/core/kiss.js, line 555

Example
kiss.loader
 .loadScripts([
     "views/common/topbar",
     "views/common/logo",
     "views/common/buy"
 ]).then(() => {
     console.log("All javascript files are loaded!")
 })

# static loadStyle(path)

Load a CSS file asynchronously into the page

Parameters:
Name Type Description
path string

Provide the path to the CSS files, without the extension .css

View Source client/core/kiss.js, line 526

Example
kiss.loader
 .loadStyle("views/common/topbar")
 .then(() => {
     console.log("CSS file loaded!")
 })

# static loadStyles(paths)

Load many styles asynchronously and resolve Promise when all styles are loaded

Parameters:
Name Type Description
paths Array.<string>

Array of CSS file paths to load, without .cess extension

View Source client/core/kiss.js, line 574

Example
kiss.loader
 .loadStyles([
     "views/common/topbar",
     "views/common/logo",
     "views/common/buy"
 ]).then(() => {
     console.log("All CSS files are loaded!")
 })