refactor(web): registering plugins and lazy loading (#102)

* refactor(web): registering plugins with types

* feat(web): add lazyload

* feat(web): add init hook

* refactor(web): rename fn name by context

* refactor(web): clean config

Author: reslear

src/definitions.ts

@@ -1,13 +1,10 @@
 import { Authentication, User } from "./user";
 
-declare module "@capacitor/core" {
-  interface PluginRegistry {
-    GoogleAuth: GoogleAuthPlugin;
-  }
-}
-
 export interface GoogleAuthPlugin {
   signIn(): Promise<User>;
   refresh(): Promise<Authentication>;
   signOut(): Promise<any>;
+
+  /** Init hook for load gapi and init plugin */
+  init(): void;
 }

src/index.ts

@@ -1,2 +1,9 @@
+import { registerPlugin } from '@capacitor/core';
+import type { GoogleAuthPlugin } from './definitions';
+
+const GoogleAuth = registerPlugin<GoogleAuthPlugin>('GoogleAuth', {
+  web: () => import('./web').then(m => new m.GoogleAuthWeb()),
+});
+
 export * from './definitions';
-export * from './web';
+export { GoogleAuth };

src/web.ts

@@ -1,4 +1,4 @@
-import { registerPlugin, WebPlugin } from '@capacitor/core';
+import { WebPlugin } from '@capacitor/core';
 import { GoogleAuthPlugin } from './definitions';
 import { User, Authentication } from './user';
 
@@ -18,24 +18,10 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin {
   }
 
   constructor() {
-    super({
-      name: 'GoogleAuth',
-      platforms: ['web']
-    });
-
-    if (!this.webConfigured)
-      return;
-
-    this.gapiLoaded = new Promise(resolve => {
-      // HACK: Relying on window object, can't get property in gapi.load callback
-      (window as any).gapiResolve = resolve;
-      this.initialize();
-    });
-
-    this.addUserChangeListener();
+    super();
   }
 
-  initialize() {
+  loadScript() {
     var head = document.getElementsByTagName('head')[0];
     var script = document.createElement('script');
     script.type = 'text/javascript';
@@ -46,6 +32,19 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin {
     head.appendChild(script);
   }
 
+  init(){
+    if (!this.webConfigured)
+      return;
+
+    this.gapiLoaded = new Promise(resolve => {
+      // HACK: Relying on window object, can't get property in gapi.load callback
+      (window as any).gapiResolve = resolve;
+      this.loadScript();
+    });
+
+    this.addUserChangeListener();
+  }
+
   platformJsLoaded() {
     gapi.load('auth2', () => {
       const clientConfig: gapi.auth2.ClientConfig = {
@@ -135,8 +134,3 @@ export class GoogleAuthWeb extends WebPlugin implements GoogleAuthPlugin {
     return user;
   }
 }
-
-const GoogleAuth = registerPlugin('GoogleAuth', { web: new GoogleAuthWeb() });
-
-export { GoogleAuth };
-

tsconfig.json

@@ -7,14 +7,14 @@
       "dom",
       "es2015"
     ],
-    "module": "es2015",
+    "module": "ESNext",
     "moduleResolution": "node",
     "noImplicitAny": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "outDir": "dist/esm",
     "sourceMap": true,
-    "target": "es2015"
+    "target": "es2017"
   },
   "files": [
     "src/index.ts"