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

cordjs-zone

v0.3.1

Published

Zones for JavaScript

Downloads

3

Readme

Fork of the Zone.js Library by Angular with Bug Fixes, Basic NodeJS Support and Profiling Support Orientation

WARNING: In this fork patching of never-lasting async functions (like setInterval, DOM event handlers etc.) is commented in favor of profiling functionality support (to know when things are actually completed).

Quality improvements over original library:

  • Correct handling of clearTimeout-calls.
  • Support of both AMD and CommonJS (for NodeJS) in addition to traditional global-defining used in original library.

This fork has a separate npm package:

npm install cordjs-zone

Zone.js

Implements Zones for JavaScript, inspired by Dart.

What's a Zone?

A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.

See this video from ng-conf 2014 for a detailed explanation:

screenshot of the zone.js presentation and ng-conf 2014

Running Within a Zone

You can run code within a zone with zone.run. Tasks scheduled (with setTimeout, setInterval, or event listeners) stay within that zone.

zone.run(function () {
  zone.inTheZone = true;

  setTimeout(function () {
    console.log('in the zone: ' + !!zone.inTheZone);
  }, 0);
});

console.log('in the zone: ' + !!zone.inTheZone);

The above will log:

'in the zone: false'
'in the zone: true'

Note that the function delayed by setTimeout stays inside the zone.

Forking a Zone

Zones have a set of hooks that allow you to change the behavior of code running within that zone. To change a zone, you fork it to get a new one.

zone.fork({
  beforeTask: function () {
    console.log('hi');
  }
}).run(function () {
  // do stuff
});

Hooks that you don't override when forking a zone are inherited from the existing one.

See the API docs below for more.

Usage

To start using Zones, you need to include the zone.js script in this package onto your page. This script should appear in the <head> of your HTML file before any other scripts, including shims/polyfills.

Examples

There are two kinds of examples:

  1. The kind you have to run
  2. Illustrative code snippets in this README

Running the ones that you have to run

For fully working examples:

  1. Spawn a webserver in the root of the directory in which this repo lives. (I like to use python -m SimpleHTTPServer 3000).
  2. Open http://localhost:3000/example in your browser

Below are the aforementioned snippets.

Tracking VM Turns

Run some function at the end of each VM turn:

zone.fork({
  afterTask: function () {
    // do some cleanup
  }
}).run(function () {
  // do stuff
});

Overriding A Zone's Hook

var someZone = zone.fork({
  afterTask: function () {
    console.log('goodbye');
  }
});

someZone.fork({
  afterTask: function () {
    console.log('cya l8r');
  }
}).run(function () {
  // do stuff
});

// logs: cya l8r

Augmenting A Zone's Hook

When you fork a zone, you'll often want to control how the parent zone's hook gets called.

Prefixing a hook with $ means that the hook will be passed the parent zone's hook, and the hook will be expected to return the function to be invoked rather than be the function itself.

var someZone = zone.fork({
  afterTask: function () {
    console.log('goodbye');
  }
});

someZone.fork({
  $afterTask: function (parentOnLeave) {
    // return the hook
    return function afterTask() {
      parentOnLeave();
      console.log('cya l8r');
    };
  }
}).run(function () {
  // do stuff
});

// logs: goodbye
//       cya l8r

+ and - Sugar

Most of the time, you'll want to run a hook before or after the parent's implementation. You can prefix a hook with - for running before, and + for running after.

The above can be written like this:

var someZone = zone.fork({
  afterTask: function () {
    console.log('goodbye');
  }
});

someZone.fork({
  '+afterTask': function (parentOnLeave) {
    console.log('cya l8r');
  }
}).run(function () {
  // do stuff
});

// logs: goodbye
//       cya l8r

This frees you from writing boilerplate to compose a new hook.

API

Zone.js exports a single object: window.zone.

zone.run

Runs a given function within the zone. Explained above.

zone.bind

Transforms a function to run within the given zone.

zone.fork

zone.fork({
  beforeTask: function () {},
  afterTask: function () {},
  onError: function () {},
  setTimeout: function () {},
  setInterval: function () {},
  alert: function () {},
  prompt: function () {},
  addEventListener: function () {}
});
myZone.run(function () {
  // woo!
});

Below describes the behavior of each of these hooks.

zone.onZoneCreated

Runs when a zone is forked.

zone.beforeTask

Before a function invoked with zone.run, this hook runs. If zone.beforeTask throws, the function passed to run will not be invoked.

zone.afterTask

After a function in a zone runs, the afterTask hook runs. This hook will run even if the function passed to run throws.

zone.onError

This hook is called when the function passed to run or the beforeTask hook throws.

zone.enqueueTask

This hook is called when a function is registered with the VM. For instance setTimeout and addEventListener.

zone.dequeueTask

This hook is called when a function is unregistered with the VM. For instance clearTimeout and removeEventListener.

zone.setTimeout, zone.setInterval, zone.alert, zone.prompt

These hooks allow you to change the behavior of window.setTimeout, window.setInterval, etc. While in this zone, calls to window.setTimeout will redirect to zone.setTimeout.

zone.addEventListener

This hook allows you to intercept calls to EventTarget.addEventListener.

Status

  • setTimeout, setInterval, and addEventListener work in FF23, IE10, and Chrome.
  • stack trace rewrite is kinda ugly and may contain extraneous calls.
  • elt.onevent works in FF23, IE10, but not Chrome. There's a fix in the works though!

See also

License

Apache 2.0