Skip to content

archilogic-com/fetch-module

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 

Repository files navigation

fetchModule(url)

Load JS modules in browser on demand transparently (basic AMD and CommonJS support)

  • modules will be loaded only when your function actually needs them
  • repeated calls to your function will reuse loaded modules automatically
  • keeps your codebase small by loading rarely used libraries only when needed
  • simplyfies on demand loading using a decentralized approach

Basic Usage:

<head>
  <script src="https://rawgit.com/archilogic-com/fetch-module/master/fetch-module.js"></script>
</head>
<body>
  <script>
    var moduleUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.5/pako_deflate.min.js'

    function compressBuffer (buffer) {
      return fetchModule(moduleUrl).then(function(compress){
        return compress.gzip(buffer)
      })
    }
    
  </script>
</body>

Run Example

Example: Gzip a text file using deflate module loaded on demand

Using gzipFile function will load the deflate module from pako library loaded from cloudflare CDN once. Calling gzipFile again will reuse the previously loaded module by reference from a promise based caching mechanism.

Run Example

<head>
  <script src="https://rawgit.com/archilogic-com/fetch-module/master/fetch-module.js"></script>
</head>
<body>
  <p>
    Loads a <a target="_blank" href="https://storage.3d.io/archilogic/test.txt">text file</a> and creates a gzipped version for download.
  </p>

  <p>
    <span id="loading">Loading ...</span>
    <a id="download-link" download="compressed-text-file.gz" style="display:none;">Download compressed file</a>
  </p>

  <script>

    // demo

    // load text file
    fetch('https://storage.3d.io/archilogic/test.txt')
      .then(function(response){
        return response.blob()
      })
      .then(gzipFile)
      .then(function(compressedBlob){
        // hide loading info
        document.querySelector('#loading').style.display = 'none'
        // make file downloadable
        var objectUrl = window.URL.createObjectURL(compressedBlob)
        document.querySelector('#download-link').setAttribute('href', objectUrl)
        // show download link
        document.querySelector('#download-link').style.display = 'inline'
      })

    // methods

    var pakoDeflateUrl = 'https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.5/pako_deflate.min.js'

    function gzipFile (blob) {
      return fetchModule(pakoDeflateUrl).then(function(pakoDeflate){
        return readFileAsBuffer(blob).then(pakoDeflate.gzip).then(createFileFromBuffer)   
      })
    }

    function readFileAsBuffer(blob) {
      return new Promise(function(resolve, reject){
        var fileReader = new window.FileReader()
        fileReader.onload = function (e) {
          // IE 11 requires this
          // http://stackoverflow.com/a/32665193/2835973
          resolve(fileReader.content || fileReader.result)
        }
        fileReader.onerror = function (error){
          reject(error)
        }
        // start reading file
        fileReader.readAsArrayBuffer(blob)
      })
    }

    function createFileFromBuffer(arrayBuffer) {
      return new Blob([ arrayBuffer ], { type: 'application/x-gzip' })
    }

  </script>
</body>

About

Load JS Modules in browser on demand (basic AMD and CommonJS support)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published