Merge pull request #26 from MattiasBuelens/esm-only

Modernize package
MattiasBuelens · Jun 27, 2023 · e476e0b · e476e0b
2 parents 7fca011 + 794ab42
commit e476e0b
Show file tree

Hide file tree

Showing 23 changed files with 5,214 additions and 3,783 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,19 @@
+# Changelog
+
+> **Tags:**
+> - 💥 Breaking Change
+> - 👓 Spec Compliance
+> - 🚀 New Feature
+> - 🐛 Bug Fix
+> - 👎 Deprecation
+> - 📝 Documentation
+> - 🏠 Internal
+> - 💅 Polish
+
+## v0.2.0 (2022-06-27)
+
+* 💥 This package is now ESM-only, and uses ES2020 syntax. ([#25](https://github.com/MattiasBuelens/remote-web-streams/issues/25), [#26](https://github.com/MattiasBuelens/remote-web-streams/pull/26))
+
+## v0.1.0 (2018-07-15)
+
+* 🚀 Initial release.
diff --git a/README.md b/README.md
@@ -73,7 +73,8 @@ The basic steps for setting up a pair of linked streams are:
    * a `ReadableStream` which will read chunks written by the linked `WritableStream`
 ```js
 // main.js
-const { readable, writablePort } = new RemoteWebStreams.RemoteReadableStream();
+import { RemoteReadableStream } from 'remote-web-streams';
+const { readable, writablePort } = new RemoteReadableStream();
 ```
 2. Transfer the `writablePort` to the other context, and instantiate the linked `WritableStream` in that context
    using `fromWritablePort`.
@@ -83,6 +84,7 @@ const worker = new Worker('./worker.js');
 worker.postMessage({ writablePort }, [writablePort]);
 
 // worker.js
+import { fromWritablePort } from 'remote-web-streams';
 self.onmessage = (event) => {
   const { writablePort } = event.data;
   const writable = RemoteWebStreams.fromWritablePort(writablePort);
@@ -114,15 +116,15 @@ This is the complement to `RemoteReadableStream`:
   and instantiate the linked `ReadableStream` with `fromReadablePort` inside that context.
 ```js
 // main.js
-const { writable, readablePort } = new RemoteWebStreams.RemoteWritableStream();
+import { RemoteWritableStream } from 'remote-web-streams';
 worker.postMessage({ readablePort }, [readablePort]);
 const writer = writable.getWriter();
 // ...
 
 // worker.js
+import { fromReadablePort } from 'remote-web-streams';
 self.onmessage = (event) => {
   const { readablePort } = event.data;
-  const writable = RemoteWebStreams.fromReadablePort(readablePort);
   const reader = readable.getReader();
   // ...
 }
@@ -149,7 +151,7 @@ To demonstrate these "remote transform streams", we set one up to solve the orig
 
 ```js
 // main.js
-const { RemoteReadableStream, RemoteWritableStream } = RemoteWebStreams;
+import { RemoteReadableStream, RemoteWritableStream } from 'remote-web-streams';
 (async () => {
   const worker = new Worker('./worker.js');
   // create a stream to send the input to the worker
@@ -174,7 +176,7 @@ const { RemoteReadableStream, RemoteWritableStream } = RemoteWebStreams;
 })();
 
 // worker.js
-const { fromReadablePort, fromWritablePort } = RemoteWebStreams;
+import { fromReadablePort, fromWritablePort } from 'remote-web-streams';
 self.onmessage = async (event) => {
   // create the input and output streams from the transferred ports
   const { readablePort, writablePort } = event.data;

diff --git a/docs/examples/page-array.html b/docs/examples/page-array.html
@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <title>Processing an array inside a web page script</title>
     <link rel="stylesheet" href="./resources/jank-meter.css">
-    <script src="./utils.js"></script>
-    <script src="./process.js"></script>
 </head>
 <body>
 
@@ -20,7 +18,10 @@
 <button id="run">Run</button>
 <pre id="log"></pre>
 
-<script>
+<script type="module">
+  import { printArrayToElement } from './utils.js';
+  import { processArray } from './process.js';
+
   const results = document.getElementById('log');
 
   document.getElementById('run').onclick = () => {

diff --git a/docs/examples/page-stream.html b/docs/examples/page-stream.html
@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <title>Processing an stream inside a web page script</title>
     <link rel="stylesheet" href="./resources/jank-meter.css">
-    <script src="./utils.js"></script>
-    <script src="./process.js"></script>
 </head>
 <body>
 
@@ -22,7 +20,10 @@
 <button id="run">Run</button>
 <pre id="log"></pre>
 
-<script>
+<script type="module">
+  import { arrayToStream, delayTransform, printToElementStream } from './utils.js';
+  import { processTransform } from './process.js';
+
   const results = document.getElementById('log');
 
   document.getElementById('run').onclick = () => {

diff --git a/docs/examples/process.js b/docs/examples/process.js
@@ -1,4 +1,4 @@
-function doSomeWork(value) {
+export function doSomeWork(value) {
   let sum = value;
   for (let i = 0; i < 1e6; i++) {
     sum += Math.random();
@@ -7,14 +7,14 @@ function doSomeWork(value) {
   return sum;
 }
 
-function processArray(input) {
+export function processArray(input) {
   console.time('process');
   const output = input.map(doSomeWork);
   console.timeEnd('process');
   return output;
 }
 
-function processTransform() {
+export function processTransform() {
   return new TransformStream({
     start() {
       console.time('process');

diff --git a/docs/examples/utils.js b/docs/examples/utils.js
@@ -1,4 +1,4 @@
-function arrayToStream(array) {
+export function arrayToStream(array) {
   const { readable, writable } = new TransformStream();
   const writer = writable.getWriter();
   for (let item of array) {
@@ -8,23 +8,23 @@ function arrayToStream(array) {
   return readable;
 }
 
-function delay(ms) {
+export function delay(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-function delayTransform(ms) {
+export function delayTransform(ms) {
   return new TransformStream({
     transform(chunk, controller) {
       return delay(ms).then(() => controller.enqueue(chunk));
     }
   });
 }
 
-function printArrayToElement(element, array) {
+export function printArrayToElement(element, array) {
   element.appendChild(document.createTextNode(array.join('\n') + '\n\n'));
 }
 
-function printToElementStream(element) {
+export function printToElementStream(element) {
   return new WritableStream({
     write(chunk) {
       element.appendChild(document.createTextNode(chunk + '\n'));

diff --git a/docs/examples/worker-array.html b/docs/examples/worker-array.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Processing an array inside a web worker</title>
     <link rel="stylesheet" href="./resources/jank-meter.css">
-    <script src="./utils.js"></script>
 </head>
 <body>
 
@@ -19,9 +18,11 @@
 <button id="run">Run</button>
 <pre id="log"></pre>
 
-<script>
+<script type="module">
+  import { printArrayToElement } from './utils.js';
+
   const results = document.getElementById('log');
-  const worker = new Worker('./worker-array.js');
+  const worker = new Worker('./worker-array.js', { type: 'module' });
 
   document.getElementById('run').onclick = () => {
     const input = [];

diff --git a/docs/examples/worker-array.js b/docs/examples/worker-array.js
@@ -1,4 +1,4 @@
-importScripts('./process.js');
+import { processArray } from './process.js';
 
 onmessage = (event) => {
   const input = event.data;

diff --git a/docs/examples/worker-stream-transferable.html b/docs/examples/worker-stream-transferable.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Processing an stream inside a web worker with native transferable streams</title>
     <link rel="stylesheet" href="./resources/jank-meter.css">
-    <script src="./utils.js"></script>
 </head>
 <body>
 
@@ -26,9 +25,11 @@
 <button id="run">Run</button>
 <pre id="log"></pre>
 
-<script>
+<script type="module">
+  import { arrayToStream, printToElementStream } from './utils.js';
+
   const results = document.getElementById('log');
-  const worker = new Worker('./worker-stream-transferable.js');
+  const worker = new Worker('./worker-stream-transferable.js', { type: 'module' });
 
   document.getElementById('run').onclick = () => {
     const input = [];

diff --git a/docs/examples/worker-stream-transferable.js b/docs/examples/worker-stream-transferable.js
@@ -1,4 +1,4 @@
-importScripts('./process.js');
+import { processTransform } from './process.js';
 
 onmessage = (event) => {
   // retrieve the transferred input and output streams

diff --git a/docs/examples/worker-stream.html b/docs/examples/worker-stream.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Processing an stream inside a web worker</title>
     <link rel="stylesheet" href="./resources/jank-meter.css">
-    <script src="./utils.js"></script>
     <script src="https://unpkg.com/remote-web-streams@0.1.0/dist/remote-web-streams.js"></script>
 </head>
 <body>
@@ -21,11 +20,13 @@
 <button id="run">Run</button>
 <pre id="log"></pre>
 
-<script>
+<script type="module">
+  import { arrayToStream, printToElementStream } from './utils.js';
+
   const { RemoteReadableStream, RemoteWritableStream } = RemoteWebStreams;
 
   const results = document.getElementById('log');
-  const worker = new Worker('./worker-stream.js');
+  const worker = new Worker('./worker-stream.js', { type: 'module' });
 
   document.getElementById('run').onclick = () => {
     const input = [];

diff --git a/docs/examples/worker-stream.js b/docs/examples/worker-stream.js
@@ -1,6 +1,10 @@
-importScripts('./process.js');
-importScripts('https://unpkg.com/remote-web-streams@0.1.0/dist/remote-web-streams.js');
-const { fromReadablePort, fromWritablePort } = RemoteWebStreams;
+import { processTransform } from './process.js';
+
+// HACK: Use ESM once properly published
+globalThis.module = { exports: {} };
+globalThis.exports = module.exports;
+await import('https://unpkg.com/remote-web-streams@0.1.0/dist/remote-web-streams.js');
+const { fromReadablePort, fromWritablePort } = globalThis.exports;
 
 onmessage = (event) => {
   // create the input and output streams from the transferred ports