From e48a889c6baa71b8d2e624d5af54bc1a40a2367a Mon Sep 17 00:00:00 2001 From: nojaf Date: Wed, 13 Nov 2024 09:45:23 +0100 Subject: [PATCH 1/9] Add small canvas sample --- src/CanvasAPI.res | 372 ++++++++ src/CanvasAPI/CanvasGradient.js | 2 + src/CanvasAPI/CanvasGradient.res | 10 + src/CanvasAPI/CanvasPattern.js | 2 + src/CanvasAPI/CanvasPattern.res | 9 + src/CanvasAPI/ImageBitmapRenderingContext.js | 2 + src/CanvasAPI/ImageBitmapRenderingContext.res | 9 + src/CanvasAPI/OffscreenCanvas.res | 48 +- src/CanvasAPI/Path2D.js | 2 + src/CanvasAPI/Path2D.res | 142 +++ src/DOMAPI.res | 115 +++ src/DOMAPI/CanvasRenderingContext2D.res | 843 ++++++++++++++++++ src/DOMAPI/HTMLCanvasElement.res | 38 +- src/FetchAPI/FormData.res | 8 +- tests/DOMAPI/HTMLCanvasInputElement__tes.js | 24 + tests/DOMAPI/HTMLCanvasInputElement__tes.res | 13 + .../src/build/emitter.ts | 54 +- 17 files changed, 1686 insertions(+), 7 deletions(-) create mode 100644 src/CanvasAPI/CanvasGradient.js create mode 100644 src/CanvasAPI/CanvasGradient.res create mode 100644 src/CanvasAPI/CanvasPattern.js create mode 100644 src/CanvasAPI/CanvasPattern.res create mode 100644 src/CanvasAPI/ImageBitmapRenderingContext.js create mode 100644 src/CanvasAPI/ImageBitmapRenderingContext.res create mode 100644 src/CanvasAPI/Path2D.js create mode 100644 src/CanvasAPI/Path2D.res create mode 100644 src/DOMAPI/CanvasRenderingContext2D.res create mode 100644 tests/DOMAPI/HTMLCanvasInputElement__tes.js create mode 100644 tests/DOMAPI/HTMLCanvasInputElement__tes.res diff --git a/src/CanvasAPI.res b/src/CanvasAPI.res index 7f3c77a..7c80254 100644 --- a/src/CanvasAPI.res +++ b/src/CanvasAPI.res @@ -10,6 +10,108 @@ type offscreenRenderingContextId = | @as("webgl2") Webgl2 | @as("webgpu") Webgpu +type globalCompositeOperation = + | @as("color") Color + | @as("color-burn") ColorBurn + | @as("color-dodge") ColorDodge + | @as("copy") Copy + | @as("darken") Darken + | @as("destination-atop") DestinationAtop + | @as("destination-in") DestinationIn + | @as("destination-out") DestinationOut + | @as("destination-over") DestinationOver + | @as("difference") Difference + | @as("exclusion") Exclusion + | @as("hard-light") HardLight + | @as("hue") Hue + | @as("lighten") Lighten + | @as("lighter") Lighter + | @as("luminosity") Luminosity + | @as("multiply") Multiply + | @as("overlay") Overlay + | @as("saturation") Saturation + | @as("screen") Screen + | @as("soft-light") SoftLight + | @as("source-atop") SourceAtop + | @as("source-in") SourceIn + | @as("source-out") SourceOut + | @as("source-over") SourceOver + | @as("xor") Xor + +type imageSmoothingQuality = + | @as("high") High + | @as("low") Low + | @as("medium") Medium + +type canvasLineCap = + | @as("butt") Butt + | @as("round") Round + | @as("square") Square + +type canvasLineJoin = + | @as("bevel") Bevel + | @as("miter") Miter + | @as("round") Round + +type canvasTextAlign = + | @as("center") Center + | @as("end") End + | @as("left") Left + | @as("right") Right + | @as("start") Start + +type canvasTextBaseline = + | @as("alphabetic") Alphabetic + | @as("bottom") Bottom + | @as("hanging") Hanging + | @as("ideographic") Ideographic + | @as("middle") Middle + | @as("top") Top + +type canvasDirection = + | @as("inherit") Inherit + | @as("ltr") Ltr + | @as("rtl") Rtl + +type canvasFontKerning = + | @as("auto") Auto + | @as("none") None + | @as("normal") Normal + +type canvasFontStretch = + | @as("condensed") Condensed + | @as("expanded") Expanded + | @as("extra-condensed") ExtraCondensed + | @as("extra-expanded") ExtraExpanded + | @as("normal") Normal + | @as("semi-condensed") SemiCondensed + | @as("semi-expanded") SemiExpanded + | @as("ultra-condensed") UltraCondensed + | @as("ultra-expanded") UltraExpanded + +type canvasFontVariantCaps = + | @as("all-petite-caps") AllPetiteCaps + | @as("all-small-caps") AllSmallCaps + | @as("normal") Normal + | @as("petite-caps") PetiteCaps + | @as("small-caps") SmallCaps + | @as("titling-caps") TitlingCaps + | @as("unicase") Unicase + +type canvasTextRendering = + | @as("auto") Auto + | @as("geometricPrecision") GeometricPrecision + | @as("optimizeLegibility") OptimizeLegibility + | @as("optimizeSpeed") OptimizeSpeed + +type predefinedColorSpace = + | @as("display-p3") DisplayP3 + | @as("srgb") Srgb + +type canvasFillRule = + | @as("evenodd") Evenodd + | @as("nonzero") Nonzero + /** [See OffscreenCanvas on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas) */ @@ -47,9 +149,279 @@ type imageBitmap = { height: int, } +/** +[See OffscreenCanvasRenderingContext2D on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvasRenderingContext2D) +*/ +type offscreenCanvasRenderingContext2D = { + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/canvas) + */ + canvas: offscreenCanvas, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalAlpha) + */ + mutable globalAlpha: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) + */ + mutable globalCompositeOperation: globalCompositeOperation, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) + */ + mutable imageSmoothingEnabled: bool, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality) + */ + mutable imageSmoothingQuality: imageSmoothingQuality, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeStyle) + */ + mutable strokeStyle: unknown, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) + */ + mutable fillStyle: unknown, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX) + */ + mutable shadowOffsetX: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY) + */ + mutable shadowOffsetY: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowBlur) + */ + mutable shadowBlur: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowColor) + */ + mutable shadowColor: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter) + */ + mutable filter: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineWidth) + */ + mutable lineWidth: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineCap) + */ + mutable lineCap: canvasLineCap, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineJoin) + */ + mutable lineJoin: canvasLineJoin, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/miterLimit) + */ + mutable miterLimit: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) + */ + mutable lineDashOffset: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/font) + */ + mutable font: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) + */ + mutable textAlign: canvasTextAlign, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textBaseline) + */ + mutable textBaseline: canvasTextBaseline, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/direction) + */ + mutable direction: canvasDirection, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/letterSpacing) + */ + mutable letterSpacing: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontKerning) + */ + mutable fontKerning: canvasFontKerning, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontStretch) + */ + mutable fontStretch: canvasFontStretch, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps) + */ + mutable fontVariantCaps: canvasFontVariantCaps, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textRendering) + */ + mutable textRendering: canvasTextRendering, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/wordSpacing) + */ + mutable wordSpacing: string, +} + +/** +[See ImageBitmapRenderingContext on MDN](https://developer.mozilla.org/docs/Web/API/ImageBitmapRenderingContext) +*/ +type imageBitmapRenderingContext = { + /** + Returns the canvas element that the context is bound to. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/ImageBitmapRenderingContext/canvas) + */ + canvas: unknown, +} + +/** +Provides an interface to the OpenGL ES 2.0 graphics rendering context for the drawing surface of an HTML element. +[See WebGLRenderingContext on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext) +*/ +type webGLRenderingContext = { + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/canvas) + */ + canvas: unknown, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/drawingBufferWidth) + */ + drawingBufferWidth: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/drawingBufferHeight) + */ + drawingBufferHeight: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/drawingBufferColorSpace) + */ + mutable drawingBufferColorSpace: predefinedColorSpace, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGL2RenderingContext/unpackColorSpace) + */ + mutable unpackColorSpace: predefinedColorSpace, +} + +/** +[See WebGL2RenderingContext on MDN](https://developer.mozilla.org/docs/Web/API/WebGL2RenderingContext) +*/ +type webGL2RenderingContext = { + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/canvas) + */ + canvas: unknown, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/drawingBufferWidth) + */ + drawingBufferWidth: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/drawingBufferHeight) + */ + drawingBufferHeight: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGLRenderingContext/drawingBufferColorSpace) + */ + mutable drawingBufferColorSpace: predefinedColorSpace, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/WebGL2RenderingContext/unpackColorSpace) + */ + mutable unpackColorSpace: predefinedColorSpace, +} + +/** +An opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient() or CanvasRenderingContext2D.createRadialGradient(). +[See CanvasGradient on MDN](https://developer.mozilla.org/docs/Web/API/CanvasGradient) +*/ +type canvasGradient = {} + +/** +An opaque object describing a pattern, based on an image, a canvas, or a video, created by the CanvasRenderingContext2D.createPattern() method. +[See CanvasPattern on MDN](https://developer.mozilla.org/docs/Web/API/CanvasPattern) +*/ +type canvasPattern = {} + +/** +This Canvas 2D API interface is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired. +[See Path2D on MDN](https://developer.mozilla.org/docs/Web/API/Path2D) +*/ +type path2D = {} + +/** +The dimensions of a piece of text in the canvas, as created by the CanvasRenderingContext2D.measureText() method. +[See TextMetrics on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics) +*/ +type textMetrics = { + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/width) + */ + width: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxLeft) + */ + actualBoundingBoxLeft: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxRight) + */ + actualBoundingBoxRight: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/fontBoundingBoxAscent) + */ + fontBoundingBoxAscent: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/fontBoundingBoxDescent) + */ + fontBoundingBoxDescent: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxAscent) + */ + actualBoundingBoxAscent: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxDescent) + */ + actualBoundingBoxDescent: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/emHeightAscent) + */ + emHeightAscent: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/emHeightDescent) + */ + emHeightDescent: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/hangingBaseline) + */ + hangingBaseline: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/alphabeticBaseline) + */ + alphabeticBaseline: float, + /** + Returns the measurement described below. + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/TextMetrics/ideographicBaseline) + */ + ideographicBaseline: float, +} + type offscreenRenderingContext = any type imageEncodeOptions = { @as("type") mutable type_?: string, mutable quality?: float, } + +type canvasRenderingContext2DSettings = { + mutable alpha?: bool, + mutable desynchronized?: bool, + mutable colorSpace?: predefinedColorSpace, + mutable willReadFrequently?: bool, +} diff --git a/src/CanvasAPI/CanvasGradient.js b/src/CanvasAPI/CanvasGradient.js new file mode 100644 index 0000000..d856702 --- /dev/null +++ b/src/CanvasAPI/CanvasGradient.js @@ -0,0 +1,2 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE +/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ diff --git a/src/CanvasAPI/CanvasGradient.res b/src/CanvasAPI/CanvasGradient.res new file mode 100644 index 0000000..507ccef --- /dev/null +++ b/src/CanvasAPI/CanvasGradient.res @@ -0,0 +1,10 @@ +open CanvasAPI + +/** +Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end. + +Throws an "IndexSizeError" DOMException if the offset is out of range. Throws a "SyntaxError" DOMException if the color cannot be parsed. +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasGradient/addColorStop) +*/ +@send +external addColorStop: (canvasGradient, ~offset: float, ~color: string) => unit = "addColorStop" diff --git a/src/CanvasAPI/CanvasPattern.js b/src/CanvasAPI/CanvasPattern.js new file mode 100644 index 0000000..d856702 --- /dev/null +++ b/src/CanvasAPI/CanvasPattern.js @@ -0,0 +1,2 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE +/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ diff --git a/src/CanvasAPI/CanvasPattern.res b/src/CanvasAPI/CanvasPattern.res new file mode 100644 index 0000000..89081c0 --- /dev/null +++ b/src/CanvasAPI/CanvasPattern.res @@ -0,0 +1,9 @@ +open DOMAPI +open CanvasAPI + +/** +Sets the transformation matrix that will be used when rendering the pattern during a fill or stroke painting operation. +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasPattern/setTransform) +*/ +@send +external setTransform: (canvasPattern, ~transform: domMatrix2DInit=?) => unit = "setTransform" diff --git a/src/CanvasAPI/ImageBitmapRenderingContext.js b/src/CanvasAPI/ImageBitmapRenderingContext.js new file mode 100644 index 0000000..d856702 --- /dev/null +++ b/src/CanvasAPI/ImageBitmapRenderingContext.js @@ -0,0 +1,2 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE +/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ diff --git a/src/CanvasAPI/ImageBitmapRenderingContext.res b/src/CanvasAPI/ImageBitmapRenderingContext.res new file mode 100644 index 0000000..9e422d2 --- /dev/null +++ b/src/CanvasAPI/ImageBitmapRenderingContext.res @@ -0,0 +1,9 @@ +open CanvasAPI + +/** +Transfers the underlying bitmap data from imageBitmap to context, and the bitmap becomes the contents of the canvas element to which context is bound. +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/ImageBitmapRenderingContext/transferFromImageBitmap) +*/ +@send +external transferFromImageBitmap: (imageBitmapRenderingContext, imageBitmap) => unit = + "transferFromImageBitmap" diff --git a/src/CanvasAPI/OffscreenCanvas.res b/src/CanvasAPI/OffscreenCanvas.res index 99f3a30..ec5a13a 100644 --- a/src/CanvasAPI/OffscreenCanvas.res +++ b/src/CanvasAPI/OffscreenCanvas.res @@ -1,6 +1,5 @@ open EventAPI open CanvasAPI -open DOMAPI open Prelude open FileAPI @@ -103,7 +102,52 @@ external getContext: ( offscreenCanvas, ~contextId: offscreenRenderingContextId, ~options: JSON.t=?, -) => offscreenRenderingContext = "getContext" +) => offscreenCanvasRenderingContext2D = "getContext" + +/** +Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", or "webgl2". options is handled by that API. + +This specification defines the "2d" context below, which is similar but distinct from the "2d" context that is created from a canvas element. The WebGL specifications define the "webgl" and "webgl2" contexts. [WEBGL] + +Returns null if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context). +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) +*/ +@send +external getContext2: ( + offscreenCanvas, + ~contextId: offscreenRenderingContextId, + ~options: JSON.t=?, +) => imageBitmapRenderingContext = "getContext" + +/** +Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", or "webgl2". options is handled by that API. + +This specification defines the "2d" context below, which is similar but distinct from the "2d" context that is created from a canvas element. The WebGL specifications define the "webgl" and "webgl2" contexts. [WEBGL] + +Returns null if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context). +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) +*/ +@send +external getContext3: ( + offscreenCanvas, + ~contextId: offscreenRenderingContextId, + ~options: JSON.t=?, +) => webGLRenderingContext = "getContext" + +/** +Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", or "webgl2". options is handled by that API. + +This specification defines the "2d" context below, which is similar but distinct from the "2d" context that is created from a canvas element. The WebGL specifications define the "webgl" and "webgl2" contexts. [WEBGL] + +Returns null if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context). +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) +*/ +@send +external getContext4: ( + offscreenCanvas, + ~contextId: offscreenRenderingContextId, + ~options: JSON.t=?, +) => webGL2RenderingContext = "getContext" /** Returns a newly created ImageBitmap object with the image in the OffscreenCanvas object. The image in the OffscreenCanvas object is replaced with a new blank image. diff --git a/src/CanvasAPI/Path2D.js b/src/CanvasAPI/Path2D.js new file mode 100644 index 0000000..d856702 --- /dev/null +++ b/src/CanvasAPI/Path2D.js @@ -0,0 +1,2 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE +/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ diff --git a/src/CanvasAPI/Path2D.res b/src/CanvasAPI/Path2D.res new file mode 100644 index 0000000..24d4f89 --- /dev/null +++ b/src/CanvasAPI/Path2D.res @@ -0,0 +1,142 @@ +open CanvasAPI +open DOMAPI + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Path2D) +*/ +@new +external make: (~path: path2D=?) => path2D = "Path2D" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Path2D) +*/ +@new +external make2: (~path: string=?) => path2D = "Path2D" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath) +*/ +@send +external closePath: path2D => unit = "closePath" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo) +*/ +@send +external moveTo: (path2D, ~x: float, ~y: float) => unit = "moveTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo) +*/ +@send +external lineTo: (path2D, ~x: float, ~y: float) => unit = "lineTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo) +*/ +@send +external quadraticCurveTo: (path2D, ~cpx: float, ~cpy: float, ~x: float, ~y: float) => unit = + "quadraticCurveTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo) +*/ +@send +external bezierCurveTo: ( + path2D, + ~cp1x: float, + ~cp1y: float, + ~cp2x: float, + ~cp2y: float, + ~x: float, + ~y: float, +) => unit = "bezierCurveTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arcTo) +*/ +@send +external arcTo: (path2D, ~x1: float, ~y1: float, ~x2: float, ~y2: float, ~radius: float) => unit = + "arcTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rect) +*/ +@send +external rect: (path2D, ~x: float, ~y: float, ~w: float, ~h: float) => unit = "rect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) +*/ +@send +external roundRect: ( + path2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, + ~radii_: array=?, +) => unit = "roundRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) +*/ +@send +external roundRect2: ( + path2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, + ~radii_: array=?, +) => unit = "roundRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) +*/ +@send +external roundRect3: ( + path2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, + ~radii_: array=?, +) => unit = "roundRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc) +*/ +@send +external arc: ( + path2D, + ~x: float, + ~y: float, + ~radius: float, + ~startAngle: float, + ~endAngle: float, + ~counterclockwise: bool=?, +) => unit = "arc" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse) +*/ +@send +external ellipse: ( + path2D, + ~x: float, + ~y: float, + ~radiusX: float, + ~radiusY: float, + ~rotation: float, + ~startAngle: float, + ~endAngle: float, + ~counterclockwise: bool=?, +) => unit = "ellipse" + +/** +Adds to the path the path given by the argument. +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Path2D/addPath) +*/ +@send +external addPath: (path2D, ~path: path2D, ~transform: domMatrix2DInit=?) => unit = "addPath" diff --git a/src/DOMAPI.res b/src/DOMAPI.res index 0780d4b..c85ba50 100644 --- a/src/DOMAPI.res +++ b/src/DOMAPI.res @@ -9354,6 +9354,121 @@ type domPoint = { ...domPointReadOnly, } +/** +The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects. +[See CanvasRenderingContext2D on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D) +*/ +type canvasRenderingContext2D = { + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/canvas) + */ + canvas: htmlCanvasElement, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalAlpha) + */ + mutable globalAlpha: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) + */ + mutable globalCompositeOperation: globalCompositeOperation, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) + */ + mutable imageSmoothingEnabled: bool, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality) + */ + mutable imageSmoothingQuality: imageSmoothingQuality, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeStyle) + */ + mutable strokeStyle: unknown, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) + */ + mutable fillStyle: unknown, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX) + */ + mutable shadowOffsetX: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY) + */ + mutable shadowOffsetY: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowBlur) + */ + mutable shadowBlur: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowColor) + */ + mutable shadowColor: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter) + */ + mutable filter: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineWidth) + */ + mutable lineWidth: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineCap) + */ + mutable lineCap: canvasLineCap, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineJoin) + */ + mutable lineJoin: canvasLineJoin, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/miterLimit) + */ + mutable miterLimit: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) + */ + mutable lineDashOffset: float, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/font) + */ + mutable font: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) + */ + mutable textAlign: canvasTextAlign, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textBaseline) + */ + mutable textBaseline: canvasTextBaseline, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/direction) + */ + mutable direction: canvasDirection, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/letterSpacing) + */ + mutable letterSpacing: string, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontKerning) + */ + mutable fontKerning: canvasFontKerning, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontStretch) + */ + mutable fontStretch: canvasFontStretch, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps) + */ + mutable fontVariantCaps: canvasFontVariantCaps, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textRendering) + */ + mutable textRendering: canvasTextRendering, + /** + [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/wordSpacing) + */ + mutable wordSpacing: string, +} + /** [See Animation on MDN](https://developer.mozilla.org/docs/Web/API/Animation) */ diff --git a/src/DOMAPI/CanvasRenderingContext2D.res b/src/DOMAPI/CanvasRenderingContext2D.res new file mode 100644 index 0000000..94bfbf0 --- /dev/null +++ b/src/DOMAPI/CanvasRenderingContext2D.res @@ -0,0 +1,843 @@ +open DOMAPI +open CanvasAPI + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/save) +*/ +@send +external save: canvasRenderingContext2D => unit = "save" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/restore) +*/ +@send +external restore: canvasRenderingContext2D => unit = "restore" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/reset) +*/ +@send +external reset: canvasRenderingContext2D => unit = "reset" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isContextLost) +*/ +@send +external isContextLost: canvasRenderingContext2D => bool = "isContextLost" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/scale) +*/ +@send +external scale: (canvasRenderingContext2D, ~x: float, ~y: float) => unit = "scale" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rotate) +*/ +@send +external rotate: (canvasRenderingContext2D, float) => unit = "rotate" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/translate) +*/ +@send +external translate: (canvasRenderingContext2D, ~x: float, ~y: float) => unit = "translate" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/transform) +*/ +@send +external transform: ( + canvasRenderingContext2D, + ~a: float, + ~b: float, + ~c: float, + ~d: float, + ~e: float, + ~f: float, +) => unit = "transform" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getTransform) +*/ +@send +external getTransform: canvasRenderingContext2D => domMatrix = "getTransform" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform) +*/ +@send +external setTransform: ( + canvasRenderingContext2D, + ~a: float, + ~b: float, + ~c: float, + ~d: float, + ~e: float, + ~f: float, +) => unit = "setTransform" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform) +*/ +@send +external setTransform2: (canvasRenderingContext2D, ~transform: domMatrix2DInit=?) => unit = + "setTransform" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/resetTransform) +*/ +@send +external resetTransform: canvasRenderingContext2D => unit = "resetTransform" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createLinearGradient) +*/ +@send +external createLinearGradient: ( + canvasRenderingContext2D, + ~x0: float, + ~y0: float, + ~x1: float, + ~y1: float, +) => canvasGradient = "createLinearGradient" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createRadialGradient) +*/ +@send +external createRadialGradient: ( + canvasRenderingContext2D, + ~x0: float, + ~y0: float, + ~r0: float, + ~x1: float, + ~y1: float, + ~r1: float, +) => canvasGradient = "createRadialGradient" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createConicGradient) +*/ +@send +external createConicGradient: ( + canvasRenderingContext2D, + ~startAngle: float, + ~x: float, + ~y: float, +) => canvasGradient = "createConicGradient" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern: ( + canvasRenderingContext2D, + ~image: htmlImageElement, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern2: ( + canvasRenderingContext2D, + ~image: svgImageElement, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern3: ( + canvasRenderingContext2D, + ~image: htmlVideoElement, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern4: ( + canvasRenderingContext2D, + ~image: htmlCanvasElement, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern5: ( + canvasRenderingContext2D, + ~image: imageBitmap, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern6: ( + canvasRenderingContext2D, + ~image: offscreenCanvas, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) +*/ +@send +external createPattern7: ( + canvasRenderingContext2D, + ~image: videoFrame, + ~repetition: string, +) => canvasPattern = "createPattern" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clearRect) +*/ +@send +external clearRect: (canvasRenderingContext2D, ~x: float, ~y: float, ~w: float, ~h: float) => unit = + "clearRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillRect) +*/ +@send +external fillRect: (canvasRenderingContext2D, ~x: float, ~y: float, ~w: float, ~h: float) => unit = + "fillRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeRect) +*/ +@send +external strokeRect: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, +) => unit = "strokeRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/beginPath) +*/ +@send +external beginPath: canvasRenderingContext2D => unit = "beginPath" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fill) +*/ +@send +external fill: (canvasRenderingContext2D, ~fillRule: canvasFillRule=?) => unit = "fill" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fill) +*/ +@send +external fill2: (canvasRenderingContext2D, ~path: path2D, ~fillRule: canvasFillRule=?) => unit = + "fill" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke) +*/ +@send +external stroke: canvasRenderingContext2D => unit = "stroke" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke) +*/ +@send +external stroke2: (canvasRenderingContext2D, path2D) => unit = "stroke" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clip) +*/ +@send +external clip: (canvasRenderingContext2D, ~fillRule: canvasFillRule=?) => unit = "clip" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clip) +*/ +@send +external clip2: (canvasRenderingContext2D, ~path: path2D, ~fillRule: canvasFillRule=?) => unit = + "clip" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInPath) +*/ +@send +external isPointInPath: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~fillRule: canvasFillRule=?, +) => bool = "isPointInPath" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInPath) +*/ +@send +external isPointInPath2: ( + canvasRenderingContext2D, + ~path: path2D, + ~x: float, + ~y: float, + ~fillRule: canvasFillRule=?, +) => bool = "isPointInPath" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInStroke) +*/ +@send +external isPointInStroke: (canvasRenderingContext2D, ~x: float, ~y: float) => bool = + "isPointInStroke" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInStroke) +*/ +@send +external isPointInStroke2: (canvasRenderingContext2D, ~path: path2D, ~x: float, ~y: float) => bool = + "isPointInStroke" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded) +*/ +@send +external drawFocusIfNeeded: (canvasRenderingContext2D, element) => unit = "drawFocusIfNeeded" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded) +*/ +@send +external drawFocusIfNeeded2: (canvasRenderingContext2D, ~path: path2D, ~element: element) => unit = + "drawFocusIfNeeded" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillText) +*/ +@send +external fillText: ( + canvasRenderingContext2D, + ~text: string, + ~x: float, + ~y: float, + ~maxWidth: float=?, +) => unit = "fillText" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeText) +*/ +@send +external strokeText: ( + canvasRenderingContext2D, + ~text: string, + ~x: float, + ~y: float, + ~maxWidth: float=?, +) => unit = "strokeText" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/measureText) +*/ +@send +external measureText: (canvasRenderingContext2D, string) => textMetrics = "measureText" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage: ( + canvasRenderingContext2D, + ~image: htmlImageElement, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage2: ( + canvasRenderingContext2D, + ~image: svgImageElement, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage3: ( + canvasRenderingContext2D, + ~image: htmlVideoElement, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage4: ( + canvasRenderingContext2D, + ~image: htmlCanvasElement, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage5: ( + canvasRenderingContext2D, + ~image: imageBitmap, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage6: ( + canvasRenderingContext2D, + ~image: offscreenCanvas, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage7: ( + canvasRenderingContext2D, + ~image: videoFrame, + ~dx: float, + ~dy: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage8: ( + canvasRenderingContext2D, + ~image: htmlImageElement, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage9: ( + canvasRenderingContext2D, + ~image: svgImageElement, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage10: ( + canvasRenderingContext2D, + ~image: htmlVideoElement, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage11: ( + canvasRenderingContext2D, + ~image: htmlCanvasElement, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage12: ( + canvasRenderingContext2D, + ~image: imageBitmap, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage13: ( + canvasRenderingContext2D, + ~image: offscreenCanvas, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage14: ( + canvasRenderingContext2D, + ~image: videoFrame, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage15: ( + canvasRenderingContext2D, + ~image: htmlImageElement, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage16: ( + canvasRenderingContext2D, + ~image: svgImageElement, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage17: ( + canvasRenderingContext2D, + ~image: htmlVideoElement, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage18: ( + canvasRenderingContext2D, + ~image: htmlCanvasElement, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage19: ( + canvasRenderingContext2D, + ~image: imageBitmap, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage20: ( + canvasRenderingContext2D, + ~image: offscreenCanvas, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage) +*/ +@send +external drawImage21: ( + canvasRenderingContext2D, + ~image: videoFrame, + ~sx: float, + ~sy: float, + ~sw: float, + ~sh: float, + ~dx: float, + ~dy: float, + ~dw: float, + ~dh: float, +) => unit = "drawImage" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createImageData) +*/ +@send +external createImageData: ( + canvasRenderingContext2D, + ~sw: int, + ~sh: int, + ~settings: imageDataSettings=?, +) => imageData = "createImageData" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createImageData) +*/ +@send +external createImageData2: (canvasRenderingContext2D, imageData) => imageData = "createImageData" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getImageData) +*/ +@send +external getImageData: ( + canvasRenderingContext2D, + ~sx: int, + ~sy: int, + ~sw: int, + ~sh: int, + ~settings: imageDataSettings=?, +) => imageData = "getImageData" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/putImageData) +*/ +@send +external putImageData: ( + canvasRenderingContext2D, + ~imagedata: imageData, + ~dx: int, + ~dy: int, +) => unit = "putImageData" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/putImageData) +*/ +@send +external putImageData2: ( + canvasRenderingContext2D, + ~imagedata: imageData, + ~dx: int, + ~dy: int, + ~dirtyX: int, + ~dirtyY: int, + ~dirtyWidth: int, + ~dirtyHeight: int, +) => unit = "putImageData" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash) +*/ +@send +external setLineDash: (canvasRenderingContext2D, array) => unit = "setLineDash" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getLineDash) +*/ +@send +external getLineDash: canvasRenderingContext2D => array = "getLineDash" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath) +*/ +@send +external closePath: canvasRenderingContext2D => unit = "closePath" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo) +*/ +@send +external moveTo: (canvasRenderingContext2D, ~x: float, ~y: float) => unit = "moveTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo) +*/ +@send +external lineTo: (canvasRenderingContext2D, ~x: float, ~y: float) => unit = "lineTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo) +*/ +@send +external quadraticCurveTo: ( + canvasRenderingContext2D, + ~cpx: float, + ~cpy: float, + ~x: float, + ~y: float, +) => unit = "quadraticCurveTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo) +*/ +@send +external bezierCurveTo: ( + canvasRenderingContext2D, + ~cp1x: float, + ~cp1y: float, + ~cp2x: float, + ~cp2y: float, + ~x: float, + ~y: float, +) => unit = "bezierCurveTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arcTo) +*/ +@send +external arcTo: ( + canvasRenderingContext2D, + ~x1: float, + ~y1: float, + ~x2: float, + ~y2: float, + ~radius: float, +) => unit = "arcTo" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rect) +*/ +@send +external rect: (canvasRenderingContext2D, ~x: float, ~y: float, ~w: float, ~h: float) => unit = + "rect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) +*/ +@send +external roundRect: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, + ~radii_: array=?, +) => unit = "roundRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) +*/ +@send +external roundRect2: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, + ~radii_: array=?, +) => unit = "roundRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) +*/ +@send +external roundRect3: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~w: float, + ~h: float, + ~radii_: array=?, +) => unit = "roundRect" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc) +*/ +@send +external arc: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~radius: float, + ~startAngle: float, + ~endAngle: float, + ~counterclockwise: bool=?, +) => unit = "arc" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse) +*/ +@send +external ellipse: ( + canvasRenderingContext2D, + ~x: float, + ~y: float, + ~radiusX: float, + ~radiusY: float, + ~rotation: float, + ~startAngle: float, + ~endAngle: float, + ~counterclockwise: bool=?, +) => unit = "ellipse" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getContextAttributes) +*/ +@send +external getContextAttributes: canvasRenderingContext2D => canvasRenderingContext2DSettings = + "getContextAttributes" diff --git a/src/DOMAPI/HTMLCanvasElement.res b/src/DOMAPI/HTMLCanvasElement.res index 63ad1b1..2f5aaac 100644 --- a/src/DOMAPI/HTMLCanvasElement.res +++ b/src/DOMAPI/HTMLCanvasElement.res @@ -704,7 +704,43 @@ external getContext: ( htmlCanvasElement, ~contextId: string, ~options: JSON.t=?, -) => renderingContext = "getContext" +) => canvasRenderingContext2D = "getContext" + +/** +Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas. +@param contextId The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext("2d"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext("experimental-webgl"); +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) +*/ +@send +external getContext2: ( + htmlCanvasElement, + ~contextId: string, + ~options: JSON.t=?, +) => imageBitmapRenderingContext = "getContext" + +/** +Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas. +@param contextId The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext("2d"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext("experimental-webgl"); +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) +*/ +@send +external getContext3: ( + htmlCanvasElement, + ~contextId: string, + ~options: JSON.t=?, +) => webGLRenderingContext = "getContext" + +/** +Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas. +@param contextId The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext("2d"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext("experimental-webgl"); +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) +*/ +@send +external getContext4: ( + htmlCanvasElement, + ~contextId: string, + ~options: JSON.t=?, +) => webGL2RenderingContext = "getContext" /** Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element. diff --git a/src/FetchAPI/FormData.res b/src/FetchAPI/FormData.res index 947d244..1530a19 100644 --- a/src/FetchAPI/FormData.res +++ b/src/FetchAPI/FormData.res @@ -31,7 +31,13 @@ external delete: (formData, string) => unit = "delete" [Read more on MDN](https://developer.mozilla.org/docs/Web/API/FormData/get) */ @send -external get: (formData, string) => formDataEntryValue = "get" +external get: (formData, string) => file = "get" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/FormData/get) +*/ +@send +external get2: (formData, string) => string = "get" /** [Read more on MDN](https://developer.mozilla.org/docs/Web/API/FormData/getAll) diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.js b/tests/DOMAPI/HTMLCanvasInputElement__tes.js new file mode 100644 index 0000000..9fcc49b --- /dev/null +++ b/tests/DOMAPI/HTMLCanvasInputElement__tes.js @@ -0,0 +1,24 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + + +let myCanvas = document.getElementById("myCanvas"); + +let ctx = myCanvas.getContext("2d"); + +ctx.fillStyle = "red"; + +ctx.fillRect(50, 50, 200, 200); + +ctx.fillStyle = "black"; + +ctx.font = "2px Tahoma"; + +ctx.textBaseline = "top"; + +ctx.fillText("MY TEXT", 60, 60); + +export { + myCanvas, + ctx, +} +/* myCanvas Not a pure module */ diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.res b/tests/DOMAPI/HTMLCanvasInputElement__tes.res new file mode 100644 index 0000000..fa62634 --- /dev/null +++ b/tests/DOMAPI/HTMLCanvasInputElement__tes.res @@ -0,0 +1,13 @@ +open Global + +let myCanvas: DOMAPI.htmlCanvasElement = + document->Document.getElementById("myCanvas")->Prelude.unsafeConversation +let ctx = myCanvas->HTMLCanvasElement.getContext(~contextId="2d") + +ctx.fillStyle = Prelude.unsafeConversation("red") +ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.) + +ctx.fillStyle = Prelude.unsafeConversation("black") +ctx.font = "2px Tahoma" +ctx.textBaseline = CanvasAPI.Top +ctx->CanvasRenderingContext2D.fillText(~text="MY TEXT", ~x=60., ~y=60.) diff --git a/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts b/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts index 8e3fd3e..a358586 100644 --- a/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts +++ b/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts @@ -971,6 +971,20 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { } } + // Example case: HTMLCanvasElement->getContext + const returnTypeWithMultipleTypes = allTypeDefs.find( + (t) => t.name === signature.type, + ); + if ( + returnTypeWithMultipleTypes && + Array.isArray(returnTypeWithMultipleTypes.type) && + !signature.overrideType + ) { + return returnTypeWithMultipleTypes.type.map((t) => { + return { ...signature, type: t.type }; + }); + } + return [signature]; } @@ -1070,6 +1084,10 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { return "~type_: eventType"; } + if (owner.startsWith("roundRect") && p.name === "radii") { + return "~radii_: array=?"; + } + if (!includeParameterNames) { return t; } @@ -2225,13 +2243,42 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { { name: "CanvasAPI", entries: [ - enums(["OffscreenRenderingContextId"]), - individualInterfaces(["OffscreenCanvas", "ImageBitmap"]), + enums([ + "OffscreenRenderingContextId", + "GlobalCompositeOperation", + "ImageSmoothingQuality", + "CanvasLineCap", + "CanvasLineJoin", + "CanvasTextAlign", + "CanvasTextBaseline", + "CanvasDirection", + "CanvasFontKerning", + "CanvasFontStretch", + "CanvasFontVariantCaps", + "CanvasTextRendering", + "PredefinedColorSpace", + "CanvasFillRule", + ]), + individualInterfaces([ + "OffscreenCanvas", + "ImageBitmap", + "OffscreenCanvasRenderingContext2D", + "ImageBitmapRenderingContext", + "WebGLRenderingContext", + "WebGL2RenderingContext", + "CanvasGradient", + "CanvasPattern", + "Path2D", + "TextMetrics", + ]), byHand( "OffscreenRenderingContext", emitAny("OffscreenRenderingContext"), ), - dictionaries(["ImageEncodeOptions"]), + dictionaries([ + "ImageEncodeOptions", + "CanvasRenderingContext2DSettings", + ]), ], opens: ["Prelude", "EventAPI"], }, @@ -2545,6 +2592,7 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { "ImageData", "DOMPointReadOnly", "DOMPoint", + "CanvasRenderingContext2D", ]), chain(["Animation"]), dictionaries([ From 242f98241757d4f4953d4ff930557ab4bf2d6bee Mon Sep 17 00:00:00 2001 From: nojaf Date: Thu, 14 Nov 2024 13:49:27 +0100 Subject: [PATCH 2/9] Stop generating code --- .github/workflows/ci.yml | 7 +------ .gitignore | 3 ++- tools/TypeScript-DOM-lib-generator/src/build/emitter.ts | 3 +-- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1703325..f544fc5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -30,12 +30,7 @@ jobs: - name: Install dependencies run: npm ci - - name: Install tool dependencies - working-directory: ./tools/TypeScript-DOM-lib-generator - run: npm ci - - - name: Generate ReScript code - working-directory: ./tools/TypeScript-DOM-lib-generator + - name: Build ReScript code run: npm run build - name: Run tests diff --git a/.gitignore b/.gitignore index e7fa681..f3f409f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ /lib/ .bsb.lock .astro -dist/ \ No newline at end of file +dist/ +tmp/ \ No newline at end of file diff --git a/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts b/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts index a358586..5b1242e 100644 --- a/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts +++ b/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts @@ -260,7 +260,7 @@ type interfaceSettings = { const currentFileName = fileURLToPath(import.meta.url); const currentDir = path.dirname(currentFileName); const repoRoot = path.resolve(currentDir, "..", "..", "..", ".."); -const outputFolder = path.join(repoRoot, "src"); +const outputFolder = path.join(repoRoot, "tmp"); export async function emitRescriptBindings(webidl: Browser.WebIdl) { // Global print target @@ -2912,7 +2912,6 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { await emitGlobalModule(); execSync("npx rescript format -all", { cwd: repoRoot, stdio: "inherit" }); - execSync("npx rewatch", { cwd: repoRoot, stdio: "inherit" }); // let remainers = allInterfaces.filter((i) => { // return !interfaceHierarchy.some((h) => { From c314fab0e79c691e5f1aff49ee9d637207307089 Mon Sep 17 00:00:00 2001 From: nojaf Date: Thu, 14 Nov 2024 17:23:15 +0100 Subject: [PATCH 3/9] Improve getContext2D binding --- src/DOMAPI.res | 10 ++++++++++ src/DOMAPI/HTMLCanvasElement.res | 11 ++++++----- tests/DOMAPI/HTMLCanvasInputElement__tes.res | 4 ++-- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/DOMAPI.res b/src/DOMAPI.res index c85ba50..66b2926 100644 --- a/src/DOMAPI.res +++ b/src/DOMAPI.res @@ -9354,6 +9354,16 @@ type domPoint = { ...domPointReadOnly, } +/** + [Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#contextattributes) + */ +type canvasContext2DAttributes = { + alpha: bool, + colorspace?: predefinedColorSpace, + desynchronized: bool, + willReadFrequently: bool, +} + /** The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element. It is used for drawing shapes, text, images, and other objects. [See CanvasRenderingContext2D on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D) diff --git a/src/DOMAPI/HTMLCanvasElement.res b/src/DOMAPI/HTMLCanvasElement.res index 2f5aaac..f69fd67 100644 --- a/src/DOMAPI/HTMLCanvasElement.res +++ b/src/DOMAPI/HTMLCanvasElement.res @@ -696,14 +696,15 @@ external togglePopover: (htmlCanvasElement, ~force: bool=?) => bool = "togglePop /** Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas. -@param contextId The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext("2d"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext("experimental-webgl"); -[Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) +Creates a CanvasRenderingContext2D object representing a two-dimensional rendering context. + +[Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#2d) */ @send -external getContext: ( +external getContext2D: ( htmlCanvasElement, - ~contextId: string, - ~options: JSON.t=?, + @as("2d") _, + ~options: canvasRenderingContext2D=?, ) => canvasRenderingContext2D = "getContext" /** diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.res b/tests/DOMAPI/HTMLCanvasInputElement__tes.res index fa62634..1a7b559 100644 --- a/tests/DOMAPI/HTMLCanvasInputElement__tes.res +++ b/tests/DOMAPI/HTMLCanvasInputElement__tes.res @@ -1,8 +1,8 @@ -open Global +open WebAPI.Global let myCanvas: DOMAPI.htmlCanvasElement = document->Document.getElementById("myCanvas")->Prelude.unsafeConversation -let ctx = myCanvas->HTMLCanvasElement.getContext(~contextId="2d") +let ctx = myCanvas->HTMLCanvasElement.getContext2D ctx.fillStyle = Prelude.unsafeConversation("red") ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.) From 88d964d54e87d84621d6d0669d21410fa8a715d6 Mon Sep 17 00:00:00 2001 From: nojaf Date: Thu, 14 Nov 2024 18:56:46 +0100 Subject: [PATCH 4/9] Expand getContext variants --- src/CanvasAPI.res | 19 +++++++++++++ src/DOMAPI/HTMLCanvasElement.res | 28 +++++++++---------- tests/DOMAPI/HTMLCanvasInputElement__tes.res | 2 +- .../src/build/emitter.ts | 15 ++++++++-- 4 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/CanvasAPI.res b/src/CanvasAPI.res index 7c80254..11fd4e7 100644 --- a/src/CanvasAPI.res +++ b/src/CanvasAPI.res @@ -112,6 +112,11 @@ type canvasFillRule = | @as("evenodd") Evenodd | @as("nonzero") Nonzero +type webGLPowerPreference = + | @as("default") Default + | @as("high-performance") HighPerformance + | @as("low-power") LowPower + /** [See OffscreenCanvas on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas) */ @@ -425,3 +430,17 @@ type canvasRenderingContext2DSettings = { mutable colorSpace?: predefinedColorSpace, mutable willReadFrequently?: bool, } + +type webGLContextAttributes = { + mutable alpha?: bool, + mutable depth?: bool, + mutable stencil?: bool, + mutable antialias?: bool, + mutable premultipliedAlpha?: bool, + mutable preserveDrawingBuffer?: bool, + mutable powerPreference?: webGLPowerPreference, + mutable failIfMajorPerformanceCaveat?: bool, + mutable desynchronized?: bool, +} + +type imageBitmapRenderingContextSettings = {mutable alpha?: bool} diff --git a/src/DOMAPI/HTMLCanvasElement.res b/src/DOMAPI/HTMLCanvasElement.res index f69fd67..6fcc4da 100644 --- a/src/DOMAPI/HTMLCanvasElement.res +++ b/src/DOMAPI/HTMLCanvasElement.res @@ -701,10 +701,10 @@ Creates a CanvasRenderingContext2D object representing a two-dimensional renderi [Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#2d) */ @send -external getContext2D: ( +external getContext_2D: ( htmlCanvasElement, @as("2d") _, - ~options: canvasRenderingContext2D=?, + ~options: canvasRenderingContext2DSettings=?, ) => canvasRenderingContext2D = "getContext" /** @@ -713,11 +713,11 @@ Returns an object that provides methods and properties for drawing and manipulat [Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) */ @send -external getContext2: ( +external getContext_WebGL: ( htmlCanvasElement, - ~contextId: string, - ~options: JSON.t=?, -) => imageBitmapRenderingContext = "getContext" + @as("webgl") _, + ~options: webGLContextAttributes=?, +) => webGLRenderingContext = "getContext" /** Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas. @@ -725,11 +725,11 @@ Returns an object that provides methods and properties for drawing and manipulat [Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) */ @send -external getContext3: ( +external getContext_WebGL2: ( htmlCanvasElement, - ~contextId: string, - ~options: JSON.t=?, -) => webGLRenderingContext = "getContext" + @as("webgl2") _, + ~options: webGLContextAttributes=?, +) => webGL2RenderingContext = "getContext" /** Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas. @@ -737,11 +737,11 @@ Returns an object that provides methods and properties for drawing and manipulat [Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext) */ @send -external getContext4: ( +external getContext_BitmapRenderer: ( htmlCanvasElement, - ~contextId: string, - ~options: JSON.t=?, -) => webGL2RenderingContext = "getContext" + @as("bitmaprenderer") _, + ~options: imageBitmapRenderingContextSettings=?, +) => imageBitmapRenderingContext = "getContext" /** Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element. diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.res b/tests/DOMAPI/HTMLCanvasInputElement__tes.res index 1a7b559..6508b46 100644 --- a/tests/DOMAPI/HTMLCanvasInputElement__tes.res +++ b/tests/DOMAPI/HTMLCanvasInputElement__tes.res @@ -2,7 +2,7 @@ open WebAPI.Global let myCanvas: DOMAPI.htmlCanvasElement = document->Document.getElementById("myCanvas")->Prelude.unsafeConversation -let ctx = myCanvas->HTMLCanvasElement.getContext2D +let ctx = myCanvas->HTMLCanvasElement.getContext_2D ctx.fillStyle = Prelude.unsafeConversation("red") ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.) diff --git a/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts b/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts index 5b1242e..ecb58bb 100644 --- a/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts +++ b/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts @@ -1778,7 +1778,7 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { }); } - const interfaceHierarchy: RescriptFile[] = [ + let interfaceHierarchy: RescriptFile[] = [ { name: "Prelude", entries: [ @@ -2820,6 +2820,17 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { }, ]; + interfaceHierarchy = [ + { + name: "Temp", + entries: [ + enums(["WebGLPowerPreference"]), + dictionaries(["ImageBitmapRenderingContextSettings", "WebGLContextAttributes"]), + ], + opens: [], + } + ] + // Ensure the output folder exists. await fs.mkdir(outputFolder, { recursive: true }); @@ -2911,7 +2922,7 @@ export async function emitRescriptBindings(webidl: Browser.WebIdl) { await emitGlobalModule(); - execSync("npx rescript format -all", { cwd: repoRoot, stdio: "inherit" }); + // execSync("npx rescript format -all", { cwd: repoRoot, stdio: "inherit" }); // let remainers = allInterfaces.filter((i) => { // return !interfaceHierarchy.some((h) => { From a72a1a4bec0af97710e038a0451b147c8f4826a7 Mon Sep 17 00:00:00 2001 From: nojaf Date: Thu, 14 Nov 2024 19:21:10 +0100 Subject: [PATCH 5/9] Model fillStyle --- src/CanvasAPI/CanvasGradient.js | 11 +++++++- src/CanvasAPI/CanvasGradient.res | 2 ++ src/CanvasAPI/CanvasPattern.js | 11 +++++++- src/CanvasAPI/CanvasPattern.res | 2 ++ src/DOMAPI.res | 4 ++- src/DOMAPI/FillStyle.js | 28 ++++++++++++++++++++ src/DOMAPI/FillStyle.res | 22 +++++++++++++++ tests/DOMAPI/HTMLCanvasInputElement__tes.js | 15 +++++++++++ tests/DOMAPI/HTMLCanvasInputElement__tes.res | 10 +++++-- 9 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 src/DOMAPI/FillStyle.js create mode 100644 src/DOMAPI/FillStyle.res diff --git a/src/CanvasAPI/CanvasGradient.js b/src/CanvasAPI/CanvasGradient.js index d856702..de9f910 100644 --- a/src/CanvasAPI/CanvasGradient.js +++ b/src/CanvasAPI/CanvasGradient.js @@ -1,2 +1,11 @@ // Generated by ReScript, PLEASE EDIT WITH CARE -/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ + + +function isInstanceOf(param) { + return (param instanceof CanvasGradient); +} + +export { + isInstanceOf, +} +/* No side effect */ diff --git a/src/CanvasAPI/CanvasGradient.res b/src/CanvasAPI/CanvasGradient.res index 507ccef..86347e0 100644 --- a/src/CanvasAPI/CanvasGradient.res +++ b/src/CanvasAPI/CanvasGradient.res @@ -8,3 +8,5 @@ Throws an "IndexSizeError" DOMException if the offset is out of range. Throws a */ @send external addColorStop: (canvasGradient, ~offset: float, ~color: string) => unit = "addColorStop" + +let isInstanceOf = (_: 't): bool => %raw(`param instanceof CanvasGradient`) diff --git a/src/CanvasAPI/CanvasPattern.js b/src/CanvasAPI/CanvasPattern.js index d856702..d16a42c 100644 --- a/src/CanvasAPI/CanvasPattern.js +++ b/src/CanvasAPI/CanvasPattern.js @@ -1,2 +1,11 @@ // Generated by ReScript, PLEASE EDIT WITH CARE -/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ + + +function isInstanceOf(param) { + return (param instanceof CanvasPattern); +} + +export { + isInstanceOf, +} +/* No side effect */ diff --git a/src/CanvasAPI/CanvasPattern.res b/src/CanvasAPI/CanvasPattern.res index 89081c0..9e3f243 100644 --- a/src/CanvasAPI/CanvasPattern.res +++ b/src/CanvasAPI/CanvasPattern.res @@ -7,3 +7,5 @@ Sets the transformation matrix that will be used when rendering the pattern duri */ @send external setTransform: (canvasPattern, ~transform: domMatrix2DInit=?) => unit = "setTransform" + +let isInstanceOf = (_: 't): bool => %raw(`param instanceof CanvasPattern`) diff --git a/src/DOMAPI.res b/src/DOMAPI.res index 66b2926..df04130 100644 --- a/src/DOMAPI.res +++ b/src/DOMAPI.res @@ -201,6 +201,8 @@ type shareData = { mutable url?: string, } +type fillStyle + /** The location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively. [See Location on MDN](https://developer.mozilla.org/docs/Web/API/Location) @@ -9396,7 +9398,7 @@ type canvasRenderingContext2D = { /** [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) */ - mutable fillStyle: unknown, + mutable fillStyle: fillStyle, /** [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX) */ diff --git a/src/DOMAPI/FillStyle.js b/src/DOMAPI/FillStyle.js new file mode 100644 index 0000000..d12dfc1 --- /dev/null +++ b/src/DOMAPI/FillStyle.js @@ -0,0 +1,28 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as CanvasPattern$WebAPI from "../CanvasAPI/CanvasPattern.js"; +import * as CanvasGradient$WebAPI from "../CanvasAPI/CanvasGradient.js"; + +function decode(t) { + if (CanvasGradient$WebAPI.isInstanceOf(t)) { + return { + TAG: "CanvasGradient", + _0: t + }; + } else if (CanvasPattern$WebAPI.isInstanceOf(t)) { + return { + TAG: "CanvasPattern", + _0: t + }; + } else { + return { + TAG: "String", + _0: t + }; + } +} + +export { + decode, +} +/* No side effect */ diff --git a/src/DOMAPI/FillStyle.res b/src/DOMAPI/FillStyle.res new file mode 100644 index 0000000..312f477 --- /dev/null +++ b/src/DOMAPI/FillStyle.res @@ -0,0 +1,22 @@ +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)) + } +} diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.js b/tests/DOMAPI/HTMLCanvasInputElement__tes.js index 9fcc49b..c135597 100644 --- a/tests/DOMAPI/HTMLCanvasInputElement__tes.js +++ b/tests/DOMAPI/HTMLCanvasInputElement__tes.js @@ -1,5 +1,6 @@ // Generated by ReScript, PLEASE EDIT WITH CARE +import * as FillStyle$WebAPI from "../../src/DOMAPI/FillStyle.js"; let myCanvas = document.getElementById("myCanvas"); @@ -17,6 +18,20 @@ ctx.textBaseline = "top"; ctx.fillText("MY TEXT", 60, 60); +let color = FillStyle$WebAPI.decode(ctx.fillStyle); + +switch (color.TAG) { + case "String" : + console.log("Color: " + color._0); + break; + case "CanvasGradient" : + console.log("CanvasGradient"); + break; + case "CanvasPattern" : + console.log("CanvasPattern"); + break; +} + export { myCanvas, ctx, diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.res b/tests/DOMAPI/HTMLCanvasInputElement__tes.res index 6508b46..920340b 100644 --- a/tests/DOMAPI/HTMLCanvasInputElement__tes.res +++ b/tests/DOMAPI/HTMLCanvasInputElement__tes.res @@ -4,10 +4,16 @@ let myCanvas: DOMAPI.htmlCanvasElement = document->Document.getElementById("myCanvas")->Prelude.unsafeConversation let ctx = myCanvas->HTMLCanvasElement.getContext_2D -ctx.fillStyle = Prelude.unsafeConversation("red") +ctx.fillStyle = FillStyle.fromString("red") ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.) -ctx.fillStyle = Prelude.unsafeConversation("black") +ctx.fillStyle = FillStyle.fromString("black") ctx.font = "2px Tahoma" ctx.textBaseline = CanvasAPI.Top ctx->CanvasRenderingContext2D.fillText(~text="MY TEXT", ~x=60., ~y=60.) + +switch ctx.fillStyle->FillStyle.decode { +| FillStyle.String(color) => Console.log(`Color: ${color}`) +| FillStyle.CanvasGradient(_) => Console.log("CanvasGradient") +| FillStyle.CanvasPattern(_) => Console.log("CanvasPattern") +} From befbfdfe284411c40827d658e7ea7ac433a4a6af Mon Sep 17 00:00:00 2001 From: nojaf Date: Thu, 14 Nov 2024 19:27:32 +0100 Subject: [PATCH 6/9] Update bindings for offscreenCanvas getContext --- src/CanvasAPI/OffscreenCanvas.res | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/CanvasAPI/OffscreenCanvas.res b/src/CanvasAPI/OffscreenCanvas.res index ec5a13a..0683f2c 100644 --- a/src/CanvasAPI/OffscreenCanvas.res +++ b/src/CanvasAPI/OffscreenCanvas.res @@ -98,9 +98,9 @@ Returns null if the canvas has already been initialized with another context typ [Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) */ @send -external getContext: ( +external getContext_2D: ( offscreenCanvas, - ~contextId: offscreenRenderingContextId, + @as("2d") _, ~options: JSON.t=?, ) => offscreenCanvasRenderingContext2D = "getContext" @@ -113,11 +113,11 @@ Returns null if the canvas has already been initialized with another context typ [Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) */ @send -external getContext2: ( +external getContext_WebGL: ( offscreenCanvas, - ~contextId: offscreenRenderingContextId, - ~options: JSON.t=?, -) => imageBitmapRenderingContext = "getContext" + @as("webgl") _, + ~options: webGLContextAttributes=?, +) => webGLRenderingContext = "getContext" /** Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", or "webgl2". options is handled by that API. @@ -128,11 +128,11 @@ Returns null if the canvas has already been initialized with another context typ [Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) */ @send -external getContext3: ( +external getContext_WebGL2: ( offscreenCanvas, - ~contextId: offscreenRenderingContextId, - ~options: JSON.t=?, -) => webGLRenderingContext = "getContext" + @as("webgl2") _, + ~options: webGLContextAttributes=?, +) => webGL2RenderingContext = "getContext" /** Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", or "webgl2". options is handled by that API. @@ -143,11 +143,11 @@ Returns null if the canvas has already been initialized with another context typ [Read more on MDN](https://developer.mozilla.org/docs/Web/API/OffscreenCanvas/getContext) */ @send -external getContext4: ( +external getContext_BitmapRenderer: ( offscreenCanvas, - ~contextId: offscreenRenderingContextId, - ~options: JSON.t=?, -) => webGL2RenderingContext = "getContext" + @as("bitmaprenderer") _, + ~options: imageBitmapRenderingContextSettings=?, +) => imageBitmapRenderingContext = "getContext" /** Returns a newly created ImageBitmap object with the image in the OffscreenCanvas object. The image in the OffscreenCanvas object is replaced with a new blank image. From cc9363cd80de600d5fec4660b7cde7987b2128c5 Mon Sep 17 00:00:00 2001 From: nojaf Date: Sat, 16 Nov 2024 14:41:15 +0100 Subject: [PATCH 7/9] Rename test file --- src/DOMAPI/CanvasRenderingContext2D.js | 2 ++ src/DOMAPI/FillStyle.js | 8 ++++---- ...nvasInputElement__tes.js => HTMLCanvasElement__tes.js} | 0 ...asInputElement__tes.res => HTMLCanvasElement__tes.res} | 0 4 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 src/DOMAPI/CanvasRenderingContext2D.js rename tests/DOMAPI/{HTMLCanvasInputElement__tes.js => HTMLCanvasElement__tes.js} (100%) rename tests/DOMAPI/{HTMLCanvasInputElement__tes.res => HTMLCanvasElement__tes.res} (100%) diff --git a/src/DOMAPI/CanvasRenderingContext2D.js b/src/DOMAPI/CanvasRenderingContext2D.js new file mode 100644 index 0000000..d856702 --- /dev/null +++ b/src/DOMAPI/CanvasRenderingContext2D.js @@ -0,0 +1,2 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE +/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ diff --git a/src/DOMAPI/FillStyle.js b/src/DOMAPI/FillStyle.js index d12dfc1..1e79cc4 100644 --- a/src/DOMAPI/FillStyle.js +++ b/src/DOMAPI/FillStyle.js @@ -1,15 +1,15 @@ // Generated by ReScript, PLEASE EDIT WITH CARE -import * as CanvasPattern$WebAPI from "../CanvasAPI/CanvasPattern.js"; -import * as CanvasGradient$WebAPI from "../CanvasAPI/CanvasGradient.js"; +import * as CanvasPattern$WebApi from "../CanvasAPI/CanvasPattern.js"; +import * as CanvasGradient$WebApi from "../CanvasAPI/CanvasGradient.js"; function decode(t) { - if (CanvasGradient$WebAPI.isInstanceOf(t)) { + if (CanvasGradient$WebApi.isInstanceOf(t)) { return { TAG: "CanvasGradient", _0: t }; - } else if (CanvasPattern$WebAPI.isInstanceOf(t)) { + } else if (CanvasPattern$WebApi.isInstanceOf(t)) { return { TAG: "CanvasPattern", _0: t diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.js b/tests/DOMAPI/HTMLCanvasElement__tes.js similarity index 100% rename from tests/DOMAPI/HTMLCanvasInputElement__tes.js rename to tests/DOMAPI/HTMLCanvasElement__tes.js diff --git a/tests/DOMAPI/HTMLCanvasInputElement__tes.res b/tests/DOMAPI/HTMLCanvasElement__tes.res similarity index 100% rename from tests/DOMAPI/HTMLCanvasInputElement__tes.res rename to tests/DOMAPI/HTMLCanvasElement__tes.res From 17e3b0a7d80935567e69e2a6bbc37f0d42c600e3 Mon Sep 17 00:00:00 2001 From: nojaf Date: Sat, 16 Nov 2024 15:08:45 +0100 Subject: [PATCH 8/9] Add initial contributing section --- astro.config.mjs | 15 ++++ .../docs/contributing/code-generation.mdx | 86 ++++++++++++++++++ .../docs/contributing/documentation.mdx | 46 ++++++++++ .../docs/contributing/getting-started.mdx | 60 +++++++++++++ .../docs/contributing/module-structure.mdx | 87 +++++++++++++++++++ docs/content/docs/contributing/testing.mdx | 47 ++++++++++ docs/content/docs/index.mdx | 14 +++ docs/content/docs/philosophy.mdx | 1 + docs/content/docs/project-status.mdx | 11 +-- 9 files changed, 360 insertions(+), 7 deletions(-) create mode 100644 docs/content/docs/contributing/code-generation.mdx create mode 100644 docs/content/docs/contributing/documentation.mdx create mode 100644 docs/content/docs/contributing/getting-started.mdx create mode 100644 docs/content/docs/contributing/module-structure.mdx create mode 100644 docs/content/docs/contributing/testing.mdx diff --git a/astro.config.mjs b/astro.config.mjs index c661b71..38237d2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -23,6 +23,21 @@ export default defineConfig({ editLink: { baseUrl: 'https://github.com/rescript-lang/experimental-rescript-webapi/edit/main/', }, + sidebar: [ + { + slug: '', + }, + { + slug: 'design-philosophy', + }, + { + slug: 'project-status', + }, + { + label: 'Contributing', + autogenerate: { directory: 'contributing' }, + }, + ], customCss: ["./docs/styles/fonts.css", "./docs/styles/theme.css"], expressiveCode: { shiki: { diff --git a/docs/content/docs/contributing/code-generation.mdx b/docs/content/docs/contributing/code-generation.mdx new file mode 100644 index 0000000..90d0909 --- /dev/null +++ b/docs/content/docs/contributing/code-generation.mdx @@ -0,0 +1,86 @@ +--- +title: Code Generation +description: Learn more about the code generation process for @rescript/webapi. +slug: "03-code-generation" +--- + +The original bindings were generated using a modified version of [TypeScript-DOM-lib-generator](https://github.com/microsoft/TypeScript-DOM-lib-generator). +These bindings were a great starting point, but they are not perfect. +It is more than likely that you will need to **tweak the generated bindings by hand** to make them more idiomatic to ReScript. + +For example the `window.fetch` function was generated as: + +```ReScript +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Window/fetch) +*/ +@send +external fetch: (window, ~input: request, ~init: requestInit=?) + => Promise.t = "fetch" + +/** +[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Window/fetch) +*/ +@send +external fetch2: (window, ~input: string, ~init: requestInit=?) + => Promise.t = "fetch" +``` + +While not that bad and usable, it can be improved: + +- Rename `fetch2` to `fetch` because it is the more common usage of the function. +- Rename `fetch` to `fetch_with_request` for clarity that this is the "overload" with a `Request` object. +- Consider removing the named `~input` and `~init` arguments and use positional arguments instead. + Motivation: If the function does not have any parameters with the same type, it is more ergonomic to use positional arguments. + This heuristic is not set in stone and can be adjusted based on the specific function. +- The documentation can be improved. + +```ReScript +/** TODO: add better docs */ +@send +external fetch: (window, string, ~init: requestInit=?) + => Promise.t = "fetch" + +/** TODO: add better docs */ +@send +external fetch_with_request: (window, request, ~init: requestInit=?) + => Promise.t = "fetch" +``` + +Once these changes are made, the bindings can be tested and then committed to the repository. +The generation does no longer happen automatically, so manual improvements will not be overwritten. + +## Sandboxed Code Generation + +Not every API was covered by the TypeScript-DOM-lib-generator. +Potentially, you want to add a new API to the bindings and star from code generation. + +In [emitter.ts](https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/src/build/emitter.ts), +you can override the `interfaceHierarchy` with any new interface or type you want to add. + +```typescript +interfaceHierarchy = [ + { + name: "Temp", + entries: [ + enums(["WebGLPowerPreference"]), + dictionaries([ + "ImageBitmapRenderingContextSettings", + "WebGLContextAttributes", + ]), + ], + opens: [], + }, +]; +``` + +After running the generator (in `tools/TypeScript-DOM-lib-generator`): + +```shell +npm run build +``` + +All the generated files will be in the `tmp` folder. You can use this as inspiration for your own bindings. + +To figure out if you need `enums`, `dictionaries`, or `interfaces`, you can look at the [JSON dump](https://github.com/rescript-lang/experimental-rescript-webapi/blob/main/tools/TypeScript-DOM-lib-generator/dom-dump.json) file +and see how the TypeScript-DOM-lib-generator represents the shape you are after. diff --git a/docs/content/docs/contributing/documentation.mdx b/docs/content/docs/contributing/documentation.mdx new file mode 100644 index 0000000..bdd74a5 --- /dev/null +++ b/docs/content/docs/contributing/documentation.mdx @@ -0,0 +1,46 @@ +--- +title: "Documentation" +description: Learn more about the relevance of adding documentation to @rescript/webapi. +slug: "05-documentation" +--- + +After the bindings are generated, all you got was a link to the MDN documentation. +While again, not that bad, it can be improved by adding the core of the binding to the documentation. +And explain how it is supposed to be used. + +## Importance + +One could wonder how important documentation is in this case? +A link to MDN is enough, right? Well, not always. +When a method has multiple overloads, it can be hard to understand which one to use. +By adding an example usage, the user can see easily see which one to use. +It keeps the user inside the IDE and avoids context switching. + +## Structure + +The documentation for each binding should roughly follow this structure: + +- signature +- key description (tip: check MDN for inspiration) +- example usage +- link to the MDN documentation + +For example, the `window.fetch` function could be documented as: + +````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. + +```res +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.t = "fetch" +```` diff --git a/docs/content/docs/contributing/getting-started.mdx b/docs/content/docs/contributing/getting-started.mdx new file mode 100644 index 0000000..3665fed --- /dev/null +++ b/docs/content/docs/contributing/getting-started.mdx @@ -0,0 +1,60 @@ +--- +title: Project setup +description: Practical information on how to get started to contribute to the project. +slug: "01-getting-started" +--- + +import { Aside } from "@astrojs/starlight/components"; + + + +The [WebAPI](https://developer.mozilla.org/en-US/docs/Web/API) are vast and ever-growing. We need your help to make them better. +There is no way our [contributors](https://github.com/rescript-lang/experimental-rescript-webapi/graphs/contributors) can cover everything. +And that's where you come in! A small PR, focused on what you want to get out of this project can make a huge difference. + +## Recommended workflow + +We recommend the following overall workflow when developing for this repository: + +- Fork this repository +- Always work in your fork +- Always keep your fork up to date + +Before updating your fork, run this command: + +```shell +git remote add upstream https://github.com/rescript-lang/experimental-rescript-webapi.git +``` + +This will make management of multiple forks and your own work easier over time. + +### Updating your fork + +We recommend the following commands to update your fork: + +```shell +git checkout main +git clean -xdf +git fetch upstream +git rebase upstream/main +git push +``` + +Or more succinctly: + +```shell +git checkout main && git clean -xdf && git fetch upstream && git rebase upstream/main && git push +``` + +This will update your fork with the latest from `rescript-lang/experimental-rescript-webapi` on your machine and push those updates to your remote fork. + +## Initial build + +Install the dependencies and compile the bindings using [Rewatch](https://github.com/rescript-lang/rewatch): + +```shell +npm install && npm run build +``` diff --git a/docs/content/docs/contributing/module-structure.mdx b/docs/content/docs/contributing/module-structure.mdx new file mode 100644 index 0000000..dfbef7c --- /dev/null +++ b/docs/content/docs/contributing/module-structure.mdx @@ -0,0 +1,87 @@ +--- +title: Module Structure +description: Learn more about the module structure of @rescript/webapi. +slug: "02-module-structure" +--- + +import { Aside } from "@astrojs/starlight/components"; +import { FileTree } from "@astrojs/starlight/components"; + +The bindings are organized by the Web API they represent. Each API has its interfaces and auxiliary types in a module named after the API, suffixed with `API` to prevent collisions with the type module. + + + +- package.json +- src + - DOMAPI.res + - DOMAPI/ + - HTMLElement.res + + + +Within the API module, the structure is roughly as follows: + +- Enum Types +- Interfaces +- Auxiliary Types + +## Enum types + +Enum types are used to represent constants in the Web API. They are typically used as arguments to methods or properties. +In ReScript terms these are variants: + +```ReScript +type scrollBehavior = + | @as("auto") Auto + | @as("instant") Instant + | @as("smooth") Smooth +``` + +Enums come first as they are always self-contained and do not depend on other types. + +## Interfaces + +[Interfaces](https://developer.mozilla.org/en-US/docs/Web/API#interfaces) are modeled as record types and are the core of the bindings. +They represent the properties and methods of the Web API. If an interface inherits from another interface, the base interface is spread into the inheriting interface. + +```ReScript +type htmlSpanElement = { + ...htmlElement, +} +``` + + + +```ReScript +type rec node = { + nodeName: string + // ... more properties +} + +and element = { + // duplicated property from node + nodeName: string + // ... more properties +} +``` + +## Auxiliary Types + +Auxiliary types are used to represent types that are not directly related to the Web API but are used in the bindings. +These can occur both before interfaces and after interfaces, depending on the context. + +```ReScript +type eventListenerOptions = {mutable capture?: bool} + +// Model after the documentation of +// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options +type addEventListenerOptions = { + ...eventListenerOptions, + mutable passive?: bool, + mutable once?: bool, + mutable signal?: abortSignal, +} +``` diff --git a/docs/content/docs/contributing/testing.mdx b/docs/content/docs/contributing/testing.mdx new file mode 100644 index 0000000..7c510ac --- /dev/null +++ b/docs/content/docs/contributing/testing.mdx @@ -0,0 +1,47 @@ +--- +title: Testing +description: Learn more about testing the bindings for @rescript/webapi. +slug: "04-testing" +--- + +import { Aside } from "@astrojs/starlight/components"; + +Adding some unit tests is a great way to ensure that the bindings work as expected. +It illustrates how the bindings are supposed to be used and can help to catch regressions. + +## Testing the bindings + +Create a new help in the `test` folder with the same name as the module you want to test, followed by `_test.res`. + +import { FileTree } from "@astrojs/starlight/components"; + + + - src - DOMAPI.res - DOMAPI/ - HTMLCanvasElement.res - test - DOMAPI/ - + HTMLCanvasElement_test.res + + +Add a small sample of valid code that uses the bindings you've changed. +Add it to source control and run + +```shell +git add tests +npm test +``` + +If any of the existing tests have different ouput JavaScript, you will see a diff in the output and the test will fail. + + + +## Why add tests? + +Sometimes adding a test can feel like a bit of a hassle. But we insist that you add tests for the following reasons: + +- **Documentation**: Tests are a form of documentation. They show how the bindings are supposed to be used. +- **Regression**: Tests help to catch regressions. If a change breaks something, the test will fail. +- **Awareness**: Tests make you aware of the API you are using. + In the future we might trim down the generated bindings to only include the most used APIs. + If you have a test, you can be sure that the API is not going away. diff --git a/docs/content/docs/index.mdx b/docs/content/docs/index.mdx index 640e87a..87c4d2c 100644 --- a/docs/content/docs/index.mdx +++ b/docs/content/docs/index.mdx @@ -1,6 +1,20 @@ --- title: Getting started description: Learn more about @rescript/webapi. +hero: + title: "ReScript WebAPI" + tagline: ReScript bindings for everything you need in the browser. + actions: + - text: Let's go! + link: "#installation" + icon: right-arrow + - text: View on GitHub + link: https://github.com/rescript-lang/experimental-rescript-webapi + icon: external + variant: minimal + attrs: + rel: me +tableOfContents: false --- import { Tabs, TabItem, Code } from "@astrojs/starlight/components"; diff --git a/docs/content/docs/philosophy.mdx b/docs/content/docs/philosophy.mdx index 8e922bf..89e34d3 100644 --- a/docs/content/docs/philosophy.mdx +++ b/docs/content/docs/philosophy.mdx @@ -1,6 +1,7 @@ --- title: Design Philosophy description: Learn more about the design philosophy of @rescript/webapi. +slug: "design-philosophy" --- The core idea of these ReScript bindings is that each interface is modeled as a record type. Where possible, inheritance is represented using record spreading, and methods are modeled as functions in a separate module. This design allows for greater familiarity with the underlying JavaScript APIs, making it more friendly for newcomers. diff --git a/docs/content/docs/project-status.mdx b/docs/content/docs/project-status.mdx index 5969ac2..baaaaf6 100644 --- a/docs/content/docs/project-status.mdx +++ b/docs/content/docs/project-status.mdx @@ -1,6 +1,7 @@ --- title: Project Status description: Learn more about the current status of @rescript/webapi. +slug: "project-status" --- This project is highly experimental and subject to change. @@ -10,17 +11,13 @@ We aim to focus on the most used APIs first and then expand from there. ## Contributions -Contributions are welcome! Please [open an issue](https://github.com/rescript-lang/experimental-rescript-webapi/issues/new/choose) if you have a specific API you would like to see added. +[Contributions](./contributing/getting-started) are welcome! Please [open an issue](https://github.com/rescript-lang/experimental-rescript-webapi/issues/new/choose) if you have a specific API you would like to see added. This really helps prioritize our work and ensures that the most important APIs are addressed first. ## Current Status -Currently, all bindings are generated using a modified version of [TypeScript-DOM-lib-generator](https://github.com/microsoft/TypeScript-DOM-lib-generator). -Eventually, the generation may reach a level where manual tweaking can enhance the developer experience. -In the short term, generation could still be improved. - -Coding contributions are encouraged, but please be aware that the project is still in a very experimental stage. -It might be a little daunting and rough to jump right in. +All bindings were generated using a modified version of [TypeScript-DOM-lib-generator](https://github.com/microsoft/TypeScript-DOM-lib-generator). +The next step is to manual tweak these files so they can enhance the developer experience. ## Future From e0e2ad6fe315bedc69691a4ec07fe268a5de94d1 Mon Sep 17 00:00:00 2001 From: nojaf Date: Sat, 16 Nov 2024 16:30:26 +0100 Subject: [PATCH 9/9] Add section on API modelling --- .../docs/contributing/api-modelling.mdx | 149 ++++++++++++++++++ .../docs/contributing/code-generation.mdx | 2 +- .../docs/contributing/documentation.mdx | 2 +- .../docs/contributing/module-structure.mdx | 2 +- docs/content/docs/contributing/testing.mdx | 17 +- docs/styles/theme.css | 5 + 6 files changed, 168 insertions(+), 9 deletions(-) create mode 100644 docs/content/docs/contributing/api-modelling.mdx diff --git a/docs/content/docs/contributing/api-modelling.mdx b/docs/content/docs/contributing/api-modelling.mdx new file mode 100644 index 0000000..7b8fe79 --- /dev/null +++ b/docs/content/docs/contributing/api-modelling.mdx @@ -0,0 +1,149 @@ +--- +title: API Modelling +description: Learn more about the API modelling process of @rescript/webapi. +slug: "04-api-modelling" +--- + +import { Aside, Code, Icon } from "@astrojs/starlight/components"; + +One of this projects goals is to provide a consistent and idiomatic API for the Web APIs. +The interopt story of ReScript is quite good, but it it has limitations. +JavaScript is a dynamic language and has a lot of flexibility. +ReScript is a statically typed language and has to model the dynamic parts of JavaScript in a static way. + +## Dynamic parameters and properties + +Some Web APIs have a parameter or property that can be multiple things. +In ReScript, you would model this as a variant type. This is an example wrapper around values with a key property to discriminate them. + +In JavaScript, this strictness is not enforced and you can pass a string where a number is expected. +There are multiple strategies to model this in ReScript and it depends on the specific API which one is the best. + +### Overloads + +One example is [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). +This can access either a boolean or an object as the third parameter. + +```js +addEventListener(type, listener); +addEventListener(type, listener, options); +addEventListener(type, listener, useCapture); +``` + +Because, this is a method, we can model this as an overloaded function in ReScript. +The first two overloads are the same, so we can merge them into one with an optional options parameter. + +```ReScript +@send +external addEventListener: ( + htmlButtonElement, + eventType, + eventListener<'event>, + ~options: addEventListenerOptions=?, +) => unit = "addEventListener" +``` + +The third overload takes a boolean and is worth using when you want to change the default of the `useCapture` boolean parameter. +We can use [a fixed argument](https://rescript-lang.org/docs/manual/latest/bind-to-js-function#fixed-arguments) to model this. + +```ReScript +@send +external addEventListener_useCapture: ( + htmlButtonElement, + ~type_: eventType, + ~callback: eventListener<'event>, + @as(json`true`) _, +) => unit = "addEventListener" +``` + + + +### Decoded variants + +We can be pragmatic with overloaded functions and use model them in various creative ways. +For properties, we **cannot do this unfortunately**. A propery can only be defined once and have a single type. + +The strategy here is to use a decoded variant. + +Example for the [fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) property of the `CanvasRenderingContext2D` interface can be either a: + +- `string` +- `CanvasGradient` +- `CanvasPattern` + +These types are not all primitives and thus we cannot define it as [untagged variants](https://rescript-lang.org/docs/manual/latest/variant#untagged-variants). +What we can do instead is represent the type as an empty type and use a helper module to interact with this. + +export const fillStyleDef = ` +type fillStyle + +type canvasRenderingContext2D = { +// ... other propeties +mutable fillStyle: fillStyle +} +`; + + + +When we wish to read and write the `fillStyle` property, we can use a helper module to lift the type to an actual ReScript variant: + +export const fillStyleModule = ` +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)) +} +} +` + + + +We can now use `FillStyle.decode` to get the actual value of the `fillStyle` property. +And use `FillStyle.fromString`, `FillStyle.fromCanvasGradient`, and `FillStyle.fromCanvasPattern` to set the value. + +```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") +} +``` + + +Try and use `decoded` and `decode` as conventions for the type and function +names. diff --git a/docs/content/docs/contributing/code-generation.mdx b/docs/content/docs/contributing/code-generation.mdx index 90d0909..37ead83 100644 --- a/docs/content/docs/contributing/code-generation.mdx +++ b/docs/content/docs/contributing/code-generation.mdx @@ -43,7 +43,7 @@ external fetch: (window, string, ~init: requestInit=?) /** TODO: add better docs */ @send -external fetch_with_request: (window, request, ~init: requestInit=?) +external fetch_withRequest: (window, request, ~init: requestInit=?) => Promise.t = "fetch" ``` diff --git a/docs/content/docs/contributing/documentation.mdx b/docs/content/docs/contributing/documentation.mdx index bdd74a5..5f27194 100644 --- a/docs/content/docs/contributing/documentation.mdx +++ b/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: "05-documentation" +slug: "06-documentation" --- After the bindings are generated, all you got was a link to the MDN documentation. diff --git a/docs/content/docs/contributing/module-structure.mdx b/docs/content/docs/contributing/module-structure.mdx index dfbef7c..e7bdcfa 100644 --- a/docs/content/docs/contributing/module-structure.mdx +++ b/docs/content/docs/contributing/module-structure.mdx @@ -14,7 +14,7 @@ The bindings are organized by the Web API they represent. Each API has its inter - package.json - src - DOMAPI.res - - DOMAPI/ + - DOMAPI - HTMLElement.res diff --git a/docs/content/docs/contributing/testing.mdx b/docs/content/docs/contributing/testing.mdx index 7c510ac..97e9cb6 100644 --- a/docs/content/docs/contributing/testing.mdx +++ b/docs/content/docs/contributing/testing.mdx @@ -1,10 +1,10 @@ --- title: Testing description: Learn more about testing the bindings for @rescript/webapi. -slug: "04-testing" +slug: "05-testing" --- -import { Aside } from "@astrojs/starlight/components"; +import { Aside, FileTree } from "@astrojs/starlight/components"; Adding some unit tests is a great way to ensure that the bindings work as expected. It illustrates how the bindings are supposed to be used and can help to catch regressions. @@ -13,11 +13,16 @@ It illustrates how the bindings are supposed to be used and can help to catch re Create a new help in the `test` folder with the same name as the module you want to test, followed by `_test.res`. -import { FileTree } from "@astrojs/starlight/components"; - - - src - DOMAPI.res - DOMAPI/ - HTMLCanvasElement.res - test - DOMAPI/ - - HTMLCanvasElement_test.res + +- src + - DOMAPI.res + - DOMAPI + - HTMLCanvasElement.res +- tests + - DOMAPI + - HTMLCanvasElement_test.res + Add a small sample of valid code that uses the bindings you've changed. diff --git a/docs/styles/theme.css b/docs/styles/theme.css index 4bfb2ac..cc9f342 100644 --- a/docs/styles/theme.css +++ b/docs/styles/theme.css @@ -43,3 +43,8 @@ body { background-color: var(--scrollbar-thumb-background); } } + +.sl-markdown-content .inline-icon { + display: inline-block; + vertical-align: text-bottom; +}