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

spck-module

v0.1.0

Published

A straight forward client-side module loading library.

Downloads

3

Readme

Spck Module

Spck Module is a lightweight script loading library.

Getting started

Spck Module can be installed using bower:

bower install spck-module

Start by including the file in your main HTML file.

<script src="spck-module.js" type="text/javascript"></script>

Defining modules

Modules and can contain definitions of functions and variables, also provides entry point after module dependencies are loaded.

m.module('chicken')
  .import('https://example.com/chicken.css')
  .import('/chicken.js')
  .require('egg')

To access the module one can use a function call, or access it through a variable:

m.module('chicken')
// which is the same as:
m.modules.chicken

Loading modules

Modules can be loaded and then initialized. A module can be loaded from by using:

m.import(url).then(callback);

This will append either a <script> or <link> tag depending on if a '.js' file is included. When a module is defined, its __new__ method is automatically immediately called. Note that self refers to the module.

m.module('chicken')
  .__new__(function(self) {
    // Do stuff immediately.
    // ...
  });

Note that multiple __new__ callback functions can be defined, and they will be called in the defined order:

m.module('chicken')
  .__new__(function(self) {
    console.log('I am first')
  })
  .__new__(function(self) {
    console.log('I am second')
  });

Partial module definition

// A module defined again will refer to the original defined module.
// This allows module definitions to be split between many files.
m.module('chicken')
  .__new__(function(self) {
    console.log('I am third');
  });

Initializing modules

After a module is loaded, it needs to be initialized. Initializing will load all dependencies. The initialization process has 2 steps:

  1. Import all files defined by .import.
  2. After imports are successful, initialize required modules defined by .require.

To initialize a module manually:

m.module('chicken');
// This can be called anywhere after the module definition.
m.initialize('chicken');

To initialize a module as a requirement by another module initialization process:

m.module('baby')
  .import('/mother.js')
  .require('mom');

When a module is initialized, its __init__ method is automatically called. The __init__ method(s) are called after dependencies are loaded.

m.module('baby')
  .__init__(function(self) {
    console.log('I am initialized')
  });

Similarly to __new__, when defining multiple __init__ callbacks, they are called in the order of definition.

m.module('baby')
  .__init__(function(self) {
    self.count = 5;
  })
  .__init__(function(self) {
    self.count++;
    console.log(self.count); // Outputs 6
  });

When a module is initialized, its dependencies will be loaded.

m.module('angular-app')
  .import('jquery.min.js')
  .import('angular.min.js')
  .import('https://example.com/script.js');

// Dependencies will be loaded asynchronously (all at the same time).
m.initialize('angular-app');

An example on requiring modules.

// Inside mother.js
m.module('mom')
  .__init__(function(self) {
    console.log('I will be initialized and loaded FIRST!')
  });

// Inside baby.js
m.module('baby')
  .import('/mother.js')
  .require('mom')

  .__init__(function(self) {
    console.log('I am initialized AFTER mother.')
  });

In the case that your submodule has very large dependencies and needs to be loaded in a future point in time:

// Inside big-module.js
m.module('big-module')
  .import('very-large-file.js')
  .__init__(function(self) {
    // do stuff
  });

// Inside small-module.js
m.module('small-module')
  .import('/big-module.js')

  .__init__(function(self) {
    // Load big module dependencies after 1s
    setTimeout(function() {
      m.initialize('big-module');
    }, 1000);
  });

Defining module methods

Methods can be defined in a module in the following way:

m.module('baby')
  .def({
    laugh: function(self) {
    }),
    talk: function(self, string) {
      self.laugh();
      console.log(string);
    })
  });

m.modules.baby.talk('Awesome!');

Note that the methods are defined on the module instance and injected with a self argument. The self argument is a reference to the module singleton instance.

Special properties

Additional properties that are defined on top of module instances.

Property | Description | --- | --- | __name__ | name of module | __state__ | loading / loaded / failed / undefined |

Modules will fail to load if a HTTP error occurs on import or a circular dependency is detected on require.

Browser support

Chrome | Firefox | IE | Safari | Opera --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | 11+ ✔ | 9.0+ ✔ | Latest ✔ |