create-modulo
Version:
Starter projects for Modulo.html - Ready for all uses - Markdown-SSG / SSR / API-backed SPA
97 lines (74 loc) • 3.33 kB
HTML
<script src=../static/Modulo.html></script><meta charset=utf8><script type=md>---
title: Modulo
---
# 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, while in "dev" mode (e.g. not the "built" version), will by
default search for a *Modulo* definition in a few different places:
1. *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.html", 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.
2. *child of body* - Defined in the body at the top level
(NOT nested in any tags). Modulo will read it asynchronously after the DOM has
finished parsing (the `DOMContentLoaded` event). This will
happen if your `src="Modulo.html"` 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 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:
```
<script Modulo
src="//modu.lol"
-src="/static/"
>/script>
```
### Markdown HTML
Modulo documentation (such as this page, see "View Page Source") is often
written in Markdown format. To make it compatible with Markdown editors and CMS
systems, cramming everything into one line becomes slightly messy, but
expedient. If `<x-Page>` is your Markdown-ready component, the single line
becomes:
```modulo
<script Modulo src="static/js/Modulo.js" -src="static/"><-script><x-Page><script type=md>---
```