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

@mattiasbuelens/web-streams-adapter

v0.1.0

Published

Adapters for converting between different implementations of WHATWG Streams

Downloads

558,922

Readme

web-streams-adapter

Adapters for converting between different implementations of WHATWG Streams.

Why?

When you've got a ReadableStream from a native web API, you might be disappointed to find out that not all browser support the latest and greatest features from the streams spec yet:

const response = await fetch('http://example.com/data.txt');
const readable = response.body;
const writable = new WritableStream({ write(chunk) { console.log(chunk) } });
await readable.pipeTo(writable); // TypeError: Object doesn't support property or method 'pipeTo'

This is because although many browsers have already started implementing streams, most of them are not yet fully up-to-date with the latest specification:

  • Chrome 67 supports ReadableStream, WritableStream and TransformStream. Readable byte streams are supported as of Chrome 89. However, async iteration is not yet supported.
  • Edge 89 has the same support as Chrome 89.
  • Firefox 65 supports ReadableStream, but no readable byte streams or writable streams yet. As such, methods like pipeTo() and pipeThrough() that take a WritableStream are not yet supported either.
  • Safari supports ReadableStream, but no readable byte streams or writable streams.

For up-to-date information, check caniuse.com and the browser compatibility tables on MDN for ReadableStream and WritableStream.

What?

web-streams-adapter provides adapter functions that take any readable/writable/transform stream and wraps it into a different readable/writable/stream with a different (more complete) implementation of your choice, for example web-streams-polyfill.

// setup
import { ReadableStream as PolyfillReadableStream } from 'web-streams-polyfill';
import { createReadableStreamWrapper } from '@mattiasbuelens/web-streams-adapter';
const toPolyfillReadable = createReadableStreamWrapper(PolyfillReadableStream);

// when handling a fetch response
const response = await fetch('http://example.com/data.txt');
const readable = toPolyfillReadable(response.body);
console.log(readable instanceof PolyfillReadableStream); // -> true
await readable.pipeTo(writable); // works!

You can also use an adapter to convert from your polyfilled stream back to a native stream:

// setup
const toNativeReadable = createReadableStreamWrapper(self.ReadableStream);

// when starting a fetch with a streaming POST body
const readable = new PolyfillReadableStream({ /* amazingness */ });
const response = await fetch(url, {
  method: 'POST',
  body: toNativeReadable(readable) // works!
});

How?

For readable streams, web-streams-adapter creates an underlying source that pulls from the given readable stream using the primitive reader API. This source can then be used by any other readable stream implementation, both native and polyfilled ones.

For writable and transform streams, it uses a very similar approach to create an underlying sink or transformer using primitive reader and writer APIs on the given stream.