Move the cursor utilities to shared lib.

.changeset/smooth-coins-bathe.md

@@ -0,0 +1,7 @@
+---
+"@solid-devtools/locator": patch
+"solid-devtools-shared": patch
+"@solid-devtools/ui": patch
+---
+
+Move the cursor utilities to shared lib.

packages/locator/src/index.tsx

@@ -9,9 +9,9 @@ import {
 import { makeKeyHoldListener } from "@solid-primitives/keyboard"
 import { registerDebuggerPlugin } from "@solid-devtools/debugger"
 import { WINDOW_PROJECTPATH_PROPERTY } from "@shared/variables"
+import { createElementCursor } from "@shared/utils"
 import { clearFindComponentCache, findComponent } from "./findComponent"
 import { makeHoverElementListener } from "./hoverElement"
-import { createElementCursor } from "./elementCursor"
 import { openCodeSource, SourceCodeData, TargetIDE, TargetURLFunction } from "./goToSource"
 import { ElementOverlay } from "./ElementOverlay"
 import { sheet } from "./twind"
@@ -71,7 +71,7 @@ export function useLocatorPlugin({ targetIDE, key = "altKey" }: LocatorOptions):
 
     if (targetIDE) {
       // set pointer cursor to selected component
-      createElementCursor(() => selected()?.location?.element)
+      createElementCursor(() => selected()?.location?.element, "pointer")
 
       // go to selected component source code on click
       createEffect(() => {

packages/shared/utils.ts

@@ -1,3 +1,6 @@
+import { Accessor, createEffect, createMemo } from "solid-js"
+import { access, FalsyValue, MaybeAccessor } from "@solid-primitives/utils"
+
 export function callArrayProp<
   K extends PropertyKey,
   T extends (...args: Args) => void,
@@ -50,3 +53,91 @@ export function trimString(str: string, maxLength: number): string {
   if (str.length <= maxLength) return str
   return str.slice(0, maxLength) + "…"
 }
+
+export type CursorProperty =
+  | "-moz-grab"
+  | "-webkit-grab"
+  | "alias"
+  | "all-scroll"
+  | "auto"
+  | "cell"
+  | "col-resize"
+  | "context-menu"
+  | "copy"
+  | "crosshair"
+  | "default"
+  | "e-resize"
+  | "ew-resize"
+  | "grab"
+  | "grabbing"
+  | "help"
+  | "move"
+  | "n-resize"
+  | "ne-resize"
+  | "nesw-resize"
+  | "no-drop"
+  | "none"
+  | "not-allowed"
+  | "ns-resize"
+  | "nw-resize"
+  | "nwse-resize"
+  | "pointer"
+  | "progress"
+  | "row-resize"
+  | "s-resize"
+  | "se-resize"
+  | "sw-resize"
+  | "text"
+  | "vertical-text"
+  | "w-resize"
+  | "wait"
+  | "zoom-in"
+  | "zoom-out"
+  | (string & {})
+
+// TODO: contribute to @solid-primitives/cursor
+
+/**
+ * Set selected {@link cursor} to {@link target} styles.
+ *
+ * @param target
+ * @param cursor
+ */
+export function createElementCursor(
+  target: Accessor<HTMLElement | FalsyValue> | HTMLElement,
+  cursor: MaybeAccessor<CursorProperty>,
+): void {
+  createEffect<{ el: HTMLElement | FalsyValue; cursor: CursorProperty }>(
+    prev => {
+      const el = access(target)
+      const cursorValue = access(cursor)
+      if (prev.el === el && prev.cursor === cursorValue) return prev
+      if (prev.el) prev.el.style.cursor = prev.cursor
+      if (el) {
+        const newPrevCursor = el.style.cursor
+        el.style.cursor = cursorValue
+        return { el, cursor: newPrevCursor }
+      }
+      return { el, cursor: "" }
+    },
+    {
+      el: undefined,
+      cursor: "",
+    },
+  )
+}
+
+export function createBodyCursor(cursor: Accessor<CursorProperty | FalsyValue>): void {
+  let overwritten: string
+  createEffect((prev: CursorProperty | FalsyValue) => {
+    const cursorValue = cursor()
+    if (prev === cursorValue) return prev
+    if (cursorValue) {
+      overwritten = document.body.style.cursor
+      document.body.style.cursor = cursorValue
+    } else {
+      document.body.style.cursor = overwritten
+    }
+    return cursorValue
+  })
+}