Refactor ngx-mapbox-gl to support zoneless change detection

denisyilmaz · denisyilmaz · commit fcbfb9404006 · 2024-09-10T16:16:02.000+02:00
diff --git a/apps/showcase/src/app/demo/demo-index.component.ts b/apps/showcase/src/app/demo/demo-index.component.ts
@@ -1,4 +1,6 @@
 import {
+  afterNextRender,
+  afterRender,
   AfterViewInit,
   Component,
   ElementRef,
@@ -21,7 +23,7 @@ type RoutesByCategory = { [P in Category]: Routes };
   templateUrl: './demo-index.component.html',
   styleUrls: ['./demo-index.component.scss'],
 })
-export class DemoIndexComponent implements OnInit, AfterViewInit {
+export class DemoIndexComponent implements OnInit {
   routes: RoutesByCategory;
   originalRoutes: RoutesByCategory;
   categories: Category[];
@@ -42,16 +44,16 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
       route.data ? route.data['cat'] : null
     ) as unknown as RoutesByCategory;
     this.categories = Object.values(Category);
+
+    afterNextRender(() => {
+      this.scrollInToActiveExampleLink();
+    });
   }
 
   ngOnInit() {
     this.routes = this.originalRoutes;
   }
 
-  ngAfterViewInit() {
-    this.scrollInToActiveExampleLink();
-  }
-
   toggleSidenav() {
     this.sidenavIsOpen = !this.sidenavIsOpen;
   }
@@ -93,16 +95,14 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
   }
 
   private scrollInToActiveExampleLink() {
-    this.zone.onStable.pipe(first()).subscribe(() => {
-      const activeLink = this.exampleLinks.find((elm) =>
-        (elm.nativeElement as HTMLElement).classList.contains('active')
-      );
-      if (activeLink) {
-        scrollIntoView(activeLink.nativeElement as HTMLElement, {
-          block: 'center',
-          scrollMode: 'if-needed',
-        });
-      }
-    });
+    const activeLink = this.exampleLinks.find((elm) =>
+      (elm.nativeElement as HTMLElement).classList.contains('active')
+    );
+    if (activeLink) {
+      scrollIntoView(activeLink.nativeElement as HTMLElement, {
+        block: 'center',
+        scrollMode: 'if-needed',
+      });
+    }
   }
 }
diff --git a/apps/showcase/src/app/demo/stackblitz-edit/create-stackblitz-project.ts b/apps/showcase/src/app/demo/stackblitz-edit/create-stackblitz-project.ts
@@ -1,4 +1,4 @@
-import { Project } from '@stackblitz/sdk/typings/interfaces';
+import { Project } from '@stackblitz/sdk';
 
 export const createStackblitzProject = (
   projectbase: string[],
diff --git a/apps/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts b/apps/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts
@@ -10,8 +10,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import StackBlitzSDK from '@stackblitz/sdk';
-import { VM } from '@stackblitz/sdk/typings/VM';
+import StackBlitzSDK, { VM } from '@stackblitz/sdk';
 import { forkJoin, from, Subscription } from 'rxjs';
 import { finalize, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { createStackblitzProject } from './create-stackblitz-project';
diff --git a/libs/ngx-mapbox-gl/src/lib/map/map.component.spec.ts b/libs/ngx-mapbox-gl/src/lib/map/map.component.spec.ts
@@ -1,4 +1,7 @@
-import { SimpleChange } from '@angular/core';
+import {
+  provideExperimentalZonelessChangeDetection,
+  SimpleChange,
+} from '@angular/core';
 import {
   ComponentFixture,
   fakeAsync,
@@ -27,6 +30,7 @@ describe('MapComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [MapComponent],
+      providers: [provideExperimentalZonelessChangeDetection()],
     })
       .overrideComponent(MapComponent, {
         set: {
@@ -36,27 +40,26 @@ describe('MapComponent', () => {
       .compileComponents();
   }));
 
-  beforeEach(() => {
+  beforeEach(async () => {
     fixture = TestBed.createComponent(MapComponent);
+    await fixture.whenStable();
     component = fixture.debugElement.componentInstance;
     msSpy = fixture.debugElement.injector.get<MapService>(MapService) as any;
   });
 
   describe('Init tests', () => {
     it('should init', () => {
-      fixture.detectChanges();
       expect(msSpy.setup).toHaveBeenCalledTimes(1);
     });
 
-    it('should init with custom inputs', () => {
+    it('should init with custom inputs', async () => {
       component.accessToken = 'tokenTest';
       component.style = 'style';
       msSpy.setup.mockImplementation((options: SetupMap) => {
         expect(options.accessToken).toEqual('tokenTest');
         expect(options.mapOptions.style).toEqual('style');
       });
-      fixture.detectChanges();
-      expect.assertions(2);
+      expect(msSpy.setup).toHaveBeenCalled();
     });
   });
 
diff --git a/libs/ngx-mapbox-gl/src/lib/map/map.component.ts b/libs/ngx-mapbox-gl/src/lib/map/map.component.ts
@@ -1,5 +1,5 @@
 import {
-  AfterViewInit,
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -55,7 +55,6 @@ export class MapComponent
   implements
     OnChanges,
     OnDestroy,
-    AfterViewInit,
     Omit<MapboxOptions, 'bearing' | 'container' | 'pitch' | 'zoom'>,
     MapEvent
 {
@@ -309,63 +308,63 @@ export class MapComponent
 
   @ViewChild('container', { static: true }) mapContainer: ElementRef;
 
-  constructor(private mapService: MapService) {}
-
-  ngAfterViewInit() {
-    this.warnDeprecatedOutputs();
-    this.mapService.setup({
-      accessToken: this.accessToken,
-      customMapboxApiUrl: this.customMapboxApiUrl,
-      mapOptions: {
-        collectResourceTiming: this.collectResourceTiming,
-        container: this.mapContainer.nativeElement,
-        crossSourceCollisions: this.crossSourceCollisions,
-        fadeDuration: this.fadeDuration,
-        minZoom: this.minZoom,
-        maxZoom: this.maxZoom,
-        minPitch: this.minPitch,
-        maxPitch: this.maxPitch,
-        style: this.style,
-        hash: this.hash,
-        interactive: this.interactive,
-        bearingSnap: this.bearingSnap,
-        pitchWithRotate: this.pitchWithRotate,
-        clickTolerance: this.clickTolerance,
-        attributionControl: this.attributionControl,
-        logoPosition: this.logoPosition,
-        failIfMajorPerformanceCaveat: this.failIfMajorPerformanceCaveat,
-        preserveDrawingBuffer: this.preserveDrawingBuffer,
-        refreshExpiredTiles: this.refreshExpiredTiles,
-        maxBounds: this.maxBounds,
-        scrollZoom: this.scrollZoom,
-        boxZoom: this.boxZoom,
-        dragRotate: this.dragRotate,
-        dragPan: this.dragPan,
-        keyboard: this.keyboard,
-        doubleClickZoom: this.doubleClickZoom,
-        touchPitch: this.touchPitch,
-        touchZoomRotate: this.touchZoomRotate,
-        trackResize: this.trackResize,
-        center: this.center,
-        zoom: this.zoom,
-        bearing: this.bearing,
-        pitch: this.pitch,
-        renderWorldCopies: this.renderWorldCopies,
-        maxTileCacheSize: this.maxTileCacheSize,
-        localIdeographFontFamily: this.localIdeographFontFamily,
-        transformRequest: this.transformRequest,
-        bounds: this.bounds ? this.bounds : this.fitBounds,
-        fitBoundsOptions: this.fitBoundsOptions,
-        antialias: this.antialias,
-        locale: this.locale,
-        cooperativeGestures: this.cooperativeGestures,
-        projection: this.projection,
-      },
-      mapEvents: this,
+  constructor(private mapService: MapService) {
+    afterNextRender(() => {
+      this.warnDeprecatedOutputs();
+      this.mapService.setup({
+        accessToken: this.accessToken,
+        customMapboxApiUrl: this.customMapboxApiUrl,
+        mapOptions: {
+          collectResourceTiming: this.collectResourceTiming,
+          container: this.mapContainer.nativeElement,
+          crossSourceCollisions: this.crossSourceCollisions,
+          fadeDuration: this.fadeDuration,
+          minZoom: this.minZoom,
+          maxZoom: this.maxZoom,
+          minPitch: this.minPitch,
+          maxPitch: this.maxPitch,
+          style: this.style,
+          hash: this.hash,
+          interactive: this.interactive,
+          bearingSnap: this.bearingSnap,
+          pitchWithRotate: this.pitchWithRotate,
+          clickTolerance: this.clickTolerance,
+          attributionControl: this.attributionControl,
+          logoPosition: this.logoPosition,
+          failIfMajorPerformanceCaveat: this.failIfMajorPerformanceCaveat,
+          preserveDrawingBuffer: this.preserveDrawingBuffer,
+          refreshExpiredTiles: this.refreshExpiredTiles,
+          maxBounds: this.maxBounds,
+          scrollZoom: this.scrollZoom,
+          boxZoom: this.boxZoom,
+          dragRotate: this.dragRotate,
+          dragPan: this.dragPan,
+          keyboard: this.keyboard,
+          doubleClickZoom: this.doubleClickZoom,
+          touchPitch: this.touchPitch,
+          touchZoomRotate: this.touchZoomRotate,
+          trackResize: this.trackResize,
+          center: this.center,
+          zoom: this.zoom,
+          bearing: this.bearing,
+          pitch: this.pitch,
+          renderWorldCopies: this.renderWorldCopies,
+          maxTileCacheSize: this.maxTileCacheSize,
+          localIdeographFontFamily: this.localIdeographFontFamily,
+          transformRequest: this.transformRequest,
+          bounds: this.bounds ? this.bounds : this.fitBounds,
+          fitBoundsOptions: this.fitBoundsOptions,
+          antialias: this.antialias,
+          locale: this.locale,
+          cooperativeGestures: this.cooperativeGestures,
+          projection: this.projection,
+        },
+        mapEvents: this,
+      });
+      if (this.cursorStyle) {
+        this.mapService.changeCanvasCursor(this.cursorStyle);
+      }
     });
-    if (this.cursorStyle) {
-      this.mapService.changeCanvasCursor(this.cursorStyle);
-    }
   }
 
   ngOnDestroy() {
diff --git a/libs/ngx-mapbox-gl/src/lib/map/map.service.ts b/libs/ngx-mapbox-gl/src/lib/map/map.service.ts
@@ -8,7 +8,6 @@ import {
 } from '@angular/core';
 import MapboxGl from 'mapbox-gl';
 import { AsyncSubject, Observable, Subscription } from 'rxjs';
-import { first } from 'rxjs/operators';
 import {
   LayerEvents,
   MapEvent,
@@ -30,7 +29,7 @@ export interface SetupMap {
 }
 
 export interface SetupLayer {
-  layerOptions: MapboxGl.Layer;
+  layerOptions: mapboxgl.Layer;
   layerEvents: LayerEvents;
 }
 
@@ -100,32 +99,29 @@ export class MapService {
   }
 
   setup(options: SetupMap) {
-    // Need onStable to wait for a potential @angular/route transition to end
-    this.zone.onStable.pipe(first()).subscribe(() => {
-      // Workaround rollup issue
-      // this.assign(
-      //   MapboxGl,
-      //   'accessToken',
-      //   options.accessToken || this.MAPBOX_API_KEY
-      // );
-      if (options.customMapboxApiUrl) {
-        (MapboxGl.baseApiUrl as string) = options.customMapboxApiUrl;
-      }
-      this.createMap({
-        ...(options.mapOptions as MapboxGl.MapboxOptions),
-        accessToken: options.accessToken || this.MAPBOX_API_KEY || '',
-      });
-      this.hookEvents(options.mapEvents);
-      this.mapEvents = options.mapEvents;
-      this.mapCreated.next(undefined);
-      this.mapCreated.complete();
-      // Intentionnaly emit mapCreate after internal mapCreated event
-      if (options.mapEvents.mapCreate.observed) {
-        this.zone.run(() => {
-          options.mapEvents.mapCreate.emit(this.mapInstance);
-        });
-      }
+    // Workaround rollup issue
+    // this.assign(
+    //   MapboxGl,
+    //   'accessToken',
+    //   options.accessToken || this.MAPBOX_API_KEY
+    // );
+    if (options.customMapboxApiUrl) {
+      (MapboxGl.baseApiUrl as string) = options.customMapboxApiUrl;
+    }
+    this.createMap({
+      ...(options.mapOptions as MapboxGl.MapboxOptions),
+      accessToken: options.accessToken || this.MAPBOX_API_KEY || '',
     });
+    this.hookEvents(options.mapEvents);
+    this.mapEvents = options.mapEvents;
+    this.mapCreated.next(undefined);
+    this.mapCreated.complete();
+    // Intentionnaly emit mapCreate after internal mapCreated event
+    if (options.mapEvents.mapCreate.observed) {
+      this.zone.run(() => {
+        options.mapEvents.mapCreate.emit(this.mapInstance);
+      });
+    }
   }
 
   destroyMap() {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Project } from '@stackblitz/sdk/typings/interfaces';`
	`1`	`+import { Project } from '@stackblitz/sdk';`
`2`	`2`
`3`	`3`	`export const createStackblitzProject = (`
`4`	`4`	`projectbase: string[],`