Bitsmist Frameworks
Docs » LoaderOrganizer

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

ParameterTypeDescription
componentName
Required
StringA name of the component to add. This value is also used as the class name.
settingsObjectComponent settings.
sync
Default:false
ObjectWhether to return a promise that is resolved after finish loading the component.

Return Value

undefined

Referencing Settings

  • loadings.autoLoad
  • loadings.autoMorph
  • loadings.loaderName
  • loadings.overwrite
  • loadings.rootNode
  • loadings.sync
  • loadings.tag
  • loadings.tagName

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

ParameterTypeDescription
loaderName
Default:“DefaultLoader”
StringA 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

ParameterTypeDescription
tagName
Required
ObjectA tag name of the component.
className
Required
StringA name of component class.
settingsObjectComponent settings.
loadOptionsObjectOptions for loading. Valid keys are below.
“path”StringA 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

ParameterTypeDescription
rootNode
Required
HTMLElementA base node to load components.
optionsObjectOptions. Valid keys are below.
 “waitForTags”
Default:false
BooleanIf 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

ParameterTypeDescription
settingName
Required
StringA name of the setting file without extension.
loadOptionsObjectOptions for loading. Valid keys are below.
“path”StringA path to the setting file.

Return Value

undefined

Referencing Settings

  • system.appBaseUrl
  • system.componentPath
  • loadings.path

loadSettingFile(settingName, path, loadOptions)

Type:undefined Inject:Component Asynchronous

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

Parameters

ParameterTypeDescription
settingName
Required
StringA name of the setting file without extension.
pathStringA path to the setting file.
loadOptionsObjectOptions for loading. Valid keys are below.
“type”
Default:“js”
StringA type of the setting. The types are “json” or “js”. If the type is “js” then the script will be executed on loading.
“bindTo”ObjectAn 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

ParameterTypeDescription
templateName
Required
StringA name of template file without extension.
loadOptionsObjectOptions for loading. Valid keys are below.
“path”StringA path to the template file.

Return Value

undefined

Referencing Settings

  • system.appBaseUrl
  • system.templatePath
  • loadings.path
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • LoaderOrganizer
    • Overview
    • Organizing
    • Settings (Global)
      • appBaseUrl
      • autoLoadOnStartup
      • componentPath
      • loaderName
      • templatePath
      • splitComponent
    • Settings
      • autoLoad
      • autoMorph
      • componentName
      • fileName
      • loaderName
      • overwrite
      • path
      • rootNode
      • splitComponent
      • sync
      • tag
      • tagName
    • Tag Attributes
      • bm-autoload
      • bm-automorph
      • bm-filename
      • bm-loadername
      • bm-path
      • bm-split
    • Extended Properties
      • components
    • Extended Methods
      • addComponent(componentName, settings, sync)
      • getLoader(loaderName)
      • loadComponent(tagName, className, settings, loadOptions)
      • loadTags(rootNode, options)
      • loadSetting(settingName, loadOptions)
      • loadSettingFile(settingName, path, loadOptions)
      • loadTemplate(templateName, loadOptions)

GENERAL

  • Overview
  • Installation
  • Create a sample component

COMPONENT

  • Loading
  • Settings
  • Events
  • Extending with organizers

REFERENCE - COMPONENT

  • Component

REFERENCE - ORGANIZER

  • EventOrganizer
  • LoaderOrganizer
  • OrganizerOrganizer
  • SettingOrganizer
  • StateOrganizer
  • TemplateOrganizer

REFERENCE - STORE

  • Store
  • ChainableStore

REFERENCE - UTILITY

  • AjaxUtil
  • ClassUtil
  • Util