Artifact - Modulo Documentation

Artifact

How Slim Can Modulo.html get? Modulo's runtime itself is only about 40kb after being trimmed for a build. Modulo's built-in artifacts will automatically "trim" (minify) it's own source code, but make no attempts to trim other sources.

The Artifact definition is how you can specify custom build artifacts. When the build command is run, Modulo loops through all defined Artifacts and outputs the files they generate. This is how the JS, CSS, and HTML files get generated whenever you run build by default. For most users, this is enough--this website uses the default Artifacts, for example. However, if you want to create custom build outputs for advanced usage in building a SSG-powered site, then you can use this feature to create as many extra files per HTML file you SSG as you'd like. For example, you could loop through images, generating a "thumbnail" page for each one. It's very versatile, and gives you the full power of the Modulo templating language for JS, CSS, and prerendered / SSR'ed HTML.

It manages to be this versatile by functioning as a mini-scripting system for specifying and configuring builds, allowing for easy addition of minification, split bundles, or other file types. This gives very fine-grained control over output in a declarative way.

Overview

  • Simply by registering an Artifact (<Artifact name="css">, for example), you can begin to customize or add CSS output
  • By adding a remove= to your Artifact, you can scrub your HTML before saving the built version, e.g. remove="div.delete-me" to remove all divs with delete-me class.
  • By adding a bundle= to your Artifact, you can specify which elements get bundled, or disable it with bundle:=false
  • Now you can register things like JavaScript, CSS, or HTML minifiers as Template filters, and then include them into your build configurations
  • Using the Modulo Template syntax allows for extremely precise control over the exact JavaScript and CSS output.
Example #1: Viewing and running built-in commands

  1. Step 1: Bring up Dev tools (Right click, inspect, console)

  2. Step 2: Do you see [ᵐ°dᵘ⁄o] logo and a list of management commands? If there are too many warnings, consider hiding them. Look for a little arrow between [MAIN THREAD] and Object { }. Click on that arrow (and possibly a <prototype> arrow), to expand the full command menu.

  3. Step 3: Click the little arrow next to a command to run it, such as build or edit

Example #2: Custom Build + Bundle

Note that in the HTML example, ht, he, bo, and js tags get swapped with html, head, body and script tags respectively. This prevents various mistakes in some cases with unsuual syntax and HTML DOM behavior around these special tags (e.g. closing script tags).