v2.0.1

Author: niklaskorz

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "prettier"
+  ],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "import/extensions": [
+      ".ts",
+      ".tsx"
+    ]
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "serviceworker": true,
+    "node": true
+  },
+  "rules": {
+    "prefer-const": "error",
+    "import/order": "error",
+    "prettier/prettier": "error"
+  }
+}

CHANGELOG.md

@@ -0,0 +1,14 @@
+## 2.0.1 (2020-11-20)
+
+Fixes:
+- Import `google` namespace through `import type` instead of `import` to avoid compiler errors
+
+## 2.0.0 (2020-11-20)
+
+Breaking changes:
+- Moved declaration of `google.ima` namespace from global scope to module scope to avoid type clashes, it now has to be imported explicitly: `import type { google } from '@alugha/ima;`
+
+Technical changes:
+- Updated from TypeScript `2.6` to `4.1`
+- Updated from Prettier `1.10` to `2.2`
+- Migrated from TSLint to ESLint

LICENSE.md

@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-**Copyright 2018 Alugha GmbH**
+**Copyright 2020 Alugha GmbH**
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -17,7 +17,7 @@ For information on the Google IMA SDK itself, please visit
 With promises and CommonJS modules:
 
 ```typescript
-const { loadImaSdk } = require("@alugha/ima");
+const { loadImaSdk, google } = require("@alugha/ima");
 
 loadImaSdk()
   .then(ima => {
@@ -35,7 +35,7 @@ loadImaSdk()
 With `async` / `await` and ES2015 modules:
 
 ```typescript
-import { loadImaSdk } from "@alugha/ima";
+import { loadImaSdk, google } from "@alugha/ima";
 
 const example = async () => {
   try {

package.json

@@ -1,8 +1,7 @@
 {
   "name": "@alugha/ima",
-  "version": "1.2.0",
-  "description":
-    "A library for asynchronously loading the Google IMA SDK with static typing for the SDK",
+  "version": "2.0.1",
+  "description": "A library for asynchronously loading the Google IMA SDK with static typing for the SDK",
   "license": "MIT",
   "author": "Niklas Korz <nk@alugha.com>",
   "homepage": "https://alugha.com",
@@ -13,34 +12,50 @@
   "bugs": {
     "url": "https://github.com/alugha/typed-ima-sdk/issues"
   },
-  "files": ["lib", "typings"],
+  "files": [
+    "lib"
+  ],
   "main": "lib/cjs/index.js",
   "jsnext:main": "lib/esm/index.js",
   "module": "lib/esm/index.js",
   "typings": "lib/typings/index.d.ts",
   "scripts": {
     "precommit": "lint-staged",
     "prepare": "yarn compile",
-    "lint": "yarn lint:cmd src/**/*.ts",
-    "lint:cmd": "tslint -p tsconfig.json -c tslint.json",
+    "lint": "eslint src/**/*.ts",
     "precompile": "rimraf lib",
-    "compile": "yarn compile:esm && yarn compile:cjs",
+    "compile": "yarn compile:esm && yarn compile:cjs && cp src/ima.d.ts lib/typings",
     "compile:esm": "tsc --project tsconfig.json",
     "compile:cjs": "tsc --project tsconfig.cjs.json"
   },
   "lint-staged": {
-    "*.ts": ["yarn lint:cmd --fix", "git add"],
-    "*.md": ["prettier --write", "git add"],
-    "*.json": ["prettier --write", "git add"]
+    "*.ts": [
+      "yarn lint--fix",
+      "git add"
+    ],
+    "*.md": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.json": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "devDependencies": {
-    "husky": "^0.14.3",
-    "lint-staged": "^6.1.0",
-    "prettier": "^1.10.2",
-    "rimraf": "^2.6.2",
-    "tslint": "^5.9.1",
-    "tslint-config-prettier": "^1.6.0",
-    "tslint-plugin-prettier": "^1.3.0",
-    "typescript": "^2.6.2"
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.1",
+    "prettier": "^2.2.0",
+    "rimraf": "^3.0.2",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-plugin-prettier": "^2.3.0",
+    "typescript": "^4.1.2"
   }
 }

typings/ima.d.ts src/ima.d.tstypings/ima.d.ts renamed to src/ima.d.ts

@@ -1,4 +1,6 @@
-declare namespace google {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export namespace google {
   /**
    * The Google IMA SDK for HTML5 V3 allows developers to request and track VAST ads in a HTML5 video environment. For platform compatibility information and a detailed list of the video ad features supported by each of the IMA SDKs, see Support and Compatibility.
    *
@@ -44,7 +46,7 @@ declare namespace google {
       getCompanionAds(
         adSlotWidth: number,
         adSlotHeight: number,
-        settings?: CompanionAdSelectionSettings,
+        settings?: CompanionAdSelectionSettings
       ): CompanionAd[];
       /**
        * Returns the content type of the currently selected creative, or empty string if no creative is selected or the content type is unavailable. For linear ads, the content type is only going to be available after the START event, when the media file is selected.
@@ -181,7 +183,7 @@ declare namespace google {
       constructor(
         containerElement: HTMLElement,
         videoElement?: HTMLVideoElement,
-        clickTrackingElement?: HTMLElement,
+        clickTrackingElement?: HTMLElement
       );
       /**
        * Destroys internal state and previously created DOM elements. The IMA SDK will be unloaded and no further calls to any APIs should be made.
@@ -621,7 +623,7 @@ declare namespace google {
       public addEventListener(
         type: AdsManagerLoadedEvent.Type,
         listener: AdsManagerLoadedEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Adds an event listener for the specified type.
@@ -632,7 +634,7 @@ declare namespace google {
       public addEventListener(
         type: AdErrorEvent.Type,
         listener: AdErrorEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Removes an event listener for the specified type.
@@ -643,7 +645,7 @@ declare namespace google {
       public removeEventListener(
         type: AdsManagerLoadedEvent.Type,
         listener: AdsManagerLoadedEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Removes an event listener for the specified type.
@@ -654,7 +656,7 @@ declare namespace google {
       public removeEventListener(
         type: AdErrorEvent.Type,
         listener: AdErrorEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Signals to the SDK that the content is finished. This will allow the SDK to play post-roll ads, if any are loaded via ad rules.
@@ -690,7 +692,7 @@ declare namespace google {
       addEventListener(
         type: AdEvent.Type,
         listener: AdEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Adds an event listener for the specified type.
@@ -701,7 +703,7 @@ declare namespace google {
       addEventListener(
         type: AdErrorEvent.Type,
         listener: AdErrorEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Removes an event listener for the specified type.
@@ -712,7 +714,7 @@ declare namespace google {
       removeEventListener(
         type: AdEvent.Type,
         listener: AdEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Removes an event listener for the specified type.
@@ -723,7 +725,7 @@ declare namespace google {
       removeEventListener(
         type: AdErrorEvent.Type,
         listener: AdErrorEvent.Listener,
-        useCapture?: boolean,
+        useCapture?: boolean
       ): void;
       /**
        * Collapse the current ad. This is no-op for HTML5 SDK.
@@ -772,7 +774,7 @@ declare namespace google {
         width: number,
         height: number,
         viewMode: ViewMode,
-        videoElement?: HTMLVideoElement,
+        videoElement?: HTMLVideoElement
       ): void;
       /**
        * Returns true if a custom click tracking element is being used for click tracking on the current ad. Custom click tracking is only used when an optional click tracking element is provided to the AdDisplayContainer, custom playback is used, and the current ad is not an AdSense/AdX ad.
@@ -821,7 +823,7 @@ declare namespace google {
        * @param adsRenderingSettings The updated ads rendering settings.
        */
       updateAdsRenderingSettings(
-        adsRenderingSettings: Partial<AdsRenderingSettings>,
+        adsRenderingSettings: Partial<AdsRenderingSettings>
       ): void;
     }
 
@@ -840,7 +842,7 @@ declare namespace google {
           currentTime: number;
           duration: number;
         },
-        adsRenderingSettings?: Partial<AdsRenderingSettings>,
+        adsRenderingSettings?: Partial<AdsRenderingSettings>
       ): AdsManager;
       /**
        * @returns During ads load request it is possible to provide an object that is available once the ads load is complete. One possible use case: relate ads response to a specific request and use user request content object as a key for identifying the response.
@@ -1166,7 +1168,7 @@ declare namespace google {
        * @param mode The desired companion backfill mode.
        */
       public setCompanionBackfill(
-        mode: ImaSdkSettings.CompanionBackfillMode,
+        mode: ImaSdkSettings.CompanionBackfillMode
       ): void;
       /**
        * Sets whether to disable custom playback on iOS 10+ browsers. If true, ads will play inline if the content video is inline. This enables TrueView skippable ads. However, the ad will stay inline and not support iOS's native fullscreen. When false, ads will play in the same player as your content. The value set here when an AdDisplayContainer is created is used for the lifetime of the container. The default value is false.

src/index.ts

@@ -1,5 +1,5 @@
-/// <reference path="../typings/ima.d.ts" />
-
-export { default as loadImaSdk } from './loadImaSdk';
-export { default as loadScript } from './loadScript';
+import type { google } from "./ima";
+export { default as loadImaSdk } from "./loadImaSdk";
+export { default as loadScript } from "./loadScript";
 export type ImaSdk = typeof google.ima;
+export { google };

src/loadImaSdk.ts

@@ -1,29 +1,28 @@
-/// <reference path="../typings/ima.d.ts" />
-import loadScript from './loadScript';
+import type { google } from "./ima";
+import loadScript from "./loadScript";
 
-declare global {
-  interface Window {
-    google: {
-      ima: typeof google.ima;
-    };
-  }
+interface ImaWindow {
+  google: {
+    ima: typeof google.ima;
+  };
 }
 
-const imaSdkSrc = '//imasdk.googleapis.com/js/sdkloader/ima3.js';
+const imaSdkSrc = "//imasdk.googleapis.com/js/sdkloader/ima3.js";
 let pendingPromise: Promise<typeof google.ima> | null = null;
 
 const promiseFinished = () => {
   pendingPromise = null;
 };
 
 const loadImaSdk = (): Promise<typeof google.ima> => {
-  if (window.google && window.google.ima) {
-    return Promise.resolve(window.google.ima);
+  const w = (window as unknown) as ImaWindow;
+  if (w.google && w.google.ima) {
+    return Promise.resolve(w.google.ima);
   }
   if (pendingPromise) {
     return pendingPromise;
   }
-  pendingPromise = loadScript(imaSdkSrc).then(() => window.google.ima);
+  pendingPromise = loadScript(imaSdkSrc).then(() => w.google.ima);
   pendingPromise.then(promiseFinished).catch(promiseFinished);
   return pendingPromise;
 };

src/loadScript.ts

@@ -1,8 +1,8 @@
 // Asynchronous loader for external scripts
 
-const loadScript = (src: string) =>
+const loadScript = (src: string): Promise<Event> =>
   new Promise((resolve, reject) => {
-    const script = document.createElement('script');
+    const script = document.createElement("script");
     script.async = true;
     script.src = src;
     script.onload = resolve;

tsconfig.json

@@ -17,6 +17,6 @@
     "declaration": true,
     "declarationDir": "./lib/typings"
   },
-  "include": ["./typings/**/*", "./src/**/*"],
+  "include": ["./src/**/*"],
   "exclude": ["./node_modules", "./lib"]
 }