Cleanup

Author: thetarnav

packages/debugger/src/locator/element-overlay.tsx

@@ -14,36 +14,36 @@ export function createElementsOverlay<TEl extends object>(
         const component = () => active() ? componentRaw() : null
 
         const name = () => component()?.name
-    
+
         const rect = s.createMemo((prev: Rect) => {
             let comp = component()
             if (comp === null) return prev
-            
+
             let rect = eli.getRect(comp.element)
             if (rect === null) return prev
 
             return rect
         }, {x: 0, y: 0, w: 0, h: 0})
-        
+
         const transform  = () => `translate(${Math.round(rect().x)}px, ${Math.round(rect().y)}px)`
         const placeOnTop = () => rect().y > window.innerHeight / 2
 
         const tag = () => {
             let comp = component()
             if (comp === null) return UNKNOWN
-            
+
             return eli.getName(comp.element) ?? UNKNOWN
         }
-    
+
         return (
             <>
                 <style>{styles}</style>
                 <div
                     class="element-overlay"
                     style={{
                         transform: transform(),
-                        width: rect().w + 'px',
-                        height: rect().h + 'px',
+                        width: rect().width + 'px',
+                        height: rect().height + 'px',
                     }}
                 >
                     <div class="border" />

packages/debugger/src/locator/locator.ts

@@ -39,9 +39,9 @@ const LOC_ATTR_REGEX_UNIX =
 
 export const LOC_ATTR_REGEX = isWindows ? LOC_ATTR_REGEX_WIN : LOC_ATTR_REGEX_UNIX
 
-export function getLocationAttr(element: Element): LocationAttr | undefined {
-    const attr = element.getAttribute(LOCATION_ATTRIBUTE_NAME)
-    if (!attr || !LOC_ATTR_REGEX.test(attr)) return
+export function getLocationAttr(element: Element): LocationAttr | null {
+    let attr = element.getAttribute(LOCATION_ATTRIBUTE_NAME)
+    if (!attr || !LOC_ATTR_REGEX.test(attr)) return null
     return attr as LocationAttr
 }
 

packages/debugger/src/main/types.ts

@@ -137,10 +137,10 @@ export type SourceLocation = {
 }
 
 export type Rect = {
-    x: number
-    y: number
-    w: number
-    h: number
+    x:      number
+    y:      number
+    width:  number
+    height: number
 }
 
 /**
@@ -149,10 +149,10 @@ export type Rect = {
  */
 export type ElementInterface<T extends object> = {
     isElement:    (obj: object | T) => obj is T,
+    getElementAt: (e: MouseEvent) => T | null,
     getName:      (el: T) => string | null,
     getChildren:  (el: T) => Iterable<T>,
     getParent:    (el: T) => T | null,
-    getElementAt: (e: MouseEvent) => T | null,
     getLocation:  (el: T) => SourceLocation | null,
     getRect:      (el: T) => Rect | null,
 }
@@ -162,18 +162,14 @@ export type ElementInterface<T extends object> = {
  */
 export const dom_element_interface: ElementInterface<Element> = {
     isElement:    obj => obj instanceof Element,
+    getElementAt: e => e.target as Element | null,
     getName:      el => el.localName,
     getChildren:  el => el.children,
     getParent:    el => el.parentElement,
-    getElementAt: e => e.target as Element | null,
+    getRect:      el => el.getBoundingClientRect(),
     getLocation:  el => {
         let attr = locator.getLocationAttr(el)
-        if (attr == null) return null
-        return locator.parseLocationString(attr) ?? null
-    },
-    getRect:      el => {
-        let rect = el.getBoundingClientRect()
-        return {x: rect.x, y: rect.y, w: rect.width, h: rect.height}
+        return attr && locator.parseLocationString(attr) || null
     },
 }