From 76643d665bf9690cff2069d9712b740fe55a7a25 Mon Sep 17 00:00:00 2001 From: zetashift Date: Mon, 20 Feb 2023 00:24:45 +0100 Subject: [PATCH 01/13] Add docs/readme.md and initial build changes to provide mdoc support --- build.sbt | 2 +- docs/readme.md | 183 ++++++++++++++++++++++++++++++++++++++++++ prePR.sbt | 3 +- project/Build.scala | 30 ++++--- project/plugins.sbt | 11 +-- readme/Index.scalatex | 163 ------------------------------------- 6 files changed, 209 insertions(+), 183 deletions(-) create mode 100644 docs/readme.md delete mode 100644 readme/Index.scalatex diff --git a/build.sbt b/build.sbt index 4725f5357..b5d0bb885 100644 --- a/build.sbt +++ b/build.sbt @@ -13,4 +13,4 @@ val testsChrome = Build.testsChrome val testsFirefox = Build.testsFirefox val testsNodeJsdom = Build.testsNodeJsdom val example = Build.example -val readme = Build.readme +val docs = Build.docs diff --git a/docs/readme.md b/docs/readme.md new file mode 100644 index 000000000..166c4eb9a --- /dev/null +++ b/docs/readme.md @@ -0,0 +1,183 @@ +## scala-js-dom + +--- + +#### Statically typed DOM API for Scala.js + +Scala-js-dom provides a nice statically typed interface to the DOM such that it can be called from Scala code without resorting to `js.Dynamic`. +All javascript globals functions, singletons and classes are members of the `org.scalajs.dom`, +`org.scalajs.dom.html`, `org.scalajs.dom.svg`, etc. packages. + +For example: + +```scala +import org.scalajs.dom + +def main() = dom.window.alert("Hi from scala-js-dom!") +``` + +## Usage + +Add the following to your sbt build definition: + +```scala +libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "@VERSION@" +``` + +then enjoy the types available in org.scalajs.dom. scalajs-dom @VERSION@ is built and published for Scala.js 1.5+ with Scala 2.11, 2.12, 2.13, and 3.0+. + +To begin with, scala-js-dom organizes the full-list of DOM APIs into a number of buckets: + +- dom.html: HTML element APIs +- dom.svg: SVG element APIs +- dom.idb: IndexedDB APIs +- dom.css: CSS APIs +- dom: Miscellanious, unclassified APIs + +Most names have been shortened from names of the raw browser APIs, since the namespacing avoids collisions. By convention these types are imported qualified: e.g. as `html.Canvas` instead of directly as `Canvas`. There is also the `dom.raw` namespace which contains everything with their full, un-shortened name. + +## Examples + +You can start using the bindings using the following import: + +```scala mdoc:js:shared +import org.scalajs.dom._ +``` + +### Appending a child to a `Node` + +```scala mdoc:js:shared +def appendElement(div: html.Div): Unit = { + val child = document.createElement("div") + child.textContent = "I can add elements to DOM elements!" + div.appendChild(child) +} +``` + +```scala mdoc:js:invisible +
+ +--- +document.getElementById("demo1").addEventListener("click", (ev: Event) => { + appendElement(document.getElementById("outer-container").asInstanceOf[html.Div]) +}) +``` + +### Add an EventListener for `onmousemove` + +```scala mdoc:js +def showOnMouseCoordinates(pre: html.Pre): Unit = { + pre.onmousemove = (ev: MouseEvent) => + pre.textContent = s""" + |ev.clientX: ${ev.clientX} + |ev.clientY: ${ev.clientY} + |ev.pageX: ${ev.pageX} + |ev.screenX: ${ev.screenX} + |ev.screenY: ${ev.screenY} + """.stripMargin +} +``` + +### Storing an item in `localStorage` + +```scala mdoc:js +def storeInputInLocalStorage(input: html.Input, box: html.Div) = { + val key = "myKey" + input.value = window.localStorage.getItem(key) + + input.onkeyup = { (e: Event) => + window.localStorage.setItem( + key, input.value + ) + + box.textContent = s"Saved: ${input.value} to local storage!" + } +} +``` + +### Using `Canvas` to draw + +```scala mdoc:js +type Context2D = CanvasRenderingContext2D + +def drawCuteSmiley(canvas: html.Canvas) = { + val context = canvas.getContext("2d").asInstanceOf[Context2D] + + val size = 300 + canvas.width = size + canvas.height = size + + context.strokeStyle = "red" + context.lineWidth = 3 + context.beginPath() + context.moveTo(size/3, 0) + context.lineTo(size/3, size/3) + context.moveTo(size*2/3, 0) + context.lineTo(size*2/3, size/3) + context.moveTo(size, size/2) + context.arc(size/2, size/2, size/2, 0, 3.14) + + context.stroke() +} +``` + +### Using `Fetch` to make API calls in the browser + +```scala mdoc:js +import scala.concurrent.ExecutionContext.Implicits.global + +def fetchBoredApi(element: html.Pre) = { + val url = + "https://www.boredapi.com/api/activity" + + val responseText = for { + response <- fetch(url).toFuture + text <- response.text().toFuture + } yield { + text + } + + for (text <- responseText) + element.textContent = text +} +``` + +### Using Websockets + +```scala mdoc:js +// TODO: currently crashes with an error +// def echoWebSocket(input: html.Input, pre: html.Pre) = { +// val echo = "wss://echo.websocket.org" +// val socket = new WebSocket(echo) + +// socket.onmessage = { +// (e: MessageEvent) => +// pre.textContent += +// e.data.toString +// } + +// socket.onopen = { (e: Event) => +// input.onkeyup = { (e: Event) => +// socket.send(input.value) +// } +// } +// } +``` + +### Styling an HTML element + +```scala mdoc:js +def changeColor(div: html.Div) = { + val colors = Seq("red", "green", "blue") + + val index = util.Random.nextInt(colors.length) + + div.style.color = colors(index) +} +``` + +## Contributing + +The DOM API is always evolving, and `scala-js-dom` tries to provide a thin-but-idiomatic Scala interface to modern browser APIs, without breaking the spec. + +If you see something that you think can be improved, feel free to send a pull request. See our [Contributing Guide](https://github.com/scala-js/scala-js-dom/blob/main/CONTRIBUTING.md) for a detailed overview for starting hacking on `scala-js-dom` and making a PR! diff --git a/prePR.sbt b/prePR.sbt index 100a174e9..34733824c 100644 --- a/prePR.sbt +++ b/prePR.sbt @@ -41,7 +41,8 @@ ThisBuild / prePR_nonCross := Def.sequential( Def.taskDyn { if (scalaVersion.value.startsWith("2.12.")) - Def.task[Unit]((readme / Compile / compile).value) + // TODO should this really be docs / Compile? + Def.task[Unit]((docs / Compile / compile).value) else Def.task(()) }, diff --git a/project/Build.scala b/project/Build.scala index bab9374c2..5aca44d23 100644 --- a/project/Build.scala +++ b/project/Build.scala @@ -17,6 +17,9 @@ import scalafix.sbt.ScalafixPlugin.autoImport._ import scalatex.ScalatexReadme import Dependencies._ import Lib._ +import mdoc.MdocPlugin +import sbtdynver.DynVerPlugin.autoImport.previousStableVersion +import mdoc.MdocPlugin.autoImport._ object Build { @@ -37,7 +40,6 @@ object Build { testsFirefox, testsNodeJsdom, example, - // readme, // This is a Scala 2.12 only module ) lazy val dom = project @@ -141,18 +143,20 @@ object Build { .enablePlugins(ScalaJSPlugin) .configure(commonSettings, crossScala, preventPublication) - lazy val readme = - ScalatexReadme( - projectId = "readme", - wd = file(""), - url = "https://github.com/scala-js/scala-js-dom/tree/main", - source = "Index", - autoResources = Seq("example-opt.js"), - ) - .configure(commonSettings, preventPublication) + lazy val jsdocs = project + .in(file("mdocs-js")) + .dependsOn(dom) + .enablePlugins(ScalaJSPlugin) + .configure(commonSettings, crossScala, preventPublication) + + lazy val docs = project + .in(file("mdocs")) .settings( - scalaVersion := Ver.scala212, - Compile / resources += (example / Compile / fullOptJS).value.data, + mdocJS := Some(jsdocs), + mdocVariables := Map( + "VERSION" -> previousStableVersion.value.getOrElse("2.3.0") + ) ) - + .enablePlugins(MdocPlugin) + .configure(commonSettings, crossScala, preventPublication) } diff --git a/project/plugins.sbt b/project/plugins.sbt index 555608f9d..a1dc5dfff 100644 --- a/project/plugins.sbt +++ b/project/plugins.sbt @@ -1,9 +1,10 @@ libraryDependencies += "org.scala-js" %% "scalajs-env-jsdom-nodejs" % "1.1.0" libraryDependencies += "org.scala-js" %% "scalajs-env-selenium" % "1.1.1" -addSbtPlugin("ch.epfl.scala" % "sbt-scalafix" % "0.10.4") -addSbtPlugin("com.eed3si9n" % "sbt-buildinfo" % "0.11.0") +addSbtPlugin("ch.epfl.scala" % "sbt-scalafix" % "0.10.4") +addSbtPlugin("com.eed3si9n" % "sbt-buildinfo" % "0.11.0") addSbtPlugin("com.github.sbt" % "sbt-ci-release" % "1.5.11") -addSbtPlugin("com.lihaoyi" % "scalatex-sbt-plugin" % "0.3.11") -addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.7.1") -addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.5.0") +addSbtPlugin("com.lihaoyi" % "scalatex-sbt-plugin" % "0.3.11") +addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.7.1") +addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.5.0") +addSbtPlugin("org.scalameta" % "sbt-mdoc" % "2.3.6") \ No newline at end of file diff --git a/readme/Index.scalatex b/readme/Index.scalatex deleted file mode 100644 index 34b6a7cf6..000000000 --- a/readme/Index.scalatex +++ /dev/null @@ -1,163 +0,0 @@ -@import ammonite.ops._ -@import Main._ -@a( - href:="https://github.com/scala-js/scala-js-dom", - position.absolute, - top:=0,right:=0,border:=0, - img( - src:="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67", - alt:="Fork me on GitHub" - ) -) -@def pair(example: String, - frags: Seq[scalatags.Text.TypedTag[String]], - autorun: Boolean = false) = { - val ids = (0 until frags.length).map(_ => util.Random.nextInt(999999)) - val queries = ids.map(id => s"document.getElementById('$id')").mkString(", ") - div( - div(width:="50%", float.left)( - hl.ref( - pwd/'example/'src/'main/'scala/'example/"Example.scala", - Seq(s"object $example", "main") - ) - ), - div(width:="50%", float.left, padding:="8px", boxSizing.`border-box`)( - if (!autorun) - a(cls:="pure-button", onclick:=s"Example$example.main($queries)", "Run"), - div( - frags.zip(ids).map{case (f, i) => f(id:=i, backgroundColor:="#fafafa")} - ), - if (autorun) - script(s"Example$example.main($queries)") - ), - div(clear.both) - ) -} - -@scalatags.Text.tags2.style - pre{ - margin: 0px; - - } - -@sect{scala-js-dom} - - @p - Scala-js-dom provides a nice statically typed interface to the DOM such that it can be called from Scala code without resorting to @hl.scala{js.Dynamic}. All javascript globals functions, singletons and classes are members of the @hl.scala{org.scalajs.dom}, @hl.scala{org.scalajs.dom.html}, @hl.scala{org.scalajs.dom.svg}, etc. packages. For example: - - @pair("Alert", Nil) - - @p - Will cause a javascript alert box saying `Hi from Scala-js-dom` to appear. Other javascript classes and objects can be similarly accessed e.g. @hl.scala{new dom.XMLHttpRequest()} to perform a new Ajax request, @hl.scala{dom.document} to access the global @hl.scala{document} object, or @hl.scala{html.Div} to to refer to the type of a @hl.scala{
} element. - - @sect{Usage} - @p - Add the following to your sbt build definition: - - @hl.scala - libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.2.0" - - @p - then enjoy the types available in @hl.scala{org.scalajs.dom}. scalajs-dom 2.2.0 is built and published for Scala.js 1.5+ with Scala 2.11, 2.12, 2.13, and 3.0+. - - @p - To begin with, @code{scala-js-dom} organizes the full-list of DOM APIs into a number of buckets: - - @ul - @li - @code{dom.html}: HTML element APIs - @li - @code{dom.svg}: SVG element APIs - @li - @code{dom.idb}: IndexedDB APIs - @li - @code{dom.css}: CSS APIs - @li - @code{dom}: Miscellanious, unclassified APIs - - @p - Most names have been shortened from names of the @a("raw browser APIs", href:="https://developer.mozilla.org/en-US/docs/Web/API"), since the namespacing avoids collisions. By convention these types are imported qualified: e.g. as @hl.scala{html.Canvas} instead of directly as @hl.scala{Canvas}. There is also the @code{dom.raw} namespace which contains everything with their full, un-shortened name. - - @p - Here are some examples to get you started: - - @sect{Node.appendChild} - @pair( - "NodeAppendChild", - Seq(div("div")) - ) - - @sect{Node.onmousemove} - @pair( - "EventHandler", - Seq(pre("Hover this box!")), - autorun=true - ) - - @sect{dom.btoa} - @pair( - "Base64", - Seq(input(width:="100%", placeholder:="Enter text to b64 encode"), div), - autorun=true - ) - - @sect{dom.localStorage} - @pair( - "LocalStorage", - Seq(input(width:="100%"), div), - autorun=true - ) - - @sect{dom.HTMLCanvasElement} - @pair( - "Canvas", - Seq(canvas), - autorun=true - ) - - @sect{dom.Fetch} - @pair( - "Fetch", - Seq( - pre("output") - ) - ) - - @sect{dom.Websocket} - @pair( - "Websocket", - Seq( - input(placeholder:="Type something in"), - pre("output") - ), - autorun=true - ) - - @sect{Element.style} - @pair( - "ElementStyle", - Seq(div(b("div"), height:="50px")) - ) - - @p - The goal of this project is to provide a thin-but-idiomatic-scala interface to modern browser APIs. In particular: - @ul - @li - Deprecated properties/methods/types will not be present. - @li - IE-only, Chrome-only, FF-only, and in general browser-specific attributes will typically not be present. - @li - The name of a Scala type should map directly to the name of the corresponding Javascript type. - @li - Any type which is a Javascript type (e.g. you can @hl.scala{instanceof} in javascript) should be a Scala @hl.scala{class}; any other interface which isn't a Javascript type should be a @hl.scala{trait}. - @li - Read-only members should be @hl.scala{def}, and not-directly-instantiable classes should have @hl.scala{private} constructors. - - @sect{Contributing} - @p - The DOM API is always evolving, and scala-js-dom is a hodgepodge of auto-generated/scraped/hand-tweaked code full of rough edges. If you see something that you think can be improved, feel free to send a pull request. These could include: - @ul - @li - Improved doc-comments; who doesn't love better docs? - @li - Missing methods/properties/classes; send the PR adding it in including it together with a link to an authoritative source (e.g. MDN) and it should get merged. From d8bbf66841b41fe689cfe0aa451d583662e60298 Mon Sep 17 00:00:00 2001 From: zetashift Date: Mon, 20 Feb 2023 01:33:38 +0100 Subject: [PATCH 02/13] Update mdoc and remove scalatex import --- project/Build.scala | 1 - project/plugins.sbt | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/project/Build.scala b/project/Build.scala index 5aca44d23..98c428f85 100644 --- a/project/Build.scala +++ b/project/Build.scala @@ -14,7 +14,6 @@ import sbtbuildinfo.BuildInfoPlugin import sbtbuildinfo.BuildInfoPlugin.autoImport._ import scalafix.sbt.ScalafixPlugin import scalafix.sbt.ScalafixPlugin.autoImport._ -import scalatex.ScalatexReadme import Dependencies._ import Lib._ import mdoc.MdocPlugin diff --git a/project/plugins.sbt b/project/plugins.sbt index a1dc5dfff..1ce931338 100644 --- a/project/plugins.sbt +++ b/project/plugins.sbt @@ -4,7 +4,6 @@ libraryDependencies += "org.scala-js" %% "scalajs-env-selenium" % "1.1.1" addSbtPlugin("ch.epfl.scala" % "sbt-scalafix" % "0.10.4") addSbtPlugin("com.eed3si9n" % "sbt-buildinfo" % "0.11.0") addSbtPlugin("com.github.sbt" % "sbt-ci-release" % "1.5.11") -addSbtPlugin("com.lihaoyi" % "scalatex-sbt-plugin" % "0.3.11") addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.7.1") addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.5.0") -addSbtPlugin("org.scalameta" % "sbt-mdoc" % "2.3.6") \ No newline at end of file +addSbtPlugin("org.scalameta" % "sbt-mdoc" % "2.3.7") \ No newline at end of file From 044ec0a70ea3a366ca25cabcbf82cecd133a01c4 Mon Sep 17 00:00:00 2001 From: zetashift Date: Mon, 20 Feb 2023 01:53:42 +0100 Subject: [PATCH 03/13] Fix build.sbt to include jsdocs --- build.sbt | 1 + 1 file changed, 1 insertion(+) diff --git a/build.sbt b/build.sbt index b5d0bb885..507ef83ed 100644 --- a/build.sbt +++ b/build.sbt @@ -13,4 +13,5 @@ val testsChrome = Build.testsChrome val testsFirefox = Build.testsFirefox val testsNodeJsdom = Build.testsNodeJsdom val example = Build.example +val jsdocs = Build.jsdocs val docs = Build.docs From 3863a08deb336bbdeb91b93c86328e9a864aca61 Mon Sep 17 00:00:00 2001 From: zetashift Date: Mon, 27 Feb 2023 20:42:19 +0100 Subject: [PATCH 04/13] Make more examples runnable --- docs/readme.md | 80 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 69 insertions(+), 11 deletions(-) diff --git a/docs/readme.md b/docs/readme.md index 166c4eb9a..bd4c2954a 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -56,19 +56,19 @@ def appendElement(div: html.Div): Unit = { ```scala mdoc:js:invisible
- + --- -document.getElementById("demo1").addEventListener("click", (ev: Event) => { +document.getElementById("demo1-btn").addEventListener("click", (ev: Event) => { appendElement(document.getElementById("outer-container").asInstanceOf[html.Div]) }) ``` ### Add an EventListener for `onmousemove` -```scala mdoc:js -def showOnMouseCoordinates(pre: html.Pre): Unit = { - pre.onmousemove = (ev: MouseEvent) => - pre.textContent = s""" +```scala mdoc:js:shared +def showOnMouseCoordinates(mouseArea: html.Div, info: html.Pre): Unit = { + mouseArea.onmousemove = (ev: MouseEvent) => + info.textContent = s""" |ev.clientX: ${ev.clientX} |ev.clientY: ${ev.clientY} |ev.pageX: ${ev.pageX} @@ -78,9 +78,23 @@ def showOnMouseCoordinates(pre: html.Pre): Unit = { } ``` +```scala mdoc:js:invisible +
+
+ 

+

+
+---
+val mouseArea = document.getElementById("mouse-container").asInstanceOf[html.Div]
+val info = document.getElementById("demo2-output").asInstanceOf[html.Pre]
+document.getElementById("demo2-btn").addEventListener("click", (ev: Event) => {
+  showOnMouseCoordinates(mouseArea, info)
+})
+```
+
 ### Storing an item in `localStorage`
 
-```scala mdoc:js
+```scala mdoc:js:shared
 def storeInputInLocalStorage(input: html.Input, box: html.Div) = {
   val key = "myKey"
   input.value = window.localStorage.getItem(key)
@@ -95,15 +109,29 @@ def storeInputInLocalStorage(input: html.Input, box: html.Div) = {
 }
 ```
 
+```scala mdoc:js:invisible
+
+
+
+---
+val input = document.getElementById("demo3-input").asInstanceOf[html.Input]
+val output = document.getElementById("demo3-output").asInstanceOf[html.Div]
+document.getElementById("demo3-btn").addEventListener("click", (ev: Event) => {
+  input.style.display = "block"
+  output.style.display = "block"
+  storeInputInLocalStorage(input, output)
+})
+```
+
 ### Using `Canvas` to draw
 
-```scala mdoc:js
+```scala mdoc:js:shared
 type Context2D = CanvasRenderingContext2D
 
 def drawCuteSmiley(canvas: html.Canvas) = {
   val context = canvas.getContext("2d").asInstanceOf[Context2D]
 
-  val size = 300
+  val size = 150
   canvas.width = size
   canvas.height = size
 
@@ -121,9 +149,20 @@ def drawCuteSmiley(canvas: html.Canvas) = {
 }
 ```
 
+```scala mdoc:js:invisible
+
+
+
+---
+val canvas = document.getElementById("demo4-canvas").asInstanceOf[html.Canvas]
+document.getElementById("demo4-btn").addEventListener("click", (ev: Event) => {
+  drawCuteSmiley(canvas)
+})
+```
+
 ### Using `Fetch` to make API calls in the browser
 
-```scala mdoc:js
+```scala mdoc:js:shared
 import scala.concurrent.ExecutionContext.Implicits.global
 
 def fetchBoredApi(element: html.Pre) = {
@@ -142,6 +181,16 @@ def fetchBoredApi(element: html.Pre) = {
 }
 ```
 
+```scala mdoc:js:invisible
+

+
+---
+val output = document.getElementById("demo5-output").asInstanceOf[html.Pre]
+document.getElementById("demo5-btn").addEventListener("click", (ev: Event) => {
+  fetchBoredApi(output)
+})
+```
+
 ### Using Websockets
 
 ```scala mdoc:js
@@ -166,7 +215,7 @@ def fetchBoredApi(element: html.Pre) = {
 
 ### Styling an HTML element
 
-```scala mdoc:js
+```scala mdoc:js:shared
 def changeColor(div: html.Div) = {
   val colors = Seq("red", "green", "blue")
 
@@ -176,6 +225,15 @@ def changeColor(div: html.Div) = {
 }
 ```
 
+```scala mdoc:js:invisible
+
Color me!

+
+---
+document.getElementById("demo7-btn").addEventListener("click", (ev: Event) => {
+  changeColor(document.getElementById("demo7-text").asInstanceOf[html.Div])
+})
+```
+
 ## Contributing
 
 The DOM API is always evolving, and `scala-js-dom` tries to provide a thin-but-idiomatic Scala interface to modern browser APIs, without breaking the spec.

From 67a58a2d2a34900e3187eadee21f3144c6ca4fdf Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Mon, 27 Feb 2023 21:24:46 +0100
Subject: [PATCH 05/13] Add base64 encoding example and minor formatting
 changes

---
 docs/readme.md | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/docs/readme.md b/docs/readme.md
index bd4c2954a..c3d4ffec1 100644
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -100,9 +100,7 @@ def storeInputInLocalStorage(input: html.Input, box: html.Div) = {
   input.value = window.localStorage.getItem(key)
 
   input.onkeyup = { (e: Event) =>
-    window.localStorage.setItem(
-      key, input.value
-    )
+    window.localStorage.setItem(key, input.value)
 
     box.textContent = s"Saved: ${input.value} to local storage!"
   }
@@ -166,8 +164,7 @@ document.getElementById("demo4-btn").addEventListener("click", (ev: Event) => {
 import scala.concurrent.ExecutionContext.Implicits.global
 
 def fetchBoredApi(element: html.Pre) = {
-  val url =
-    "https://www.boredapi.com/api/activity"
+  val url = "https://www.boredapi.com/api/activity"
 
   val responseText = for {
     response <- fetch(url).toFuture
@@ -218,7 +215,6 @@ document.getElementById("demo5-btn").addEventListener("click", (ev: Event) => {
 ```scala mdoc:js:shared
 def changeColor(div: html.Div) = {
   val colors = Seq("red", "green", "blue")
-
   val index = util.Random.nextInt(colors.length)
 
   div.style.color = colors(index)
@@ -234,6 +230,30 @@ document.getElementById("demo7-btn").addEventListener("click", (ev: Event) => {
 })
 ```
 
+### Encode in base64
+
+```scala mdoc:js:shared
+def encodeBase64(in: html.Input, out: html.Div) = {
+  in.onkeyup = { (e: Event) =>
+    out.textContent = window.btoa(in.value)
+  }
+}
+```
+
+```scala mdoc:js:invisible
+
+
+
+---
+val input = document.getElementById("demo8-input").asInstanceOf[html.Input]
+val output = document.getElementById("demo8-output").asInstanceOf[html.Div]
+document.getElementById("demo8-btn").addEventListener("click", (ev: Event) => {
+  input.style.display = "block"
+  output.style.display = "block"
+  encodeBase64(input, output)
+})
+```
+
 ## Contributing
 
 The DOM API is always evolving, and `scala-js-dom` tries to provide a thin-but-idiomatic Scala interface to modern browser APIs, without breaking the spec.

From 13c0fa7fd3fbcec5e9e85544c98a38c3e3d67d02 Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Sat, 11 Mar 2023 21:50:38 +0100
Subject: [PATCH 06/13] Remove websockets example and small HTML improvements

---
 docs/readme.md | 47 +++++++++++++----------------------------------
 1 file changed, 13 insertions(+), 34 deletions(-)

diff --git a/docs/readme.md b/docs/readme.md
index c3d4ffec1..fe5144e3c 100644
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -150,8 +150,9 @@ def drawCuteSmiley(canvas: html.Canvas) = {
 ```scala mdoc:js:invisible
 
 
-
+
 ---
+
 val canvas = document.getElementById("demo4-canvas").asInstanceOf[html.Canvas]
 document.getElementById("demo4-btn").addEventListener("click", (ev: Event) => {
   drawCuteSmiley(canvas)
@@ -180,7 +181,7 @@ def fetchBoredApi(element: html.Pre) = {
 
 ```scala mdoc:js:invisible
 

-
+
 ---
 val output = document.getElementById("demo5-output").asInstanceOf[html.Pre]
 document.getElementById("demo5-btn").addEventListener("click", (ev: Event) => {
@@ -188,28 +189,6 @@ document.getElementById("demo5-btn").addEventListener("click", (ev: Event) => {
 })
 ```
 
-### Using Websockets
-
-```scala mdoc:js
-// TODO: currently crashes with an error
-// def echoWebSocket(input: html.Input, pre: html.Pre) = {
-//   val echo = "wss://echo.websocket.org"
-//   val socket = new WebSocket(echo)
-
-//   socket.onmessage = {
-//     (e: MessageEvent) =>
-//       pre.textContent +=
-//         e.data.toString
-//   }
-
-//   socket.onopen = { (e: Event) =>
-//     input.onkeyup = { (e: Event) =>
-//       socket.send(input.value)
-//     }
-//   }
-// }
-```
-
 ### Styling an HTML element
 
 ```scala mdoc:js:shared
@@ -222,11 +201,11 @@ def changeColor(div: html.Div) = {
 ```
 
 ```scala mdoc:js:invisible
-
Color me!

-
+
Color me!

+
 ---
-document.getElementById("demo7-btn").addEventListener("click", (ev: Event) => {
-  changeColor(document.getElementById("demo7-text").asInstanceOf[html.Div])
+document.getElementById("demo6-btn").addEventListener("click", (ev: Event) => {
+  changeColor(document.getElementById("demo6-text").asInstanceOf[html.Div])
 })
 ```
 
@@ -241,13 +220,13 @@ def encodeBase64(in: html.Input, out: html.Div) = {
 ```
 
 ```scala mdoc:js:invisible
-
-
-
+
+
+
 ---
-val input = document.getElementById("demo8-input").asInstanceOf[html.Input]
-val output = document.getElementById("demo8-output").asInstanceOf[html.Div]
-document.getElementById("demo8-btn").addEventListener("click", (ev: Event) => {
+val input = document.getElementById("demo7-input").asInstanceOf[html.Input]
+val output = document.getElementById("demo7-output").asInstanceOf[html.Div]
+document.getElementById("demo7-btn").addEventListener("click", (ev: Event) => {
   input.style.display = "block"
   output.style.display = "block"
   encodeBase64(input, output)

From 56a6bf1ad5aa69d5b88195ddf6cf1b0585bd6e71 Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Sun, 19 Mar 2023 13:10:11 +0100
Subject: [PATCH 07/13] Update versions in docs/readme.md

---
 docs/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/readme.md b/docs/readme.md
index fe5144e3c..65a260c92 100644
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -24,7 +24,7 @@ Add the following to your sbt build definition:
 libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "@VERSION@"
 ```
 
-then enjoy the types available in org.scalajs.dom. scalajs-dom @VERSION@ is built and published for Scala.js 1.5+ with Scala 2.11, 2.12, 2.13, and 3.0+.
+then enjoy the types available in org.scalajs.dom. scalajs-dom @VERSION@ is built and published for Scala.js 1.7+ with Scala 2.11, 2.12, 2.13, and 3.1+.
 
 To begin with, scala-js-dom organizes the full-list of DOM APIs into a number of buckets:
 

From e90c3697ddc88e0c7ef52e79eb9e1e8ba36b6125 Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Sun, 19 Mar 2023 13:16:06 +0100
Subject: [PATCH 08/13] Change some examples to not need a run button

---
 docs/readme.md | 34 +++++++++-------------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/docs/readme.md b/docs/readme.md
index 65a260c92..9b8cee088 100644
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -83,13 +83,10 @@ def showOnMouseCoordinates(mouseArea: html.Div, info: html.Pre): Unit = {
   

   

 

-
 ---
 val mouseArea = document.getElementById("mouse-container").asInstanceOf[html.Div]
 val info = document.getElementById("demo2-output").asInstanceOf[html.Pre]
-document.getElementById("demo2-btn").addEventListener("click", (ev: Event) => {
-  showOnMouseCoordinates(mouseArea, info)
-})
+showOnMouseCoordinates(mouseArea, info)
 ```
 
 ### Storing an item in `localStorage`
@@ -108,17 +105,13 @@ def storeInputInLocalStorage(input: html.Input, box: html.Div) = {
 ```
 
 ```scala mdoc:js:invisible
-
-
+
+

 
 ---
 val input = document.getElementById("demo3-input").asInstanceOf[html.Input]
 val output = document.getElementById("demo3-output").asInstanceOf[html.Div]
-document.getElementById("demo3-btn").addEventListener("click", (ev: Event) => {
-  input.style.display = "block"
-  output.style.display = "block"
-  storeInputInLocalStorage(input, output)
-})
+storeInputInLocalStorage(input, output)
 ```
 
 ### Using `Canvas` to draw
@@ -148,15 +141,11 @@ def drawCuteSmiley(canvas: html.Canvas) = {
 ```
 
 ```scala mdoc:js:invisible
-
-
-
+
 ---
 
 val canvas = document.getElementById("demo4-canvas").asInstanceOf[html.Canvas]
-document.getElementById("demo4-btn").addEventListener("click", (ev: Event) => {
-  drawCuteSmiley(canvas)
-})
+drawCuteSmiley(canvas)
 ```
 
 ### Using `Fetch` to make API calls in the browser
@@ -220,17 +209,12 @@ def encodeBase64(in: html.Input, out: html.Div) = {
 ```
 
 ```scala mdoc:js:invisible
-
-
-
+
+

 ---
 val input = document.getElementById("demo7-input").asInstanceOf[html.Input]
 val output = document.getElementById("demo7-output").asInstanceOf[html.Div]
-document.getElementById("demo7-btn").addEventListener("click", (ev: Event) => {
-  input.style.display = "block"
-  output.style.display = "block"
-  encodeBase64(input, output)
-})
+encodeBase64(input, output)
 ```
 
 ## Contributing

From 9e444a97b10239562b3d5105287d89acd81f99f6 Mon Sep 17 00:00:00 2001
From: Arman Bilge 
Date: Wed, 29 Mar 2023 05:05:34 +0000
Subject: [PATCH 09/13] Tweaking for jekyll

---
 docs/{readme.md => index.md} | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)
 rename docs/{readme.md => index.md} (99%)

diff --git a/docs/readme.md b/docs/index.md
similarity index 99%
rename from docs/readme.md
rename to docs/index.md
index 9b8cee088..b95c37532 100644
--- a/docs/readme.md
+++ b/docs/index.md
@@ -1,5 +1,6 @@
-## scala-js-dom
-
+---
+layout: doc
+title: scala-js-dom
 ---
 
 #### Statically typed DOM API for Scala.js

From bfc64bd30cac74995f108d3363d4adca62a41397 Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Thu, 11 May 2023 22:34:17 +0200
Subject: [PATCH 10/13] Fix naming of scalajs-dom in title of index.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Doeraene 
---
 docs/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index b95c37532..b6efb41cf 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,6 @@
 ---
 layout: doc
-title: scala-js-dom
+title: scalajs-dom
 ---
 
 #### Statically typed DOM API for Scala.js

From 04531e967616a7374dc0a9de1ede7deb92ca0daa Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Thu, 11 May 2023 22:34:59 +0200
Subject: [PATCH 11/13] Add new line for better diff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Doeraene 
---
 docs/index.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index b6efb41cf..29ba3dfbb 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -222,4 +222,5 @@ encodeBase64(input, output)
 
 The DOM API is always evolving, and `scala-js-dom` tries to provide a thin-but-idiomatic Scala interface to modern browser APIs, without breaking the spec.
 
-If you see something that you think can be improved, feel free to send a pull request. See our [Contributing Guide](https://github.com/scala-js/scala-js-dom/blob/main/CONTRIBUTING.md) for a detailed overview for starting hacking on `scala-js-dom` and making a PR!
+If you see something that you think can be improved, feel free to send a pull request.
+See our [Contributing Guide](https://github.com/scala-js/scala-js-dom/blob/main/CONTRIBUTING.md) for a detailed overview for starting hacking on `scala-js-dom` and making a PR!

From afbb4573645e45a986461bc4d75472218b1d26b8 Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Thu, 11 May 2023 22:37:05 +0200
Subject: [PATCH 12/13] Update sbt-ci-release

---
 project/plugins.sbt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/project/plugins.sbt b/project/plugins.sbt
index 1ce931338..098fdeb9c 100644
--- a/project/plugins.sbt
+++ b/project/plugins.sbt
@@ -3,7 +3,7 @@ libraryDependencies += "org.scala-js" %% "scalajs-env-selenium"     % "1.1.1"
 
 addSbtPlugin("ch.epfl.scala"   % "sbt-scalafix"        % "0.10.4")
 addSbtPlugin("com.eed3si9n"    % "sbt-buildinfo"       % "0.11.0")
-addSbtPlugin("com.github.sbt"  % "sbt-ci-release"      % "1.5.11")
+addSbtPlugin("com.github.sbt"  % "sbt-ci-release"      % "1.5.12")
 addSbtPlugin("org.scala-js"    % "sbt-scalajs"         % "1.7.1")
 addSbtPlugin("org.scalameta"   % "sbt-scalafmt"        % "2.5.0")
 addSbtPlugin("org.scalameta"   % "sbt-mdoc"            % "2.3.7")
\ No newline at end of file

From 26a932c02f12586a14830e52dff11e9c1d2b6300 Mon Sep 17 00:00:00 2001
From: zetashift 
Date: Thu, 11 May 2023 22:54:53 +0200
Subject: [PATCH 13/13] Remove dom.raw mention and fix scala-js naming in
 places

---
 docs/index.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 29ba3dfbb..733d0a335 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,7 +5,7 @@ title: scalajs-dom
 
 #### Statically typed DOM API for Scala.js
 
-Scala-js-dom provides a nice statically typed interface to the DOM such that it can be called from Scala code without resorting to `js.Dynamic`.
+Scalajs-dom provides a nice statically typed interface to the DOM such that it can be called from Scala code without resorting to `js.Dynamic`.
 All javascript globals functions, singletons and classes are members of the `org.scalajs.dom`,
 `org.scalajs.dom.html`, `org.scalajs.dom.svg`, etc. packages.
 
@@ -27,15 +27,14 @@ libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "@VERSION@"
 
 then enjoy the types available in org.scalajs.dom. scalajs-dom @VERSION@ is built and published for Scala.js 1.7+ with Scala 2.11, 2.12, 2.13, and 3.1+.
 
-To begin with, scala-js-dom organizes the full-list of DOM APIs into a number of buckets:
+To begin with, scalajs-dom organizes the full-list of DOM APIs into a number of buckets:
 
 - dom.html: HTML element APIs
 - dom.svg: SVG element APIs
 - dom.idb: IndexedDB APIs
-- dom.css: CSS APIs
 - dom: Miscellanious, unclassified APIs
 
-Most names have been shortened from names of the raw browser APIs, since the namespacing avoids collisions. By convention these types are imported qualified: e.g. as `html.Canvas` instead of directly as `Canvas`. There is also the `dom.raw` namespace which contains everything with their full, un-shortened name.
+Most names have been shortened from names of the raw browser APIs, since the namespacing avoids collisions. By convention these types are imported qualified: e.g. as `html.Canvas` instead of directly as `Canvas`.
 
 ## Examples
 
@@ -220,7 +219,7 @@ encodeBase64(input, output)
 
 ## Contributing
 
-The DOM API is always evolving, and `scala-js-dom` tries to provide a thin-but-idiomatic Scala interface to modern browser APIs, without breaking the spec.
+The DOM API is always evolving, and `scalajs-dom` tries to provide a thin-but-idiomatic Scala interface to modern browser APIs, without breaking the spec.
 
 If you see something that you think can be improved, feel free to send a pull request.
 See our [Contributing Guide](https://github.com/scala-js/scala-js-dom/blob/main/CONTRIBUTING.md) for a detailed overview for starting hacking on `scala-js-dom` and making a PR!