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

system

v2.0.1

Published

Flexible module and resource system

Downloads

70,533

Readme

System

This is a CommonJS/npm compatible module system. It works both client-side and server-side in Node.js. For browsers, it supports refresh-to-reload debugging, as well as a build step comparable to Browserify to produce bundles for production. The System module loader can resolve both module and resource locations by module identifier across package boundaries.

In addition, System adds support for configuring module translators (text to JavaScript text) and dependency analyzers.

Examples of usage

npm init
npm install --save system

To load in Node.js:

var System = require("system");
System.loadSystem(location)
.then(function (system) {
    return system.import("./entry");
});

To load in a browser during development:

<script src="node_modules/system/boot.js" data-import="./entry"></script>

If the root of the package is a different directory, the module loader will need to locate it.

<script
    src="node_modules/system/boot.js"
    data-import="./entry"
    data-package="../"
></script>

To bundle for deployment:

sysjs entry.js > bundle.js

Then to load in production:

<script src="bundle.js"></script>

Extensions

System supports plugins for translating modules to JavaScript, on the fly in the browser or in the sysjs build step. The same module loader plugins can work for both development and production, leaving little trace of the module system in the generate bundles.

Configure plugins with annotations in package.json. Extensions only apply within the scope of the packages that explicitly configure them. The following package uses the Guten Tag HTML to JavaScript extension.

{
  "dependencies": {
    "gutentag": "^2.2.0"
  },
  "extensions": {
    "html": "gutentag/extension"
  },
  "redirects": {
    "./main.html": "./play.html"
  },
  "scripts": {
    "build": "sysjs index.js > bundle.js"
  }
}

Extensions are modules that implement any combination of analyze and translate.

The analyze(module) function takes the CommonJS module object and is responsible for populating module.dependencies with module references if the module depends on other modules at run-time. The analyzer may also leave annotations to the module object that the translate function will be able to use.

The translate(module) function takes the same CommonJS module object and is responsible for converting module.text from the language implied by its module.extension, rewrite that module.text to JavaScript, and reassign the module.extension to "js".

The following extension converts a JSON document containing key-value pairs into a module that exports other modules.

exports.analyze = function analyze(module) {
    module.model = JSON.parse(module.text);
    module.dependencies = Object.keys(module.model);
};

exports.translate = function translate(module) {
    module.text = module.dependencies.map(function (id) {
        return (
            "exports[" + JSON.stringify(module.model[id]) + "] = " +
            "require(" + JSON.stringify(id) + ");\n"
        );
    }).join("");
};

Alterations made by the translator and analyzer to the module object are not preserved in sysjs build products, so they should be used only to communicate with the module system.

Analyzers can also introduce a package to one of their own dependencies. This is useful if generated code needs to use a library that the host package does not directly depend upon. The System module loader enforces dependency relationships between packages. A package that is not mentioned in package.json or expressly introduced through the extension system cannot be loaded.

var host = module.system;

exports.analyze = function (module) {
    host.introduce(module.system, "utility");
    module.dependencies.push("utility");
};

exports.translate = function (module) {
    module.text = "require(\"utility\")";
};

History

This project started at Motorola Mobility with the work of Tom Robinson (@tlrobinson), originally called C.js. This became the foundation for module loading in Motorola Mobility's MontageJS web application framework, thus the name Montage Require, or Mr. Kris Kowal (@kriskowal) took responsibility for maintaining the library, converted it to use promises internally, and added support for loading packages installed by npm. Stuart Knightley (@stuk) took over responsibility for maintaining the library when work on MontageJS resumed at Montage Studio.

The System module loader is an iteration from that lineage, with a more focused scope, targetting npm packages more precisely, and adding support for configurable (per package in package.json) translators, compilers, and dependency analyzers.