Some users of Codex are unable to use Vue and must use CSS-only components. The docs are great as explaining how to accomplish this. However, the markup structure can be quite complex. For a JavaScript application that needs to dynamically create CSS-only Codex components, we are forced into much tedious manual HTML construction, i.e.:
const wrapper = document.createElement( 'span' ); wrapper.className = 'cdx-checkbox cdx-checkbox--inline'; const input = document.createElement( 'input' ); input.className = 'cdx-checkbox__input'; input.id = `cm-mw-panel--checkbox-mycheckbox`; input.type = 'checkbox'; input.name = name; input.checked = checked; wrapper.appendChild( input ); const emptyIcon = document.createElement( 'span' ); emptyIcon.className = 'cdx-checkbox__icon'; wrapper.appendChild( emptyIcon ); const labelWrapper = document.createElement( 'div' ); labelWrapper.className = 'cdx-checkbox__label cdx-label'; const labelElement = document.createElement( 'label' ); labelElement.className = 'cdx-label__label'; labelElement.htmlFor = input.id; const innerSpan = document.createElement( 'span' ); innerSpan.className = 'cdx-label__label__text'; innerSpan.textContent = mw.msg( 'my-checkbox' ); labelElement.appendChild( innerSpan ); labelWrapper.appendChild( labelElement ); wrapper.appendChild( labelWrapper );
All of that for a single checkbox!
MediaWiki-extensions-CodeMirror is one such example. In an effort to reduce repetition, we have essentially made a tiny wrapper for Codex components. The next JS application that can't use Vue but wants to use Codex will presumably have to do the same all over again. I think a library would be beneficial for this purpose.
CodeMirror currently implements:
The library would ensure the markup is always correct according to Codex specifications, perhaps giving more freedom to DST to make what would otherwise be breaking changes.
It could also implement Dialog (example), which I understand is not currently advertised as a CSS-only component. If we can offer users of Codex the JS to use, then Dialog can "officially" be offered for non-Vue users (though I guess you couldn't call it "CSS-only").