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

measly

v1.4.1

Published

A measly wrapper around XHR to help you contain your requests

Downloads

120

Readme

measly

A measly wrapper around XHR to help you contain your requests

Online Demo

measly.png

Install

npm install measly --save
bower install measly --save

Layer API

Here is the API exposed by measly.

.layer(options?)

Measly works as a hierarchy-based layer that helps you perform XHR requests. measly.layer() provides the same API as measly does, by creating a child layer. Measly supports tree-like structures as well. You can use a thinner layer to create requests from different parts of your application. You can pass a few options to measly.layer.

Option | Description ----------|-------------------------------------------------------------------------------------------- context | A DOM context element for the layer. Defaults to document.body. cache | Milliseconds that response data is considered fresh. Defaults to false.

Note that if you pass in a context that already has a Measly layer, that layer will be returned instead.

Usage

var core = require('measly');
var thin = core.layer();

// thin has same api as core

.parent

Access the parent layer.

Usage

var core = require('measly');
var thin = core.layer();

console.log(core.parent);
// <- undefined

console.log(thin.parent);
// <- core

.context

This is the context element for the measly layer.

Usage

var core = require('measly');
var thin = core.layer({ context: div });

console.log(core.context);
// <- document.body

console.log(thin.context);
// <- div

.all

Lists all of the measly layers that have been ever created. Note that this method is only available in the top measly layer.

.find(context, shallow?)

Finds a measly layer by their context DOM element. If the provided element isn't found in any layer, its parent element is looked up. If no other parent elements are found, then you're going to get core back because its context is document.body. Note that this method is only available in the top measly layer.

If you set shallow to true, then only the provided context will be tested, rather than walking the DOM tree.

Usage

var core = require('measly');
var thin = core.layer({ context: div });

console.log(core.find(document.body));
// <- core

console.log(core.find(div));
// <- thin

.children

Array of thinner layers created on top of this layer.

Usage

var core = require('measly');
var thin = core.layer();

console.log(core.children);
// <- [thin]

.requests

These are the pending requests that pertain to this measly layer.

Usage

var core = require('measly');
core.get('/api/v1/logs');

console.log(core.requests);
// <- [req]

.cache

These are the cache entries for the current layer. Note that freshness is evaluated only when the cache entry is considered as a response, and thus the cache object may have stale entries in it, even though they will be removed when detected.

Whenever there's a cache hit the request won't be initiated against the server. Instead, your local copy of the data will be used. Cache hits are limited to GET requests because best practices.

Usage

var core = require('measly');

core.cache['/api/v1/logs'] = {
  statusCode: 200,
  body: 'a cached response'
};

core.get('/api/v1/logs').on('data', function (err, res, body) {
  console.log(body);
  // <- 'a cached response'
});

Note that the cache properties are automatically set for you if you define a duration for which your requests are cache-worthy.

var core = require('measly');
core.get('/api/v1/logs', { cache: 60000 }).on('data', function () {
  core.get('/api/v1/logs').on('data', function () {
    // same response. the resource won't be hit again for 60 seconds
  });
});

.abort()

This method will abort all pending requests found on this layer as well as all its children's requests, recursively.

Usage

var core = require('measly');

core.get('/api/v1/logs');
core.abort();

.request(url, options)

Requests are created using xhr. In addition to the options defined by xhr, you could define these options as well.

Option | Description ----------|-------------------------------------------------------------------------------------------- context | An arbitrary context object for this. DOM elements are encouraged. Defaults to layer.context. cache | Milliseconds that response data is considered fresh. Defaults to layer.cache.

There's also .get, .post, .put, .delete, and .patch as short-hand methods. These methods return a req object. Each instance of req has an extensive API.

Usage

var core = require('measly');
var req = core.get('/api/v1/logs');

Request API

Firstly, req objects are also event emitters created by contra. These events don't only get fired on the req object, but on the layer that created the request, and all of its parents.

Request Events

In every event listener, req will be the context assigned to this.

Event | Arguments | Fired when... ---------------|---------------|----------------------------------------------------------- 'create' | (req) | A measly request is created 'cache' | (err, body) | A request is prevented either manually or by a cache hit 'request' | (xhr) | The XHR request is opened 'abort' | (xhr?) | A request is aborted manually 'error' | (err, body) | There was an error (statusCode) | (err, body) | There was an error with status code: statusCode 'data' | (body) | We got a successful response 'always' | (err, body) | A request produces an error, is fulfilled, or aborted

Naturally, requests also have properties and other methods.

.prevent(err, body, statusCode?)

Prevents a request from turning into an XHR request. Instead, you can define your own error, response body, and status code. Considering events get bubbled up measly layers, you're able to prevent requests under certain conditions, globally for any requests made by a layer or its children. Also useful in testing environments.

The status code is 200 if there isn't an error, 500 in case of an error, and you can also set it explicitly.

Usage

var core = require('measly');
var req = core.get('/api/v1/logs');

core.on('create', function (req) {
  if (canInfer) {
    req.prevent(null, ['dogs', 'cats', 'carrots']);
  }
});

.abort()

Aborts the request individually.

.layer

This is the layer the request was created on.

Usage

var core = require('measly');
var req = core.get('/api/v1/logs');

console.log(req.layer);
// <- core

.context

An arbitrary context object for this. DOM elements are encouraged. Defaults to layer.context.

.cache

Milliseconds that response data is considered fresh. Defaults to layer.cache.

.done

false unless the request is completed.

.requested

false unless an XHR request is actually created.

.prevented

false unless the request is prevented either manually or by a cache hit

.xhr

The browser native XHR object, once the request is created.

License

MIT