Add Module Type Structure

Author: nojaf

docs/content/docs/contributing/api-modelling.mdx

@@ -1,7 +1,7 @@
 ---
 title: API Modelling
 description: Learn more about the API modelling process of @rescript/webapi.
-slug: "04-api-modelling"
+slug: "05-api-modelling"
 ---
 
 import { Aside, Code, Icon } from "@astrojs/starlight/components";

docs/content/docs/contributing/module-structure.mdx renamed to docs/content/docs/contributing/api-module-structure.mdx

@@ -1,7 +1,7 @@
 ---
-title: Module Structure
-description: Learn more about the module structure of @rescript/webapi.
-slug: "02-module-structure"
+title: API Module Structure
+description: Learn more about the API module structure of @rescript/webapi.
+slug: "02-api-module-structure"
 ---
 
 import { Aside } from "@astrojs/starlight/components";

docs/content/docs/contributing/code-generation.mdx

@@ -1,7 +1,7 @@
 ---
 title: Code Generation
 description: Learn more about the code generation process for @rescript/webapi.
-slug: "03-code-generation"
+slug: "04-code-generation"
 ---
 
 The original bindings were generated using a modified version of [TypeScript-DOM-lib-generator](https://github.com/microsoft/TypeScript-DOM-lib-generator).

docs/content/docs/contributing/documentation.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Documentation"
 description: Learn more about the relevance of adding documentation to @rescript/webapi.
-slug: "06-documentation"
+slug: "07-documentation"
 ---
 
 After the bindings are generated, all you got was a link to the MDN documentation.  

docs/content/docs/contributing/module-type-structure.mdx

@@ -0,0 +1,86 @@
+---
+title: Module Type Structure
+description: Learn more about the module structure of @rescript/webapi.
+slug: "03-module-type-structure"
+---
+
+import { Aside, FileTree, Code } from "@astrojs/starlight/components";
+
+Every interface in a Web API module can potentially contain methods. These methods are modeled in a separate module named after the interface.
+
+The primary reason for this separation is to handle method overloads.
+As explained in the [Design Philosophy](../design-philosophy) section, ReScript does not permit records to define the same properties more than once.
+Therefore, methods with overloads cannot be modeled within the same record type.
+
+## Bindings
+
+Another advantage of having a separate file is that these bindings can utilize all types defined in the API module.
+Under normal circumstances, the type module only contains `@send` bindings where the type is the first parameter.
+
+<FileTree>
+
+- DOMAPI
+  - HTMLButtonElement.res
+
+</FileTree>
+
+```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"
+```
+
+## Inheritance
+
+When an interface inherits from another interface, the base interface methods can be [included](https://rescript-lang.org/syntax-lookup#include) into the inheriting interface.  
+All methods from [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#instance_methods) should also be available on [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement#instance_methods).
+
+export const htmlElementModule = `
+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 })
+`;
+
+<Code
+  code={htmlElementModule}
+  title="DOMAPI/HTMLElement.res"
+  lang="ReScript"
+></Code>
+
+export const buttonModule = `
+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"
+`;
+
+<Code
+  code={buttonModule}
+  title="DOMAPI/HTMLButtonElement.res"
+  lang="ReScript"
+></Code>

docs/content/docs/contributing/testing.mdx

@@ -1,7 +1,7 @@
 ---
 title: Testing
 description: Learn more about testing the bindings for @rescript/webapi.
-slug: "05-testing"
+slug: "06-testing"
 ---
 
 import { Aside, FileTree } from "@astrojs/starlight/components";