future-plans: unified formatter→renderer pipeline and terminology revision

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-23 23:53:53 +00:00
parent a6bd340d81
commit 5ac980c9fa

View File

@@ -224,21 +224,31 @@ experience for JS snippets.
## Template system ## Template system
### Rich return values from templates ### Unified formatter → template pipeline and terminology revision
Currently formatters can only return a plain string. It would be useful to return The current system conflates several distinct concepts under the word "template",
richer output — e.g. styled text, multiple values, or structured data. Options: creating ambiguity:
- Return an object with named slots: `{ label: "100kΩ", sublabel: "0603", badge: "low stock" }` - The HTML `<template>` elements used for UI cloning (internal, not user-facing)
which the renderer maps to specific DOM locations - The user-written JS formatter functions (currently called "templates" in the UI)
- Return an HTML string rendered via `innerHTML` (simple but XSS risk if data is - The future idea of user-defined DOM rendering templates
user-controlled, and ties templates to DOM structure)
- Return a DOM node or a lightweight virtual-DOM descriptor
The object-with-slots approach is probably the right default — it keeps templates Proposed clearer terminology:
declarative, avoids XSS, and lets the UI decide how to present each slot. Slots - **Formatter** — a user-written JS function that receives a component and returns a
could vary by context (list row vs detail header vs dropdown item). structured record (named slots), e.g. `{ label, sublabel, badge, ... }`
- **Renderer** — a DOM fragment template (possibly user-defined) that consumes a
formatter's record and produces the visual output for a given context (list row,
detail header, dropdown item, etc.)
- **View template** — the internal HTML `<template>` cloning mechanism (keep as-is,
but don't expose this term to users)
This also applies to field parsers and custom search views once those exist. The pipeline becomes: `component → formatter → record → renderer → DOM`. Formatters
and renderers are decoupled — the same formatter record can feed different renderers
in different contexts. Users can define custom renderers (DOM fragments with named
slot targets) in addition to custom formatters.
This revision also applies to field parsers and search view expressions once those
exist — they all follow the same pattern of JS function → structured output →
context-specific renderer.
Any field that accepts JavaScript (name formatter templates, future custom search Any field that accepts JavaScript (name formatter templates, future custom search
views, field parsers, etc.) should use a CodeMirror 6 editor instead of a plain views, field parsers, etc.) should use a CodeMirror 6 editor instead of a plain
`<textarea>`. Gives syntax highlighting, bracket matching, and a proper editing `<textarea>`. Gives syntax highlighting, bracket matching, and a proper editing