Fix style change

.gitignore

@@ -20,4 +20,7 @@ pnpm-lock.yaml
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-yarn.lock
+yarn.lock
+
+# settings
+/.vscode

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 GIShub
+Copyright (c) 2022 GIShub
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -5,7 +5,7 @@
 [![npm](https://badgen.net/npm/v/solid-map-gl?icon=npm&label)
 ![downloads](https://badgen.net/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
 [![licence](https://badgen.net/badge/license/MIT/blue)](./LICENSE)
-[![size](https://badgen.net/badge/color/114%20kB/blue?label=Unpacked%20Size)
+[![size](https://badgen.net/badge/color/113%20kB/blue?label=Unpacked%20Size)
 ![treeshaking](https://badgen.net/badge/color/supported/green?label=tree%20shaking)](https://bundlephobia.com/package/solid-map-gl)
 ![types](https://badgen.net/npm/types/solid-map-gl?icon=typescript&label)
 

package.json

@@ -37,7 +37,8 @@
     }
   },
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -48,15 +49,20 @@
     "not ie 11"
   ],
   "dependencies": {
-    "mapbox-gl": "^2.7.0",
-    "solid-js": "^1.3.9"
+    "mapbox-gl": "^2.7.1",
+    "solid-js": "^1.3.13"
   },
   "devDependencies": {
-    "@types/mapbox-gl": "^2.6.1",
-    "rollup": "^2.68.0",
-    "rollup-plugin-import-css": "^3.0.2",
+    "canvas": "^2.9.1",
+    "jsdom": "^19.0.0",
+    "rollup": "^2.70.1",
+    "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-uglify": "^6.0.4",
     "rollup-preset-solid": "^1.4.0",
-    "typescript": "^4.5.5"
+    "solid-testing-library": "^0.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.8.6",
+    "vite-plugin-solid": "^2.2.6",
+    "vitest": "^0.8.0"
   }
 }

src/components/Layer/index.tsx

@@ -65,6 +65,9 @@ const Layer: Component<{
         ...props.style,
         id: props.id,
         source: source.id,
+        metadata: {
+          smg: { beforeType: props.beforeType, beforeId: props.beforeId },
+        },
       },
       props.beforeType
         ? map()

src/components/MapGL/index.test.tsx

@@ -0,0 +1,14 @@
+import { describe, it } from 'vitest'
+import { render } from 'solid-testing-library'
+import MapGL from '../..'
+import 'mapbox-gl/dist/mapbox-gl.css'
+
+describe('Map', () => {
+  it('renders', async () => {
+    await render(() => <MapGL></MapGL>)
+  })
+
+  // it('renders with static viewport', () => {
+  //   render(() => <MapGL viewport={{ center: [0, 0], zoom: 5 }}></MapGL>)
+  // })
+})

src/components/MapGL/index.tsx

@@ -9,6 +9,7 @@ import {
   useTransition,
   createUniqueId,
   untrack,
+  on,
 } from 'solid-js'
 import { mapEvents } from '../../events'
 import mapboxgl from 'mapbox-gl'
@@ -59,20 +60,24 @@ const MapGL: Component<{
 }> = props => {
   let map: MapboxMap
   let mapRef: HTMLDivElement
+  let containerRef: HTMLElement
   props.id = props.id || createUniqueId()
 
   onMount(() => {
     map = new mapboxgl.Map({
       ...props.options,
+      style: props.options?.style || { version: 8, sources: {}, layers: [] },
       container: mapRef,
       interactive: !!props.onViewportChange,
-      bounds: props.viewport.bounds,
-      center: props.viewport.center,
-      zoom: props.viewport.zoom || null,
-      pitch: props.viewport.pitch || null,
-      bearing: props.viewport.bearing || null,
-      fitBoundsOptions: { padding: props.viewport.padding },
+      bounds: props.viewport?.bounds,
+      center: props.viewport?.center,
+      zoom: props.viewport?.zoom || null,
+      pitch: props.viewport?.pitch || null,
+      bearing: props.viewport?.bearing || null,
+      fitBoundsOptions: { padding: props.viewport?.padding },
     } as MapboxOptions)
+
+    map.container = containerRef
   })
 
   onCleanup(() => map.remove())
@@ -98,15 +103,37 @@ const MapGL: Component<{
   createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle))
 
   // Update map style
-  createEffect(prev => {
-    prev !== props.options.style && map.setStyle(props.options.style)
-  }, props.options.style)
+  createEffect(
+    on(
+      () => props.options.style,
+      () => {
+        const oldStyle = map.getStyle()
+        const oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'))
+        const oldSources = Object.keys(oldStyle.sources)
+          .filter(s => s.startsWith('cl-'))
+          .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {})
+        map.setStyle(props.options.style)
+        map.once('styledata', () => {
+          const newStyle = map.getStyle()
+          map.setStyle({
+            ...newStyle,
+            sources: { ...newStyle.sources, ...oldSources },
+            layers: [...newStyle.layers, ...oldLayers],
+          })
+        })
+      },
+      { defer: true }
+    )
+  )
 
   // Update projection
-  createEffect(prev => {
-    prev !== props.options.projection &&
-      map.setProjection(props.options.projection)
-  }, props.options.projection)
+  createEffect(
+    on(
+      () => props.options.projection,
+      () => map.setProjection(props.options.projection),
+      { defer: true }
+    )
+  )
 
   createEffect(() => setTransitionType(props.transitionType))
 
@@ -118,8 +145,8 @@ const MapGL: Component<{
       zoom: map.getZoom(),
       pitch: map.getPitch(),
       bearing: map.getBearing(),
-      padding: props.viewport.padding,
-      bounds: props.viewport.bounds,
+      padding: props.viewport?.padding,
+      bounds: props.viewport?.bounds,
     }
 
     const callMove = event => {
@@ -139,20 +166,23 @@ const MapGL: Component<{
 
   // Update boundaries
   createEffect(prev => {
-    if (props.viewport.bounds != prev)
+    if (props.viewport?.bounds != prev)
       props.onViewportChange({
         ...props.viewport,
-        ...map.cameraForBounds(props.viewport.bounds, {
-          padding: props.viewport.padding,
+        ...map.cameraForBounds(props.viewport?.bounds, {
+          padding: props.viewport?.padding,
         }),
       })
-    return props.viewport.bounds
-  }, props.viewport.bounds)
+    return props.viewport?.bounds
+  }, props.viewport?.bounds)
 
   // Update Viewport
   createEffect(() => {
-    if (props.id === props.viewport.id) return
-    const viewport = { ...props.viewport, padding: props.viewport.padding || 0 }
+    if (props.id === props.viewport?.id) return
+    const viewport = {
+      ...props.viewport,
+      padding: props.viewport?.padding || 0,
+    }
     switch (untrack(transitionType)) {
       case 'easeTo':
         map.stop().easeTo(viewport)
@@ -180,12 +210,15 @@ const MapGL: Component<{
 
   return (
     <MapContext.Provider value={() => map}>
-      {props.children}
-      <section
-        ref={mapRef}
-        class={props.class || ''}
-        classList={props.classList}
-        style={{ height: '100%', width: '100%', ...props.style }}></section>
+      <section ref={containerRef} style={{ height: '100%', width: '100%' }}>
+        {props.children}
+        <div
+          ref={mapRef}
+          class={props.class || ''}
+          classList={props.classList}
+          style={{ height: '100%', width: '100%', ...props.style }}
+        />
+      </section>
     </MapContext.Provider>
   )
 }

vite.config.js

@@ -0,0 +1,27 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    transformMode: {
+      web: [/\.[jt]sx?$/],
+    },
+    // solid needs to be inline to work around
+    // a resolution issue in vitest:
+    deps: {
+      inline: [/solid-js/],
+    },
+    // if you have few tests, try commenting one
+    // or both out to improve performance:
+    // threads: false,
+    // isolate: false,
+  },
+  plugins: [solid()],
+  resolve: {
+    conditions: ['development', 'browser'],
+  },
+})