Proof of concept querySelector helpers

Author: nojaf

README.md

@@ -9,7 +9,7 @@ Experimental successor to [rescript-webapi](https://github.com/TheSpyder/rescrip
 Install the package using your favorite package manager:
 
 ```shell
-npm i -D @rescript/webapi@experimental
+npm i @rescript/webapi@experimental
 ```
 
 and add `@rescript/webapi` to your `rescript.json`:

docs/content/docs/index.mdx

@@ -30,14 +30,14 @@ Install the package using your favorite package manager:
     <Code
       lang="shell"
       frame="none"
-      code="npm i -D @rescript/webapi@experimental"
+      code="npm i @rescript/webapi@experimental"
     />
   </TabItem>
   <TabItem label="bun">
     <Code
       lang="shell"
       frame="none"
-      code="bun i -D @rescript/webapi@experimental"
+      code="bun i @rescript/webapi@experimental"
     />
   </TabItem>
 </Tabs>

src/DOMAPI/Document.js

@@ -77,12 +77,9 @@ Throws a "HierarchyRequestError" DOMException if the constraints of the node tre
 @send
 external replaceChildren2: (document, string) => unit = "replaceChildren"
 
-/**
-Returns the first element that is a descendant of node that matches selectors.
-[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Document/querySelector)
-*/
-@send
-external querySelector: (document, string) => element = "querySelector"
+include QuerySelector.Impl({
+  type t = document
+})
 
 /**
 Returns all element descendants of node that match selectors.

src/DOMAPI/Document.res

@@ -8,6 +8,7 @@ external asHTMLElement: htmlCanvasElement => htmlElement = "%identity"
 external asElement: htmlCanvasElement => element = "%identity"
 external asNode: htmlCanvasElement => node = "%identity"
 external asEventTarget: htmlCanvasElement => eventTarget = "%identity"
+let isInstanceOf = (_: 't): bool => %raw(`param instanceof HTMLCanvasElement`)
 /**
 [Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus)
 */

src/DOMAPI/FillStyle.js

@@ -0,0 +1,36 @@
+open Prelude
+open DOMAPI
+
+module Impl = (
+  T: {
+    type t
+  },
+) => {
+  /**
+`querySelector(T.t, string)`
+
+Returns the first element that is a descendant of node that matches selectors.
+If nothing matches, the result is `null`. Use `querySelector_` helpers to get a typed result.
+
+```res
+t->querySelector("#myCanvas")
+```
+
+[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Document/querySelector)
+  */
+  @send
+  external querySelector: (T.t, string) => null<element> = "querySelector"
+
+  let querySelector_htmlCanvasElement = (t: T.t, selector: string): option<htmlCanvasElement> => {
+    let e = querySelector(t, selector)
+    switch e {
+    | Null.Null => None
+    | Null.Value(e) =>
+      if HTMLCanvasElement.isInstanceOf(e) {
+        Some(unsafeConversation(e))
+      } else {
+        None
+      }
+    }
+  }
+}

src/DOMAPI/HTMLCanvasElement.js

@@ -1,19 +1,22 @@
 open WebAPI.Global
 
-let myCanvas: DOMAPI.htmlCanvasElement =
-  document->Document.getElementById("myCanvas")->Prelude.unsafeConversation
-let ctx = myCanvas->HTMLCanvasElement.getContext_2D
+let myCanvas: option<DOMAPI.htmlCanvasElement> =
+  document->Document.querySelector_htmlCanvasElement("#myCanvas")
 
-ctx.fillStyle = FillStyle.fromString("red")
-ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.)
+myCanvas->Option.forEach(myCanvas => {
+  let ctx = myCanvas->HTMLCanvasElement.getContext_2D
 
-ctx.fillStyle = FillStyle.fromString("black")
-ctx.font = "2px Tahoma"
-ctx.textBaseline = CanvasAPI.Top
-ctx->CanvasRenderingContext2D.fillText(~text="MY TEXT", ~x=60., ~y=60.)
+  ctx.fillStyle = FillStyle.fromString("red")
+  ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.)
 
-switch ctx.fillStyle->FillStyle.decode {
-| FillStyle.String(color) => Console.log(`Color: ${color}`)
-| FillStyle.CanvasGradient(_) => Console.log("CanvasGradient")
-| FillStyle.CanvasPattern(_) => Console.log("CanvasPattern")
-}
+  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")
+  }
+})