Modulo

This is the "launching off point" or starting point of all Modulo projects and Modulo code. The "Modulo" definition is what then contains Components, Libraries, and others.

Modulo.js, while in "dev" mode (e.g. not the "built" version), will by default search for a Modulo definition in a few different places:

child of head - Defined already in the head (NOT nested in any tags) by the time the Script tag appears. It will read it synchronously, meaning synchronous tags will be registered immediately after loading the src="Modulo.js", blocking, inline with page load. This is the default way that embedded Modulo projects work, such as when you start with a blank file and paste in a Modulo snippet. Note that embedded (NOT using -src=) core definition scripts (such as Configuration) will be run synchronously and blocking while the page is loading, possibly with the document open for writing.
child of body - Defined in the body at the top level (NOT nested in any tags). Modulo.js will read it asynchronously after the DOM has finished parsing (the DOMContentLoaded event). This will happen if your src="Modulo.js" tag is in the body of a normally formed HTML page, or is loaded asynchronously or after the document has finished writing. Component registration will not be synchronous or blocking.

Example

Using a bare "Modulo" tag:

Note that this is only good if it is NOT being embedded in an HTML document, or if you are sure that it will not need any more complexity than this (simply because things like Script tags and Style tags will not function correctly in this situation, as they will get executed when the page loads causing "leakage").

<Modulo> <Configuration -src="./my-config-script.js"></Configuration> <Component name="HelloWorld"> <Template> Hello *Modulo* World! </Template> </Component> <Library -src="./mylib.html"></Library> </Modulo>

As a "template" tag, for embedding:

<template Modulo> <Configuration -src="./my-config-script.js"></Configuration> <Component name="HelloWorld"> <Template> Hello <strong>Modulo</strong> World! </Template> </Component> <Library -src="./mylib.html"></Library> </template>

Condensed "script" tag:

This example is in a single Script tag that also loads Modulo JS code (in this case, using the unpkg CDN). It is ideal if you put all of your Modulo code in another HTML file anyway (in this case, /static/index.html), thus making a simple "4-liner" boilerplate for any page that needs your Modulo component libraries: