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 315

Methods

# static getLibraryPath() → {string}

Get the path to the KissJS library, as defined in the script tag.

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

The path to the KissJS library

string

# 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 be 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
useDb object

If false, load the library without the db/data related scripts (default is true)
useUx object

If false, load the library without the ui extensions (default is true).

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

# static loadScript(path, configopt)

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
config object <optional>

Optional object configuration
options object <optional>

Optional object to pass any custom attributes to the script tag, like id, data-*, defer, async...
autoAddExtension string | boolean <optional>
 '.js'

The extension to auto append to the path url. Default is '.js'. Set to false to disable it.

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

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 608

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 579

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 627

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