perf: tree-shake console.* calls in production

This commit wraps calls to `console.*` with `ngDevMode`, an Angular CLI-provided compile-time variable. `isDevMode()` is a runtime function that still gets bundled into the JS file.

Author: arturovt

projects/ngx-page-scroll-core/src/lib/ngx-page-scroll-core.module.ts

@@ -1,20 +1,18 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
-import { PageScrollService } from './providers/ngx-page-scroll.service';
 import { NGXPS_CONFIG } from './providers/config.provider';
 import { PageScrollConfig } from './types/page-scroll.config';
 
 @NgModule({
-  providers: [
-    PageScrollService,
-    {provide: NGXPS_CONFIG, useValue: {}},
-  ],
+  providers: [{ provide: NGXPS_CONFIG, useValue: {} }],
 })
 export class NgxPageScrollCoreModule {
-  static forRoot(config?: PageScrollConfig): ModuleWithProviders<NgxPageScrollCoreModule> {
+  static forRoot(
+    config?: PageScrollConfig
+  ): ModuleWithProviders<NgxPageScrollCoreModule> {
     return {
       ngModule: NgxPageScrollCoreModule,
-      providers: [PageScrollService, {provide: NGXPS_CONFIG, useValue: config}],
+      providers: [{ provide: NGXPS_CONFIG, useValue: config }],
     };
   }
 }

projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts

@@ -1,7 +1,9 @@
 import { InjectionToken } from '@angular/core';
 import { PageScrollConfig } from '../types/page-scroll.config';
 
-export const NGXPS_CONFIG = new InjectionToken<PageScrollConfig>('ngxps_config');
+export const NGXPS_CONFIG = new InjectionToken<PageScrollConfig>(
+  typeof ngDevMode !== 'undefined' && ngDevMode ? 'ngxps_config' : ''
+);
 
 export const defaultPageScrollConfig: PageScrollConfig = {
   _interval: 10,

projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, isDevMode } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 
 import { PageScrollConfig } from '../types/page-scroll.config';
 import { InterruptReporter, PageScrollInstance, PageScrollOptions } from '../page-scroll-instance';
@@ -84,8 +84,10 @@ export class PageScrollService {
 
     if (pageScrollInstance.pageScrollOptions.scrollViews === null || pageScrollInstance.pageScrollOptions.scrollViews.length === 0) {
       // No scrollViews specified, thus we can't animate anything
-      if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) {
-        console.warn('No scrollViews specified, thus ngx-page-scroll does not know which DOM elements to scroll');
+      if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        if (this.config._logLevel >= 1) {
+          console.warn('No scrollViews specified, thus ngx-page-scroll does not know which DOM elements to scroll');
+        }
       }
 
       return;
@@ -131,8 +133,10 @@ export class PageScrollService {
     if (isNaN(pageScrollInstance.distanceToScroll)) {
       // We weren't able to find the target position, maybe the element does not exist?
 
-      if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) {
-        console.log('Scrolling not possible, as we can\'t find the specified target');
+      if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        if (this.config._logLevel >= 1) {
+          console.log('Scrolling not possible, as we can\'t find the specified target');
+        }
       }
       pageScrollInstance.fireEvent(false);
 
@@ -160,11 +164,13 @@ export class PageScrollService {
     const tooShortInterval = pageScrollInstance.executionDuration <= pageScrollInstance.pageScrollOptions._interval;
 
     if (allReadyAtDestination || tooShortInterval) {
-      if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) {
-        if (allReadyAtDestination) {
-          console.log('Scrolling not possible, as we can\'t get any closer to the destination');
-        } else {
-          console.log('Scroll duration shorter that interval length, jumping to target');
+      if (this.config._logLevel >= 2 || this.config._logLevel >= 1) {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+          if (allReadyAtDestination) {
+            console.log('Scrolling not possible, as we can\'t get any closer to the destination');
+          } else {
+            console.log('Scroll duration shorter that interval length, jumping to target');
+          }
         }
       }
       pageScrollInstance.setScrollPosition(pageScrollInstance.targetScrollPosition);
@@ -177,8 +183,10 @@ export class PageScrollService {
       const alreadyInView = pageScrollInstance.targetScrollPosition > pageScrollInstance.startScrollPosition &&
         pageScrollInstance.targetScrollPosition <= pageScrollInstance.startScrollPosition + scrollRange;
       if (alreadyInView) {
-        if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) {
-          console.log('Not scrolling, as target already in view');
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+          if (this.config._logLevel >= 1) {
+            console.log('Not scrolling, as target already in view');
+          }
         }
         pageScrollInstance.fireEvent(true);
 
@@ -215,8 +223,10 @@ export class PageScrollService {
           instance.distanceToScroll,
           instance.executionDuration));
       }
-      if (this.config._logLevel >= 5 && isDevMode()) {
-        console.warn('Scroll Position: ' + newScrollPosition);
+      if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        if (this.config._logLevel >= 5) {
+          console.warn('Scroll Position: ' + newScrollPosition);
+        }
       }
       // Set the new scrollPosition to all scrollViews elements
       if (!instance.setScrollPosition(newScrollPosition)) {

projects/ngx-page-scroll-core/src/ng-dev-mode.ts

@@ -0,0 +1,12 @@
+/** @internal */
+declare global {
+  // Indicates whether the application is operating in development mode.
+  // `ngDevMode` is a global flag set by Angular CLI.
+  // https://github.com/angular/angular-cli/blob/9ceca0c4de1f351133c7c7df9e44c4b7a220ae8b/packages/angular/build/src/tools/esbuild/application-code-bundle.ts#L600
+  const ngDevMode: boolean;
+}
+
+// This will be tree-shaken when built for production, as it is an empty object.
+// Thus, the `ng-dev-mode.ts` file could be treated as a module for type
+// augmentation (`declare global`) by the bundler.
+export default {};

projects/ngx-page-scroll-core/src/public-api.ts

@@ -2,6 +2,8 @@
  * Public API Surface of ngx-page-scroll-core
  */
 
+import './ng-dev-mode';
+
 export { NgxPageScrollCoreModule } from './lib/ngx-page-scroll-core.module';
 
 export { defaultPageScrollConfig, NGXPS_CONFIG } from './lib/providers/config.provider';