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

amd.ts

v1.1.1

Published

A specialized AMD implementation meant to support modules generated by the TypeScript compiler.

Downloads

23

Readme

AMD.ts build status npm version

AMD.ts is a compact, specialized implementation of AMD meant to support modules emitted by the TypeScript compiler.

Rationale

The TypeScript compiler can emit Javascript code targeting different module formats from the same source, at the moment of writing it supports AMD, SystemJS, CommonJS and ES6 modules.

This is very handy when working on cross-platform (or as they say nowadays, isomorphic) Javascript code bases as it allows the same code to be packaged for all the various environments where it should run.

Usually to support browser environments, though, additional tooling and tedious wiring is required (e.g. Webpack) to "bundle", load and process modules; depending on the size and performance budget of a project, this might translate into unnecessary overhead and headaches.

While the TypeScript compiler is able to "bundle" some module formats (at the time of writing this is possible by using the --outFile option when using AMD or SystemJS as the target module system) functioning as a low-overhead asset manager, it offers no mechanism to load and process its output in a browser enviornment.

AMD.ts is meant to address that with a small footprint (1K minified, 0.5K gzipped) and minimal overhead.

Usage

There are two ways to use AMD.ts, as a TypeScript source file to be inlined in your tsc output or as an external JavaScript resource.

Inlined

  1. Download amd.ts from this repository and place it somewhere in your TypeScript project's path. Alternatively you can install AMD.ts using npm, the file can then be found in node_modules/amd.ts/src/amd.ts.
  2. Have a "main" file where to call require to initialize your logic, this is where you would also add a ref comment to ensure the require function is available:
// main.ts
/// <reference path="<PATH_TO>/amd.ts" />
require(['module1', 'module2'], (mod1: any, mod2: any) => /* logic using required modules */);
  1. Change your tsconfig.json file to produce a bundle with all your modules and amd.ts:
{
    ...
    "module": "amd",
    "outFile": "<OUTPUT_PATH>.js"
    ...
}

Alternatively pass those options to tsc through the command line. 4. Invoke tsc, the compiler will produce a bundle with all your modules and AMD.ts inlined ready to be used in your web pages.

External Javascript Resouce

AMD.ts is available in compiled form in this repository (minified version), via npm and at npmcdn (minified version).

It can be added to a HTML page using a script tag, then you can either compile your modules as separate files and add them to the page using multiple script tags, or you can create a bundle with the modules as point #3 above shows. In this case make sure AMD.ts is loaded before any module definition or call to require.

License

AMD.ts is open source software and is free for any use under the MIT License

Changelog

Information about the changes across versions in available in the changelog