npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

loaderjs

v1.0.0

Published

A flexible promise-based resource loader for web application.

Downloads

337

Readme

LoaderJS

A customizable resource loader for web applications. Promise-based asynchronous loading and control flow. Can support any types of files, just create custom loader for your custom files.

Installation:

// NPM 
npm install loaderjs

Usage

For global window:

<script src="loaderjs.bundle.min.js" type="text/javascript">
<script type="text/javascript">
	// `LoaderJS` will be exposed to global `window`
	LoaderJS.load([...]);
</script>

For Webpack or Browserify:

// Import
var LoaderJS = require('loaderjs');
// Start loading
LoaderJS.load([...]);

LoaderJS.load(resources [, callback]) -> Promise

To start loading resources, just call LoaderJS.load(resource, callback), where resource is a 2-dimensional array of possible items, and optional callback function with parameters function(err, data){}. Returns Promise.

The resource collection must be a 2-Dimensional array.

  • 1st level is SEQUENCE loading. Waits for the preceding element to finish.
  • 2nd level is PARALLEL loading. Does not wait, loads immediately.

The items can be.

  • String url (like value of src attribute)
  • Promise
  • Promise's resolver function - function(resolve, reject) {...}
  • Object with src and then property - { src: 'file.js', then: function() {...} }
  • Any falsy value, which will auto resolve - null or undefined or etc.

The callback function is triggered when loading is completely done or loader encounters error while loading.

  • Check the err to see the status result
  • The data argument an array that contains the data passed by each loaders

LoaderJS currently contains predefined loaders for file JS, CSS, HTML (WebComponent). You can always create your own loaders to suits your needs.

Example Code:

var resA = [];
// dummy-scriptA will always finish & execute first, than dummy-scriptB.
resA.push('dummy/dummy-scriptA.js');
//dummy-img will load along with dummy-scriptA.
resA.push('dummy/dummy-img.gif');
// A promise
resA.push(new Promise())
// A promise resolver
resA.push(function(resolve, reject) {})
// Object
resA.push({
  src: 'dummy/big-file.js',
  then: function() {
    // Called when done loading big-file.js
    // You can also return a promise and loader wait for it to fulfil
    return client.init() // Assume init() returns a promise
  }
})

var resB = [];
// dummy-scriptB might finish last after dummy-css. Parallel loading
resB.push('dummy/dummy-scriptB.js');
// dummy-css might finish first than dummy-scriptB. Parallel loading
resB.push('dummy/dummy-css.css');

var resC = 'dummy/dummy-480x270-FairyLights.jpg';

// Start loading resources
LoaderJS.load([resA, resB, resC], function(err, data) {
    var el = document.getElementById("loader");
    if(!err){
	    console.log('All Loaded!', data);
    } else {
	    console.log('Ouch!', data);
    }
});

LoaderJS.loadOne(resource)

Loads a single resource. Returns Promise.

LoaderJS.loadMany(resources)

Loads multiple resources in parallel (1-dim array only). Returns Promise.


Customize

To add custom loaders, just call LoaderJS.addLoader(loader) where loader is an object must contain a property "ext" to associate the loader to a file(s).

There are 2 main types of custom loader:

  1. Loader that uses element to load files. (eg. js, css, html)
  2. Loader that does not use element to load files. (eg. jpg, png, gif, etc...)

Type 1: Load with element

// Javascript Loader
LoaderJS.addLoader({
	ext: 'js', // Associated file. Can be multiple, split by comma
	tag: 'script', // The element that will be created
	parent: 'body', // The parent of the element
	attr: 'src', // The attribute of element where the url will be placed
	// Optional property
	// This is triggered before the element is attached to its parent
	config: function(element) {
		element.async = true;
	}
});

// Stylesheet Loader
LoaderJS.addLoader({
	ext: 'css',
	tag: 'link',
	parent: 'head',
	attr: 'href',
	config: function(element) {
		element.type = 'text/css';
		element.rel = 'stylesheet';
	}
});

Type 2: Load without element. Add a property "custom" with function value.

// Custom Loader
LoaderJS.addLoader({
     ext: 'jpg,png',
     custom: function(resolve, reject, url) {
         console.log('Loading Image', url);
         var image = new Image();
         image.onload = function() {
			resolve(image);
		 };
		 image.onerror = function() {
			reject('Unable to load image ' + url);
		 };
         image.src = url;
     }
 });

Additionally, you can link more file extensions to existing loader.

LoaderJS.addLoader({
	ext: 'gif',
	custom: LoaderJS.loaders['jpg']
});

More...

Progress Callback

You can also add 3rd argument to LoadJS.load(res, cb, progress) which enables to keep track of the progress. The callback will pass the percentage of the loading progress.

License

MIT