### Install @rescript/webapi using npm or bun

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/index.mdx

Installs the experimental version of the @rescript/webapi package using either npm or bun.

```shell
npm i @rescript/webapi@experimental
```

```shell
bun i @rescript/webapi@experimental
```

--------------------------------

### Initial Project Build

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/getting-started.mdx

Installs project dependencies using npm and compiles the ReScript bindings. This command is essential for setting up the project locally before making any changes or running tests.

```shell
npm install && npm run build
```

--------------------------------

### ReScript WebAPI Usage Example

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/index.mdx

Demonstrates how to access browser window.location properties and methods using ReScript bindings, assuming the '-open WebAPI.Global' flag is set.

```ReScript
// Note that this only works when you added the -open WebAPI.Global bsc flag.
let location = window.location

// Access properties using `.`
let href = location.href

// Invoke methods using the `->TypeModule.method`
location->Location.reload

```

```js
let location = window.location;

let href = location.href;

location.reload();

export {
  location,
  href,
}

```

--------------------------------

### Configure rescript.json for @rescript/webapi

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/index.mdx

Adds the @rescript/webapi package to the bs-dependencies and includes a necessary bsc flag for global access to WebAPI modules in your ReScript project configuration.

```json
{
  "bs-dependencies": [
    "@rescript/webapi"
  ],
  "bsc-flags": [
    "-open WebAPI.Global"
  ]
}
```

--------------------------------

### Install @rescript/webapi

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/README.md

Installs the experimental version of the @rescript/webapi package using npm.

```shell
npm i @rescript/webapi@experimental
```

--------------------------------

### Install Dependencies - npm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/README.md

Installs the necessary packages for the project using npm.

```sh
npm install
```

--------------------------------

### Documenting window.fetch with ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/documentation.mdx

This snippet demonstrates how to document the `window.fetch` function in ReScript, including its signature, a key description, example usage, and a link to MDN documentation.

```ReScript
/*
`fetch(string, init)`

Starts the process of fetching a resource from the network,
returning a promise that is fulfilled once the response is available.

```rescript
window->Window.fetch("https://rescript-lang.org")
```

[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Window/fetch)
*/
@send
external fetch: (window, string, ~init: requestInit=?)
  => promise<response> = "fetch"
```

--------------------------------

### Install @types/audioworklet with pnpm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/audioworklet.md

Installs the @types/audioworklet package as a development dependency using pnpm.

```bash
pnpm add @types/audioworklet --dev
```

--------------------------------

### Add Upstream Git Remote

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/getting-started.mdx

Adds the original repository as a remote named 'upstream'. This is useful for managing forks and keeping your local copy updated with changes from the main project. It's a one-time setup command.

```shell
git remote add upstream https://github.com/rescript-lang/experimental-rescript-webapi.git
```

--------------------------------

### Install @types/audioworklet with yarn

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/audioworklet.md

Installs the @types/audioworklet package as a development dependency using yarn.

```bash
yarn add @types/audioworklet --dev
```

--------------------------------

### Install @types/audioworklet with npm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/audioworklet.md

Installs the @types/audioworklet package as a development dependency using npm.

```bash
npm install @types/audioworklet --save-dev
```

--------------------------------

### Install @types/serviceworker with pnpm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/serviceworker.md

Installs the @types/serviceworker package as a development dependency using pnpm.

```bash
pnpm add @types/serviceworker --dev
```

--------------------------------

### Update Git Fork

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/getting-started.mdx

Updates your local main branch with the latest changes from the upstream repository, cleans untracked files, and pushes the updates to your remote fork. This ensures your contributions are based on the most recent codebase.

```shell
git checkout main
git clean -xdf
git fetch upstream
git rebase upstream/main
git push
```

```shell
git checkout main && git clean -xdf && git fetch upstream && git rebase upstream/main && git push
```

--------------------------------

### Install @types/serviceworker with npm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/serviceworker.md

Installs the @types/serviceworker package as a development dependency using npm.

```bash
npm install @types/serviceworker --save-dev
```

--------------------------------

### Install @types/serviceworker with yarn

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/serviceworker.md

Installs the @types/serviceworker package as a development dependency using yarn.

```bash
yarn add @types/serviceworker --dev
```

--------------------------------

### Install @typescript/lib-dom with pnpm, npm, or yarn

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/web.md

Installs the @typescript/lib-dom package, which replaces the default DOM lib, using different package managers. This is the recommended approach for TypeScript 4.5+.

```sh
pnpm add @typescript/lib-dom@npm:@types/web --save-dev
```

```sh
npm install @typescript/lib-dom@npm:@types/web --save-dev
```

```sh
yarn add @typescript/lib-dom@npm:@types/web --dev
```

--------------------------------

### Install @types/web for TypeScript 4.4 and below

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/web.md

Installs the @types/web package, which is necessary for older TypeScript versions (4.4 and below). It requires manual configuration in tsconfig.json.

```sh
npm install @types/web --save-dev
```

```sh
yarn add @types/web --dev
```

```sh
pnpm add @types/web --dev
```

--------------------------------

### tsconfig.json configuration (with lib)

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/audioworklet.md

Example of how to configure tsconfig.json by removing the 'dom' lib when 'lib' is already defined.

```json
{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["es2017", "dom"]
  }
}
```

--------------------------------

### Install @types/sharedworker

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/sharedworker.md

Installs the @types/sharedworker package as a development dependency using npm, yarn, or pnpm.

```bash
npm install @types/sharedworker --save-dev
```

```bash
yarn add @types/sharedworker --dev
```

```bash
pnpm add @types/sharedworker --dev
```

--------------------------------

### Install @types/webworker for TypeScript 4.5+

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/webworker.md

Installs the '@types/webworker' package as a development dependency for TypeScript versions 4.5 and above, utilizing lib replacement. This command ensures the correct type definitions are available for Web Worker environments.

```sh
pnpm add @typescript/lib-webworker@npm:@types/webworker --save-dev
npm install @typescript/lib-webworker@npm:@types/webworker --save-dev
yarn add @typescript/lib-webworker@npm:@types/webworker --dev
```

--------------------------------

### tsconfig.json configuration (without lib)

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/audioworklet.md

Example of how to configure tsconfig.json by adding 'lib' when it's not already defined. The specific lib value should match the 'target' setting.

```json
{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["es2017"]
  }
}
```

--------------------------------

### Install @types/webworker for TypeScript 4.4 and below

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/webworker.md

Installs the '@types/webworker' package as a development dependency for TypeScript versions 4.4 and below. This is the initial step before configuring 'tsconfig.json' to use these types.

```sh
npm install @types/webworker --save-dev
yarn add @types/webworker --dev
pnpm add @types/webworker --save-dev
```

--------------------------------

### Generate CHANGELOG for @types/web

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/README.md

This command generates a changelog for the @types/web package, detailing changes between specified versions. It requires Node.js and npm to be installed and may need a recent pull of git tags.

```sh
npm run ts-changelog -- @types/web 0.0.2 0.0.23
```

--------------------------------

### ReScript Auxiliary Type for Event Listener Options

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-module-structure.mdx

Provides an example of an auxiliary type in ReScript, specifically modeling `eventListenerOptions`. It shows how to create optional fields and use record spreading to extend existing types, relevant for event handling in Web APIs.

```ReScript
type eventListenerOptions = {mutable capture?: bool}
```

--------------------------------

### ReScript Interface Inheritance (Spread)

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-module-structure.mdx

Illustrates how ReScript interfaces (record types) model Web API interfaces, including inheritance through record spreading. It shows a basic example of spreading an existing `htmlElement` into a new `htmlSpanElement` type.

```ReScript
type htmlSpanElement = {
  ...htmlElement
}
```

--------------------------------

### Unsafe Type Conversion in ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/philosophy.mdx

Illustrates the use of `Prelude.unsafeConversation` in ReScript for potentially unsafe type conversions. This example casts an `element` to an `htmlDivElement`, cautioning that the type system cannot guarantee the safety of this operation.

```rescript
open WebAPI

let element: element = document->Document.createElement( ~localName = "div")
// This is potentially unsafe, as the type system cannot guarantee the conversion
let divElement: htmlDivElement = element->Prelude.unsafeConversation
```

--------------------------------

### Improve ReScript Bindings for window.fetch

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/code-generation.mdx

Demonstrates manual improvements to ReScript bindings for the `window.fetch` function. It shows how to rename functions and adjust argument handling for better ReScript ergonomics. The original generated bindings and the improved versions are presented.

```ReScript
/**
[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Window/fetch)
*/
@send
external fetch: (window, ~input: request, ~init: requestInit=?) => promise<response> = "fetch"

/**
[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Window/fetch)
*/
@send
external fetch2: (window, ~input: string, ~init: requestInit=?) => promise<response> = "fetch"

```

```ReScript
/** TODO: add better docs */
@send
external fetch: (window, string, ~init: requestInit=?) => promise<response> = "fetch"

/** TODO: add better docs */
@send
external fetchWithRequest: (window, request, ~init: requestInit=?) => promise<response> = "fetch"

```

--------------------------------

### Run Tests

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/testing.mdx

Execute the test suite to verify the @rescript/webapi bindings. This command checks for regressions and ensures correct JavaScript output.

```shell
git add tests
npm test
```

--------------------------------

### Run Tests - npm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/README.md

Runs the test suite for the project using npm.

```sh
npm run test
```

--------------------------------

### Create HTML Element with ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/philosophy.mdx

Demonstrates creating an HTML element ('div') using ReScript's WebAPI bindings. It utilizes `Global` and `DOMAPI` modules and the `Document.createElement` function.

```rescript
open WebAPI.Global
open WebAPI.DOMAPI

let myElement: element = document->Document.createElement( ~localName = "div")
```

--------------------------------

### Configure rescript.json for @rescript/webapi

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/README.md

Adds the @rescript/webapi dependency and opens the WebAPI.Global module in the rescript.json configuration file. This enables the use of WebAPI functionalities in the project.

```json
{
  "bs-dependencies": [
+    "@rescript/webapi"
  ],
  "bsc-flags": [
+    "-open WebAPI.Global"
  ]
}
```

--------------------------------

### Run TypeScript-DOM-lib-generator Build

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/code-generation.mdx

Provides the command to execute the build process for the TypeScript-DOM-lib-generator after modifying its configuration, such as updating `emitter.ts`.

```shell
npm run build

```

--------------------------------

### Convert Element to Node using ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/philosophy.mdx

Shows how to safely convert a ReScript `element` type to a `node` type using the `Element.asNode` helper function provided by the WebAPI bindings.

```rescript
open WebAPI

let element: element = document->Document.createElement( ~localName = "div")
let node: node = element->Element.asNode
```

--------------------------------

### Build .d.ts Files - npm

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/README.md

Executes the build script to generate the .d.ts files.

```sh
npm run build
```

--------------------------------

### Create helper module for fillStyle in ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-modelling.mdx

Creates a helper module in ReScript to interact with the fillStyle property of the CanvasRenderingContext2D interface. It includes functions to convert from string, CanvasGradient, and CanvasPattern to fillStyle, as well as a decode function to determine the actual type of the fillStyle property.

```ReScript
open Prelude
open CanvasAPI
open DOMAPI

external fromString: string => fillStyle = "%identity"
external fromCanvasGradient: canvasGradient => fillStyle = "%identity"
external fromCanvasPattern: canvasGradient => fillStyle = "%identity"

type decoded =
| String(string)
| CanvasGradient(canvasGradient)
| CanvasPattern(canvasPattern)

let decode = (t: fillStyle): decoded => {
if CanvasGradient.isInstanceOf(t) {
CanvasGradient(unsafeConversation(t))
} else if CanvasPattern.isInstanceOf(t) {
CanvasPattern(unsafeConversation(t))
} else {
String(unsafeConversation(t))
}
}
```

--------------------------------

### ReScript Advanced Auxiliary Type with Options

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-module-structure.mdx

Demonstrates a more complex auxiliary type, `addEventListenerOptions`, which extends `eventListenerOptions` and includes additional optional properties like `passive`, `once`, and `signal`. This pattern is common for configuring event listeners.

```ReScript
type addEventListenerOptions = {
  ...eventListenerOptions,
  mutable passive?: bool,
  mutable once?: bool,
  mutable signal?: abortSignal,
}
```

--------------------------------

### Define HTMLElement methods and include them - ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/module-type-structure.mdx

This ReScript code defines a module `Impl` that takes a type `T` with a field `t`. It then defines the `focus` method for `HTMLElement` within this module using `@send`. Finally, it includes this `Impl` module, aliasing `T.t` to `htmlElement`.

```ReScript
open DOMAPI

// A concrete type for `T.t` is passed later using the `include` keyword.
module Impl = (T: { type t }) => {

/**
[Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus)
*/
@send
external focus: (T.t, ~options: focusOptions=?) => unit = "focus"

}

include Impl({ type t = htmlElement })
```

--------------------------------

### Use fillStyle helper module in ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-modelling.mdx

Demonstrates how to use the fillStyle helper module in ReScript to read and write the fillStyle property of a CanvasRenderingContext2D object. It shows how to set the fillStyle to a string value and how to decode the current fillStyle to determine its type.

```ReScript
let ctx = myCanvas->HTMLCanvasElement.getContext_2D

// Write
ctx.fillStyle = FillStyle.fromString("red")

// Read
switch ctx.fillStyle->FillStyle.decode {
| FillStyle.String(color) => Console.log(`Color: ${color}`)
| FillStyle.CanvasGradient(_) => Console.log("CanvasGradient")
| FillStyle.CanvasPattern(_) => Console.log("CanvasPattern")
}
```

--------------------------------

### Add New API Bindings using TypeScript-DOM-lib-generator

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/code-generation.mdx

Illustrates how to extend ReScript web API bindings by adding new interfaces or types to the `interfaceHierarchy` in `emitter.ts`. This allows for sandboxed code generation of bindings for APIs not initially covered.

```typescript
interfaceHierarchy = [
  {
    name: "Temp",
    entries: [
      enums(["WebGLPowerPreference"]),
      dictionaries([
        "ImageBitmapRenderingContextSettings",
        "WebGLContextAttributes",
      ]),
    ],
    opens: [],
  },
];

```

--------------------------------

### Handle addEventListener with overloads in ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-modelling.mdx

Demonstrates how to model the JavaScript addEventListener function in ReScript using function overloading to handle different parameter types. It merges similar overloads and uses a fixed argument to represent a boolean parameter.

```ReScript
@send
external addEventListener: (
  htmlButtonElement,
  eventType,
  eventListener<'event>,
  ~options: addEventListenerOptions=?,
) => unit = "addEventListener"
```

```ReScript
@send
external addEventListenerWithCapture: (
  htmlButtonElement,
  ~type_: eventType,
  ~callback: eventListener<'event>,
  @as(json`true`) _,
) => unit = "addEventListener"
```

--------------------------------

### Configure tsconfig.json with 'lib'

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/serviceworker.md

Configures tsconfig.json by removing the 'dom' library definition to prevent conflicts with Service Worker types.

```json
{
  "compilerOptions": {
    "lib": ["es2017"] 
  }
}
```

--------------------------------

### Define HTMLButtonElement bindings including HTMLElement - ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/module-type-structure.mdx

This ReScript code defines bindings for `HTMLButtonElement`. It first includes all methods from `HTMLElement` using `HTMLElement.Impl`. It then adds the `checkValidity` method specific to `HTMLButtonElement`, also using the `@send` attribute.

```ReScript
open DOMAPI

// Include all the methods from HTMLElement
include HTMLElement.Impl({ type t = htmlButtonElement })

// Add additional methods specific to HTMLButtonElement:

/**
Returns whether a form will validate when it is submitted, without having to submit it.
[Read more on MDN](
  https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/checkValidity)
*/
@send
external checkValidity: htmlButtonElement => bool = "checkValidity"
```

--------------------------------

### ReScript Recursive Type with Property Duplication

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-module-structure.mdx

Shows the ReScript approach to handling recursive types where direct property spreading is not possible. In such cases, base properties are duplicated to avoid circular references, as demonstrated with `node` and `element` types.

```ReScript
type rec node = {
  nodeName: string
  // ... more properties
}

and element = {
  // duplicated property from node
  nodeName: string
  // ... more properties
}
```

--------------------------------

### Configure tsconfig.json with 'lib'

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/deploy/readmes/sharedworker.md

Configures tsconfig.json by removing the 'dom' option from the 'lib' property to prevent accidental inclusion of DOM types, ensuring correct type definitions for Web Workers.

```json
{
  "compilerOptions": {
    "lib": ["es2017", "webworker"]
  }
}
```

--------------------------------

### ReScript Enum Type for Scroll Behavior

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-module-structure.mdx

Demonstrates how ReScript variants are used to model Web API enum types, mapping string aliases to ReScript constructors. This pattern is common for constants used as method arguments or properties.

```ReScript
type scrollBehavior =
  | @as("auto") Auto
  | @as("instant") Instant
  | @as("smooth") Smooth
```

--------------------------------

### Define HTMLButtonElement checkValidity binding - ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/module-type-structure.mdx

This ReScript code defines a binding for the `checkValidity` method on the `HTMLButtonElement` interface. It uses the `@send` attribute to indicate a method call on an object. The binding takes an `htmlButtonElement` as input and returns a boolean.

```ReScript
/**
Returns whether a form will validate when it is submitted, without having to submit it.
[Read more on MDN](
  https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/checkValidity)
*/
@send
external checkValidity: htmlButtonElement => bool = "checkValidity"
```

--------------------------------

### Define fillStyle type in ReScript

Source: https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/docs/content/docs/contributing/api-modelling.mdx

Defines an empty fillStyle type in ReScript to represent the fillStyle property of the CanvasRenderingContext2D interface, which can be a string, CanvasGradient, or CanvasPattern. This requires a helper module for interaction.

```ReScript
type fillStyle

type canvasRenderingContext2D = {
// ... other propeties
mutable fillStyle: fillStyle
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.