recursal/MDN huggingface dataset:
GPUShaderModule: getCompilationInfo() method
============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`getCompilationInfo()`** method of the
 `GPUShaderModule` interface returns a `Promise` that fulfills with a `GPUCompilationInfo` object containing messages generated during the `GPUShaderModule`'s compilation.

Syntax
------


```js
getCompilationInfo()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a `GPUCompilationInfo` object.

`GPUCompilationInfo` contains a `messages` property, which is an array of `GPUCompilationMessage` objects, each one containing the details of an individual compilation message.

Examples
--------

In the example below, we have deliberately left a parenthesis out of a function declaration in our shader code:


```js
const shaders = `
struct VertexOut {
 @builtin(position) position : vec4f,
 @location(0) color : vec4f
}

@vertex
fn vertex\_main(@location(0) position: vec4f,
 @location(1) color: vec4f -> VertexOut
{
 var output : VertexOut;
 output.position = position;
 output.color = color;
 return output;
}

@fragment
fn fragment\_main(fragData: VertexOut) -> @location(0) vec4f
{
 return fragData.color;
}
`;
```


When we compile the shader module, we use `getCompilationInfo()` to grab some information about the resulting error:


```js
async function init() {
  // ...

  const shaderModule = device.createShaderModule({
    code: shaders,
  });

  const shaderInfo = await shaderModule.getCompilationInfo();
  const firstMessage = shaderInfo.messages[0];

  console.log(firstMessage.lineNum); // 9
  console.log(firstMessage.message); // "expected ')' for function declaration"
  console.log(firstMessage.type); // "error"

  // ...
}
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpushadermodule-getcompilationinfo |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
PromiseRejectionEvent: reason property
======================================

 The `PromiseRejectionEvent` **`reason`** read-only
 property is any JavaScript value or `Object` which provides the reason
 passed into `Promise.reject()`. This in theory provides information about
 why the promise was rejected.

Value
-----

 A value or object which provides information you can use to understand why the promise
 was rejected. This could be anything from an error code to an object with text, links,
 and whatever else you might wish to include.

Examples
--------


```js
window.onunhandledrejection = (e) => {
  console.log(e.reason);
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-promiserejectionevent-reason |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Promise`
* `PromiseRejectionEvent`
* `rejectionhandled`
* `unhandledrejection`
PromiseRejectionEvent: PromiseRejectionEvent() constructor
==========================================================

 The **`PromiseRejectionEvent()`**
 constructor returns a new `PromiseRejectionEvent` object, which
 represents events fired when a JavaScript `Promise` is rejected.

 With promise rejection events, it becomes possible to detect and report promises which
 fail and whose failures go unnoticed. It also becomes easier to write a global handler
 for errors.

 There are two types of `PromiseRejectionEvent`:
 `unhandledrejection` is sent by the JavaScript runtime when a promise is
 rejected but the rejection goes unhandled. A `rejectionhandled`event is
 emitted if a promise is rejected but the rejection is caught by a rejection handler.

Syntax
------


```js
new PromiseRejectionEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `rejectionhandled` or `unhandledrejection`.


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`promise`

The `Promise` that was rejected.

`reason`

 Any value or `Object` which represents the reason the promise was
 rejected. This can be anything from a numeric error code to an error
 string to an object which contains detailed information
 describing the situation resulting in the promise being rejected.



### Return value

A new `PromiseRejectionEvent` object configured as specified by the parameters.

Examples
--------

 This example creates a new `unhandledrejection` event for the promise
 `myPromise` with the reason being the string "My house is on fire". The
 `reason` could just as easily be a number, or even an object with detailed
 information including the home address, how serious the fire is, and the phone number of
 an emergency contact who should be notified.


```js
let myRejectionEvent = new PromiseRejectionEvent("unhandledrejection", {
  promise: myPromise,
  reason: "My house is on fire",
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # unhandled-promise-rejections:dom-event-constructor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using promises
* `Promise`
* `PromiseRejectionEvent`
PromiseRejectionEvent: promise property
=======================================

 The `PromiseRejectionEvent` interface's
 **`promise`** read-only property indicates the JavaScript
 `Promise` which was rejected. You can examine the event's
 `PromiseRejectionEvent.reason` property to learn why the promise was
 rejected.

Value
-----

 The JavaScript `Promise` which was rejected, and whose rejection went
 unhandled.

Examples
--------

 This example listens for unhandled promises and, if the
 `reason` is an object with a
 `code` field containing the text "Module not ready", it sets up an idle
 callback that will retry the task that failed to execute correctly.

`event.preventDefault()` is called to indicate that the promise has now
 been handled.


```js
window.onunhandledrejection = (event) => {
  if (event.reason?.code === "Module not ready") {
    requestIdleCallback((deadline) => {
      loadModule(event.reason.moduleName).then(performStartup);
    });
    event.preventDefault();
  }
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-promiserejectionevent-promise |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Promise rejection events
* `Promise`
* `PromiseRejectionEvent`
* `rejectionhandled`
* `unhandledrejection`
ServiceWorkerContainer: getRegistration() method
================================================

 The **`getRegistration()`** method of the
 `ServiceWorkerContainer` interface gets a
 `ServiceWorkerRegistration` object whose scope URL matches the provided
 client URL. The method returns a `Promise` that resolves to
 a `ServiceWorkerRegistration` or `undefined`.

Syntax
------


```js
getRegistration()
getRegistration(clientURL)
```

### Parameters

`clientURL` Optional

The registration whose scope matches this URL will be returned. Relative URLs are resolved with the current client as the base. If this parameter is not provided, the current client's URL will be used by default.

### Return value

 A `Promise` that resolves to a `ServiceWorkerRegistration`
 object or `undefined`.

Examples
--------


```js
navigator.serviceWorker.getRegistration("/app").then((registration) => {
  if (registration) {
    document.querySelector("#status").textContent =
      "ServiceWorkerRegistration found.";
  }
});
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # navigator-service-worker-getRegistration |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: controller property
===========================================

 The **`controller`** read-only
 property of the `ServiceWorkerContainer` interface returns a
 `ServiceWorker` object if its state is `activating` or
 `activated` (the same object returned by
 `ServiceWorkerRegistration.active`). This property returns
 `null` if the request is a force refresh (*Shift* + refresh) or if
 there is no active worker.

Value
-----

A `ServiceWorker` object.

Examples
--------


```js
if ("serviceWorker" in navigator) {
  // Do a one-off check to see if a service worker's in control.
  if (navigator.serviceWorker.controller) {
    console.log(
      `This page is currently controlled by: ${navigator.serviceWorker.controller}`,
    );
  } else {
    console.log("This page is not currently controlled by a service worker.");
  }
} else {
  console.log("Service workers are not supported.");
}
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # navigator-service-worker-controller |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: message event
=====================================

The **`message`** event is used in a page controlled by a service worker to receive messages from the service worker.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

Event type
----------

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

*This interface also inherits properties from its parent, `Event`.*

`MessageEvent.data` Read only 

The data sent by the message emitter.

`MessageEvent.origin` Read only 

A string representing the origin of the message emitter.

`MessageEvent.lastEventId` Read only 

A string representing a unique ID for the event.

`MessageEvent.source` Read only 

A `MessageEventSource` (which can be a WindowProxy, `MessagePort`, or `ServiceWorker` object) representing the message emitter.

`MessageEvent.ports` Read only 

An array of `MessagePort` objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

Examples
--------

In this example the service worker get the client's ID from a `fetch` event and then sends it a message using `Client.postMessage`:


```js
// service-worker.js
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage("Hi client!");
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});
```


The client can receive the message by listening to the `message` event:


```js
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});
```


Alternatively, the client can receive the message with the `onmessage` event handler:


```js
// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # dom-serviceworkercontainer-onmessage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers
ServiceWorkerContainer: error event
===================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `error` event fires when an error occurs in the service worker.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------


```js
navigator.serviceWorker.onerror = (errorevent) => {
  console.error(`received error message: ${errorevent.message}`);
};
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: ready property
======================================

 The **`ready`** read-only property of
 the `ServiceWorkerContainer` interface provides a way of delaying code
 execution until a service worker is active. It returns a `Promise` that
 will never reject, and which waits indefinitely until
 the `ServiceWorkerRegistration` associated with the current page has
 an `active` worker. Once that
 condition is met, it resolves with
 the `ServiceWorkerRegistration`.

Value
-----

 A `Promise` that will never reject, and which may eventually resolve with a
 `ServiceWorkerRegistration`.

Examples
--------


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.ready.then((registration) => {
    console.log(`A service worker is active: ${registration.active}`);

    // At this point, you can call methods that require an active
    // service worker, like registration.pushManager.subscribe()
  });
} else {
  console.error("Service workers are not supported.");
}
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # navigator-service-worker-ready |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: controllerchange event
==============================================

The **`controllerchange`** event of the `ServiceWorkerContainer` interface fires when the document's associated `ServiceWorkerRegistration` acquires a new `active` worker.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("controllerchange", (event) => {});

oncontrollerchange = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------


```js
navigator.serviceWorker.addEventListener("controllerchange", () => {
  console.log("The controller of current browsing context has changed.");
});
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # dom-serviceworkercontainer-oncontrollerchange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: getRegistrations() method
=================================================

 The **`getRegistrations()`** method of the
 `ServiceWorkerContainer` interface gets all
 `ServiceWorkerRegistration`s associated with a
 `ServiceWorkerContainer`, in an array. The method returns a
 `Promise` that resolves to an array of
 `ServiceWorkerRegistration`.

Syntax
------


```js
getRegistrations()
```

### Parameters

None.

### Return value

 A `Promise` that resolves to an array of
 `ServiceWorkerRegistration` objects.

Examples
--------


```js
navigator.serviceWorker.getRegistrations().then((registrations) => {
  document.querySelector("#status").textContent =
    "ServiceWorkerRegistrations found.";
});
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # navigator-service-worker-getRegistrations |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerContainer: messageerror event
==========================================

The **`messageerror`** event is fired to the `ServiceWorkerContainer` when an incoming message sent to the associated worker can't be deserialized.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};
```

Event type
----------

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

*This interface also inherits properties from its parent, `Event`.*

`MessageEvent.data` Read only 

The data sent by the message emitter.

`MessageEvent.origin` Read only 

A string representing the origin of the message emitter.

`MessageEvent.lastEventId` Read only 

A string representing a unique ID for the event.

`MessageEvent.source` Read only 

A `MessageEventSource` (which can be a WindowProxy, `MessagePort`, or `ServiceWorker` object) representing the message emitter.

`MessageEvent.ports` Read only 

An array of `MessagePort` objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

Examples
--------

In this example the service worker get the client's ID from a `fetch` event and then sends it a message using `Client.postMessage`:


```js
// service-worker.js
async function messageClient(clientId) {
  const client = await self.clients.get(clientId);
  client.postMessage("Hi client!");
}

self.addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});
```


The service worker can listen for the message deserialization error by listening to the `messageerror` event:


```js
// main.js
navigator.serviceWorker.addEventListener("messageerror", (event) => {
  console.error("Receive message from service worker failed!");
});
```


Alternatively, the script can listen for the message deserialization error using `onmessageerror`:


```js
// main.js
navigator.serviceWorker.onmessageerror = (event) => {
  console.error("Receive message from service worker failed!");
};
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-onmessageerror |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `message`
* `Client.postMessage()`
* Using Service Workers
* Service workers basic code example
* Using Web Workers
ServiceWorkerContainer: startMessages() method
==============================================

 The **`startMessages()`** method of
 the `ServiceWorkerContainer` interface explicitly starts the flow of
 messages being dispatched from a service worker to pages under its control (e.g. sent
 via `Client.postMessage()`). This can be used to react to sent messages
 earlier, even before that page's content has finished loading.

Explanation
-----------

 By default, all messages sent from a page's controlling service worker to the page
 (using `Client.postMessage()`) are queued while the page is loading, and
 get dispatched once the page's HTML document has been loaded and parsed (i.e. after the
 `DOMContentLoaded` event fires). It's possible to start dispatching these
 messages earlier by calling `ServiceWorkerContainer.startMessages()`, for
 example if you've invoked a message handler using
 `EventTarget.addEventListener()` before the page has finished loading, but
 want to start processing the messages right away.


**Note:** The messages start being sent automatically when setting the
 handler directly using `onmessage`. In this you
 don't need `startMessages()`.


Syntax
------


```js
startMessages()
```

### Parameters

None.

### Return value

`undefined`.

Examples
--------


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js").then(() => {
    console.log("Service Worker Registered");
  });
}

// …

navigator.serviceWorker.addEventListener("message", (e) => {
  // …
});

navigator.serviceWorker.startMessages();
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # navigator-service-worker-startMessages |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DragEvent: DragEvent() constructor
==================================

This constructor is used to create a synthetic `DragEvent` object.

 Although this interface has a constructor, it is not possible to create a
 useful `DataTransfer` object from script, since `DataTransfer`
 objects have a processing and security model that is coordinated by the browser during
 drag-and-drops.

 This interface inherits properties from `MouseEvent` and
 `Event`.

Syntax
------


```js
new DragEvent(type)
new DragEvent(type, dragEventInit)
```

### Parameters

`type`

A string representing the name of the event (see DragEvent event types).

`eventInitDict` Optional

An object containing the following properties:

`dataTransfer` Optional

A `DataTransfer`. Defaults to `null`.


Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-dragevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DragEvent: dataTransfer property
================================

 The **`DragEvent.dataTransfer`** read-only property holds the drag
 operation's data (as a `DataTransfer` object).

Value
-----

A `DataTransfer` object which contains the `drag event's data`.

Examples
--------

 This example illustrates accessing the drag and drop data within the
 `dragend` event handler.


```js
function processData(d) {
  // Process the data …
}

dragTarget.addEventListener(
  "dragend",
  (ev) => {
    // Call the drag and drop data processor
    if (ev.dataTransfer !== null) processData(ev.dataTransfer);
  },
  false,
);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-dragevent-datatransfer-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AudioListener: positionX property
=================================

The `positionX` read-only property of the `AudioListener` interface is an `AudioParam` representing the x position of the listener in 3D cartesian space.

**Note:** The parameter is *a-rate* when used with a `PannerNode` whose `PannerNode` is set to equalpower, or *k-rate* otherwise.

Value
-----

An `AudioParam`. Its default value is 0, and it can range between positive and negative infinity.

Examples
--------

See `BaseAudioContext.createPanner()` for example code.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-audiolistener-positionx |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API