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 312

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 (default is true)
useUx object

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

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

# 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 535

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 597

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 568

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 616

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