Modulo [%] modulo.js
  • About
  • Start
  • Docs
v: 0.0.31
github | npm mdu.js

%

Documentation

  • Table of Contents
  • Tutorial
  • Templating
  • Template Reference
  • CParts
  • Lifecycle
  • Directives
  • Examples

Modulo documentation

The complete, interactive Modulo documentation is found here.

Search: Use your browser's Control-F or Command-F page search feature—topic and other extra keywords are listed on this page below, as a glossary for easier navigation.

Not sure where to begin? Consider getting started with the tutorial, or playing around with this showcase of example components.

Table of Contents

  • Table of Contents
  • Tutorial
    • Part 1: Components, CParts, and Loading (Topics: cdn, components, cparts, template, style, html & css)
    • Part 2: Props, Templating, and Building (Topics: props, template variables, template filters, modulo console command, build, hash)
    • Part 3: State, Directives, and Scripting (Topics: state, directives, data props, state.bind, data types, events, basic scripting)
  • Templating
    • Templates (Topics: templating philosophy, templating overview)
    • Variables (Topics: variable syntax, variable sources, cparts as variables)
    • Filters (Topics: filter syntax, example filters)
    • Tags (Topics: template-tag syntax, example use of templatetags)
    • Comments (Topics: syntax, inline comments, block comments)
    • Debugging (Topics: code generation, debugger, developer tools)
    • Escaping (Topics: escaping HTML, safe filter, XSS injection protection)
  • Template Reference
    • Built-in Template Tags (Topics: if, elif, else, endif, for, empty, endfor, operators, in, not in, is, is not, lt, gt, comparison, control-flow)
    • Built-in Filters (Topics: add, allow, capfirst, concat, default, divisibleby, escapejs, first, join, json, last, length, lower, number, pluralize, subtract, truncate, renderas, reversed, upper)
  • CParts
    • Component (Topics: name, innerHTML, patches, reconciliation, rendering mode, manual rerender, shadow, vanish, vanish-into-document, component.event, component.slot, component.dataProp)
    • Props (Topics: accessing props, defining props, setting props, using props)
    • Script (Topics: javascript, events, computed properties, static execution, custom lifecycle methods, script callback execution context, script exports)
    • State (Topics: state definition, state data types, json, state variables, state.bind directive)
    • StaticData (Topics: loading API, loading json, transform function, bundling data)
    • Style (Topics: CSS, styling, :host, shadowDOM)
    • Template (Topics: custom template, templating engine)
  • Lifecycle
    • Global lifecycle (Topics: lifestyle phases, prebuild, define, factory)
    • Component lifecycle (Topics: consturctor, initialized, prepare, render, reconcile, update, event, eventCleanup)
    • Lifecycle callbacks (Topics: hooking into lifecycle, callbacks, script tag callbacks, renderobj, baseRenderObj, loadObj, dependency injection, middleware)
  • Directives
    • Directives (Topics: built-in directives, directive shortcuts, custom directives)
    • Built-in directives (Topics: [component.dataProp], :=, prop:=, JSON primitive, data-prop, assignment, [component.event], @click, @...:=, [component.slot], [state.bind])
    • Custom directives (Topics: refs, accessing dom, escape hatch, Mount callbacks, Unmount callbacks, template variables vs directives, script-tag custom directives, custom shortcuts)
  • Examples
    • Starter Files (Topics: starter, snippets, component libraries, download, zip, page layouts, vanish-into-document)
    • Example Library (Topics: Hello, Simple, ToDo, JSON, JSONArray, GitHubAPI, ColorSelector, DateNumberPicker, PrimeSieve, Scatter, FlexibleForm, FlexibleFormWithAPI, Components, OscillatingGraph, Search, SearchBox, WorldMap, Memory, ConwayGameOfLife)
    • Experiments (Topics: custom cparts for apis, custom cparts for legacy, jQuery, handlebars, jsx, Tone.js, audio synthesis, MIDI, jsx templating, babel.js, transpiling, cparts for apis, TestSuite, unit testing)
(C) 2023 - Michael Bethencourt - Documentation under LGPL 2.1