feat(loader): loader script

Author: WittBulter

examples/main.ts

@@ -1,2 +1,13 @@
-
+import { BackLoader } from '../src/index'
 document.title = 'hello'
+
+const handler = async() => {
+   const backLoader = new BackLoader({
+     scripts: ['https://code.jquery.com/jquery-3.2.1.slim.min.js'],
+   })
+    backLoader.start().on(event => {
+      console.log(event)
+    })
+}
+
+;(() => window.onload = () => handler().then())()

src/core/event.ts

@@ -0,0 +1,60 @@
+export type EventHubListener = {
+  (evt: Event, detail?: any): void,
+}
+export type EventRecord = {
+  type: string,
+  handle: EventHubListener,
+  done: EventListener,
+}
+
+export class EventHub {
+  
+  private source: Text
+  private eventRecords: EventRecord[] = []
+  
+  constructor() {
+    this.source = document.createTextNode('')
+  }
+  
+  dispath(eventType: string, detail?: any): void {
+    const event: CustomEvent = new CustomEvent(eventType,
+      Object.assign({
+        bubbles: true,
+        cancelable: true,
+      }, { detail }))
+    this.source.dispatchEvent(event)
+  }
+  
+  listen(eventType: string, done: EventHubListener): void {
+    const handle = (e: any) => done(e, e.detail)
+    const record: EventRecord = this.eventRecords.find(record => {
+      return record.type === eventType && record.done === done
+    })
+    if (!!record) return
+    this.source.addEventListener(eventType, handle)
+    this.eventRecords.push({ type: eventType, handle, done })
+  }
+  
+  remove(eventType: string, done?: EventHubListener): void {
+    // just remove one
+    if (done) return this.removeOne(eventType, done)
+    // remove this type
+    this.eventRecords
+      .filter(re => re.type === eventType)
+      .forEach(re => this.source.removeEventListener(re.type, re.handle))
+  }
+  
+  removeAll(): void {
+    this.eventRecords
+      .forEach(re => this.source.removeEventListener(re.type, re.handle))
+  }
+  
+  private removeOne(eventType: string, done?: EventHubListener): void {
+    const record: EventRecord = this.eventRecords.find(record => {
+      return record.type === eventType && record.done === done
+    })
+    if (!record) return
+    this.source.removeEventListener(eventType, record.handle)
+  }
+  
+}

src/core/loader.ts

@@ -0,0 +1,35 @@
+import { EventHub } from './event'
+import { LoaderEvent } from '../types'
+
+
+export class Loader {
+  
+  readonly baseEvent: LoaderEvent = { source: '', type: 'none', success: true, insertScripts: () => {} }
+  hub: EventHub
+  constructor(hub: EventHub) {
+    this.hub = hub
+  }
+  
+  scripts(urls: string[]): void {
+    const scriptEvent = Object.assign({}, this.baseEvent, { type: 'script' })
+    urls.forEach(url => {
+      fetch(url)
+      .then(() => {
+        this.hub.dispath('back_load_completed', Object.assign({},
+          scriptEvent, { source: url, insertScripts: this.makeInsertScripts(url) }))
+      })
+      .catch(() => {
+        this.hub.dispath('back_load_completed', Object.assign({},
+          scriptEvent, { source: url, success: false }))
+      })
+    })
+  }
+  
+  private makeInsertScripts(url: string): Function {
+    return () => {
+      const s: HTMLElement = document.createElement('script')
+      s.setAttribute('src', url)
+      document.body.appendChild(s)
+    }
+  }
+}

src/index.ts

@@ -1,11 +1,28 @@
 import * as Check from './utils/check'
-import { LoaderOptions } from './types'
+import { EventHub } from './core/event'
+import { Loader } from './core/loader'
+import { LoaderEvent, LoaderOptions } from './types'
 
 export class BackLoader {
 
+  options: LoaderOptions
+  hub: EventHub
   constructor(ops: LoaderOptions) {
     Check.options(ops)
+    this.options = ops
   }
 
+  start(): BackLoader {
+    this.hub = new EventHub()
+    const loader = new Loader(this.hub)
+    const { scripts, pages } = this.options
+    
+    scripts && loader.scripts(scripts)
+    return this
+  }
+  
+  on(done: ($event: LoaderEvent) => void ): void {
+    this.hub.listen('back_load_completed', (e, $event) => done($event))
+  }
 
 }

src/types.ts

@@ -1,6 +1,12 @@
 
 export type LoaderOptions = {
-  pages: string[]
-  scripts: string[]
+  pages?: string[]
+  scripts?: string[]
 }
 
+export type LoaderEvent = {
+  source: string,
+  type: string,
+  success: boolean,
+  insertScripts?: Function,
+}