feat(loader): load styles and pages

Author: WittBulter

examples/main.ts

@@ -3,7 +3,8 @@ document.title = 'hello'
 
 const handler = async() => {
    const backLoader = new BackLoader({
-     scripts: ['https://code.jquery.com/jquery-3.2.1.slim.min.js'],
+     // scripts: ['https://code.jquery.com/jquery-3.2.1.slim.min.js'],
+     pages: ['https://google.com'],
    })
     backLoader.start().on(event => {
       console.log(event)

src/core/loader.ts

@@ -1,27 +1,63 @@
 import { EventHub } from './event'
 import { LoaderEvent } from '../types'
+import { $fetch, isRelativeURL } from '../utils/tools'
 
 
 export class Loader {
 
-  readonly baseEvent: LoaderEvent = { source: '', type: 'none', success: true, insertScripts: () => {} }
   hub: EventHub
+  readonly baseEvent: LoaderEvent = { source: '', type: 'none', success: true, insertScripts: () => {} }
+  
+  static resourceReg(str: string): RegExp {
+    return {
+      script: /\<script\s+\S?src\=\"([^"]*)\"/g,
+    }[str]
+  }
+  
   constructor(hub: EventHub) {
     this.hub = hub
   }
 
   scripts(urls: string[]): void {
-    const scriptEvent = Object.assign({}, this.baseEvent, { type: 'script' })
+    this.loadURL(urls, 'script')
+  }
+  
+  styles(urls: string[]): void {
+    this.loadURL(urls, 'style')
+  }
+  
+  pages(urls: string[]): void {
     urls.forEach(url => {
-      fetch(url)
-      .then(() => {
-        this.hub.dispath('back_load_completed', Object.assign({},
-          scriptEvent, { source: url, insertScripts: this.makeInsertScripts(url) }))
+      $fetch(url, { mode: 'cors' })
+      .then(html => {
+        console.log(html)
+        this.scripts(this.filterResources(html, 'script'))
+      })
+      .catch((e) => {
+        console.log(e)
       })
-      .catch(() => {
-        this.hub.dispath('back_load_completed', Object.assign({},
-          scriptEvent, { source: url, success: false }))
+    })
+  }
+  
+  private filterResources(source: string, type: string): string[] {
+    const reg: RegExp = Loader.resourceReg(type), arr: string[] = []
+    let result: string[], num = 10
+    while ((result = reg.exec(source)) && num --) {
+      if (result[1] && !isRelativeURL(result[1])) {
+        arr.push(result[1])
+      }
+    }
+    return arr
+  }
+  
+  private loadURL(urls: string[], type: string): void {
+    urls.forEach(url => {
+      const scriptEvent = Object.assign({}, this.baseEvent, {
+        type: type, source: url,
       })
+      $fetch(url)
+      .then(() => this.emit(scriptEvent))
+      .catch(() => this.emit(Object.assign({}, scriptEvent, { success: false })))
     })
   }
 
@@ -32,4 +68,12 @@ export class Loader {
       document.body.appendChild(s)
     }
   }
+  
+  private emit(event: LoaderEvent): void {
+    const next: LoaderEvent = Object.assign({}, event, event.type === 'script' ? {
+      insertScripts: this.makeInsertScripts(event.source),
+    } : {})
+    this.hub.dispath('back_load_completed', next)
+  }
+  
 }

src/index.ts

@@ -15,9 +15,11 @@ export class BackLoader {
   start(): BackLoader {
     this.hub = new EventHub()
     const loader = new Loader(this.hub)
-    const { scripts, pages } = this.options
+    const { scripts, styles, pages } = this.options
 
     scripts && loader.scripts(scripts)
+    styles && loader.styles(styles)
+    pages && loader.pages(pages)
     return this
   }
 

src/types.ts

@@ -2,6 +2,7 @@
 export type LoaderOptions = {
   pages?: string[]
   scripts?: string[]
+  styles?: string[]
 }
 
 export type LoaderEvent = {

src/utils/check.ts

@@ -4,6 +4,7 @@ import { LoaderOptions } from '../types'
 const regs = {
   page: /^http|^\/\//,
   js: /(^http|^\/\/)\S+\.js$/,
+  css: /(^http|^\/\/)\S+\.css$/,
 }
 
 export const pages = (pages: string[]): boolean => {
@@ -20,11 +21,18 @@ export const scripts = (scripts: string[]): boolean => {
   return true
 }
 
+export const styles = (styles: string[]): boolean => {
+  if (!Array.isArray(styles)) return Log.options.stylesError()
+  const unnormalLinks = styles.filter(s => !regs.css.test(s))
+  if (unnormalLinks && unnormalLinks.length) return Log.options.stylesError()
+  return true
+}
 
 export const options = (ops: LoaderOptions): boolean => {
   const checkResults: boolean[] = []
   ops.pages && checkResults.push(pages(ops.pages))
   ops.scripts && checkResults.push(scripts(ops.scripts))
+  ops.styles && checkResults.push(styles(ops.styles))
 
   if (!checkResults.length) return Log.options.isEmpty()
   return !`${checkResults}`.includes('false')

src/utils/constants.ts

@@ -7,5 +7,6 @@ export const warning = (msg: string) => {
 export const options = {
   pagesError: () => warning('options [pages] error.'),
   scriptsError: () => warning('options [scripts] error.'),
+  stylesError: () => warning('options [styles] error.'),
   isEmpty: () => warning('options is empty!'),
 }

src/utils/log.ts

@@ -0,0 +1,13 @@
+
+
+export const $fetch = (url: string, init: RequestInit = {}) => {
+  return fetch(url, Object.assign({ mode: 'no-cors' }, init))
+  .then(r => {
+    console.log(r)
+    return r.text()
+  })
+}
+
+export const isRelativeURL = (path: string) => {
+  return path.startsWith('./') || path.startsWith('..')
+}