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

@fastly/performance-observer-polyfill

v2.0.0

Published

<h1 align="center" style="border-bottom: none;">🔎 PerformanceObserver Polyfill</h1> <p align="center"> <a href="https://travis-ci.org/fastly/performance-observer-polyfill"> <img alt="Travis" src="https://img.shields.io/travis/fastly/performance-obs

Downloads

50,954

Readme

The PerformanceObserver interface is a JavaScript API that can be used to observe the Performance Timeline to be notified of new performance metrics as they are recorded.

This polyfill allows consumers to use the PerformanceObserver interface within browser environments, which have basic Performance Timeline support (I.e. window.performance.getEntries()), but don't have observer support.

The polyfill works by falling back to polling the Performance Timeline on a given interval and calling all subscribed observers with the resulting set of entires.

Quick links

Installation

npm install --save @fastly/performance-observer-polyfill

Usage:

As a polyfill

This automatically "installs" PerformanceObserverPolyfill as window.PerformanceObserver() if it detects PerformanceObserver isn't supported:

import '@fastly/performance-observer-polyfill/polyfill'

// PerformanceObserver is now available globally!
const observer = new PerformanceObserver((list) => {});
observer.observe({entryTypes: ['resource']});

Usage: As a ponyfill

With a module bundler like rollup or webpack, you can import @fastly/performance-observer-polyfill to use in your code without modifying any globals:

// using JS Modules:
import PerformanceObserver from '@fastly/performance-observer-polyfill'

// or using CommonJS:
const PerformanceObserver = require('@fastly/performance-observer-polyfill')

// usage:
const observer = new PerformanceObserver((list) => {});
observer.observe({entryTypes: ['resource']})

Caveats

As the polyfill implements the PerformanceObserver interface by falling back to polling the Performance Timeline via a call to window.performance.getEntries() we are limited to only expose timeline entry types that are supported by getEntries(). Therefore the polyfill can only be used to observe the entry types: navigation, resource and mark. Newer entry types such as paint are only exposed by the native PerformanceObserver implementation and thus not polyfillable.

Development

Requirements

  • Node.js >= 10

Install

git clone [email protected]:fastly/performance-observer-polyfill.git
cd performance-observer-polyfill
npm install
npm run build

Running

Most actions you'd like to perform whilst developing performance-observer-polyfill are defined as NPM scripts tasks and can be invoked using npm run {task}.

A list of all commands and their description can be found below.

| Name | Description | | --------- | -------------------------------------------------------------------------------------------------------------- | | build | Compiles the application for production environments | | build:dev | Compiles the application for development | | lint | Lints the source files for style errors using ESLint and automatically formats the source files using prettier | | test | Runs the unit test suite |

License

MIT