Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework variants to reduce bundle size #139

Merged
merged 32 commits into from
Feb 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
76c9092
Remove source maps
MattiasBuelens Jul 21, 2021
50b9d12
Remove ES2018 variant
MattiasBuelens Jul 21, 2021
710ce9e
Remove unminified polyfill variants
MattiasBuelens Jul 21, 2021
5052fc4
Remove ES2018 variant entirely
MattiasBuelens Jul 21, 2021
b505806
Drop ".min" suffix
MattiasBuelens Jul 25, 2021
3ac9014
Rework build
MattiasBuelens Aug 10, 2021
e1d818d
Fix indentation
MattiasBuelens Jan 4, 2024
594872a
Minify both UMD and ESM bundles
MattiasBuelens Aug 16, 2021
2de4960
Set up package entry points
MattiasBuelens Aug 10, 2021
c6192af
Test package exports
MattiasBuelens Aug 16, 2021
0172015
Add bundler tests for Rollup and Webpack
MattiasBuelens Aug 16, 2021
3f96fd5
Make ES6 the default
MattiasBuelens Aug 18, 2021
c6af66d
Make the polyfill variant not export anything
MattiasBuelens Aug 18, 2021
ee85e4d
Fix tests
MattiasBuelens Aug 18, 2021
6e09f73
Remove polyfill.mjs, since polyfill.js is now also valid as ESM
MattiasBuelens Aug 18, 2021
9088538
Make ponyfill the default variant
MattiasBuelens Aug 18, 2021
4212eec
Update readme
MattiasBuelens Aug 18, 2021
ca2a2e9
Remove "browser" field in package.json
MattiasBuelens Aug 19, 2021
45ad0d1
Add "types" condition to exports
MattiasBuelens Jan 4, 2024
54409aa
Remove down-leveling for TypeScript 3.5 or lower
MattiasBuelens Jan 4, 2024
465473b
Run test:bundlers on CI
MattiasBuelens Jan 4, 2024
24b97d7
Update contributing guide
MattiasBuelens Jan 4, 2024
fb356c8
Move dist/types/ to types/
MattiasBuelens Aug 27, 2021
77fb57f
Fix import in types tests
MattiasBuelens Jan 4, 2024
5c12a46
Add tests for package exports
MattiasBuelens Jan 4, 2024
6773317
Fix package locks
MattiasBuelens Jan 5, 2024
8a72c4c
Rename test scripts
MattiasBuelens Feb 28, 2024
d78fcb2
Update dependencies
MattiasBuelens Feb 28, 2024
b61f52e
Update CI
MattiasBuelens Feb 28, 2024
b25b707
Update readme
MattiasBuelens Feb 28, 2024
8ba3e59
Add migration guide
MattiasBuelens Sep 5, 2021
4bad284
Update changelog
MattiasBuelens Feb 28, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ jobs:
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- name: Checkout
uses: actions/checkout@v3
uses: actions/checkout@v4
with:
ref: ${{ github.event.release.target_commitish }}
- name: Validate and extract release information
id: release
uses: manovotny/github-releases-for-automated-package-publishing-action@v2.0.1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
registry-url: 'https://registry.npmjs.org'
Expand Down
5 changes: 3 additions & 2 deletions .github/workflows/pull-request.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ jobs:
)
steps:
- name: Check out merge commit of pull request
uses: actions/checkout@v3
uses: actions/checkout@v4
with:
ref: ${{ github.event.pull_request.merge_commit_sha }}
submodules: true
- name: Use Node.js 20
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
Expand All @@ -30,3 +30,4 @@ jobs:
- run: npm run test:types
- run: npm run test:unit
- run: npm run test:wpt:node
- run: npm run test:bundlers
11 changes: 6 additions & 5 deletions .github/workflows/push.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ jobs:
!contains(github.event.head_commit.message, '[skip ci]')
steps:
- name: Check out commit
uses: actions/checkout@v3
uses: actions/checkout@v4
with:
submodules: true
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: npm
Expand All @@ -26,12 +26,13 @@ jobs:
- run: npm run test:types
- run: npm run test:unit
- run: npm run test:wpt:node
- run: npm run test:bundlers

test-browser:
name: ${{ matrix.browser }}
runs-on: ubuntu-latest
container:
image: mcr.microsoft.com/playwright:v1.40.0-jammy
image: mcr.microsoft.com/playwright:v1.42.0-jammy
strategy:
fail-fast: false
matrix:
Expand All @@ -40,11 +41,11 @@ jobs:
!contains(github.event.head_commit.message, '[skip ci]')
steps:
- name: Check out commit
uses: actions/checkout@v3
uses: actions/checkout@v4
with:
submodules: true
- name: Use Node.js 20
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ typings/

### Project
/dist/
!/dist/types/ts3.6/polyfill.d.ts
/lib/
/temp/
/types/ponyfill.d.ts
/types/tsdoc-metadata.json
3 changes: 1 addition & 2 deletions .idea/web-streams-polyfill.iml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 22 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,28 @@
> - 🏠 Internal
> - 💅 Polish

## Unreleased

* 💥 Rework the list of variants to have more modern defaults.
The table below shows how to upgrade your v3 import to their equivalent v4 import.
See the [migration guide](https://github.com/MattiasBuelens/web-streams-polyfill/blob/v4/MIGRATING.md) for more information.
([#82](https://github.com/MattiasBuelens/web-streams-polyfill/issues/82), [#139](https://github.com/MattiasBuelens/web-streams-polyfill/pull/139))
* 💥 Remove the ES2018 variant, in favor of the ES2015 variant.
* 💥 Switch to [subpath exports](https://nodejs.org/api/packages.html#subpath-exports) for variants.
* Node 12 or higher is required to `import` or `require()` a variant.
* When using TypeScript, version 4.7 or higher is now required. Additionally, [`moduleResolution`](https://www.typescriptlang.org/tsconfig#moduleResolution) must be set to `"node16"`, `"nodenext"` or `"bundler"`.
* 🚀 Support [importing as ESM in Node](https://nodejs.org/api/esm.html).
* 💅 Minify all code in the published package, to reduce the download size.

| v3 import | v4 import | description |
| --- | --- | --- |
| `web-streams-polyfill` | `web-streams-polyfill/polyfill/es5` | ES5+ polyfill |
| `web-streams-polyfill/es6` | `web-streams-polyfill/polyfill` | ES2015+ polyfill |
| `web-streams-polyfill/es2018` | `web-streams-polyfill/polyfill` | ES2015+ polyfill |
| `web-streams-polyfill/ponyfill` | `web-streams-polyfill/es5` | ES5+ ponyfill |
| `web-streams-polyfill/ponyfill/es6` | `web-streams-polyfill` | ES2015+ ponyfill |
| `web-streams-polyfill/ponyfill/es2018` | `web-streams-polyfill` | ES2015+ ponyfill |

## 3.3.3 (2024-02-16)

* 🐛 Fix `ReadableStream` to match TypeScript's `AsyncIterable<R>` type. ([#141](https://github.com/MattiasBuelens/web-streams-polyfill/issues/141), [#142](https://github.com/MattiasBuelens/web-streams-polyfill/pull/142))
Expand Down
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
- `npm run test:wpt` runs the [Web Platform Tests for Streams][wpt-streams] against the generated JavaScript bundle, to verify that the polyfill's run-time behavior matches the specification.
- `npm run test:types` runs the TypeScript compiler against some reference code that uses the generated type definitions, to verify that the code successfully passes the type check.
- `npm run test:unit` runs a few unit tests in a Node environment, to verify that the polyfill also works without a browser environment.
- `npm run test:bundlers` runs integration tests with popular bundlers, to verify that they can correctly resolve and bundle the polyfill.

## Miscellaneous

Expand Down
27 changes: 27 additions & 0 deletions MIGRATING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Migrating

## Version 3 to 4

Version 4 restructures the library's exports to have more modern defaults, and employs modern best practices for publishing npm packages.

* The default export (i.e. `import "web-streams-polyfill"`) is now the *ponyfill* variant instead of the *polyfill* variant, to avoid modifying the global scope. If you do want to install the polyfill on the global scope, switch to
the `polyfill` variant.
* The default export uses ES2015 syntax and targets modern Node and browser environments. If you need to support ES5 environments, switch to either the `es5` or `polyfill/es5` variant.
* The polyfill variant no longer re-exports the ponyfill, so `import { ReadableStream } from "web-streams-polyfill/polyfill"` won't work. Instead, use the global `ReadableStream` variable directly after loading the polyfill, or switch to the default (non-polyfill) variant.
* The project uses [Node's subpath exports](https://nodejs.org/api/packages.html#packages_package_entry_points) to provide each variant as a [dual module (UMD/ESM)](https://nodejs.org/api/packages.html#packages_dual_commonjs_es_module_packages). You need Node 12.20.0 or higher to resolve these variants. If you're using a bundler (like webpack or Rollup), you need to make sure it's up-to-date too. If you're using TypeScript, your [`moduleResolution`](https://www.typescriptlang.org/tsconfig#moduleResolution) must be set to `"node16"`, `"nodenext"` or `"bundler"`.

Version 4 also focuses on reducing the download size of the published npm package.

* All published JavaScript code is now minified, without source maps. If you need to debug the polyfill, you can [clone it](https://github.com/MattiasBuelens/web-streams-polyfill) and [build it yourself](https://github.com/MattiasBuelens/web-streams-polyfill/blob/master/CONTRIBUTING.md).
* The ES2018 variant was removed, since it had only minor differences with the ES2015 variant. If you were using this variant, switch to the default export instead.

The following table shows how to upgrade your v3 import to their equivalent v4 import:

| v3 import | v4 import | description |
| --- | --- | --- |
| `web-streams-polyfill` | `web-streams-polyfill/polyfill/es5` | ES5+ polyfill |
| `web-streams-polyfill/es6` | `web-streams-polyfill/polyfill` | ES2015+ polyfill |
| `web-streams-polyfill/es2018` | `web-streams-polyfill/polyfill` | ES2015+ polyfill |
| `web-streams-polyfill/ponyfill` | `web-streams-polyfill/es5` | ES5+ ponyfill |
| `web-streams-polyfill/ponyfill/es6` | `web-streams-polyfill` | ES2015+ ponyfill |
| `web-streams-polyfill/ponyfill/es2018` | `web-streams-polyfill` | ES2015+ ponyfill |
59 changes: 35 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,70 +14,80 @@ Web Streams, based on the WHATWG spec reference implementation.
## Usage

This library comes in multiple variants:
* `web-streams-polyfill`: a polyfill that replaces the native stream implementations.
Recommended for use in web apps supporting older browsers through a `<script>` tag.
* `web-streams-polyfill/es6`: a polyfill targeting ES2015+ environments.
Recommended for use in web apps supporting modern browsers through a `<script>` tag.
* `web-streams-polyfill/es2018`: a polyfill targeting ES2018+ environments.
* `web-streams-polyfill/ponyfill`: a [ponyfill] that provides
the stream implementations without replacing any globals.
Recommended for use in legacy Node applications, or in web libraries supporting older browsers.
* `web-streams-polyfill/ponyfill/es6`: a ponyfill targeting ES2015+ environments.
* `web-streams-polyfill`: a [ponyfill] that provides the stream implementations
without replacing any globals, targeting ES2015+ environments.
Recommended for use in Node 6+ applications, or in web libraries supporting modern browsers.
* `web-streams-polyfill/ponyfill/es2018`: a ponyfill targeting ES2018+ environments.
Recommended for use in Node 10+ applications.
* `web-streams-polyfill/es5`: a ponyfill targeting ES5+ environments.
Recommended for use in legacy Node applications, or in web libraries supporting older browsers.
* `web-streams-polyfill/polyfill`: a polyfill that replaces the native stream implementations,
targeting ES2015+ environments.
Recommended for use in web apps supporting modern browsers through a `<script>` tag.
* `web-streams-polyfill/polyfill/es5`: a polyfill targeting ES5+ environments.
Recommended for use in web apps supporting older browsers through a `<script>` tag.

Each variant also includes TypeScript type definitions, compatible with the DOM type definitions for streams included in TypeScript.
These type definitions require TypeScript version 4.7 or higher.

In version 4, the list of variants was reworked to have more modern defaults and to reduce the download size of the package.
See the [migration guide][migrating] for more information.

Usage as a polyfill:
```html
<!-- option 1: hosted by unpkg CDN -->
<script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.js"></script>
<!-- option 2: self hosted -->
<script src="/path/to/web-streams-polyfill/dist/polyfill.min.js"></script>
<script src="/path/to/web-streams-polyfill/dist/polyfill.js"></script>
<script>
var readable = new ReadableStream();
</script>
```
Usage as a Node module:
```js
var streams = require("web-streams-polyfill/ponyfill");
var streams = require("web-streams-polyfill");
var readable = new streams.ReadableStream();
```
Usage as a ES2015 module:
Usage as a ponyfill from within a ES2015 module:
```js
import { ReadableStream } from "web-streams-polyfill";
const readable = new ReadableStream();
```
Usage as a polyfill from within an ES2015 module:
```js
import { ReadableStream } from "web-streams-polyfill/ponyfill";
import "web-streams-polyfill/polyfill";
const readable = new ReadableStream();
```

## Compatibility

The `polyfill` and `ponyfill` variants work in any ES5-compatible environment that has a global `Promise`.
The `polyfill` and `ponyfill` variants work in any ES2015-compatible environment.

The `polyfill/es5` and `ponyfill/es5` variants work in any ES5-compatible environment that has a global `Promise`.
If you need to support older browsers or Node versions that do not have a native `Promise` implementation
(check the [support table][promise-support]), you must first include a `Promise` polyfill
(e.g. [promise-polyfill][promise-polyfill]).

The `polyfill/es6` and `ponyfill/es6` variants work in any ES2015-compatible environment.

The `polyfill/es2018` and `ponyfill/es2018` variants work in any ES2018-compatible environment.

[Async iterable support for `ReadableStream`][rs-asynciterator] is available in all variants, but requires an ES2018-compatible environment or a polyfill for `Symbol.asyncIterator`.

[`WritableStreamDefaultController.signal`][ws-controller-signal] is available in all variants, but requires a global `AbortController` constructor. If necessary, consider using a polyfill such as [abortcontroller-polyfill].

[Reading with a BYOB reader][mdn-byob-read] is available in all variants, but requires `ArrayBuffer.prototype.transfer()` or `structuredClone()` to exist in order to correctly transfer the given view's buffer. If not available, then the buffer won't be transferred during the read.

### Tooling compatibility

This package uses [subpath exports](https://nodejs.org/api/packages.html#subpath-exports) for its variants. As such, you need Node 12 or higher in order to `import` or `require()` such a variant.

When using TypeScript, make sure your [`moduleResolution`](https://www.typescriptlang.org/tsconfig#moduleResolution) is set to `"node16"`, `"nodenext"` or `"bundler"`.

## Compliance

The polyfill implements [version `4dc123a` (13 Nov 2023)][spec-snapshot] of the streams specification.

The polyfill is tested against the same [web platform tests][wpt] that are used by browsers to test their native implementations.
The polyfill aims to pass all tests, although it allows some exceptions for practical reasons:
* The `es2018` variant passes all of the tests.
* The `es6` variant passes the same tests as the `es2018` variant, except for the [test for the prototype of `ReadableStream`'s async iterator][wpt-async-iterator-prototype].
* The default (ES2015) variant passes all of the tests, except for the [test for the prototype of `ReadableStream`'s async iterator][wpt-async-iterator-prototype].
Retrieving the correct `%AsyncIteratorPrototype%` requires using an async generator (`async function* () {}`), which is invalid syntax before ES2018.
Instead, the polyfill [creates its own version][stub-async-iterator-prototype] which is functionally equivalent to the real prototype.
* The `es5` variant passes the same tests as the `es6` variant, except for various tests about specific characteristics of the constructors, properties and methods.
* The ES5 variant passes the same tests as the ES2015 variant, except for various tests about specific characteristics of the constructors, properties and methods.
These test failures do not affect the run-time behavior of the polyfill.
For example:
* The `name` property of down-leveled constructors is incorrect.
Expand All @@ -97,6 +107,7 @@ Thanks to these people for their work on [the original polyfill][creatorrr-polyf
[spec]: https://streams.spec.whatwg.org
[ref-impl]: https://github.com/whatwg/streams
[ponyfill]: https://github.com/sindresorhus/ponyfill
[migrating]: https://github.com/MattiasBuelens/web-streams-polyfill/blob/v4/MIGRATING.md
[promise-support]: https://kangax.github.io/compat-table/es6/#test-Promise
[promise-polyfill]: https://www.npmjs.com/package/promise-polyfill
[rs-asynciterator]: https://streams.spec.whatwg.org/#rs-asynciterator
Expand Down
6 changes: 3 additions & 3 deletions api-extractor.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
*/
"mainEntryPointFilePath": "<projectFolder>/lib/polyfill.d.ts",
"mainEntryPointFilePath": "<projectFolder>/lib/ponyfill.d.ts",

/**
* A list of NPM package names whose exports should be treated as part of this package.
Expand Down Expand Up @@ -195,7 +195,7 @@
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
*/
"untrimmedFilePath": "<projectFolder>/dist/types/ts3.6/ponyfill.d.ts",
"untrimmedFilePath": "<projectFolder>/types/ponyfill.d.ts",

/**
* Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
Expand Down Expand Up @@ -256,7 +256,7 @@
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<lookup>"
*/
"tsdocMetadataFilePath": "<projectFolder>/dist/types/tsdoc-metadata.json"
"tsdocMetadataFilePath": "<projectFolder>/types/tsdoc-metadata.json"
},
/**
* Specifies what type of newlines API Extractor should use when writing output files. By default, the output files
Expand Down
28 changes: 0 additions & 28 deletions build/downlevel-dts.js

This file was deleted.

14 changes: 0 additions & 14 deletions es2018/package.json

This file was deleted.

14 changes: 0 additions & 14 deletions es6/package.json

This file was deleted.

Loading