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 🙏

© 2026 – Pkg Stats / Ryan Hefner

he-loader

v1.0.1

Published

manage and load various components of the app

Readme

he-loader

every app consists of various components and the need to Module to take control of loading and passing data in secure way between these components becoms huge when the app scale.

so this module for Manage and load app components.

Install

just run

$ npm install he-loading

Usage

in your application bootstrap file import the Loader

import { Loader } from 'he-loader';

then create new instace

const loader = new Loader();

and Optionaly you can pass options Object and it must be implemets OptionsInterface

import { Loader, OptionsInterface } from 'he-loader';

const opts: OptionsInterface = {};
const loader = new Loader(opts);

now you are ready to go...

const app = loader.load([
    new Component(),
    new Component2()
]);

the Loader will load these components in sequence and share Settings Class between them to hold any data you need to pass between them.

more about this below.

create component

the component is just a calss that holds the required operations to initiate part of your app for example DB, Logger, Routes engine, Error handler, ...etc

to create a component create a class that implements ComponentInterface like so..

import { ComponentInterface, Settings } from 'he-loading';

export default class DBComponent implements ComponentInterface {

    load(settings: Settings) {
        // do whatever you need to init your DB
    }
}

that's it, this is the only required method in the class and you are freely to add any desired methods ot properties.

Notice: the load method can be async or return a new Promise if it contains async operations that we need to await for them.

you can now load this Component like we descriped above :) :)

Share Data between Components

it's not recommended that one component is dependent on another component data, But the feature is here anyway.

you should be noticed the settings prop that load method accepts by now.

the settings is an instane of Seetings class in he-loader and used to share data between components

load(settings: Settings) {
    // do whatever you need to init your DB
    // pretend you need to pass db connection to another component
    const DBConnection = {};

    // set the connection into the settings
    setings.set('dbConnection', DBConnection);
}

then from any other component load method

load(settings: Settings) {
    // get the connection from settings
    const DBConnection = setings.get('dbConnection');
}

but you must note that in this case you need to load DBComponent first then the other component.

const app = loader.load([
    new DBComponent(),
    new OtherComponent()
]);

Error Handling

the app const that we created above returns a Promise. so you can use .then() and .catch() methods to catch any thing bad :)

const app = loader.load([]);

app.then((settings: Settings) => console.log("Application is up and running."));

app.catch(error => console.log(`Application is crashed: ${error}`));

I'm Welcoming with any suggestions or contribution or Issue reporting :) :)