Mozart is not a framework

In fact, it's hardly anything at all.

Mozart's purpose is to enable a component-centric pattern for web development using a very small JavaScript file.

Components

Components are just ordinary DOM elements designated with data-component attributes.

Each component gets its own dedicated JavaScript and CSS file...

Components have a scoped query selector q() that selects only from the elements inside of it.

Actions defined on a component can defer downstream logic to other components thereby separating concerns and keeping code tidy.

Creating a component

Create your markup using data-component to name your component.

Import Component from mozart.js whenever you need to define a component.

Then give it a name and export it so other components can import it.

Add some methods

You'll probably want to define some behaviors next.

Once we define these behaviors with methods, you'll be able to call them either on the component's name or on this if in the right context.

You can define your actions one-by-one on the component...

...or assign a whole set of them.

Calling a method should feel like native JavaScript because it mostly is.

Selecting elements

Selecting an element can be done with q which is merely a shortcut to document.querySelector that:

1. Prefaces the query with [data-component="<your-component-name-here>"]
2. Returns one element if one is found, or an array of elements otherwise

The scoped selector is also a forcing function to use short and simple class names for elements.

Attaching events

Attaching events isn't mostly native JS with some help from q and overall shortened syntax

Advanced

Selecting the component itself

Select the component itself by leaving q empty or by calling me.

Storing data

To save some arbitrary data to the component as you would any in-memory object, use the .store method.