Skip to content

Commit 573b30c

Browse files
serpentbladeclaude
andcommitted
docs(maplibre): fix Solid slot-fill API in the guide examples
The per-target slot-fill prop names differ by emitter, and the guide's Solid marker example was wrong on two counts: Solid uses the SUFFIXED render-prop `markerSlot`/`popupSlot`/`controlSlot` (not the bare `marker`), and its scope is passed as an ACCESSOR `() => ctx` (the Solid foreign-slot reactivity pattern), so it's `markerSlot={(ctx) => …ctx().marker…}`, not `marker={({ marker }) => …}`. Verified every per-target fill API against the emitted leaves: React `renderMarker`/`renderPopup`/`renderControl` (plain ctx), Lit `.marker`/`.popup`/ `.control` properties (plain ctx), Vue `#marker`, Svelte snippet, Angular `<ng-template #marker>`. Expanded the per-target summary line to list all six accurately. No props-table change (enforcement PASS); docs 138 anchors/0 broken. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 2c57e0b commit 573b30c

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

docs/guide/maplibre.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -303,14 +303,14 @@ Portal slots unlock the "foreign-engine cell rendering" pattern: MapLibre owns t
303303
/>
304304
```
305305

306-
**Solid** (render prop):
306+
**Solid** (render prop — note the scope is an **accessor**, `ctx()`, for fine-grained reactivity):
307307

308308
```tsx
309309
<MapLibre
310310
center={center()}
311311
onCenterChange={setCenter}
312312
markers={[{ id: 'a', lng: -74.5, lat: 40, label: 'NYC' }]}
313-
marker={({ marker }) => <span class="pin" title={marker.label}>📍</span>}
313+
markerSlot={(ctx) => <span class="pin" title={ctx().marker.label}>📍</span>}
314314
/>
315315
```
316316

@@ -352,7 +352,7 @@ el.markers = [{ id: 'a', lng: -74.5, lat: 40, label: 'NYC' }];
352352
el.marker = ({ marker }) => html`<span class="pin" title=${marker.label}>📍</span>`;
353353
```
354354

355-
On every target the wrapper's `$portals.marker(node, { marker, index })` closure mounts the consumer's fragment into the engine-owned `Marker` element and returns the reactive `{ update, dispose }` handle the wrapper calls as the marker data changes or the marker is removed. The `popup` slot mirrors it exactly (`renderPopup` / `#popup` / `popup` property, scope `{ popup, index }`), and `control` uses the same shape with a `{ map }` scope.
355+
On every target the wrapper's `$portals.marker(node, { marker, index })` closure mounts the consumer's fragment into the engine-owned `Marker` element and returns the reactive `{ update, dispose }` handle the wrapper calls as the marker data changes or the marker is removed. The `popup` and `control` slots mirror it exactly, with the same per-target fill API: a render prop on **React** (`renderMarker` / `renderPopup` / `renderControl`) and **Solid** (`markerSlot` / `popupSlot` / `controlSlot`scope passed as an accessor), a scoped slot on **Vue** (`#marker` / `#popup` / `#control`), a snippet on **Svelte**, an `<ng-template #…>` content child on **Angular**, and an `attribute: false` property on **Lit** (`.marker` / `.popup` / `.control`). The `popup` scope is `{ popup, index }`; the `control` scope is `{ map }`.
356356

357357
## Recipes
358358

0 commit comments

Comments
 (0)