Source & layer issues with HMR in dev #84
Description
Seen:
While working on sources with multiple layers, after every edit & save, sources complain that they can’t be removed before layers, and layers complain they already exist, requiring a browser refresh after every edit.
Desired:
Ideally, layers and sources take care of themselves and don’t require refreshing the browser.
Repro:
- have 1 source and 2 layers
- edit a layer property, e.g.
circle-color - see the console and an empty map
- refresh to reload content
More detail:
It may be relevant that I have grouped my source and layers into a component, like this:
app.vue
...
<template>
<MapboxMap map-id="map" :options="mapboxOptions">
<MapLayerStations />
</MapboxMap>
</template>
...mapLayerStations.vue
...
<template>
<MapboxSource source-id="stations-source" :source="sourceStations" />
<MapboxLayer :layer="layerStationsCircles" @click="onClickStation" />
<MapboxLayer :layer="layerStationsLabels" @click="onClickStation" />
</template>
...Final thing to add, in similar projects, I vaguely recall resorting to making my slot conditional, but it may well be more convenient than robust:
<script lang="ts">
...
this.map.on('load', () => {
this.loaded = true
})
...
</script>
<template>
<slot v-if="loaded"/>
</template>