Skip to main content

Module

A Module is the basic entry point for JavaScript on a BAO theme.

import { Module } from '@by-association-only/theme-module'

export default class extends Module {
  // …
}

Files​

Define your module classes in JavaScript modules, one per file. Export each module class as the module’s default object, as in the example above.

Place these modules in the modules/ directory. Name the files [identifier].js, where [identifier] corresponds to each module’s identifier.

Identifiers​

An identifier is the name you use to reference a module class in HTML.

When you add a data-module attribute to an element, the module system reads the identifier from the attribute’s value and creates a new instance of the corresponding module class.

For example, this element has a module which is an instance of the class defined in modules/cart.js:

<div data-module="cart"></div>

Properties​

Every module belongs to an Application instance and is associated with an HTML element. Within a module class, you can access the module’s:

  • application, via the this.application property
  • HTML element, via the this.element property

Scopes​

When the module system connects a module to an element, that element and all of its children make up the module’s scope.

For example, the <div> and <h1> below are part of the module’s scope, but the surrounding <main> element is not.

<main>
  <div data-module="reference">
    <h1>Reference</h1>
  </div>
</main>

Naming Conventions​

Always use camelCase for method and property names in a module class.

When an identifier is composed of more than one word, write the words in kebab-case (i.e., by using dashes: date-picker, list-item).

In filenames, separate multiple words using dashes (kebab-case: modules/list-item.js).