Integrate Scastie into Scaladoc.

Author: pikinier20

project/Build.scala

@@ -1417,7 +1417,7 @@ object Build {
           "scaladoc testcases",
           "scaladoc/output/testcases",
           "master",
-          Seq("-usejavacp")
+          Seq("-usejavacp", "-snippet-compiler:scaladoc-testcases/docs=compile", "-siteroot", "scaladoc-testcases/docs")
         )
       }.value,
 

scaladoc-js/resources/code-snippets.css

@@ -194,6 +194,98 @@ input:checked + .slider:before {
   display: none;
 }
 
+.snippet .scastie.embedded {
+  width: 100%;
+}
+
+.snippet .scastie.embedded .content {
+  height: unset;
+}
+
+.snippet .scastie.embedded .editor-container {
+  height: unset;
+}
+
+.snippet .scastie.embedded .editor-container .code {
+  height: unset;
+}
+
+.snippet .scastie.embedded .editor-container .editor-wrapper {
+  padding-top: 48px;
+  height: unset;
+}
+
+.snippet .scastie .CodeMirror, .snippet .scastie .CodeMirror-scroll {
+  height:unset;
+}
+
+.snippet .scastie.embedded .editor-container .code .CodeMirror-scroll {
+  height:unset !important;
+  min-height: 50px !important;
+}
+
+.snippet .scastie .editor-container .console-container .console {
+  height: unset !important;
+}
+
+.snippet .scastie .CodeMirror-gutters {
+  background-color: var(--code-bg) !important;
+}
+
+.snippet .scastie .CodeMirror {
+  color: var(--code-fg) !important;
+  background-color: var(--code-bg) !important;
+}
+
+.snippet .scastie .embedded-menu > * {
+  background-color: transparent !important;
+  color: var(--active-fg) !important;
+  width: 64px;
+  font-size: 1em;
+  padding: 8px;
+  position: unset;
+}
+
+.snippet .scastie .embedded-menu li:hover {
+  background-color: var(--active-bg) !important;
+}
+
+.snippet .scastie .embedded-menu {
+  margin: 15px;
+  display: block;
+}
+
+.snippet .scastie .embedded-menu > li {
+  display: unset;
+  border: unset;
+  transition-duration: 0.4s;
+}
+
+:root.theme-dark .snippet .scastie .embedded-menu > .logo img {
+  filter: unset;
+}
+:root .snippet .scastie .embedded-menu > .logo img {
+  filter: invert(100%) hue-rotate(180deg);
+}
+
+
+.snippet .scastie .output-console pre {
+  color: white;
+  background-color: rgb(0, 43, 54);
+}
+
+.snippet .scastie .app.light .editor-container .handler {
+  background-color: var(--code-bg) !important;
+}
+
+.snippet .scastie .console-container {
+  margin-left: 30px;
+}
+
+.snippet .scastie .main-panel {
+  background-color: unset !important;
+}
+
 @media(max-width: 576px) {
   .snippet-showhide {
       --slider-width: 32px;

scaladoc-js/src/code-snippets/CodeSnippets.scala

@@ -1,8 +1,11 @@
 package dotty.tools.scaladoc
 
+import scala.scalajs.js
 import org.scalajs.dom._
 import org.scalajs.dom.ext._
 
+import CodeSnippetsGlobals._
+
 class CodeSnippets:
 
   private def getButtonsSection(snippet: html.Element): Option[html.Div] = snippet.querySelector("div.buttons") match {
@@ -12,7 +15,7 @@ class CodeSnippets:
 
   def enrichSnippets() = document.querySelectorAll("div.snippet").foreach {
     case snippet: html.Element =>
-      snippet.addEventListener("click", e => e.stopPropagation())
+      snippet.addEventListener("click", (e: MouseEvent) => e.asInstanceOf[js.Dynamic].fromSnippet = true)
       snippetAnchor(snippet)
       handleHideableCode(snippet)
       handleImportedCode(snippet)
@@ -109,20 +112,41 @@ class CodeSnippets:
       val div = document.createElement("div")
       val button = document.createElement("button").asInstanceOf[html.Button]
       val icon = document.createElement("i")
-      icon.classList.add("fas")
-      icon.classList.add("fa-play")
+      def initialState() = {
+        icon.classList.add("fas")
+        icon.classList.add("fa-play")
+        button.setAttribute("state", "run")
+      }
+      def toggleState() = {
+        icon.classList.toggle("fa-play")
+        icon.classList.toggle("fa-times")
+        if button.getAttribute("state") == "run" then button.setAttribute("state", "exit")
+        else button.setAttribute("state", "run")
+      }
+      initialState()
       button.appendChild(icon)
       button.classList.add("run-button")
-      button.addEventListener("click", _ => {}) // TODO: Run button #13065
-      button.disabled = true
+      button.addEventListener("click", _ =>
+        if button.getAttribute("state") == "run" then
+          scastie.Embedded(snippet.querySelector("pre"))
+        else
+          snippet.querySelector("pre") match {
+            case p: html.Element => p.style = ""
+            case _ =>
+          }
+          snippet.querySelector(".scastie.embedded") match {
+            case s: html.Element => snippet.removeChild(s)
+            case _ =>
+          }
+        toggleState()
+      )
       div.appendChild(button)
       div
     }
     val buttonsSection = getButtonsSection(snippet)
     buttonsSection.foreach(s =>
       s.appendChild(copyButton)
-      // Temporarily disabled
-      // s.appendChild(runButton)
+      if !snippet.hasAttribute("hasContext") then s.appendChild(runButton)
     )
   }
 

scaladoc-js/src/code-snippets/CodeSnippetsGlobals.scala

@@ -0,0 +1,10 @@
+package dotty.tools.scaladoc
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSGlobalScope
+
+@js.native
+@JSGlobalScope
+object CodeSnippetsGlobals extends js.Object {
+  val scastie: Scastie = js.native
+}

scaladoc-js/src/code-snippets/Scastie.scala

@@ -0,0 +1,9 @@
+package dotty.tools.scaladoc
+
+import scala.scalajs.js
+import org.scalajs.dom._
+
+@js.native
+trait Scastie extends js.Object:
+    def Embedded(selector: String | Node, config: js.Dynamic): Unit = js.native
+    def Embedded(selector: String | Node): Unit = js.native

scaladoc-testcases/docs/docs/index.md

@@ -3,11 +3,15 @@
 
 ---
 
-```scala sc:compile
-2 + List(0)
+```scala
+val someVariable: Int = 2
 ```
 
-```scala sc:compile
-new snippetCompiler.Snippet0 { }
+```scala sc:fail
+trait RenderingContext
+class Renderer(using RenderingContext)
+val renderer: Renderer = Renderer()
 ```
 
+
+

scaladoc/resources/dotty_res/scripts/ux.js

@@ -10,7 +10,7 @@ window.addEventListener("DOMContentLoaded", () => {
   if (elements) {
     for (i = 0; i < elements.length; i++) {
       elements[i].onclick = function(e) {
-        if(!$(e.target).is("a"))
+        if(!$(e.target).is("a") && e.fromSnippet !== true)
           this.classList.toggle("expand")
       }
     }