TypeScript other distributed JS/CSS files (#3436)

.gitattributes

@@ -1,4 +1,6 @@
 /NEWS merge=union
 /inst/www/shared/shiny.js -merge -diff
+/inst/www/shared/shiny-*.js -merge -diff
+/inst/www/shared/shiny*.css -merge -diff
 *.min.js -merge -diff
 *.js.map -merge -diff

inst/www/shared/shiny-autoreload.js

@@ -1,17 +1,3 @@
-(function() {
-  var protocol = 'ws:';
-  if (window.location.protocol === 'https:')
-    protocol = 'wss:';
-
-  var defaultPath = window.location.pathname;
-  if (!/\/$/.test(defaultPath))
-    defaultPath += '/';
-  defaultPath += 'autoreload/';
-
-  var ws = new WebSocket(protocol + '//' + window.location.host + defaultPath);
-  ws.onmessage = function(event) {
-    if (event.data === "autoreload") {
-      window.location.reload()
-    }
-  }
-})();
+/*! shiny 1.6.0.9021 | (c) 2012-2021 RStudio, PBC. | License: GPL-3 | file LICENSE */
+(function(){var t="ws:";window.location.protocol==="https:"&&(t="wss:");var o=window.location.pathname;/\/$/.test(o)||(o+="/");o+="autoreload/";var n=new WebSocket(t+"//"+window.location.host+o);n.onmessage=function(a){a.data==="autoreload"&&window.location.reload()};})();
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjdHMvZXh0cmFzL3NoaW55LWF1dG9yZWxvYWQudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbInZhciBwcm90b2NvbCA9IFwid3M6XCI7XG5pZiAod2luZG93LmxvY2F0aW9uLnByb3RvY29sID09PSBcImh0dHBzOlwiKSBwcm90b2NvbCA9IFwid3NzOlwiO1xudmFyIGRlZmF1bHRQYXRoID0gd2luZG93LmxvY2F0aW9uLnBhdGhuYW1lO1xuaWYgKCEvXFwvJC8udGVzdChkZWZhdWx0UGF0aCkpIGRlZmF1bHRQYXRoICs9IFwiL1wiO1xuZGVmYXVsdFBhdGggKz0gXCJhdXRvcmVsb2FkL1wiO1xudmFyIHdzID0gbmV3IFdlYlNvY2tldChwcm90b2NvbCArIFwiLy9cIiArIHdpbmRvdy5sb2NhdGlvbi5ob3N0ICsgZGVmYXVsdFBhdGgpO1xuXG53cy5vbm1lc3NhZ2UgPSBmdW5jdGlvbiAoZXZlbnQpIHtcbiAgaWYgKGV2ZW50LmRhdGEgPT09IFwiYXV0b3JlbG9hZFwiKSB7XG4gICAgd2luZG93LmxvY2F0aW9uLnJlbG9hZCgpO1xuICB9XG59O1xuXG5leHBvcnQge307Il0sCiAgIm1hcHBpbmdzIjogIjtZQUFBLEdBQUksR0FBVyxNQUNmLEFBQUksT0FBTyxTQUFTLFdBQWEsVUFBVSxHQUFXLFFBQ3RELEdBQUksR0FBYyxPQUFPLFNBQVMsU0FDbEMsQUFBSyxNQUFNLEtBQUssSUFBYyxJQUFlLEtBQzdDLEdBQWUsY0FDZixHQUFJLEdBQUssR0FBSSxXQUFVLEVBQVcsS0FBTyxPQUFPLFNBQVMsS0FBTyxHQUVoRSxFQUFHLFVBQVksU0FBVSxFQUFPLENBQzlCLEFBQUksRUFBTSxPQUFTLGNBQ2pCLE9BQU8sU0FBUyIsCiAgIm5hbWVzIjogW10KfQo=

inst/www/shared/shiny-showcase.css

@@ -1,87 +1,2 @@
-#showcase-well {
-  border-radius: 0;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-}
-
-.shiny-code {
-  background-color: white;
-  margin-bottom: 0;
-}
-
-.shiny-code code {
-  font-family: Menlo, Consolas, "Courier New", monospace;
-}
-
-.shiny-code-container {
-  margin-top: 20px;
-  clear: both;
-}
-
-.shiny-code-container h3 {
-  display: inline;
-  margin-right: 15px;
-}
-
-.showcase-header {
-  font-size: 16px;
-  font-weight: normal;
-}
-
-.showcase-code-link {
-  text-align: right;
-  padding: 15px;
-}
-
-#showcase-app-container {
-  vertical-align: top;
-}
-
-#showcase-code-tabs pre {
-  border: none;
-  line-height: 1em;
-}
-
-#showcase-code-tabs .nav, 
-#showcase-code-tabs ul {
-  margin-bottom: 0px;
-}
-
-#showcase-app-code {
-  width: 100%;
-}
-
-#showcase-code-tabs {
-  margin-right: 15px;
-}
-
-#showcase-code-tabs .tab-content {
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-width: 0px 1px 1px 1px;
-  overflow:auto;
-  -webkit-border-bottom-right-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-#showcase-code-position-toggle {
-  float: right;
-}
-
-#showcase-sxs-code {
-  padding-top: 20px;
-  vertical-align: top;
-}
-
-.showcase-code-license {
-  display: block;
-  text-align: right;
-}
-
-#showcase-code-content pre {
-  background-color: white;
-}
+/*! shiny 1.6.0.9021 | (c) 2012-2021 RStudio, PBC. | License: GPL-3 | file LICENSE */
+#showcase-well{border-radius:0}.shiny-code{background-color:#fff;margin-bottom:0}.shiny-code code{font-family:Menlo,Consolas,"Courier New",monospace}.shiny-code-container{margin-top:20px;clear:both}.shiny-code-container h3{display:inline;margin-right:15px}.showcase-header{font-size:16px;font-weight:normal}.showcase-code-link{text-align:right;padding:15px}#showcase-app-container{vertical-align:top}#showcase-code-tabs{margin-right:15px}#showcase-code-tabs pre{border:none;line-height:1em}#showcase-code-tabs .nav{margin-bottom:0}#showcase-code-tabs ul{margin-bottom:0}#showcase-code-tabs .tab-content{border-style:solid;border-color:#e5e5e5;border-width:0px 1px 1px 1px;overflow:auto;border-bottom-right-radius:4px;border-bottom-left-radius:4px}#showcase-app-code{width:100%}#showcase-code-position-toggle{float:right}#showcase-sxs-code{padding-top:20px;vertical-align:top}.showcase-code-license{display:block;text-align:right}#showcase-code-content pre{background-color:#fff}

inst/www/shared/shiny-testmode.js

@@ -1,8 +1,3 @@
-// Listen for messages from parent frame. This file is only added when the
-// shiny.testmode option is TRUE.
-window.addEventListener("message", function(e) {
-  var message = e.data;
-
-  if (message.code)
-    eval(message.code);
-});
+/*! shiny 1.6.0.9021 | (c) 2012-2021 RStudio, PBC. | License: GPL-3 | file LICENSE */
+(function(){var a=eval;window.addEventListener("message",function(i){var e=i.data;e.code&&a(e.code)});})();
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjdHMvc3JjL3V0aWxzL2V2YWwudHMiLCAiLi4vLi4vLi4vc3JjdHMvZXh0cmFzL3NoaW55LXRlc3Rtb2RlLnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyIvL2VzYnVpbGQuZ2l0aHViLmlvL2NvbnRlbnQtdHlwZXMvI2RpcmVjdC1ldmFsXG4vL3RsL2RyO1xuLy8gKiBEaXJlY3QgdXNhZ2Ugb2YgYGV2YWwoXCJ4XCIpYCBpcyBiYWQgd2l0aCBidW5kbGVkIGNvZGUuXG4vLyAqIEluc3RlYWQsIHVzZSBpbmRpcmVjdCBjYWxscyB0byBgZXZhbGAgc3VjaCBhcyBgaW5kaXJlY3RFdmFsKFwieFwiKWBcbi8vICAgKiBFdmVuIGp1c3QgcmVuYW1pbmcgdGhlIGZ1bmN0aW9uIHdvcmtzIHdlbGwgZW5vdWdoLlxuLy8gPiBUaGlzIGlzIGtub3duIGFzIFwiaW5kaXJlY3QgZXZhbFwiIGJlY2F1c2UgZXZhbCBpcyBub3QgYmVpbmcgY2FsbGVkIGRpcmVjdGx5LCBhbmQgc28gZG9lcyBub3QgdHJpZ2dlciB0aGUgZ3JhbW1hdGljYWwgc3BlY2lhbCBjYXNlIGZvciBkaXJlY3QgZXZhbCBpbiB0aGUgSmF2YVNjcmlwdCBWTS4gWW91IGNhbiBjYWxsIGluZGlyZWN0IGV2YWwgdXNpbmcgYW55IHN5bnRheCBhdCBhbGwgZXhjZXB0IGZvciBhbiBleHByZXNzaW9uIG9mIHRoZSBleGFjdCBmb3JtIGV2YWwoJ3gnKS4gRm9yIGV4YW1wbGUsIHZhciBldmFsMiA9IGV2YWw7IGV2YWwyKCd4JykgYW5kIFtldmFsXVswXSgneCcpIGFuZCB3aW5kb3cuZXZhbCgneCcpIGFyZSBhbGwgaW5kaXJlY3QgZXZhbCBjYWxscy5cbi8vID4gV2hlbiB5b3UgdXNlIGluZGlyZWN0IGV2YWwsIHRoZSBjb2RlIGlzIGV2YWx1YXRlZCBpbiB0aGUgZ2xvYmFsIHNjb3BlIGluc3RlYWQgb2YgaW4gdGhlIGlubGluZSBzY29wZSBvZiB0aGUgY2FsbGVyLlxudmFyIGluZGlyZWN0RXZhbCA9IGV2YWw7XG5leHBvcnQgeyBpbmRpcmVjdEV2YWwgfTsiLCAiaW1wb3J0IHsgaW5kaXJlY3RFdmFsIH0gZnJvbSBcIi4uL3NyYy91dGlscy9ldmFsXCI7IC8vIExpc3RlbiBmb3IgbWVzc2FnZXMgZnJvbSBwYXJlbnQgZnJhbWUuIFRoaXMgZmlsZSBpcyBvbmx5IGFkZGVkIHdoZW4gdGhlXG4vLyBzaGlueS50ZXN0bW9kZSBvcHRpb24gaXMgVFJVRS5cblxud2luZG93LmFkZEV2ZW50TGlzdGVuZXIoXCJtZXNzYWdlXCIsIGZ1bmN0aW9uIChlKSB7XG4gIHZhciBtZXNzYWdlID0gZS5kYXRhO1xuICBpZiAobWVzc2FnZS5jb2RlKSBpbmRpcmVjdEV2YWwobWVzc2FnZS5jb2RlKTtcbn0pOyJdLAogICJtYXBwaW5ncyI6ICI7WUFPQSxHQUFJLEdBQWUsS0NKbkIsT0FBTyxpQkFBaUIsVUFBVyxTQUFVLEVBQUcsQ0FDOUMsR0FBSSxHQUFVLEVBQUUsS0FDaEIsQUFBSSxFQUFRLE1BQU0sRUFBYSxFQUFRIiwKICAibmFtZXMiOiBbXQp9Cg==

inst/www/shared/shiny.js

@@ -1,3 +1,4 @@
+/*! shiny 1.6.0.9021 | (c) 2012-2021 RStudio, PBC. | License: GPL-3 | file LICENSE */
 (function() {
   var __create = Object.create;
   var __defProp = Object.defineProperty;

package.json

@@ -29,20 +29,26 @@
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.14.0",
+    "@deanc/esbuild-plugin-postcss": "^1.0.1",
     "@testing-library/dom": "^7.31.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/user-event": "^13.1.9",
+    "@types/highlightjs": "^9.12.1",
     "@types/jest": "^26.0.23",
+    "@types/jqueryui": "1.12.15",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.6.1",
+    "@types/showdown": "^1.9.3",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
+    "autoprefixer": "^10.2.6",
     "bootstrap-datepicker": "1.9.0",
     "browserslist": "^4.16.6",
     "core-js": "^3.13.0",
     "esbuild": "^0.12.4",
     "esbuild-plugin-babel": "https://github.com/schloerke/esbuild-plugin-babel#patch-2",
     "esbuild-plugin-globals": "^0.1.1",
+    "esbuild-plugin-sass": "https://github.com/schloerke/esbuild-plugin-sass#js-files-typo",
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-jest": "^24.3.6",
@@ -55,6 +61,7 @@
     "madge": "^4.0.2",
     "node-gyp": "^8.1.0",
     "phantomjs-prebuilt": "^2.1.16",
+    "postcss": "^8.3.5",
     "prettier": "2.3.0",
     "readcontrol": "^1.0.0",
     "replace": "^1.2.1",
@@ -68,17 +75,18 @@
   },
   "scripts": {
     "watch": "yarn run build_shiny --watch",
-    "build": "yarn run build_shiny && yarn run bundle_external_libs",
+    "build": "yarn run build_shiny && yarn run bundle_extras && yarn run bundle_external_libs",
     "build_shiny": "yarn run checks && yarn run bundle_shiny",
     "bundle_shiny": "ts-node srcts/build/shiny.ts",
     "bundle_external_libs": "ts-node srcts/build/external_libs.ts",
+    "bundle_extras": "ts-node srcts/build/extras.ts",
     "test": "jest --coverage",
     "test_phantom": "echo '\n\t!! Must manually stop phantomjs test !!\n\n' && yarn bundle_shiny && phantomjs --debug=yes ../inst/www/shared/shiny.js",
     "checks": "yarn run lint && yarn run build_types && yarn run coverage && yarn run circular",
     "lint": "node --eval \"console.log('linting code...')\" && eslint --fix --ext .ts srcts/src",
     "build_types": "tsc -p tsconfig.json",
     "coverage_detailed": "yarn type-check --detail",
-    "coverage": "type-coverage -p tsconfig.json --at-least 93",
+    "coverage": "type-coverage -p tsconfig.json --at-least 90",
     "circular": "madge --circular --extensions ts srcts/src",
     "circular_image": "madge --circular --extensions ts --image madge.svg srcts/src"
   }

srcts/build/_build.ts

@@ -4,27 +4,51 @@ import {
   BuildOptions,
   BuildResult,
 } from "esbuild";
+import readcontrol from "readcontrol";
 import process from "process";
 import { basename } from "path";
 
 const outDir = "./inst/www/shared/";
 
-async function build(
-  opts: BuildOptions,
-  strSize = "shiny.min.js".length
-): Promise<BuildIncremental | BuildResult> {
-  const outFileName = basename(opts.outfile);
-  let printName = outFileName;
+type ShinyDesc = { version: string; package: string; license: string };
+const shinyDesc = readcontrol.readSync("./DESCRIPTION") as ShinyDesc;
 
-  while (printName.length < strSize) {
-    printName = printName + " ";
+const bannerTxt = [
+  `/*! ${shinyDesc.package} ${shinyDesc.version}`,
+  `(c) 2012-${new Date().getFullYear()} RStudio, PBC.`,
+  `License: ${shinyDesc.license} */`,
+].join(" | ");
+const banner = {
+  js: bannerTxt,
+  css: bannerTxt,
+};
+
+async function build(
+  opts: BuildOptions
+): Promise<BuildIncremental | BuildResult> {
+  const outFileNames = opts.outfile
+    ? [basename(opts.outfile)]
+    : (opts.entryPoints as string[]).map((entry) => basename(entry));
+
+  const strSizes = outFileNames.map((outFileName) => outFileName.length);
+
+  strSizes.push("shiny.min.js".length);
+  const strSize = Math.max(...strSizes);
+  const printNames = outFileNames;
+
+  for (let i = 0; i < printNames.length; i++) {
+    while (printNames[i].length < strSize) {
+      printNames[i] = printNames[i] + " ";
+    }
   }
 
   const onRebuild = function (error?: string) {
     if (error) {
-      console.error(printName, "watch build failed:\n", error);
+      console.error(printNames.join(", "), "watch build failed:\n", error);
     } else {
-      console.log("√ -", printName, "-", new Date().toJSON());
+      printNames.map((printName) => {
+        console.log("√ -", printName, "-", new Date().toJSON());
+      });
     }
     return;
   };
@@ -39,7 +63,9 @@ async function build(
     };
   }
 
-  console.log("Building " + outFileName);
+  outFileNames.map((outFileName) => {
+    console.log("Building " + outFileName);
+  });
   return esbuildBuild({
     incremental: incremental,
     watch: watch,
@@ -51,4 +77,4 @@ async function build(
   });
 }
 
-export { outDir, build };
+export { outDir, build, shinyDesc, banner };

srcts/build/extras.ts

@@ -0,0 +1,54 @@
+// This build script must be executed from the root repo directory via
+// ```
+// yarn build
+// ```
+
+// - TypeScript -----------------------------------------------------------
+
+import { banner, build, outDir } from "./_build";
+import babelPlugin from "esbuild-plugin-babel";
+
+build({
+  bundle: true,
+  sourcemap: "inline",
+  minify: true,
+  plugins: [babelPlugin()],
+  banner: banner,
+  entryPoints: [
+    "srcts/extras/shiny-autoreload.ts",
+    "srcts/extras/shiny-showcase.ts",
+    "srcts/extras/shiny-testmode.ts",
+  ],
+  outdir: outDir,
+});
+
+// - Sass -----------------------------------------------------------
+
+import autoprefixer from "autoprefixer";
+import postCssPlugin from "@deanc/esbuild-plugin-postcss";
+import sassPlugin from "esbuild-plugin-sass";
+
+const sassOpts = {
+  minify: true,
+  banner: banner,
+  plugins: [
+    sassPlugin(),
+    postCssPlugin({
+      plugins: [autoprefixer],
+    }),
+  ],
+};
+
+build({
+  ...sassOpts,
+  entryPoints: ["srcts/extras/shiny-showcase.scss"],
+  outfile: outDir + "shiny-showcase.css",
+});
+build({
+  ...sassOpts,
+  entryPoints: [
+    // Must keep shiny.scss within `inst` to be able to use as htmldependency
+    outDir + "shiny_scss/shiny.scss",
+  ],
+  outfile: outDir + "shiny.min.css",
+});

srcts/build/shiny.ts

@@ -3,11 +3,10 @@
 // yarn build
 // ```
 
-import { build, outDir } from "./_build";
+import { banner, build, outDir, shinyDesc } from "./_build";
 import globalsPlugin from "esbuild-plugin-globals";
 import babelPlugin from "esbuild-plugin-babel";
-import readcontrol from "readcontrol";
-import { BuildOptions } from "esbuild";
+import type { BuildOptions } from "esbuild";
 
 const opts: BuildOptions = {
   entryPoints: ["srcts/src/index.ts"],
@@ -19,14 +18,12 @@ const opts: BuildOptions = {
       //// Loaded dynamically. MUST use `window.strftime` within code
       // strftime: "window.strftime",
     }),
-    //
     babelPlugin(),
   ],
   define: {
-    "process.env.SHINY_VERSION": `"${
-      readcontrol.readSync("./DESCRIPTION").version
-    }"`,
+    "process.env.SHINY_VERSION": `"${shinyDesc.version}"`,
   },
+  banner: banner,
 };
 
 build({

srcts/extras/shiny-autoreload.ts

@@ -0,0 +1,18 @@
+let protocol = "ws:";
+
+if (window.location.protocol === "https:") protocol = "wss:";
+
+let defaultPath = window.location.pathname;
+
+if (!/\/$/.test(defaultPath)) defaultPath += "/";
+defaultPath += "autoreload/";
+
+const ws = new WebSocket(protocol + "//" + window.location.host + defaultPath);
+
+ws.onmessage = function (event) {
+  if (event.data === "autoreload") {
+    window.location.reload();
+  }
+};
+
+export {};

srcts/extras/shiny-showcase.scss

@@ -0,0 +1,86 @@
+#showcase-well {
+  border-radius: 0;
+}
+
+.shiny-code {
+  background-color: white;
+  margin-bottom: 0;
+
+  code {
+    font-family: Menlo, Consolas, "Courier New", monospace;
+  }
+}
+
+.shiny-code-container {
+  margin-top: 20px;
+  clear: both;
+
+  h3 {
+    display: inline;
+    margin-right: 15px;
+  }
+}
+
+.showcase-header {
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.showcase-code-link {
+  text-align: right;
+  padding: 15px;
+}
+
+#showcase-app-container {
+  vertical-align: top;
+}
+
+#showcase-code-tabs {
+  pre {
+    border: none;
+    line-height: 1em;
+  }
+
+  .nav {
+    margin-bottom: 0px;
+  }
+
+  ul {
+    margin-bottom: 0px;
+  }
+
+  margin-right: 15px;
+
+  .tab-content {
+    border-style: solid;
+    border-color: #e5e5e5;
+    border-width: 0px 1px 1px 1px;
+    overflow: auto;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+}
+
+#showcase-app-code {
+  width: 100%;
+}
+
+#showcase-code-position-toggle {
+  float: right;
+}
+
+#showcase-sxs-code {
+  padding-top: 20px;
+  vertical-align: top;
+}
+
+.showcase-code-license {
+  display: block;
+  text-align: right;
+}
+
+#showcase-code-content {
+  pre {
+    background-color: white;
+  }
+}

srcts/extras/shiny-showcase.ts

@@ -0,0 +1,314 @@
+import type { ShinyType } from "../src/shiny";
+
+type ShowcaseSrcMessage = {
+  srcref: Array<number>;
+  srcfile: string;
+};
+
+const animateMs = 400;
+
+// Given a DOM node and a column (count of characters), walk recursively
+// through the node's siblings counting characters until the given number
+// of characters have been found.
+//
+// If the given count is bigger than the number of characters contained by
+// the node and its siblings, returns a null node and the number of
+// characters found.
+function findTextColPoint(node: Node, col: number) {
+  let cols = 0;
+
+  if (node.nodeType === 3) {
+    const nchar = node.nodeValue.replace(/\n/g, "").length;
+
+    if (nchar >= col) {
+      return { element: node, offset: col };
+    } else {
+      cols += nchar;
+    }
+  } else if (node.nodeType === 1 && node.firstChild) {
+    const ret = findTextColPoint(node.firstChild, col);
+
+    if (ret.element !== null) {
+      return ret;
+    } else {
+      cols += ret.offset;
+    }
+  }
+  if (node.nextSibling) return findTextColPoint(node.nextSibling, col - cols);
+  else return { element: null, offset: cols };
+}
+
+// Returns an object indicating the element containing the given line and
+// column of text, and the offset into that element where the text was found.
+//
+// If the given line and column are not found, returns a null element and
+// the number of lines found.
+function findTextPoint(el: Node, line: number, col: number) {
+  let newlines = 0;
+
+  for (let childId = 0; childId < el.childNodes.length; childId++) {
+    const child = el.childNodes[childId];
+    // If this is a text node, count the number of newlines it contains.
+
+    if (child.nodeType === 3) {
+      // TEXT_NODE
+      const newlinere = /\n/g;
+      let match: ReturnType<RegExp["exec"]>;
+
+      while ((match = newlinere.exec(child.nodeValue)) !== null) {
+        newlines++;
+        // Found the desired line, now find the column.
+        if (newlines === line) {
+          return findTextColPoint(child, match.index + col + 1);
+        }
+      }
+    }
+    // If this is not a text node, descend recursively to see how many
+    // lines it contains.
+    else if (child.nodeType === 1) {
+      // ELEMENT_NODE
+      const ret = findTextPoint(child, line - newlines, col);
+
+      if (ret.element !== null) return ret;
+      else newlines += ret.offset;
+    }
+  }
+  return { element: null, offset: newlines };
+}
+
+// Draw a highlight effect for the given source ref. srcref is assumed to be
+// an integer array of length 6, following the standard R format for source
+// refs.
+function highlightSrcref(
+  srcref: ShowcaseSrcMessage["srcref"],
+  srcfile: ShowcaseSrcMessage["srcfile"]
+) {
+  // Check to see if the browser supports text ranges (IE8 doesn't)
+  if (!document.createRange) return;
+
+  // Check to see if we already have a marker for this source ref
+  let el = document.getElementById("srcref_" + srcref);
+
+  if (!el) {
+    // We don't have a marker, create one
+    el = document.createElement("span");
+    el.id = "srcref_" + srcref;
+    const ref = srcref;
+    const code = document.getElementById(srcfile.replace(/\./g, "_") + "_code");
+    // if there is no code file (might be a shiny file), quit early
+
+    if (!code) return;
+    const start = findTextPoint(code, ref[0], ref[4]);
+    const end = findTextPoint(code, ref[2], ref[5]);
+
+    // If the insertion point can't be found, bail out now
+    if (start.element === null || end.element === null) return;
+
+    const range = document.createRange();
+    // If the text points are inside different <SPAN>s, we may not be able to
+    // surround them without breaking apart the elements to keep the DOM tree
+    // intact. Just move the selection points to encompass the contents of
+    // the SPANs.
+
+    if (
+      start.element.parentNode.nodeName === "SPAN" &&
+      start.element !== end.element
+    ) {
+      range.setStartBefore(start.element.parentNode);
+    } else {
+      range.setStart(start.element, start.offset);
+    }
+    if (
+      end.element.parentNode.nodeName === "SPAN" &&
+      start.element !== end.element
+    ) {
+      range.setEndAfter(end.element.parentNode);
+    } else {
+      range.setEnd(end.element, end.offset);
+    }
+    range.surroundContents(el);
+  }
+  // End any previous highlight before starting this one
+  $(el).stop(true, true).effect("highlight", null, 1600);
+}
+
+// If this is the main Shiny window, wire up our custom message handler.
+// TODO-barret, this should work
+
+if ((window as any).Shiny) {
+  ((window as any).Shiny as ShinyType).addCustomMessageHandler(
+    "showcase-src",
+    function (message: ShowcaseSrcMessage) {
+      if (message.srcref && message.srcfile) {
+        highlightSrcref(message.srcref, message.srcfile);
+      }
+    }
+  );
+}
+
+let isCodeAbove = false;
+const setCodePosition = function (above: boolean, animate: boolean) {
+  const animateCodeMs = animate ? animateMs : 1;
+
+  // set the source and targets for the tab move
+  const newHostElement = above
+    ? document.getElementById("showcase-sxs-code")
+    : document.getElementById("showcase-code-inline");
+  const currentHostElement = above
+    ? document.getElementById("showcase-code-inline")
+    : document.getElementById("showcase-sxs-code");
+
+  const metadataElement = document.getElementById("showcase-app-metadata");
+
+  if (metadataElement === null) {
+    // if there's no app metadata, show and hide the entire well container
+    // when the code changes position
+    const wellElement = $("#showcase-well");
+
+    if (above) {
+      wellElement.fadeOut(animateCodeMs);
+    } else {
+      wellElement.fadeIn(animateCodeMs);
+    }
+  }
+
+  // hide the new element before doing anything to it
+  $(newHostElement).hide();
+  $(currentHostElement).fadeOut(animateCodeMs, function () {
+    const tabs = document.getElementById("showcase-code-tabs");
+
+    currentHostElement.removeChild(tabs);
+    newHostElement.appendChild(tabs);
+
+    // remove or set the height of the code
+    if (above) {
+      setCodeHeightFromDocHeight();
+    } else {
+      document.getElementById("showcase-code-content").removeAttribute("style");
+    }
+
+    $(newHostElement).fadeIn(animateCodeMs);
+    if (!above) {
+      // remove the applied width and zoom on the app container, and
+      // scroll smoothly down to the code's new home
+      document
+        .getElementById("showcase-app-container")
+        .removeAttribute("style");
+      if (animate)
+        $(document.body).animate({
+          scrollTop: $(newHostElement).offset().top,
+        });
+    }
+    // if there's a readme, move it either alongside the code or beneath
+    // the app
+    const readme = document.getElementById("readme-md");
+
+    if (readme !== null) {
+      readme.parentElement.removeChild(readme);
+      if (above) {
+        currentHostElement.appendChild(readme);
+        $(currentHostElement).fadeIn(animateCodeMs);
+      } else
+        document.getElementById("showcase-app-metadata").appendChild(readme);
+    }
+
+    // change the text on the toggle button to reflect the new state
+    document.getElementById("showcase-code-position-toggle").innerHTML = above
+      ? '<i class="fa fa-level-down"></i> show below'
+      : '<i class="fa fa-level-up"></i> show with app';
+  });
+  if (above) {
+    $(document.body).animate({ scrollTop: 0 }, animateCodeMs);
+  }
+  isCodeAbove = above;
+  setAppCodeSxsWidths(above && animate);
+  $(window).trigger("resize");
+};
+
+function setAppCodeSxsWidths(animate: boolean) {
+  const appTargetWidth = 960;
+  let appWidth = appTargetWidth;
+  let zoom = 1.0;
+  const totalWidth = document.getElementById("showcase-app-code").offsetWidth;
+
+  if (totalWidth / 2 > appTargetWidth) {
+    // If the app can use only half the available space and still meet its
+    // target, take half the available space.
+    appWidth = totalWidth / 2;
+  } else if (totalWidth * 0.66 > appTargetWidth) {
+    // If the app can meet its target by taking up more space (up to 66%
+    // of its container), take up more space.
+    appWidth = 960;
+  } else {
+    // The space is too narrow for the app and code to live side-by-side
+    // in a friendly way. Keep the app at 2/3 of the space but scale it.
+    appWidth = totalWidth * 0.66;
+    zoom = appWidth / appTargetWidth;
+  }
+  const app = document.getElementById("showcase-app-container");
+
+  $(app).animate(
+    {
+      width: appWidth + "px",
+      zoom: zoom * 100 + "%",
+    },
+    animate ? animateMs : 0
+  );
+}
+
+const toggleCodePosition = function () {
+  setCodePosition(!isCodeAbove, true);
+};
+
+// if the browser is sized to wider than 1350px, show the code next to the
+// app by default
+const setInitialCodePosition = function () {
+  if (document.body.offsetWidth > 1350) {
+    setCodePosition(true, false);
+  }
+};
+
+// make the code scrollable to about the height of the browser, less space
+// for the tabs
+function setCodeHeightFromDocHeight() {
+  document.getElementById("showcase-code-content").style.height =
+    $(window).height() + "px";
+}
+
+// if there's a block of markdown content, render it to HTML
+function renderMarkdown() {
+  const mdContent = document.getElementById("showcase-markdown-content");
+
+  if (mdContent !== null) {
+    // IE8 puts the content of <script> tags into innerHTML but
+    // not innerText
+    const content = mdContent.innerText || mdContent.innerHTML;
+
+    const showdownConverter = (window as any).Showdown
+      .converter as showdown.ConverterStatic;
+
+    document.getElementById("readme-md").innerHTML =
+      new showdownConverter().makeHtml(content);
+  }
+}
+
+$(window).resize(function () {
+  if (isCodeAbove) {
+    setAppCodeSxsWidths(false);
+    setCodeHeightFromDocHeight();
+  }
+});
+
+declare global {
+  interface Window {
+    toggleCodePosition: () => void;
+  }
+}
+window.toggleCodePosition = toggleCodePosition;
+
+$(window).on("load", setInitialCodePosition);
+$(window).on("load", renderMarkdown);
+
+if (window.hljs) window.hljs.initHighlightingOnLoad();
+
+export {};

srcts/extras/shiny-testmode.ts

@@ -0,0 +1,9 @@
+import { indirectEval } from "../src/utils/eval";
+
+// Listen for messages from parent frame. This file is only added when the
+// shiny.testmode option is TRUE.
+window.addEventListener("message", function (e: { data: { code: string } }) {
+  const message = e.data;
+
+  if (message.code) indirectEval(message.code);
+});

srcts/old/extras/shiny-autoreload.js

@@ -0,0 +1,17 @@
+(function() {
+  var protocol = 'ws:';
+  if (window.location.protocol === 'https:')
+    protocol = 'wss:';
+
+  var defaultPath = window.location.pathname;
+  if (!/\/$/.test(defaultPath))
+    defaultPath += '/';
+  defaultPath += 'autoreload/';
+
+  var ws = new WebSocket(protocol + '//' + window.location.host + defaultPath);
+  ws.onmessage = function(event) {
+    if (event.data === "autoreload") {
+      window.location.reload()
+    }
+  }
+})();

srcts/old/extras/shiny-showcase.css

@@ -0,0 +1,87 @@
+#showcase-well {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+}
+
+.shiny-code {
+  background-color: white;
+  margin-bottom: 0;
+}
+
+.shiny-code code {
+  font-family: Menlo, Consolas, "Courier New", monospace;
+}
+
+.shiny-code-container {
+  margin-top: 20px;
+  clear: both;
+}
+
+.shiny-code-container h3 {
+  display: inline;
+  margin-right: 15px;
+}
+
+.showcase-header {
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.showcase-code-link {
+  text-align: right;
+  padding: 15px;
+}
+
+#showcase-app-container {
+  vertical-align: top;
+}
+
+#showcase-code-tabs pre {
+  border: none;
+  line-height: 1em;
+}
+
+#showcase-code-tabs .nav, 
+#showcase-code-tabs ul {
+  margin-bottom: 0px;
+}
+
+#showcase-app-code {
+  width: 100%;
+}
+
+#showcase-code-tabs {
+  margin-right: 15px;
+}
+
+#showcase-code-tabs .tab-content {
+  border-style: solid;
+  border-color: #e5e5e5;
+  border-width: 0px 1px 1px 1px;
+  overflow:auto;
+  -webkit-border-bottom-right-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+#showcase-code-position-toggle {
+  float: right;
+}
+
+#showcase-sxs-code {
+  padding-top: 20px;
+  vertical-align: top;
+}
+
+.showcase-code-license {
+  display: block;
+  text-align: right;
+}
+
+#showcase-code-content pre {
+  background-color: white;
+}

srcts/old/extras/shiny-showcase.js

@@ -0,0 +1,272 @@
+/*jshint browser:true, jquery:true, strict:false, curly:false, indent:2*/
+
+(function() {
+  var animateMs = 400;
+
+  // Given a DOM node and a column (count of characters), walk recursively
+  // through the node's siblings counting characters until the given number
+  // of characters have been found.
+  //
+  // If the given count is bigger than the number of characters contained by
+  // the node and its siblings, returns a null node and the number of
+  // characters found.
+  function findTextColPoint(node, col) {
+    var cols = 0;
+    if (node.nodeType === 3) {
+      var nchar = node.nodeValue.replace(/\n/g, "").length;
+      if (nchar >= col) {
+        return { element: node, offset: col };
+      } else {
+        cols += nchar;
+      }
+    } else if (node.nodeType === 1 && node.firstChild) {
+      var ret = findTextColPoint(node.firstChild, col);
+      if (ret.element !== null) {
+        return ret;
+      } else {
+        cols += ret.offset;
+      }
+    }
+    if (node.nextSibling)
+      return findTextColPoint(node.nextSibling, col - cols);
+    else
+      return { element: null, offset: cols };
+  }
+
+  // Returns an object indicating the element containing the given line and
+  // column of text, and the offset into that element where the text was found.
+  //
+  // If the given line and column are not found, returns a null element and
+  // the number of lines found.
+  function findTextPoint(el, line, col) {
+    var newlines = 0;
+    for (var childId = 0; childId < el.childNodes.length; childId++) {
+      var child = el.childNodes[childId];
+      // If this is a text node, count the number of newlines it contains.
+      if (child.nodeType === 3) {  // TEXT_NODE
+        var newlinere = /\n/g;
+        var match;
+        while ((match = newlinere.exec(child.nodeValue)) !== null) {
+          newlines++;
+          // Found the desired line, now find the column.
+          if (newlines === line) {
+            return findTextColPoint(child, match.index + col + 1);
+          }
+        }
+      }
+      // If this is not a text node, descend recursively to see how many
+      // lines it contains.
+      else if (child.nodeType === 1) { // ELEMENT_NODE
+        var ret = findTextPoint(child, line - newlines, col);
+        if (ret.element !== null)
+          return ret;
+        else
+          newlines += ret.offset;
+      }
+    }
+    return { element: null, offset: newlines };
+  }
+
+  // Draw a highlight effect for the given source ref. srcref is assumed to be
+  // an integer array of length 6, following the standard R format for source
+  // refs.
+  function highlightSrcref (srcref, srcfile) {
+    // Check to see if the browser supports text ranges (IE8 doesn't)
+    if (!document.createRange)
+      return;
+
+    // Check to see if we already have a marker for this source ref
+    var el = document.getElementById("srcref_" + srcref);
+    if (!el) {
+      // We don't have a marker, create one
+      el = document.createElement("span");
+      el.id = "srcref_" + srcref;
+      var ref = srcref;
+      var code = document.getElementById(srcfile.replace(/\./g, "_") + "_code");
+      // if there is no code file (might be a shiny file), quit early
+      if (!code) return;
+      var start = findTextPoint(code, ref[0], ref[4]);
+      var end = findTextPoint(code, ref[2], ref[5]);
+
+      // If the insertion point can't be found, bail out now
+      if (start.element === null || end.element === null)
+         return;
+
+      var range = document.createRange();
+      // If the text points are inside different <SPAN>s, we may not be able to
+      // surround them without breaking apart the elements to keep the DOM tree
+      // intact. Just move the selection points to encompass the contents of
+      // the SPANs.
+      if (start.element.parentNode.nodeName === "SPAN" &&
+          start.element !== end.element) {
+        range.setStartBefore(start.element.parentNode);
+      } else {
+        range.setStart(start.element, start.offset);
+      }
+      if (end.element.parentNode.nodeName === "SPAN" &&
+          start.element !== end.element) {
+        range.setEndAfter(end.element.parentNode);
+      } else {
+        range.setEnd(end.element, end.offset);
+      }
+      range.surroundContents(el);
+    }
+    // End any previous highlight before starting this one
+    jQuery(el)
+      .stop(true, true)
+      .effect("highlight", null, 1600);
+  }
+
+  // If this is the main Shiny window, wire up our custom message handler.
+  if (window.Shiny) {
+    Shiny.addCustomMessageHandler('showcase-src', function(message) {
+      if (message.srcref && message.srcfile) {
+        highlightSrcref(message.srcref, message.srcfile);
+      }
+    });
+  }
+
+  var isCodeAbove = false;
+  var setCodePosition = function(above, animate) {
+    var animateCodeMs = animate ? animateMs : 1;
+
+    // set the source and targets for the tab move
+    var newHostElement = above ?
+      document.getElementById("showcase-sxs-code") :
+      document.getElementById("showcase-code-inline");
+    var currentHostElement = above ?
+      document.getElementById("showcase-code-inline") :
+      document.getElementById("showcase-sxs-code");
+
+    var metadataElement = document.getElementById("showcase-app-metadata");
+    if (metadataElement === null) {
+      // if there's no app metadata, show and hide the entire well container
+      // when the code changes position
+      var wellElement = $("#showcase-well");
+      if (above) {
+        wellElement.fadeOut(animateCodeMs);
+      } else {
+        wellElement.fadeIn(animateCodeMs);
+      }
+    }
+
+    // hide the new element before doing anything to it
+    $(newHostElement).hide();
+    $(currentHostElement).fadeOut(animateCodeMs, function() {
+      var tabs = document.getElementById("showcase-code-tabs");
+      currentHostElement.removeChild(tabs);
+      newHostElement.appendChild(tabs);
+
+      // remove or set the height of the code
+      if (above) {
+        setCodeHeightFromDocHeight();
+      } else {
+        document.getElementById("showcase-code-content").removeAttribute("style");
+      }
+
+      $(newHostElement).fadeIn(animateCodeMs);
+      if (!above) {
+        // remove the applied width and zoom on the app container, and
+        // scroll smoothly down to the code's new home
+        document.getElementById("showcase-app-container").removeAttribute("style");
+        if (animate)
+          $(document.body).animate({ scrollTop: $(newHostElement).offset().top });
+      }
+      // if there's a readme, move it either alongside the code or beneath
+      // the app
+      var readme = document.getElementById("readme-md");
+      if (readme !== null) {
+        readme.parentElement.removeChild(readme);
+        if (above) {
+          currentHostElement.appendChild(readme);
+          $(currentHostElement).fadeIn(animateCodeMs);
+        }
+        else
+          document.getElementById("showcase-app-metadata").appendChild(readme);
+      }
+
+      // change the text on the toggle button to reflect the new state
+      document.getElementById("showcase-code-position-toggle").innerHTML = above ?
+        '<i class="fa fa-level-down"></i> show below' :
+        '<i class="fa fa-level-up"></i> show with app';
+    });
+    if (above) {
+      $(document.body).animate({ scrollTop: 0 }, animateCodeMs);
+    }
+    isCodeAbove = above;
+    setAppCodeSxsWidths(above && animate);
+    $(window).trigger("resize");
+  };
+
+  var setAppCodeSxsWidths = function(animate) {
+    var appTargetWidth = 960;
+    var appWidth = appTargetWidth;
+    var zoom = 1.0;
+    var totalWidth = document.getElementById("showcase-app-code").offsetWidth;
+    if (totalWidth / 2 > appTargetWidth) {
+      // If the app can use only half the available space and still meet its
+      // target, take half the available space.
+      appWidth = totalWidth / 2;
+    } else if (totalWidth * 0.66 > appTargetWidth)  {
+      // If the app can meet its target by taking up more space (up to 66%
+      // of its container), take up more space.
+      appWidth = 960;
+    } else {
+      // The space is too narrow for the app and code to live side-by-side
+      // in a friendly way. Keep the app at 2/3 of the space but scale it.
+      appWidth = totalWidth * 0.66;
+      zoom = appWidth/appTargetWidth;
+    }
+    var app = document.getElementById("showcase-app-container");
+    $(app).animate({
+        width: appWidth + "px",
+        zoom: (zoom*100) + "%"
+      }, animate ? animateMs : 0);
+  };
+
+  var toggleCodePosition = function() {
+    setCodePosition(!isCodeAbove, true);
+  };
+
+  // if the browser is sized to wider than 1350px, show the code next to the
+  // app by default
+  var setInitialCodePosition = function() {
+    if (document.body.offsetWidth > 1350) {
+      setCodePosition(true, false);
+    }
+  };
+
+  // make the code scrollable to about the height of the browser, less space
+  // for the tabs
+  var setCodeHeightFromDocHeight = function() {
+    document.getElementById("showcase-code-content").style.height =
+      $(window).height() + "px";
+  };
+
+  // if there's a block of markdown content, render it to HTML
+  var renderMarkdown = function() {
+    var mdContent = document.getElementById("showcase-markdown-content");
+    if (mdContent !== null) {
+      // IE8 puts the content of <script> tags into innerHTML but
+      // not innerText
+      var content = mdContent.innerText || mdContent.innerHTML;
+      document.getElementById("readme-md").innerHTML =
+        (new Showdown.converter()).makeHtml(content)
+    }
+  }
+
+  $(window).resize(function() {
+    if (isCodeAbove) {
+      setAppCodeSxsWidths(false);
+      setCodeHeightFromDocHeight();
+    }
+  });
+
+  window.toggleCodePosition = toggleCodePosition;
+
+  $(window).on("load", setInitialCodePosition);
+  $(window).on("load", renderMarkdown);
+
+  if (window.hljs)
+    hljs.initHighlightingOnLoad();
+})();

srcts/old/extras/shiny-testmode.js

@@ -0,0 +1,8 @@
+// Listen for messages from parent frame. This file is only added when the
+// shiny.testmode option is TRUE.
+window.addEventListener("message", function(e) {
+  var message = e.data;
+
+  if (message.code)
+    eval(message.code);
+});

srcts/src/bindings/input/slider.ts

@@ -14,6 +14,7 @@ import { TextHTMLElement, TextInputBindingBase } from "./text";
 // }
 
 type TimeFormatter = (fmt: string, dt: Date) => string;
+// Backward compatible code for old-style jsliders (Shiny <= 0.10.2.2),
 type legacySliderType = {
   canStepNext: () => boolean;
   stepNext: () => void;
@@ -37,10 +38,6 @@ declare global {
       timezone: (timezone: string) => TimeFormatter;
     } & TimeFormatter;
   }
-  interface JQuery {
-    // Backward compatible code for old-style jsliders (Shiny <= 0.10.2.2),
-    slider: () => legacySliderType;
-  }
 }
 
 // Necessary to get hidden sliders to send their updated values
@@ -303,7 +300,7 @@ $(document).on("click", ".slider-animate-button", function (evt: Event) {
     // Backward compatible code for old-style jsliders (Shiny <= 0.10.2.2),
     // and new-style ionsliders.
     if (target.hasClass("jslider")) {
-      const slider = target.slider();
+      const slider = target.slider() as unknown as legacySliderType;
 
       // If we're currently at the end, restart
       if (!slider.canStepNext()) slider.resetToStart();

srcts/types/bindings/input/slider.d.ts

@@ -1,10 +1,5 @@
 import { TextHTMLElement, TextInputBindingBase } from "./text";
 declare type TimeFormatter = (fmt: string, dt: Date) => string;
-declare type legacySliderType = {
-    canStepNext: () => boolean;
-    stepNext: () => void;
-    resetToStart: () => void;
-};
 declare type SliderReceiveMessageData = {
     label: string;
     value?: Array<string | number> | string | number;
@@ -19,9 +14,6 @@ declare global {
             timezone: (timezone: string) => TimeFormatter;
         } & TimeFormatter;
     }
-    interface JQuery {
-        slider: () => legacySliderType;
-    }
 }
 declare class SliderInputBinding extends TextInputBindingBase {
     find(scope: HTMLElement): JQuery<HTMLElement>;

tests/testthat/test-built-files.R

@@ -9,19 +9,3 @@ test_that("shiny.js version was replaced", {
     expect_false(grepl("\\{\\{\\sVERSION\\s\\}\\}", jsFileContent))
   })
 })
-
-test_that("shiny.css has been built", {
-  new_css <- sass::sass(
-    sass::sass_file(system.file("www/shared/shiny_scss/shiny.scss", package = "shiny")),
-    cache = NULL,
-    options = sass::sass_options(output_style = "compressed"),
-  )
-  # Remove class and attributes
-  new_css <- as.character(new_css)
-
-  pkg_css_file <- system.file("www/shared/shiny.min.css", package = "shiny")
-  pkg_css <- readChar(pkg_css_file, file.size(pkg_css_file), useBytes = TRUE)
-
-  # If this fails, that means that tools/updateShinyCSS.R needs to be run.
-  expect_identical(new_css, pkg_css)
-})

tools/README.md

@@ -90,5 +90,5 @@ To create a new patch:
 ## Updating Shiny's [S]CSS
 
 1. Make any desired changes to source files in `inst/www/shared/shiny_scss`
-1. Run `Rscript updateShinyCSS.R` to generate a built `shiny.min.css` file
+1. Run `yarn build` to generate a built `shiny.min.css` file
 1. Commit any changes

tools/updateShinyCSS.R

@@ -1,10 +0,0 @@
-#!/usr/bin/env Rscript
-library(rprojroot)
-library(sass)
-
-scss <- find_package_root_file("inst/www/shared/shiny_scss/shiny.scss")
-shiny_css <- sass(
-  sass_file(scss), cache = NULL,
-  options = sass_options(output_style = "compressed"),
-  output = find_package_root_file("inst/www/shared/shiny.min.css")
-)

yarn.lock

@@ -1302,6 +1302,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@deanc/esbuild-plugin-postcss@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@deanc/esbuild-plugin-postcss@npm:1.0.1"
+  dependencies:
+    autoprefixer: ^10.2.4
+    css-tree: ^1.1.2
+    fs-extra: ^9.0.1
+    postcss: ^8.2.4
+    tmp: ^0.2.1
+  peerDependencies:
+    esbuild: ^0.8.32
+  checksum: 6e2093fcee7574086b2dad55fc537632e5e45a653a838927c9ba5f5146eda2891656c13b0b3cda994d1a756c80fc039c6c34d3f7eb2d9998883d5f07cf3317f4
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^0.4.2":
   version: 0.4.2
   resolution: "@eslint/eslintrc@npm:0.4.2"
@@ -1752,6 +1767,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/highlightjs@npm:^9.12.1":
+  version: 9.12.1
+  resolution: "@types/highlightjs@npm:9.12.1"
+  checksum: 0be180468972b141e9f24d7fbffee9363eb6fe9aa97c1f4e9aef7fe6f0f3c7cf28d265fa2fd4f43174bffc07eedfb13b52099a66728400af43c009525764c894
+  languageName: node
+  linkType: hard
+
 "@types/ion-rangeslider@npm:2.3.0":
   version: 2.3.0
   resolution: "@types/ion-rangeslider@npm:2.3.0"
@@ -1803,6 +1825,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jqueryui@npm:1.12.15":
+  version: 1.12.15
+  resolution: "@types/jqueryui@npm:1.12.15"
+  dependencies:
+    "@types/jquery": "*"
+  checksum: d4b3fa4c53554fcbe8e2f5981b2a8569d00613c4c1d1c4685bdcb75bf593db7fa308cf66cea79cb011df828bbc4a51f4f039e8316d6b871e777359d87de85772
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.7":
   version: 7.0.7
   resolution: "@types/json-schema@npm:7.0.7"
@@ -1854,26 +1885,32 @@ __metadata:
     "@babel/preset-env": ^7.14.2
     "@babel/preset-typescript": ^7.13.0
     "@babel/runtime": ^7.14.0
+    "@deanc/esbuild-plugin-postcss": ^1.0.1
     "@testing-library/dom": ^7.31.0
     "@testing-library/jest-dom": ^5.12.0
     "@testing-library/user-event": ^13.1.9
     "@types/bootstrap": 3.4.0
     "@types/bootstrap-datepicker": 0.0.14
     "@types/datatables.net": ^1.10.19
+    "@types/highlightjs": ^9.12.1
     "@types/ion-rangeslider": 2.3.0
     "@types/jest": ^26.0.23
     "@types/jquery": ^3.5.5
+    "@types/jqueryui": 1.12.15
     "@types/lodash": ^4.14.170
     "@types/node": ^15.6.1
     "@types/selectize": 0.12.34
+    "@types/showdown": ^1.9.3
     "@typescript-eslint/eslint-plugin": ^4.25.0
     "@typescript-eslint/parser": ^4.25.0
+    autoprefixer: ^10.2.6
     bootstrap-datepicker: 1.9.0
     browserslist: ^4.16.6
     core-js: ^3.13.0
     esbuild: ^0.12.4
     esbuild-plugin-babel: "https://github.com/schloerke/esbuild-plugin-babel#patch-2"
     esbuild-plugin-globals: ^0.1.1
+    esbuild-plugin-sass: "https://github.com/schloerke/esbuild-plugin-sass#js-files-typo"
     eslint: ^7.27.0
     eslint-config-prettier: ^7.2.0
     eslint-plugin-jest: ^24.3.6
@@ -1886,6 +1923,7 @@ __metadata:
     madge: ^4.0.2
     node-gyp: ^8.1.0
     phantomjs-prebuilt: ^2.1.16
+    postcss: ^8.3.5
     prettier: 2.3.0
     readcontrol: ^1.0.0
     replace: ^1.2.1
@@ -1899,6 +1937,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@types/showdown@npm:^1.9.3":
+  version: 1.9.3
+  resolution: "@types/showdown@npm:1.9.3"
+  checksum: f0f92676934dfec00b4a4600b593623b9ed03f52d712e9f4faf9347a474b4938eaa274beac5ac92b61fc7f5ec472d12384ba3f78f86db28c026ef1b76a2e527b
+  languageName: node
+  linkType: hard
+
 "@types/sizzle@npm:*":
   version: 2.3.3
   resolution: "@types/sizzle@npm:2.3.3"
@@ -2222,7 +2267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^3.0.3":
+"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
   dependencies:
@@ -2370,6 +2415,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"at-least-node@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "at-least-node@npm:1.0.0"
+  checksum: 8f33efc16287ed39766065c718a2d36a469f702c66c6eb41fa460c0c62bca395301a6a02946e315ae4a84c9cc7f44c94ec73a556bc2a1049350da98d0b013afe
+  languageName: node
+  linkType: hard
+
 "atob@npm:^2.1.2":
   version: 2.1.2
   resolution: "atob@npm:2.1.2"
@@ -2379,6 +2431,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.2.4, autoprefixer@npm:^10.2.6":
+  version: 10.2.6
+  resolution: "autoprefixer@npm:10.2.6"
+  dependencies:
+    browserslist: ^4.16.6
+    caniuse-lite: ^1.0.30001230
+    colorette: ^1.2.2
+    fraction.js: ^4.1.1
+    normalize-range: ^0.1.2
+    postcss-value-parser: ^4.1.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 805414d4efe4f25c6162edc65ad999235ea28cf11b6a1ed838b055ef1f777368dd16c978b44d0b48bb96a3420948d26da27066d5caa4f81bcee1946e9a269532
+  languageName: node
+  linkType: hard
+
 "aws-sign2@npm:~0.7.0":
   version: 0.7.0
   resolution: "aws-sign2@npm:0.7.0"
@@ -2553,6 +2623,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"binary-extensions@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "binary-extensions@npm:2.2.0"
+  checksum: 0f5f5685f344b035c4f98d06fa288962d262294a1441c1481ac99e895037bde971ebe6e09a4bd8aa18ab2525bfc00b1ad4af71dbf9e933a72e0df6919706a728
+  languageName: node
+  linkType: hard
+
 "bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -2601,7 +2678,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.1":
+"braces@npm:^3.0.1, braces@npm:~3.0.2":
   version: 3.0.2
   resolution: "braces@npm:3.0.2"
   dependencies:
@@ -2747,7 +2824,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001219":
+"caniuse-lite@npm:^1.0.30001219, caniuse-lite@npm:^1.0.30001230":
   version: 1.0.30001237
   resolution: "caniuse-lite@npm:1.0.30001237"
   checksum: 8b56e2fff5856adbc3abde2ee85defeba6f6df6cf4e1c195bb0fd863c9d09ee318721d5c228a74beaac812e2c79009bc8ef998d6e85f44153dc6c26cc8bae7ce
@@ -2820,6 +2897,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:>=3.0.0 <4.0.0":
+  version: 3.5.2
+  resolution: "chokidar@npm:3.5.2"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 52fbff3acebf06ec0125872110f6c8403e66cd3d613264c83405496e199554d99380342d9b3a7ffd7910c53c5865e242ed7dd72fcb2e883d8e3ad3f3883aee6c
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -3105,6 +3201,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-tree@npm:^1.1.2":
+  version: 1.1.3
+  resolution: "css-tree@npm:1.1.3"
+  dependencies:
+    mdn-data: 2.0.14
+    source-map: ^0.6.1
+  checksum: 5b1bf44c457f4682feef5d1fccf0758aabaec3b77f264418a022826a0e4c2dc9f2283205223ddba147eba8ee4cb88caa91298b54c4b7e9af345bb820e9a32868
+  languageName: node
+  linkType: hard
+
 "css.escape@npm:^1.5.1":
   version: 1.5.1
   resolution: "css.escape@npm:1.5.1"
@@ -3605,12 +3711,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-sass@https://github.com/schloerke/esbuild-plugin-sass#js-files-typo":
+  version: 0.5.1
+  resolution: "esbuild-plugin-sass@https://github.com/schloerke/esbuild-plugin-sass.git#commit=1f04d94e5c2894339e428018613a43b742e0bd03"
+  dependencies:
+    css-tree: ^1.1.2
+    fs-extra: ^9.0.1
+    sass: ^1.32.4
+    tmp: ^0.2.1
+  peerDependencies:
+    esbuild: ">=0.11.14"
+  checksum: 2cbb57fb40b315a16b8e1fff9478b716ee1e5984388cebe1558ff52ad327a88e063f407d18a493bcef9309c9a54d84d8b1109bf1cb6b85018f0228328998546e
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.12.4":
-  version: 0.12.8
-  resolution: "esbuild@npm:0.12.8"
+  version: 0.12.9
+  resolution: "esbuild@npm:0.12.9"
   bin:
     esbuild: bin/esbuild
-  checksum: 91ad2c8ddb8a3b0b1746e41e09684ab9415fa77aa39b0a07b45e9041cfb8825353e11ae2f4cefb53189f8c5a40edc372aa8cb8093e48d782635576f518a1b662
+  checksum: e88720c29ec272c24640db25acdec841ad266bb42d8bb8930270141c82834314a05184f90ac68a74139721741c52ba343776ba4f69b2cf41a7a31c343e6fc867
   languageName: node
   linkType: hard
 
@@ -4215,6 +4335,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "fraction.js@npm:4.1.1"
+  checksum: 3667dfc48804ba4623f43e8d284a30f9abcb546f59c44dbcb51722e114d77fb06f0fe9bf051db816db6b2679c55dfccb633c4841c3436b2239c5dffcef0a8ccf
+  languageName: node
+  linkType: hard
+
 "fragment-cache@npm:^0.2.1":
   version: 0.2.1
   resolution: "fragment-cache@npm:0.2.1"
@@ -4235,6 +4362,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^9.0.1":
+  version: 9.1.0
+  resolution: "fs-extra@npm:9.1.0"
+  dependencies:
+    at-least-node: ^1.0.0
+    graceful-fs: ^4.2.0
+    jsonfile: ^6.0.1
+    universalify: ^2.0.0
+  checksum: e667d8df54113b527bf5830dd9db8f142618db488894b329fe07724c7020dfacf8a372b144a74e683ae44e66f56117adca9cac165950dda7d83537c46c10dc4b
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^2.0.0":
   version: 2.1.0
   resolution: "fs-minipass@npm:2.1.0"
@@ -4251,7 +4390,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-fsevents@^2.1.2:
+"fsevents@^2.1.2, fsevents@~2.3.2":
   version: 2.3.2
   resolution: "fsevents@npm:2.3.2"
   dependencies:
@@ -4260,7 +4399,7 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^2.1.2#builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.1.2#builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#builtin<compat/fsevents>::version=2.3.2&hash=11e9ea"
   dependencies:
@@ -4382,7 +4521,7 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.1.0, glob-parent@npm:^5.1.2":
+"glob-parent@npm:^5.1.0, glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -4446,7 +4585,7 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.1.9, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.1.9, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
   version: 4.2.6
   resolution: "graceful-fs@npm:4.2.6"
   checksum: 84d39c7756892553da990a9db7e45f844b3309b37b5a00174cbb4748476f2250c54f24594d4d252f64f085c65c2fdac7c809419bf6d55f0e6e42eb07ac0f5bf2
@@ -4811,6 +4950,15 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"is-binary-path@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "is-binary-path@npm:2.1.0"
+  dependencies:
+    binary-extensions: ^2.0.0
+  checksum: 49a1446a3cf3719e91a061f0e52add18fd065325c652c277519a2ad333440dc8b449076a893277a46940ef16f05a908716667ca8f986b28c677b9acb11e10a36
+  languageName: node
+  linkType: hard
+
 "is-buffer@npm:^1.1.5":
   version: 1.1.6
   resolution: "is-buffer@npm:1.1.6"
@@ -4940,7 +5088,7 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:~4.0.1":
   version: 4.0.1
   resolution: "is-glob@npm:4.0.1"
   dependencies:
@@ -5758,6 +5906,19 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"jsonfile@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "jsonfile@npm:6.1.0"
+  dependencies:
+    graceful-fs: ^4.1.6
+    universalify: ^2.0.0
+  dependenciesMeta:
+    graceful-fs:
+      optional: true
+  checksum: 9419c886abc6f8a5088cbb222b7bc17c76e8ee9f6c0e5c38781a4e09488166084f25247bc0b58e025b08c43064c82ae860ad89a992e35fc8cfae639323b7edbc
+  languageName: node
+  linkType: hard
+
 "jsprim@npm:^1.2.2":
   version: 1.4.1
   resolution: "jsprim@npm:1.4.1"
@@ -6030,6 +6191,13 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.14":
+  version: 2.0.14
+  resolution: "mdn-data@npm:2.0.14"
+  checksum: 57a27f585adb0ab978b0229aa2347dfbdb897e340a3cd3547a7de3162680af641bf2cdf185771b3bca29fabf8c46b486a45a4809dd5d9321465c80e6adad98f4
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -6412,7 +6580,7 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:3, normalize-path@npm:^3.0.0":
+"normalize-path@npm:3, normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
   checksum: 215a701b471948884193628f3e38910353abf445306b519c42c2a30144b8beb8ca0a684da97bfc2ee11eb168c35c776d484274da4bd8f213d2b22f70579380ee
@@ -6428,6 +6596,13 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"normalize-range@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "normalize-range@npm:0.1.2"
+  checksum: bca997d800d76b7954b36d394f44bbe65948eb4cca954b2e731cd81a7a5540725dcd237df7cb2006449e705c4803755658b8f23d89f9cc2eb5da464558baba69
+  languageName: node
+  linkType: hard
+
 "npm-run-path@npm:^2.0.0":
   version: 2.0.2
   resolution: "npm-run-path@npm:2.0.2"
@@ -6827,6 +7002,13 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"postcss-value-parser@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "postcss-value-parser@npm:4.1.0"
+  checksum: 70831403886859289f650550a38889857022c5bbe264fd5d39cfad5207b3e1d33422edc031c1a922f3ae29d0dff98837a8bf126c840374d2b0079e7d57cf7d71
+  languageName: node
+  linkType: hard
+
 "postcss-values-parser@npm:^2.0.1":
   version: 2.0.1
   resolution: "postcss-values-parser@npm:2.0.1"
@@ -6849,6 +7031,17 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.2.4, postcss@npm:^8.3.5":
+  version: 8.3.5
+  resolution: "postcss@npm:8.3.5"
+  dependencies:
+    colorette: ^1.2.2
+    nanoid: ^3.1.23
+    source-map-js: ^0.6.2
+  checksum: 87dc16efcf40286fad4ded0a433497ddbc55dfad3d7ddb200ba9c0761ec376280fa2c06a522628583c9284def85894c52bc361cffedf0679f4936370c084a145
+  languageName: node
+  linkType: hard
+
 "precinct@npm:^7.0.0":
   version: 7.1.0
   resolution: "precinct@npm:7.1.0"
@@ -7111,6 +7304,15 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"readdirp@npm:~3.6.0":
+  version: 3.6.0
+  resolution: "readdirp@npm:3.6.0"
+  dependencies:
+    picomatch: ^2.2.1
+  checksum: 7da2fe8d5abf17ae0bf97a052718e16d29fa185f3e461153035728d93642326ae8e44c17b9a9b3a5fa616dff160e96be3184e0323efaac7211f80c0aab5f622b
+  languageName: node
+  linkType: hard
+
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -7506,6 +7708,17 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.32.4":
+  version: 1.35.1
+  resolution: "sass@npm:1.35.1"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+  bin:
+    sass: sass.js
+  checksum: ceeb2ebd09f8c058e71ce9b35b7dc0af8800ff2a87d52d9efe8d0f10e6649200065b7526f07326b52d6946c0d57997e13d96985fa826926edf8b1e31a839c000
+  languageName: node
+  linkType: hard
+
 "saxes@npm:^5.0.1":
   version: 5.0.1
   resolution: "saxes@npm:5.0.1"
@@ -8179,6 +8392,15 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"tmp@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "tmp@npm:0.2.1"
+  dependencies:
+    rimraf: ^3.0.0
+  checksum: 13973825ff1c7aed3359bba97c146c860ebb5b1cbdca88387a2ff8bae704d2478b701cc3adc29b1461be292fed1e4ae56b378b6a0386bbab471ef32860e0a711
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.x":
   version: 1.0.4
   resolution: "tmpl@npm:1.0.4"
@@ -8572,6 +8794,13 @@ typescript@~4.1.5:
   languageName: node
   linkType: hard
 
+"universalify@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "universalify@npm:2.0.0"
+  checksum: 36bfbdc97bd4b483596e66ea65e20663f5ab9ec3650157d99b075b7f97afcdefe46bbb23f89171dd75595d398cea3769a5b6d7130f5c66cae2a0f00904780f62
+  languageName: node
+  linkType: hard
+
 "unset-value@npm:^1.0.0":
   version: 1.0.0
   resolution: "unset-value@npm:1.0.0"