### Install modularJS using npm

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This snippet shows how to install the modularJS framework using the npm package manager. It's a one-line command to add the library to your project dependencies.

```sh
npm install modujs
```

--------------------------------

### modularJS Custom Module Lifecycle Methods

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This section describes special lifecycle methods that can be defined within a modularJS module. `init()` is automatically called on app initialization, and `destroy()` is called when the app or module is destroyed, allowing for custom setup and cleanup logic.

```APIDOC
init() { [...] }: Automatically called on app init. Use this instead of the constructor, if you want to use the methods above.
destroy() { [...] }: Automatically called on app destroy. Use this if you need to destroy anything specific. The events are already destroyed.
```

--------------------------------

### Accordion Component Implementation with ModuJS

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This snippet provides the complete setup for an accordion component, including its declarative HTML structure and the accompanying JavaScript module that handles user interactions, such as toggling sections and managing the 'is-open' state.

```html
<div data-module-accordion data-accordion-open="true">
    <section data-accordion="section">
        <header data-accordion="header">
            <h2>Title</h2>
        </header>
        <div data-accordion="main">
            <p>Content</p>
        </div>
    </section>
    <section data-accordion="section">
        <header data-accordion="header">
            <h2>Title</h2>
        </header>
        <div data-accordion="main">
            <p>Content</p>
        </div>
    </section>
</div>
```

```javascript
import { module } from 'modujs';

export default class extends module {
    constructor(m) {
        super(m);

        this.events = {
            click: {
                header: 'toggleSection'
            }
        }
    }

    init() {
        if (this.getData('open')) {
            this.$('section')[0].classList.add('is-open');
        }
    }

    toggleSection(e) {
        const target = e.currentTarget;
        const section = this.parent('section', target);
        const main = this.$('main', target);
        
        if (section.classList.contains('is-open')) {
            section.classList.remove('is-open');
        } else {
            this.$('section.is-open').classList.remove('is-open');
            section.classList.add('is-open');
            this.call('scrollto', section, 'scroll', 'main');
        }
    }
}
```

--------------------------------

### Define a modularJS module with DOM and events

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This example illustrates how to create a modularJS module, including its corresponding HTML structure and JavaScript class. The HTML uses a `data-module-example` attribute to identify the module, while the JavaScript defines a class extending `module` from `modujs`, setting up a click event handler for a button within its scope.

```html
<div data-module-example>
    <h2>Example</h2>
    <button data-example="button">Button</button>
</div>
```

```javascript
import { module } from 'modujs';

export default class extends module {
    constructor(m) {
        super(m);

        this.events = {
            click: {
                button: 'doSomething'
            }
        }
    }

    doSomething() {
        console.log('Hello world');
    }
}
```

--------------------------------

### Call methods on other modularJS modules

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This example illustrates how one modularJS module can call methods on other modules, either a specific instance or all instances of a given module type. It demonstrates inter-module communication using the `this.call` method to trigger actions like opening modals.

```html
<div data-module-example>
    <button data-example="one">One</button>
    <button data-example="all">All</button>
</div>
```

```javascript
import { module } from 'modujs';

export default class extends module {
    constructor(m) {
        super(m);

        this.events = {
            click: {
                one: 'openSpecificModal',
                all: 'openAllModals'
            }
        }
    }

    openSpecificModal() {
        this.call('open', false, 'modal', 'one');
    }

    openAllModals() {
        this.call('open', 'modal');
    }
}
```

--------------------------------

### Implement a modal module in modularJS

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This example demonstrates how to build a modal module using modularJS. It includes the HTML structure with data attributes for module identification and interactive elements, along with the JavaScript class that handles opening, closing, and content updates based on user interactions.

```html
<div data-module-modal="one">
    <h2 data-modal="text">Modal</h2>
    <button data-modal="accept">Ok</button>
    <button data-modal="cancel">Cancel</button>
</div>
```

```javascript
import { module } from 'modujs';

export default class extends module {
    constructor(m) {
        super(m);

        this.events = {
            click: {
                accept: 'accept',
                cancel: 'close'
            }
        }
    }
    
    init() { // Init is called automatically
        this.open();
    }

    open() {
        this.el.classlist.add('is-open');   
    }

    accept() {
        this.$('text').textContent = 'Thank you!';
        this.$('accept').style.display = 'none';
        this.$('cancel').textContent = 'Close';
    }

    close() {
        this.el.classlist.remove('is-open');
    }
}
```

--------------------------------

### Initialize modularJS application

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This JavaScript snippet demonstrates how to set up the main application file for modularJS. It imports the framework, gathers all defined modules, and initializes the application instance, making modules ready for use.

```javascript
import modular from 'modujs';
import * as modules from './modules';

const app = new modular({
    modules: modules
});
app.init(app);
```

--------------------------------

### modularJS Application Instance Methods

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This section outlines methods available on the main modularJS application instance. These methods allow for global control over module initialization, updates, and destruction across the application or specific scopes.

```APIDOC
this.call('init', 'app'): Init all modules.
this.call('update', scope, 'app'): Update scoped modules.
this.call('destroy'[, scope], 'app'): Destroy all or scoped modules.
```

--------------------------------

### modularJS Module Instance Methods

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This section details the methods available within a modularJS module instance for DOM manipulation, inter-module communication, and data handling. These methods facilitate scoped queries, parent lookups, calling other module functions, listening to events, and managing data attributes.

```APIDOC
this.$('query'[, 'context']): Module scoped query selector.
this.parent('name', 'context'): Module scoped parent selector.
this.call('function', arg, 'module'[, 'id']): Call another module method.
this.on('event', 'module', function[, 'id']): Listen to another module event.
this.getData('name'[, 'context']): Get module or target data attribute.
this.setData('name', 'value'[, 'context']): Set module or target data attribute.
```

--------------------------------

### modularJS Module Instance Properties

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This section documents the core properties available within a modularJS module instance. These properties provide access to the module's root DOM element and its event configuration.

```APIDOC
this.el: The module element.
this.events: The module events.
```

--------------------------------

### Export modules for modularJS application

Source: https://github.com/modularorg/modularjs/blob/master/readme.md

This snippet shows how to consolidate and export individual modules from a central `modules` file. This pattern allows the main application file to easily import all defined modules as a single collection.

```javascript
export {default as example} from './modules/example';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.