de24e633f9
The Driver's ask, and his negotiating point with the DX-life author depends on it being true: the components cloned from their /regions page must be REUSABLE, PARAMETERIZED components in the shared library, not private to one plugin. He named the failure mode himself — someone opens the regions plugin folder and finds the components are not reusable after all. I checked before building, and for the UI he named he was right: only the DATA and LOGIC had been promoted. So library/components/regions/RegionSectionCard.vue takes title, summary, countries and footerLabel, emits what was clicked, and knows nothing about where regions come from. The plugin version fetched its own data and owned the layout, which is exactly what made it unusable anywhere else. THE DESIGN TRAVELS WITH IT. The card carries the region-card, countries-grid and country-link CSS lifted unchanged — including the RTL chevron rules, where a "forward" chevron must mirror in Arabic while a disclosure caret must not, and where [dir="rtl"] .region-card__icon at 0-2-0 would otherwise beat the 0-1-0 --open modifier. A consumer gets the look, not a lookalike. It needs dir on an ancestor for that mirroring, which is documented in the file as a requirement. ★ THE CARD OWNS THE DISCLOSURE ROW, after the first cut got it wrong. I put the "View country posters" toggle in the consumer's slot — and immediately had to copy the footer-link styling and the rotating caret back into the plugin, re-creating the duplication this extraction exists to remove. A disclosure inside a card is a card feature; only the revealed CONTENT is the consumer's, so PosterWall stays in the slot with its fourteen props and does not become every consumer's API. ★ THE CHEVRON IS INLINE, NOT A <use href="#id">. The plugin declared the symbol once and every card referenced it. A shadow-root id is scoped to that root, so the same card mounted elsewhere would reference a symbol that does not exist — and an unresolved <use> renders NOTHING, silently. The plugin's own comment warns about that class for external hrefs; a cross-root id fails the same way. check:regions-uses-library is registered and asserts BOTH halves: the plugin imports from @map/ and renders the component, AND no longer holds the markup or the CSS it delegated. A reusability claim only a human can audit is one that rots; this one fails the day someone re-inlines a copy. Two negative controls keep it honest — the plugin still uses its own .rl-root classes, and the other tab is asserted NOT to use the card yet, so the check describes what is extracted rather than what I hope for. Two of my own mechanical edits produced valid JS and broken content on the way here, both caught by checking rather than by the parser: a line-numbered splice that dropped PosterWall's closing /> (fixed by locating boundaries by CONTENT), and a line-filtered CSS deletion that left 9 orphaned declarations and braces at 12/21 (fixed by removing rules brace-aware, then re-validating the concatenated stylesheet rather than trusting check:sfc-parse, which only proves the JS parses). |
||
|---|---|---|
| .. | ||
| api | ||
| colors | ||
| components | ||
| composables | ||
| constants | ||
| data | ||
| i18n | ||
| layouts | ||
| lists | ||
| maps | ||
| packet | ||
| scripts | ||
| stores | ||
| styles | ||
| utils | ||
| index.js | ||
| ProfileLoader.vue | ||
| README.md | ||
library/ (@map) — the shared map template
The other half of the architecture (see ../plugin-designs/README.md):
every map in plugin-designs/<your-map>/ composes the reusable, parameterized pieces that live here.
Fix something here and every map benefits on the next build; break something here and every map
breaks — read components/WARNING.md before touching shared pieces.
| Folder | What lives there |
|---|---|
ProfileLoader.vue |
The root of every bundle: parses profile-config, loads the profile, provides the stores + config |
components/ |
Shared UI — map, legends, controls, popup (PeopleGroupDetail), tables, charts, hints (README) |
composables/ |
Shared logic — map engine (useMapInstance), provider switch, shadow-DOM styles, theming |
stores/ |
Per-instance Pinia stores (ui / map / data) — provided by ProfileLoader, injected by children |
api/ |
Data-source registry (sources.json) + fetch layer — the JAMstack runtime wiring |
colors/ |
Color sets maps opt into via profile-config.colorSet |
i18n/ |
The shared string catalogs (all maps speak the same languages) |
data/ |
Small shared datasets baked at build time (big served data lives in ../data/) |
constants/ |
Shared constants |
scripts/ |
Maintainer pipelines (posters, research) — not part of any bundle |
The rule of thumb (same as WARNING.md): custom code in your app-profile, reusable code here — and things only move from the first to the second once they've earned it.