refactor(tokens): split token from injectors

projects/ngx-pendo/src/lib/ngx-pendo.injectors.ts

@@ -1,47 +1,43 @@
-import { APP_INITIALIZER, InjectionToken, isDevMode, Provider } from '@angular/core';
+import { APP_INITIALIZER, isDevMode, Provider } from '@angular/core';
 import { interval } from 'rxjs';
 import { IPendoSettings } from './ngx-pendo.interfaces';
-
-declare var pendo: any;
-
-export const NGX_PENDO_SETTINGS_TOKEN = new InjectionToken<IPendoSettings>('ngx-pendo-settings', {
-  factory: () => ({ pendoApiKey: '' }),
-});
+import { NGX_PENDO_WINDOW, NGX_PENDO_SETTINGS_TOKEN } from './ngx-pendo.tokens';
+import { PendoWindow } from './ngx-pendo.types';
 
 const DEFAULT_PENDO_SCRIPT_ORIGIN = 'https://cdn.pendo.io';
 
 export const NGX_PENDO_INITIALIZER_PROVIDER: Provider = {
   provide: APP_INITIALIZER,
   multi: true,
   useFactory: pendoInitializer,
-  deps: [
-    NGX_PENDO_SETTINGS_TOKEN,
-  ],
+  deps: [NGX_PENDO_SETTINGS_TOKEN, NGX_PENDO_WINDOW]
 };
 
-export function pendoInitializer($settings: IPendoSettings): () => Promise<void> {
+export function pendoInitializer($settings: IPendoSettings, window: PendoWindow): () => Promise<void> {
   return async () => {
-    if (!$settings.pendoApiKey) {
+    const { pendoApiKey, pendoScriptOrigin } = $settings;
+    if (!pendoApiKey) {
       if (isDevMode()) {
         console.error('Empty api key for Pendo. Make sure to provide one when initializing NgxPendoModule.');
       }
 
       return;
     }
 
-    await new Promise<void>((resolve, reject) => {
+    await new Promise<void>(resolve => {
       const script = document.createElement('script');
       script.async = true;
-      script.src = `${$settings.pendoScriptOrigin || DEFAULT_PENDO_SCRIPT_ORIGIN}/agent/static/${$settings.pendoApiKey}/pendo.js`;
+      script.src = `${pendoScriptOrigin || DEFAULT_PENDO_SCRIPT_ORIGIN}/agent/static/${pendoApiKey}/pendo.js`;
       document.head.appendChild(script);
       script.onerror = async () => {
         // The script may have been blocked by an ad blocker
+        console.error('The pendo script may have been blocked,');
         resolve();
       };
       script.onload = async () => {
         // when enableDebugging should load extra js
         const sub = interval(100).subscribe(() => {
-          if (pendo) {
+          if (window.pendo) {
             sub.unsubscribe();
             resolve();
           }

projects/ngx-pendo/src/lib/ngx-pendo.interfaces.ts

@@ -4,6 +4,8 @@ export interface IPendoSettings {
   pendoIdFormatter?: (pendoId: string) => string;
 }
 
+export interface IPendo {}
+
 export interface IVisitor {
   id: string;
   [key: string]: string;

projects/ngx-pendo/src/lib/ngx-pendo.module.ts

@@ -1,9 +1,10 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { NgxPendoComponent } from './ngx-pendo.component';
-import { NGX_PENDO_SETTINGS_TOKEN, NGX_PENDO_INITIALIZER_PROVIDER } from './ngx-pendo.injectors';
 import { NgxPendoIdDirective } from './ngx-pendo-id.directive';
 import { NgxPendoSectionDirective } from './ngx-pendo-section.directive';
+import { NGX_PENDO_INITIALIZER_PROVIDER } from './ngx-pendo.injectors';
 import { IPendoSettings } from './ngx-pendo.interfaces';
+import { NGX_PENDO_SETTINGS_TOKEN } from './ngx-pendo.tokens';
 
 @NgModule({
   declarations: [NgxPendoComponent, NgxPendoIdDirective, NgxPendoSectionDirective],

projects/ngx-pendo/src/lib/ngx-pendo.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Inject } from '@angular/core';
-import { NGX_PENDO_SETTINGS_TOKEN } from './ngx-pendo.injectors';
+import { NGX_PENDO_SETTINGS_TOKEN } from './ngx-pendo.tokens';
 import { IAccount, IVisitor, IPendoSettings } from './ngx-pendo.interfaces';
 
 declare var pendo: any;

projects/ngx-pendo/src/lib/ngx-pendo.tokens.ts

@@ -0,0 +1,22 @@
+import { DOCUMENT } from '@angular/common';
+import { InjectionToken, inject } from '@angular/core';
+import { PendoWindow } from './ngx-pendo.types';
+import { IPendoSettings } from './ngx-pendo.interfaces';
+
+export const NGX_PENDO_WINDOW = new InjectionToken<PendoWindow>('ngx-pendo-window', {
+  providedIn: 'root',
+  factory: () => {
+    const { defaultView } = inject(DOCUMENT);
+
+    if (!defaultView) {
+      throw new Error('Window is not available');
+    }
+
+    return defaultView;
+  }
+});
+
+export const NGX_PENDO_SETTINGS_TOKEN = new InjectionToken<IPendoSettings>('ngx-pendo-settings', {
+  providedIn: 'root',
+  factory: () => ({ pendoApiKey: '' })
+});

projects/ngx-pendo/src/lib/ngx-pendo.types.ts

@@ -0,0 +1,5 @@
+import { IPendo } from './ngx-pendo.interfaces';
+
+export type PendoWindow = Window & {
+  pendo?: IPendo;
+};

projects/ngx-pendo/src/public-api.ts

@@ -9,3 +9,5 @@ export * from './lib/ngx-pendo.component';
 export * from './lib/ngx-pendo.injectors';
 export * from './lib/ngx-pendo.interfaces';
 export * from './lib/ngx-pendo.module';
+export * from './lib/ngx-pendo.tokens';
+export * from './lib/ngx-pendo.types';