mmo-element-doc

A documentation sheet for any .jhs custom element: a live preview, a configurator that writes the html for you, and the reference tables — attributes, classes, slots, methods, properties — read from the element itself.

Documentation
Builder

Why it reads rather than repeats

Every element compiled by MMO\client\JHSCompiler ships its own documentation: the compiler extracts the jsdoc of the class and emits a documentation() method next to it. An element also is its slots — they are in its shadow root. So a sheet can be generated, and a page that documents an element cannot drift from it: change the jsdoc, the page changes.

That is the whole template. A page that wants the configurator to start somewhere useful adds a preset:

Any element of the build

Pick one — the list is MMO.customElements, every element MMO.define() registered in this page's bundle.

Three sheets, three shapes of element

A layout with slots, a control with attributes, a leaf with tone classes: the same template, and each one shows what its element actually has.

<mmo-accordion> — slots

<mmo-progress> — attributes

<mmo-tooltip> — content only

…including itself

It is an element like any other, so it documents itself — which is the shortest proof that it reads rather than repeats.

Documenting an element so the sheet is worth reading

The sheet shows what the element declares. Four tags in the class jsdoc are what fill it:

/** * Icon element to display an icon ← the description at the top of the sheet * * @class Icon * @attr name - the name of the icon ← one row of the attributes table, and one control * @css round - make the icon round ← one row of the classes table, and one checkbox * @slot - the label next to the glyph ← one row of the slots table, and one text area */

A slot the element has but nobody documented still appears, with an empty description — a missing sentence is visible, which is the point. Methods and getters need nothing beyond the jsdoc they already carry: @param, @return and the sentence above them.

Tags

<#custom element> <#tools> <#documentation>