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
Referencing Settings
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
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
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