websocket-text-relay 1.1.5 → 1.1.7

package/README.md

@@ -3,8 +3,6 @@
 This application connects to your text editor using the Language Server Protocol (LSP) and then starts a websocket
 server that front end clients can connect to and subscribe to file change events. This allows users to see their
 front end changes evaluated immediately as they type, without having to first save the file to disk or reload the browser.
-It's a similar concept to sites like CodePen and JsFiddle, except you can develop locally using your own text editor with all
-of your personalized plugins instead of having to use an in browser code editor.
 
 ## Usage
 
@@ -23,14 +21,14 @@ the status UI and verify everything is running by first starting up your text ed
 
 To use this on a professional level project that gives you the option to use modules, typescript, and react, I recommend using vite along with
 the plugin [vite-plugin-websocket-text-relay](https://github.com/niels4/vite-plugin-websocket-text-relay). This plugin gives you all the power of vite when developing while also hooking
-the live text updates into Vite's hot module reload system.
+the live text updates into Vite's hot module reload system. See [live-demo-vite](https://github.com/niels4/live-demo-vite) for a complete project setup with Typescript, React, Vite, ViTest, and a simple router.
 
 If you want to use this as a learning tool to play around with UI concepts using simple projects involving 1 html, css, and javascript file,
-then check out this [simple reference project](https://github.com/niels4/wtr-simple-example). This is a great setup for following along with any short and focused web development tutorials.
+then check out [live-demo-vanillajs](https://github.com/niels4/live-demo-vanillajs). This is a great setup for following along with any short and focused web development tutorials.
 
 And finally, the status UI for this project was also created using live updates from websocket-text-relay.
 In addition to giving you live feedback on the status and activity of the application, it is also meant to serve as a
-reference UI project that is more complicated than a single javascript file, but still doesn't use any external dependencies.
+reference UI project that doesn't use any external dependencies.
 
 ## Developing
 

package/changelog.md

@@ -1,3 +1,13 @@
+## 1.1.7 - 2025/12/19
+
+### UI Update
+Allow default websocket port to be overridden with url search param: `?port=38378`
+
+## 1.1.6 - 2025/12/19
+
+### UI Update
+Rewrite the UI to be simpler and fix browser compatibility issues.
+
 ## 1.1.5 - 2025/09/05
 
 Minor UI spacing fix

package/docs/code-structure.md

@@ -87,21 +87,27 @@ The root of the static site is the `src/ui` directory.
 The UI is entirely made up of SVG elements, so the only thing the index.html file has to do is set up the root
 SVG element with some groups to act as containers for the different components to use.
 
-### js/index.js
+### js/setup.js
 
  - Sets up the websocket-text-relay client with handlers for css and javascript files.
  - initializes the simple dependency management system that allows the UI to be split into several javascript files.
- - Hooks up events to handle resizing the SVG element on window resize.
  - emit data and activity events that the UI components can hook into
 
-Whenever a javascript file is edited, its exports are updated and the main.js file is rerun.
-
-### js/util/DependencyManager.js
+### js/setup/dependencyManager.js
 
 This is a very quick and simple dependency management system. The dependency container is just an object in the global scope.
 An exportDeps function is created to make it easy to specify which objects in scope are to be exported.
 
-An onEvent function is also created and exported here, it prevents event leaks by cleaning up any registered event handlers whenever the javascript is reevaluated.
+### js/setup/eventSubscriber.js
+
+Provides the onEvent function that each file can use when subscribing to events. The events are automatically 
+unsubscribed when that file gets reevaluated. See the `js/components/sessionWedges.js` file for an example of usage.
+
+### js/setup/evalOnChange.js
+
+This provides a function where you can define what files should be run after the current file is updated.  
+Rather than calculate a dependency graph and try to automatically rerun files, simply define the behavior you want
+while you are editing the file. See the `js/util/constants.js` file for an example of usage.
 
 ### js/util/drawing.js
 
@@ -115,10 +121,8 @@ The center of the UI is at (0, 0) with a minimum height and width of 2. Having a
 
 ### js/components/
 
-The components directory contains the javascript classes that render the different elements on the screen.
-
-Each class handles the state for its component and has a draw function that renders it to the screen.
+The components directory contains the javascript files that render the different elements on the screen.
 
-Any components affected by data updates will also have an update function. When called the component will update the elements it manages with the new data.
+### js/data/
 
-Some components also respond to text update activity, these components will have a triggerActivity function as well.
+Read data from the websocket server and construct data stores and events required by the components.

package/eslint.config.js

@@ -2,12 +2,16 @@ import js from "@eslint/js"
 import globals from "globals"
 import { defineConfig } from "eslint/config"
 
+const wtrGlobals = {
+  __WTR__: "readonly",
+}
+
 export default defineConfig([
   {
     files: ["**/*.{js,mjs,cjs}"],
     plugins: { js },
     extends: ["js/recommended"],
-    languageOptions: { globals: { ...globals.node, ...globals.browser } },
+    languageOptions: { globals: { ...globals.node, ...globals.browser, ...wtrGlobals } },
   },
   {
     rules: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "websocket-text-relay",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "An LSP server for sending live file updates from your text editor to the front end via websockets.",
   "bin": {
     "websocket-text-relay": "./start.js"
@@ -36,15 +36,15 @@
   },
   "homepage": "https://github.com/niels4/websocket-text-relay#readme",
   "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "eslint": "^9.33.0",
-    "globals": "^16.3.0",
-    "prettier": "3.6.2",
-    "vitest": "^3.2.4"
+    "@eslint/js": "9.39.2",
+    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/ui": "4.0.16",
+    "eslint": "9.39.2",
+    "globals": "16.5.0",
+    "prettier": "3.7.4",
+    "vitest": "4.0.16"
   },
   "dependencies": {
-    "ws": "^8.18.3"
+    "ws": "8.18.3"
   }
 }

package/src/ui/css/main.css

@@ -9,16 +9,12 @@
   --color-evening-shadow: #514a45;
 }
 
-.color_palette {
-  --bg2: var(--color-navy-nightfall);
-  --accent-active: var(var(--color-golden-sunset));
-}
-
 .color_theme {
-  --main-background-color: var(--bg2);
+  --accent-active: var(var(--color-golden-sunset));
+  --main-background-color: var(--color-navy-nightfall);
   --header-text-color: var(--color-ivory-daybreak);
   --summary-value-text-color: hsl(from var(--header-text-color) h s l / 0.9);
-  --offline-color: oklch(from var(--color-golden-sunset) calc(l * 0.5) calc(c * 0.25) h);
+  --offline-color: oklch(from var(--color-tangerine-sunset) calc(l * 0.4) calc(c * 0.1) h);
   --online-color: oklch(from var(--color-golden-sunset) calc(l * 0.8) calc(c * 0.25) h);
   --active-color: var(--color-golden-sunset);
   --wedge-online-color: oklch(from var(--color-azure-afternoon) calc(l * 0.5) calc(c * 0.5) h);
@@ -40,55 +36,33 @@ body {
   font-size: 0.1pt;
 }
 
-#grid_group {
-  stroke: #fff;
-  stroke-width: 0.001;
-}
-
-.grid_axis {
-  stroke-width: 0.003;
-  stroke: hsl(76, 90%, 80%);
-}
-
-#header_summary_group {
+.header {
   fill: var(--header-text-color);
   font-weight: 300;
+  font-size: 0.1pt;
 }
 
 .right_header {
   text-anchor: end;
 }
 
-.header_number {
-  font-weight: 100;
-}
-
-#status_ring_group {
+.status_ring_wrapper.offline {
   stroke: var(--offline-color);
 }
 
-#status_ring_group.online {
+.status_ring_wrapper.online {
   stroke: var(--online-color);
 }
 
-#status_ring_group.active {
+.status_ring_wrapper.active {
   stroke: var(--active-color);
 }
 
-.single_wedge_group {
-  display: none;
-}
-
-.single_wedge_group.online,
-.single_wedge_group.active {
-  display: inherit;
-}
-
-.online .wedge_node {
+.wedge_node {
   fill: var(--wedge-online-color);
 }
 
-.active .wedge_node {
+.wedge_node.active {
   fill: var(--wedge-active-color);
 }
 
@@ -115,57 +89,27 @@ body {
   fill: var(--active-color);
 }
 
-.timeseries_bg {
-  /* fill: #ffffff1f; */
-  fill: none;
-}
-
-.timeseries_path {
+.time_series_path {
   stroke: var(--timeseries-line-color);
-  clip-path: url(#inner_circle_clip);
+  stroke-width: 3;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: crispEdges;
 }
 
-.timeseries_big_label {
-  /* fill: var(--timeseries-label-color); */
-  font-size: 0.04pt;
-  font-weight: 400;
-  text-anchor: end;
-}
-
-.timeseries_small_label {
-  /* fill: var(--timeseries-label-color); */
+.small_label {
   font-size: 0.03pt;
   font-weight: 400;
-  text-anchor: end;
+  fill: var(--timeseries-label-color);
+  text-anchor: middle;
+  dominant-baseline: central;
 }
 
-.timeseries_value {
+.time_series_value {
   fill: var(--timeseries-value-color);
   font-size: 0.05pt;
   font-weight: 300;
   text-anchor: middle;
-}
-
-.tooltip_text {
-  fill: #fff;
-  font-size: 0.025pt;
-  font-weight: 200;
-  text-anchor: middle;
-}
-
-.tooltip_outline {
-  stroke: #fff;
-  stroke-width: 0.002;
-  fill: #000;
-}
-
-.tooltip_display_group {
-  opacity: 0;
-  transition: opacity 0.35s ease;
-}
-
-.tooltip_wrapper_group:hover .tooltip_display_group {
-  opacity: 1;
+  dominant-baseline: central;
 }
 
 .server_status_label {
@@ -189,11 +133,11 @@ body {
   text-anchor: middle;
 }
 
-.test_circle {
+.wedge_label_dot {
   fill: #fff;
 }
 
-.test_line {
+.wedge_label_line {
   stroke: #fff;
   stroke-width: 0.005;
 }

package/src/ui/index.html

@@ -6,31 +6,36 @@
 
     <title>WTR Status</title>
 
+    <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="stylesheet" href="css/fonts.css" />
     <style id="main_style"></style>
-    <script type="module" src="js/index.js" defer></script>
+    <script type="module" src="js/setup.js" defer></script>
 
     <style>
-      body {
-        margin: 0;
+      html {
+        height: 100dvh;
         overscroll-behavior: none;
-        display: grid;
-        align-items: center;
-        justify-content: center;
-        padding-top: 2px;
+      }
+
+      #svg_root {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100dvh;
+        width: 100dvw;
       }
     </style>
   </head>
 
-  <body class="base_colors color_palette color_theme">
+  <body class="base_colors color_theme">
     <svg id="svg_root" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg">
-      <g id="grid_group"></g>
-      <g id="header_summary_group"></g>
-      <g id="status_ring_group"></g>
-      <g id="client_wedges_group" class="wedge_group"></g>
+      <g id="headers_group"></g>
       <g id="editor_wedges_group" class="wedge_group"></g>
-      <g id="activity_timeseries_graph"></g>
-      <g id="server_status_group"></g>
+      <g id="client_wedges_group" class="wedge_group"></g>
+      <g id="activity_time_series_group"></g>
+      <g id="activity_labels_group"></g>
+      <g id="status_ring_group"></g>
+      <g id="footer_status_group"></g>
     </svg>
   </body>
 </html>

package/src/ui/js/components/activityLabels.js

@@ -0,0 +1,41 @@
+const { drawText, wtrActivityDataWindowEmitter, onEvent, constants } = __WTR__
+const { innerRingRadius } = constants
+
+const parentGroup = document.getElementById("activity_labels_group")
+parentGroup.innerHTML = ""
+
+const valuePadding = 0.068
+const labelPadding = 0.14
+
+drawText({
+  text: "Max",
+  y: -innerRingRadius + labelPadding,
+  className: "small_label",
+  parent: parentGroup,
+})
+
+const maxValueText = drawText({
+  text: "0",
+  y: -innerRingRadius + valuePadding,
+  className: "time_series_value",
+  parent: parentGroup,
+})
+
+drawText({
+  text: "Updates / second",
+  y: innerRingRadius - labelPadding,
+  className: "small_label",
+  parent: parentGroup,
+})
+
+const currentValueText = drawText({
+  text: "0",
+  y: innerRingRadius - valuePadding,
+  className: "time_series_value",
+  parent: parentGroup,
+})
+
+onEvent(wtrActivityDataWindowEmitter, "data", ({ maxValue, currentValue }) => {
+  maxValueText.textContent = maxValue
+  currentValueText.textContent = currentValue
+})

package/src/ui/js/components/activityTimeSeries.js

@@ -0,0 +1,58 @@
+const { drawSvgElement, constants, wtrActivityDataWindowEmitter, onEvent } = __WTR__
+const { innerRingRadius, dataWindowSize } = constants
+
+const parentGroup = document.getElementById("activity_time_series_group")
+parentGroup.innerHTML = ""
+
+const animationProps = { duration: 1000, easing: "linear", iterations: 1, fill: "forwards" }
+
+const minX = -innerRingRadius
+const width = innerRingRadius * 2
+const height = 0.25
+const maxY = height / 2
+const intervalWidth = width / (dataWindowSize - 2)
+
+const clipId = "time-series-clip"
+
+const clipPath = drawSvgElement({
+  tag: "clipPath",
+  attributes: { id: clipId },
+  parent: parentGroup,
+})
+
+drawSvgElement({
+  tag: "circle",
+  attributes: { r: innerRingRadius },
+  parent: clipPath,
+})
+
+const clippedGroup = drawSvgElement({
+  tag: "g",
+  attributes: { "clip-path": `url(#${clipId})` },
+  parent: parentGroup,
+})
+
+const valuePath = drawSvgElement({
+  tag: "path",
+  attributes: { d: "" },
+  className: "time_series_path",
+  parent: clippedGroup,
+})
+
+const getValueScale = (maxValue) => (maxValue === 0 ? 0.00001 : height / maxValue)
+
+onEvent(wtrActivityDataWindowEmitter, "data", (data) => {
+  valuePath.setAttribute("d", data.path)
+  const prevValueScale = getValueScale(data.prevMaxValue)
+  const valueScale = getValueScale(data.maxValue)
+
+  const animationKeyFrames = [
+    {
+      transform: `translateX(${minX}px) translateY(${maxY}px) scaleX(${intervalWidth}) scaleY(${-prevValueScale})`,
+    },
+    {
+      transform: `translateX(${minX - intervalWidth}px) translateY(${maxY}px) scaleX(${intervalWidth}) scaleY(${-valueScale})`,
+    },
+  ]
+  valuePath.animate(animationKeyFrames, animationProps)
+})

package/src/ui/js/components/drawSessionLabel.js

@@ -0,0 +1,117 @@
+const {
+  drawSvgElement,
+  drawPolarCircle,
+  drawPolarLine,
+  drawText,
+  polarToCartesian,
+  exportDeps,
+  evalOnChange,
+} = __WTR__
+
+evalOnChange(["js/components/sessionWedges.js"])
+
+const labelLineDistance = 0.07
+const underlinePadding = 0.02
+const summaryCircleRadius = 0.014
+const summaryValueSpacing = 0.1
+
+/**
+ * @param {{session: EditorStatus | ClientStatus, direction: 1 | -1}}
+ */
+const drawSessionLabel = ({ wedgeCenterAngle, wedgeCenterRadius, session, direction, parent }) => {
+  drawPolarCircle({
+    angle: wedgeCenterAngle,
+    radius: wedgeCenterRadius,
+    r: 0.01,
+    className: "wedge_label_dot",
+    parent,
+  })
+
+  const textStartRadius = wedgeCenterRadius + labelLineDistance
+  drawPolarLine({
+    startAngle: wedgeCenterAngle,
+    startRadius: wedgeCenterRadius,
+    endAngle: wedgeCenterAngle,
+    endRadius: textStartRadius,
+    className: "wedge_label_line",
+    parent,
+  })
+
+  const serverIndicator = session.isServer ? "* " : ""
+  const [textStartX, textStartY] = polarToCartesian(wedgeCenterAngle, textStartRadius)
+  const nameTextNode = drawText({
+    x: textStartX,
+    y: textStartY - underlinePadding,
+    text: serverIndicator + session.name,
+    textAnchor: direction === 1 ? "end" : "start",
+    className: "wedge_identifier",
+    parent,
+  })
+  const nameTextBBox = nameTextNode.getBBox()
+
+  const underlineX2 = direction === 1 ? nameTextBBox.x : nameTextBBox.x + nameTextBBox.width
+  drawSvgElement({
+    tag: "line",
+    attributes: { x1: textStartX, y1: textStartY, x2: underlineX2, y2: textStartY },
+    className: "wedge_label_line",
+    parent,
+  })
+
+  const summaryGroup = drawSvgElement({ tag: "g", parent })
+
+  let currentSummaryX = textStartX
+
+  const { leftText, rightText } =
+    direction === 1
+      ? { leftText: session.openCount, rightText: session.activeOpenCount }
+      : { leftText: session.watchCount, rightText: session.activeWatchCount }
+
+  drawText({
+    x: currentSummaryX + summaryCircleRadius * 2,
+    y: textStartY,
+    text: leftText,
+    dominantBaseline: "middle",
+    className: "summary_text_value",
+    parent: summaryGroup,
+  })
+
+  drawSvgElement({
+    tag: "circle",
+    attributes: {
+      cx: currentSummaryX,
+      cy: textStartY - summaryCircleRadius / 2,
+      r: summaryCircleRadius,
+    },
+    className: "summary_watched_circle",
+    parent: summaryGroup,
+  })
+
+  currentSummaryX += summaryValueSpacing
+
+  drawText({
+    x: currentSummaryX + summaryCircleRadius * 2,
+    y: textStartY,
+    text: rightText,
+    dominantBaseline: "middle",
+    className: "summary_text_value",
+    parent: summaryGroup,
+  })
+
+  drawSvgElement({
+    tag: "circle",
+    attributes: {
+      cx: currentSummaryX,
+      cy: textStartY - summaryCircleRadius / 2,
+      r: summaryCircleRadius,
+    },
+    className: "summary_active_circle",
+    parent: summaryGroup,
+  })
+
+  const summaryGroupBBox = summaryGroup.getBBox()
+  const translateX = direction === 1 ? -summaryGroupBBox.width - 0.02 : 0.05
+  const translateY = summaryGroupBBox.height / 2 + 0.014
+  summaryGroup.setAttribute("transform", `translate(${translateX}, ${translateY})`)
+}
+
+exportDeps({ drawSessionLabel })

package/src/ui/js/components/footerStatus.js

@@ -0,0 +1,37 @@
+const { drawText, wtrStatusEmitter, onEvent } = __WTR__
+
+const valueTextClass = "server_status_value"
+const offlineTextClass = "server_status_offline"
+
+const parentGroup = document.getElementById("footer_status_group")
+parentGroup.innerHTML = ""
+
+drawText({
+  x: 0,
+  y: 0.85,
+  text: "WS Server PID",
+  className: "server_status_label",
+  parent: parentGroup,
+})
+
+const pidElement = drawText({ x: 0, y: 0.748, text: "-1", parent: parentGroup })
+
+const offlineElement = drawText({
+  x: 0,
+  y: 0.748,
+  text: "OFFLINE",
+  className: offlineTextClass,
+  parent: parentGroup,
+})
+
+onEvent(wtrStatusEmitter, "data", (/** @type {WtrStatus} */ data) => {
+  const server = data.editors.find((editor) => editor.isServer)
+  if (!data.isOnline || server == null) {
+    pidElement.classList.remove(valueTextClass)
+    offlineElement.classList.add(offlineTextClass)
+  } else {
+    pidElement.textContent = server.lsPid
+    pidElement.classList.add(valueTextClass)
+    offlineElement.classList.remove(offlineTextClass)
+  }
+})