WebWorker | Based on the Workerman framework

As in the question Why do I need a polyfill with Typescript?, TypeScript doesn't automatically provide backwards-compatibility implementations ("polyfills"). Consequently, the target tsconfig does less than you think it would: It only rewrites syntax like arrow functions and generators, not libraries like Promise. In fact, the only reason you can resolve Promise.allSettled in the first place is that you've specifically listed "ES2020.Promise" in your lib list, which tells TypeScript that in your environment you can assume you have access to ES2020 Promises (specifically Promise.allSettled).

From those lib docs, emphasis mine:

You may want to change these [lib entries] for a few reasons:

• Your program doesn’t run in a browser, so you don’t want the "dom" type definitions
• Your runtime platform provides certain JavaScript API objects (maybe through polyfills), but doesn’t yet support the full syntax of a given ECMAScript version
• You have polyfills or native implementations for some, but not all, of a higher level ECMAScript version

As in the question Promise.allSettled in babel ES6 implementation, you have several options to provide a polyfill yourself, but a notable one is es.promise.all-settled.js in core-js. You can integrate those into your Webpack build using the polyfills entry point pointing to a short polyfill-import-only JS file, though the suggestion to use babel-polyfill has been deprecated in favor of core-js/stable.

You would need to import or require one of these:

• core-js/stable/promise/all-settled
• promise.allsettled
• ts-polyfill/lib/es2020-promise (uses core-js anyway)

After the comment from J-007, I added these lines below the previous import lines:

It's providing type information for the built-in DOMPoint class provided by the browser.

Why are they declaring an uppercase variable the same name as the interface, with a different structure?

The interface defines what instances of DOMPoint look like. The declare global var DOMPoint tells TypeScript that a global exists (provided by the browser) that is a function that creates DOMPoint instances (new) and a fromPoint static method.

This mimics what TypeScript does with class X { }, where it both creates a type (X) for what instances of X will look like, and a constructor function (X) which is a runtime value (not just a type).

And in the DOMQuad when they reference DOMPoint, are they referencing the var or the interface?

The interface.

What is the purpose of the var?

Purely to tell TypeScript it exists. It doesn't create it (the browser does), it's just so TypeScript knows that using DOMPoint is valid, it's a global that exists with the given signature.

I couldn't make it work while preserving the import.meta.url syntax with Jest which requires Node to be run with the --experimental-vm-modules flag.

I noticed that I could run my test using a classic ESM config as long as the node flag wasn't there.

So I resorted to transforming the import.meta.url syntax back to CommonJS in my test config using this babel plugin

I solved this problem which is come in production.😊

from ref https://docs.mapbox.com/mapbox-gl-js/guides/install/#:~:text=OR-,defaults%2C%20not%20ie%2011,-This%20can%20be

just changed my package.json browserslist.production field.

this

So, I thought I will die, but then I accidentally found that function: .toNonIndexed().

For the benefit of those who may be confronting this same issue, here is the solution I eventually implemented:

=======================

My solution:
This solution is based on the fact that the gamepad's time_stamp attribute only changes when something happens.  (i.e. A button was pressed or a joystick axis was moved,)

1. Keep track of the gamepad's time_stamp attribute and capture it on the initial gamepad connected event.
2. Provide a "gateway" condition that surrounds the routine that actually sends the data to the receiving device.

I implemented this in two steps as noted above:

First:
When the gamepad connects, I immediately capture the time_stamp attribute and store it in a variable (old_time).

In order for Shared Array Buffer support to be enabled, your web page needs to be in a secure context. To do this, you need your server to give the following headers: Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp. You can read more about it on MDN

Changing the header on the server is the recommended way, but if you do not have the ability to manage headers on the server at all, then you can modify them through Service Workers. This blogpost describes enabling SharedArrayBuffer via header modification in ServiceWorker. It works in the following order:

1. When the page is loaded for the first time, a Service worker is registered
2. The page is reloaded
3. SharedArrayBuffer becomes available because ServiceWorker controls all CORS headers for all requests

Service Worker modifies all requests by adding CORS/COEP headers (The example is taken from the mentioned blogpost):

It's worth measuring and comparing performance of various techniques. The worker could use SharedArrayBuffer if supported in your target browsers (not exemplified below), otherwise Transferrable objects can be used with postMessage(). TextEncoder creates ArrayBuffers from strings.

Individual strings can be transferred as they are encoded: