Using the prototype from T385321, build out a few common UI patterns, to assess the feasibility of using SSR for them and discover what we'd have to do to make them work.
Incomplete list of things we could explore:
- Build a form with Codex's form components
- Make submitting it work both in JS with XHR and without JS with plain HTML
- Make populating it with arbitrary data (e.g. from the query string) work on the server-side
- (in particular, we might encounter problems with components that don't currently use an HTML form element like Select, or complex form field components like ChipInput)
- Build a button that populates a form with data to be edited, either dynamically in JS, or by reloading the page with a query string without JS (inspired by PatchDemo's copy feature)
- Build a button that launches a dialog containing a form with JS, or navigates to a URL that presents that same form without JS (inspired by the edit button in the old multiblocks design)
- Build a tab layout where clicking a tab switches to that tab dynamically in JS, or some other way without JS (either using CSS or by reloading the page with a query string)
- Build a search bar (ideally using TypeaheadSearch) that is fully functional in JS and renders a basic form with text input without JS
- Try to write realistic code and explore which limitations of the SSR prototype it might run into
- e.g. require( 'mediawiki.api' ) may fail even if it's only actually used client-side
- Explore what it would take to make more Codex components work well without JavaScript by using CSS or newer HTML tags. We already have this in Accordion with the <details> tag and in ToggleSwitch (which is a checkbox with CSS), but we could also look at:
- ButtonGroup / ToggleButtonGroup (using hidden checkboxes/radios?)
- MenuButton (using checkbox hack or <details>)
- Message dismissal
- Dialog (may not be possible?)
- More broadly, explore what it would take for every Codex component to server-side render in a way that is at least reasonable and not broken (but not necessarily optionally functional) without JavaScript
- Try adding less styles
Incomplete list of places to take inspiration from:
- CSS-only components, where they differ significantly from their Vue counterparts
- Multiblocks (redesign of Special:Block)
- MediaSearch
- PatchDemo (not built with Codex, but uses OOUI-PHP with infusion; not a MW special page)