LoaderOrganizer

Inherit:Organizer

Overview

LoaderOrganizer handles the loading process of class files, setting files, and template HTML files. Note actual loading process is handled by loaders and LoaderOrganizer does its job by calling them.

Organizing

As a global process, it starts loading files for tags that need to be loaded on the page when all DOMs are loaded.

When it is attached to a component, it loads settings from “molds”, and “components” sections and adds components to the parent component. The components in the “molds” section are loaded sequentially in order. LoaderOrganizer starts loading a component and waits for the component to finish loading, then starts loading the next one. After finishing all the components in the “molds” section, it starts loading the “components” section. Unlike the “molds” section, LoaderOrganizer doesn't wait for the previous component to finish loading for the components in the “components” section. It starts loading them one after another and might be resulting in loading out of order, even though they start loading in the order they are in the settings.

Sections

molds
components

Timings

DOMContentLoaded (Native event)
afterStart

Settings (Global)

Syntax:

{
    "system": {
        "appBaseUrl": <appBaseUrl>,
        "componentPath": <componentPath>,
        "loaderName": <loaderName>,
        "templatePath": <templatePath>,
        "splitComponent": <splitComponent>
    },
    "organizers": {
        "LoaderOrganizer": {
            "settings": {
                “autoLoadOnStartup”: <autoLoadOnStartup>
            }
        }
    }
}

appBaseUrl

Type:String

Specifies the application's base URL.

autoLoadOnStartup

Type:Boolean Default:true

If True, it starts loading tags on the DOMContentLoaded event.

componentPath

Type:String

Specifies a path to the component common path.

loaderName

Type:String Default:“DefaultLoader”

Specifies a loader name to load components.

templatePath

Type:String

Specifies a path to the template common path.

splitComponent

Type:String Default:false

Specifies whether a component file is split. If set to True, the loader will load two files for each component.

Settings

Extra components settings are placed in the “components” or “molds” section.

Syntax:

{
    "molds"/"components": {
        <componentName>: {
            "loadings": {
                "autoLoad": <autoLoad>,
                "autoMorph": <autoMorph>,
                "fileName": <fileName>,
                "loaderName": <loaderName>,
                "overwrite": <overwrite>,
                "path": <path>,
                "rootNode": <rootNode>,
                "splitComponent": <splitComponent>,
                "sync": <sync>,
                "tag": <tag>,
                "tagName": <tagName>,
            }
        }
    },
}

An object set as the value for <componentName> is setting for an adding component. Those settings will be merged into the adding component settings. Though we only explain the “loadings” section that is handled by LoaderOrganizer here, any other sections can exist in this settings.

Example:

{
    "molds": {
        "PadSidebar": {
            "loadings": {
                "rootNode": "#content"
            },
            "settings": {
                "name": "PadSidebar"
            }
        }
    },
    "components": {
        "PadSetting": {
            "loadings": {
                "rootNode": "#main"
            },
            "settings": {
                "name": "PadSetting"
            }
        }
    }
}

autoLoad

Type:String/true

Specifies to load a component automatically. Specify true, a URL to the component js file or the HTML template file as the value. If the value is true the component is loaded using the default path and the file name.

autoMorph

Type:String/true Default:“BITSMIST.v1.Component”

Specifies a class name to use for instantiating a component. A new class is created by inheriting the specified class and the class is paired to the tag name. If the class doesn't exist yet use the “autoLoad” option to load it automatically.

componentName

Type:String

The name of the component. This value is also used as a class name of the component.

fileName

Type:String Default:<Tag Name>

A file name of the component without extension. If not specified, the tag name is used as the file name. This file name is used for retrieving both class files and HTML files.

loaderName

Type:String Default:“DefaultLoader”

Specifies a loader name to load the component.

overwrite

Type:Boolean Default:false

Specifies whether to overwrite a parent node. If set to True, the parent node will be replaced by the component.

path

Type:String

Specifies a path of the component files.

rootNode

Type:String

A node to which the component attaches.

splitComponent

Type:Boolean Default:false

Specifies whether a component file is split. If set to True, the loader will load two files.

sync

Type:String/Boolean Default:false

If a string is set, it waits for an added component to become the specified state. If set to True, it waits for the “ready” state.

tag

Type:String

A tag for the component. This tag is inserted into the document tree as a component. Unlike “tagName”, you can specify attributes and classes also.

tagName

Type:String Default:(see desc)

A tag name of the component. If not specified, it will be generated from the class name. Assuming the class name is a pascal case, the class name is divided into two words from the second capital letter of the class name, then those two words will be concatenated with '-'.

Tag Attributes

Some settings can be specified in tag attributes. Tag attributes have higher priority than settings.

bm-autoload

Type:String

Indicates to load a component automatically. Specify a URL to the component or to the HTML file as the value. If the value is empty the component is loaded using the default path and the file name. Same as "loadings.autoLoad".

bm-automorph

Type:String/(none) Default:“BITSMIST.v1.Component”

Specifies a class name to use when instantiating the component. Same as "loadings.autoMorph". If not specified BITSMIST.v1.Component will be used.

bm-filename

Type:String

A filename of the component without extension. Same as "loadings.fileName".

bm-loadername

Type:String Default:“DefaultLoader”

A loader name to load the component. Same as "loadings.loaderName".

bm-path

Type:String

A path that is used for loading components and templates. Same as "loadings.path".

bm-split

Type:(none)

Indicates a component file is split. No value is needed. Same as "loadings.splitComponent".

Extended Properties

components

Type:Object Inject:component get

Returns the object holding child components that are added to the component.

Extended Methods

addComponent(componentName, settings, sync)

Type:undefined Asynchronous Inject:component

Adds a child component to the component. The added component instance will be added to the "components" property.

Parameters

Parameter	Type	Description
componentName `Required`	String	A name of the component to add. This value is also used as the class name.
settings	Object	Component settings.
sync `Default:false`	Object	Whether to return a promise that is resolved after finish loading the component.

Return Value

undefined

getLoader(loaderName)

Type:Function Inject:Component

Returns specified loader. If the loader name is not specified, then the default loader (DefaultLoader) will be returned.

Parameters

Parameter	Type	Description
loaderName `Default:“DefaultLoader”`	String	A name of the loader to get.

Return Value

Loader Object

loadComponent(tagName, className, settings, loadOptions)

Type:undefined Inject:Component Asynchronous

Load component files. The actual process is handled by an active loader.

Parameters

Parameter	Type	Description
tagName `Required`	Object	A tag name of the component.
className `Required`	String	A name of component class.
settings	Object	Component settings.
loadOptions	Object	Options for loading. Valid keys are below.
“path”	String	A path to the component to load.

Return Value

undefined

Referencing Settings

loadings.autoLoad
loadings.autoMorph
loadings.fileName
loadings.path
loadings.splitComponent
system.appBaseUrl
system.componentPath
system.splitComponent

loadTags(rootNode, options)

Type:undefined Inject:Component Asynchronous

Load tags under the root node specified. The actual process is handled by an active loader.

Parameters

Parameter	Type	Description
rootNode `Required`	HTMLElement	A base node to load components.
options	Object	Options. Valid keys are below.
“waitForTags” `Default:false`	Boolean	If True the component waits for its child components to become “ready” state.

Return Value

undefined

Referencing Settings

bm-autoload
bm-automorph
bm-filename
bm-loadername
bm-path
bm-split

loadSetting(settingName, loadOptions)

Type:undefined Inject:Component Asynchronous

Load a component setting file and merge settings in the file into component settings. The actual process is handled by an active loader.

Parameters

Parameter	Type	Description
settingName `Required`	String	A name of the setting file without extension.
loadOptions	Object	Options for loading. Valid keys are below.
“path”	String	A path to the setting file.

Return Value

undefined

Referencing Settings

loadSettingFile(settingName, path, loadOptions)

Type:undefined Inject:Component Asynchronous

Load a setting file. The actual process is handled by an active loader.

Parameters

Parameter	Type	Description
settingName `Required`	String	A name of the setting file without extension.
path	String	A path to the setting file.
loadOptions	Object	Options for loading. Valid keys are below.
“type” `Default:“js”`	String	A type of the setting. The types are “json” or “js”. If the type is “js” then the script will be executed on loading.
“bindTo”	Object	An object to bind when executing a script if the “type” is “js”.

Return Value

undefined

loadTemplate(templateName, loadOptions)

Type:undefined Inject:Component Asynchronous

Load a template HTML file. The actual process is handled by an active loader.

Parameters

Parameter	Type	Description
templateName `Required`	String	A name of template file without extension.
loadOptions	Object	Options for loading. Valid keys are below.
“path”	String	A path to the template file.

Return Value

undefined