feat: change to singleton and fix resolve error (#91)

Author: jpoehnelt

examples/index.html

@@ -36,7 +36,7 @@
     <script
       nonce="caffe67d7b989af3a1c7f4a1a6c79bd9fb2b4eb0"
       type="text/javascript"
-      src="../dist/index.dev.js"
+      src="../dist/index.umd.js"
     ></script>
 
     <script
@@ -76,6 +76,22 @@
           // new google.maps.Map(document.getElementById("map"), mapOptions);
         }
       });
+
+      // An error is thrown when instantiating loader with new options
+      try {
+        new google.maps.plugins.loader.Loader({apiKey: 'foo'});
+      } catch (e) {
+        console.log(e.message)
+      }
+
+      // The loader is a singleton and new loaders will resolve with the old
+      const anotherLoader = new google.maps.plugins.loader.Loader(
+        loader.options
+      );
+      anotherLoader.load().then(() => {
+        console.log("another loader was used with same options");
+      });
+
     </script>
   </head>
 

package-lock.json

@@ -31,8 +31,10 @@
   "devDependencies": {
     "@babel/preset-env": "^7.9.5",
     "@babel/runtime-corejs3": "^7.9.2",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@types/googlemaps": "^3.39.3",
     "@types/jest": "^26.0.10",
+    "@types/lodash": "^4.14.165",
     "@types/selenium-webdriver": "^4.0.9",
     "@typescript-eslint/eslint-plugin": ">=2.25.0",
     "@typescript-eslint/parser": ">=2.25.0",
@@ -56,5 +58,8 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://wombat-dressing-room.appspot.com"
+  },
+  "dependencies": {
+    "lodash": "^4.17.20"
   }
 }

package.json

@@ -16,6 +16,7 @@
 
 import babel from "rollup-plugin-babel";
 import commonjs from "rollup-plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
 import { terser } from "rollup-plugin-terser";
 import typescript from "rollup-plugin-typescript2";
 
@@ -25,11 +26,16 @@ const babelOptions = {
 
 const terserOptions = { output: { comments: "" } };
 
+const resolveOptions = {
+  mainFields: ["browser", "jsnext:main", "module", "main"],
+};
+
 export default [
   {
     input: "src/index.ts",
     plugins: [
       typescript(),
+      nodeResolve(resolveOptions),
       commonjs(),
       babel(babelOptions),
       terser(terserOptions),
@@ -45,6 +51,7 @@ export default [
     input: "src/index.ts",
     plugins: [
       typescript(),
+      nodeResolve(resolveOptions),
       commonjs(),
       babel(babelOptions),
       terser(terserOptions),
@@ -57,7 +64,12 @@ export default [
   },
   {
     input: "src/index.ts",
-    plugins: [typescript(), commonjs(), babel(babelOptions)],
+    plugins: [
+      typescript(),
+      nodeResolve(resolveOptions),
+      commonjs(),
+      babel(babelOptions),
+    ],
     output: {
       file: "dist/index.dev.js",
       format: "iife",
@@ -66,7 +78,7 @@ export default [
   },
   {
     input: "src/index.ts",
-    plugins: [typescript()],
+    plugins: [typescript(), nodeResolve(resolveOptions), commonjs()],
     output: {
       file: "dist/index.esm.js",
       format: "esm",

rollup.config.js

@@ -18,6 +18,7 @@ import { Loader, LoaderOptions } from ".";
 
 afterEach(() => {
   document.getElementsByTagName("html")[0].innerHTML = "";
+  delete Loader["instance"];
 });
 
 test.each([
@@ -108,20 +109,50 @@ test("loadCallback callback should fire", () => {
   window.__googleMapsCallback(null);
 });
 
-test("script onerror should reject promise", () => {
+test("script onerror should reject promise", async () => {
   const loader = new Loader({ apiKey: "foo" });
 
-  expect.assertions(3);
+  const rejection = expect(loader.load()).rejects.toBeInstanceOf(ErrorEvent);
 
-  const promise = loader.load().catch((e) => {
-    expect(e).toBeTruthy();
-    expect(loader["done"]).toBeTruthy();
-    expect(loader["loading"]).toBeFalsy();
-  });
+  loader["loadErrorCallback"](document.createEvent("ErrorEvent"));
+
+  await rejection;
+  expect(loader["done"]).toBeTruthy();
+  expect(loader["loading"]).toBeFalsy();
+});
+
+test("script onerror should reject promise with multiple loaders", async () => {
+  const loader = new Loader({ apiKey: "foo" });
+  const extraLoader = new Loader({ apiKey: "foo" });
 
+  let rejection = expect(loader.load()).rejects.toBeInstanceOf(ErrorEvent);
   loader["loadErrorCallback"](document.createEvent("ErrorEvent"));
 
-  return promise;
+  await rejection;
+  expect(loader["done"]).toBeTruthy();
+  expect(loader["loading"]).toBeFalsy();
+  expect(loader["onerrorEvent"]).toBeInstanceOf(ErrorEvent);
+  rejection = expect(extraLoader.load()).rejects.toBeInstanceOf(ErrorEvent);
+
+  await rejection;
+  expect(extraLoader["done"]).toBeTruthy();
+  expect(extraLoader["loading"]).toBeFalsy();
+});
+
+test("singleton should be used", () => {
+  const loader = new Loader({ apiKey: "foo" });
+  const extraLoader = new Loader({ apiKey: "foo" });
+  expect(extraLoader).toBe(loader);
+
+  loader["done"] = true;
+  expect(extraLoader["done"]).toBe(loader["done"]);
+});
+
+test("singleton should throw with different options", () => {
+  new Loader({ apiKey: "foo" });
+  expect(() => {
+    new Loader({ apiKey: "bar" });
+  }).toThrowError();
 });
 
 test("loader should resolve immediately when successfully loaded", async () => {