glass-easel-devtools-agent 0.13.0 → 0.17.2

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "glass-easel-devtools-agent",
-  "version": "0.13.0",
+  "version": "0.17.2",
   "main": "dist/index.js",
   "peerDependencies": {
-    "glass-easel": ">=0.13.0"
+    "glass-easel": ">=0.17.2"
   },
   "devDependencies": {
     "@csstools/css-tokenizer": "^2.4.1",
     "@csstools/selector-specificity": "^3.1.1",
     "@types/node": "^20.16.5",
     "devtools-protocol": "^0.0.1319565",
-    "glass-easel": ">=0.13.0",
-    "glass-easel-template-compiler": ">=0.13.0",
+    "glass-easel": ">=0.17.2",
+    "glass-easel-template-compiler": ">=0.17.2",
     "postcss-selector-parser": "^6.1.2"
   },
   "scripts": {

package/src/backend.ts

@@ -1,5 +1,3 @@
-/* eslint-disable arrow-body-style */
-
 import * as glassEasel from 'glass-easel'
 import parser from 'postcss-selector-parser'
 import { selectorSpecificity, compare as selectorCompare } from '@csstools/selector-specificity'
@@ -214,7 +212,7 @@ export const getMatchedRules = (
           if (peek) {
             i += 1
             const [prefix, name] = peek.split('--', 2)
-            if (name !== undefined) {
+            if (prefix !== peek) {
               rule.styleScope = prefix
               tokens[i][1] = name
             }
@@ -270,7 +268,7 @@ export const getMatchedRules = (
             ret.inline = edit.getProps()
             resolve(ret)
           })
-        } catch (err) {
+        } catch (_err) {
           // this may throw when reading cross-origin stylesheets
           resolve({
             inline: [],
@@ -322,7 +320,9 @@ export class StyleRuleEdit {
   updateWithProps(props: glassEasel.CSSProperty[], inlineStyle?: string) {
     const oldProps = this.props
     this.props =
-      inlineStyle === undefined ? filterCssProperties(props) : parseNameValueStr(inlineStyle) ?? []
+      inlineStyle === undefined
+        ? filterCssProperties(props)
+        : (parseNameValueStr(inlineStyle) ?? [])
     let i = 0
     oldProps.forEach((prop) => {
       if (prop.disabled) {
@@ -387,7 +387,10 @@ export class StyleRuleEdit {
 
 class StyleEditContext {
   inlineStyleMap = new WeakMap<glassEasel.GeneralBackendElement, StyleRuleEdit>()
-  ruleMap = new WeakMap<glassEasel.GeneralBackendContext, Record<string, StyleRuleEdit>>()
+  ruleMap = new WeakMap<
+    glassEasel.GeneralBackendContext,
+    Record<string, StyleRuleEdit | undefined>
+  >()
 
   createOrGetInline(
     elem: glassEasel.GeneralBackendElement,
@@ -409,7 +412,7 @@ class StyleEditContext {
     rule: glassEasel.CSSRule,
     inlineStyle?: string,
   ): StyleRuleEdit {
-    const key = `${rule.sheetIndex}/${rule.ruleIndex}`
+    const key = `${rule.sheetIndex.toString()}/${rule.ruleIndex.toString()}`
     const map = this.ruleMap.get(ctx)
     if (!map) {
       const map = Object.create(null) as Record<string, StyleRuleEdit>
@@ -438,8 +441,9 @@ class StyleEditContext {
       ;(elem as glassEasel.domlikeBackend.Element).setAttribute('style', style)
     } else if (ctx.mode === glassEasel.BackendMode.Composed) {
       ;(elem as glassEasel.composedBackend.Element).setStyle(style)
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     } else if (ctx.mode === glassEasel.BackendMode.Shadow) {
-      ;(elem as glassEasel.backend.Element).setStyle(style)
+      ;(elem as glassEasel.backend.Element).setStyle(style, 0)
     }
   }
 
@@ -449,7 +453,7 @@ class StyleEditContext {
     ruleIndex: number,
     f: (edit: StyleRuleEdit) => void,
   ): Promise<void> {
-    const key = `${sheetIndex}/${ruleIndex}`
+    const key = `${sheetIndex.toString()}/${ruleIndex.toString()}`
     const edit = this.ruleMap.get(ctx)?.[key]
     if (!edit) return Promise.resolve()
     f(edit)
@@ -518,9 +522,9 @@ export class ClassListEdit {
 }
 
 export class ClassEditContext {
-  map = new WeakMap<glassEasel.Element, Record<string, ClassListEdit>>()
+  map = new WeakMap<glassEasel.Element, Record<string, ClassListEdit | undefined>>()
 
-  createOrGet(external: string, elem: glassEasel.Element): ClassListEdit {
+  createOrGet(external: string | undefined, elem: glassEasel.Element): ClassListEdit {
     if (!this.map.get(elem)) {
       const group = Object.create(null) as Record<string, ClassListEdit>
       this.map.set(elem, group)

package/src/index.ts

@@ -18,14 +18,17 @@ export interface MessageChannel {
 
 export class Connection {
   private messageChannel: MessageChannel
-  private requestHandlers = Object.create(null) as Record<string, (detail: any) => Promise<any>>
+  private requestHandlers = Object.create(null) as Record<
+    string,
+    ((detail: any) => Promise<any>) | undefined
+  >
   readonly overlayManager: OverlayManager
 
   constructor(messageChannel: MessageChannel) {
     this.messageChannel = messageChannel
     messageChannel.recv((data) => {
       if (data.kind === 'request') {
-        debug(`recv request ${data.id}`, data.name, data.detail)
+        debug(`recv request ${data.id.toString()}`, data.name, data.detail)
         this.recvRequest(data.id, data.name, data.detail)
       }
     })
@@ -46,12 +49,12 @@ export class Connection {
     handler
       .call(this, detail)
       .then((ret: unknown) => {
-        debug(`send response ${id}`, ret)
+        debug(`send response ${id.toString()}`, ret)
         const data: AgentSendMessage = { kind: 'response', id, detail: ret }
         this.messageChannel.send(data)
         return undefined
       })
-      .catch((err) => {
+      .catch((err: unknown) => {
         const data: AgentSendMessage = {
           kind: 'error',
           id,
@@ -94,13 +97,11 @@ class InspectorDevToolsImpl implements glassEasel.InspectorDevTools {
     })
   }
 
-  // eslint-disable-next-line class-methods-use-this
   addMountPoint(root: glassEasel.Element, env: glassEasel.MountPointEnv): void {
     debug('attach mount point', root)
     this.mountPoints.attach(root, env)
   }
 
-  // eslint-disable-next-line class-methods-use-this
   removeMountPoint(root: glassEasel.GeneralComponent): void {
     debug('detach mount point', root)
     this.mountPoints.detach(root)

package/src/mount_point.ts

@@ -63,9 +63,12 @@ export class MountPointsManager {
   private conn: Connection
   private nodeIdMap = new WeakMap<glassEasel.Node, NodeId>()
   // active nodes are the nodes that being display and watched
-  private activeNodes = Object.create(null) as Record<NodeId, NodeMeta>
+  private activeNodes = Object.create(null) as Record<NodeId, NodeMeta | undefined>
   // backend nodes are the nodes that has being transmitted to the client in arguments but not display
-  private activeBackendNodes = Object.create(null) as Record<NodeId, WeakRef<glassEasel.Node>>
+  private activeBackendNodes = Object.create(null) as Record<
+    NodeId,
+    WeakRef<glassEasel.Node> | undefined
+  >
   readonly documentNodeId = 1
   private nodeIdInc = 2
   private mountPoints: { nodeMeta: NodeMeta; env: glassEasel.MountPointEnv }[] = []
@@ -204,13 +207,16 @@ export class MountPointsManager {
         | null
         | undefined
       if (typeof maybeEventTarget === 'object' && maybeEventTarget !== null) {
-        const processListeners = (capture: boolean, listeners?: { [name: string]: EventPoint }) => {
+        const processListeners = (
+          capture: boolean,
+          listeners: { [name: string]: EventPoint } | undefined | null,
+        ) => {
           if (typeof listeners === 'object' && listeners !== null) {
             Object.entries(listeners).forEach(([name, value]) => {
-              const count = value?.funcArr?._$arr?.length ?? 0
+              const count = value.funcArr?._$arr?.length ?? 0
               if (count > 0) {
-                const hasCatch = (value?.finalCount ?? 0) > 0
-                const hasMutBind = (value?.finalCount ?? 0) > 0
+                const hasCatch = (value.finalCount ?? 0) > 0
+                const hasMutBind = (value.mutCount ?? 0) > 0
                 eventBindings.push({ name, capture, count, hasCatch, hasMutBind })
               }
             })
@@ -240,20 +246,18 @@ export class MountPointsManager {
           properties!.push({ name, value: toGlassEaselVar(comp.data[name]) })
         })
         const ec = comp.getExternalClasses()
-        if (ec) {
-          externalClasses = Object.entries(ec).map(([name, value]) => ({
-            name,
-            value: backendUtils.classEditContext
-              .createOrGet(name, elem)
-              .update(value ?? [])
-              .getClasses(),
-          }))
-        }
+        externalClasses = Object.entries(ec).map(([name, value]) => ({
+          name,
+          value: backendUtils.classEditContext
+            .createOrGet(name, elem)
+            .update(value ?? [])
+            .getClasses(),
+        }))
       }
 
       // collect dataset
       const dataset: { name: string; value: GlassEaselVar }[] = []
-      Object.entries(elem.dataset ?? {}).forEach(([name, value]) => {
+      Object.entries(elem.dataset).forEach(([name, value]) => {
         dataset.push({ name, value: toGlassEaselVar(value) })
       })
       const marks: { name: string; value: GlassEaselVar }[] = []
@@ -445,8 +449,8 @@ export class MountPointsManager {
 
     this.conn.setRequestHandler('CSS.getComputedStyleForNode', async ({ nodeId }) => {
       const { node } = this.queryActiveNode(nodeId)
-      const ctx = node?.getBackendContext()
-      const elem = node?.getBackendElement()
+      const ctx = node.getBackendContext()
+      const elem = node.getBackendElement()
       if (!ctx || !elem) {
         throw new Error('no such backend node found')
       }
@@ -460,9 +464,8 @@ export class MountPointsManager {
       if (!elem) {
         throw new Error('not an element')
       }
-      const { inline, inlineText, rules, crossOriginFailing } = await backendUtils.getMatchedRules(
-        elem,
-      )
+      const { inline, inlineText, rules, crossOriginFailing } =
+        await backendUtils.getMatchedRules(elem)
       const inlineStyle = { cssProperties: inline, cssText: inlineText }
       const matchedCSSRules = rules.map((rule) => ({
         rule: {
@@ -482,8 +485,8 @@ export class MountPointsManager {
       'CSS.replaceGlassEaselStyleSheetProperty',
       async ({ nodeId, styleSheetId, ruleIndex, propertyIndex, styleText }) => {
         const { node } = this.queryActiveNode(nodeId)
-        const ctx = node?.getBackendContext()
-        const elem = node?.getBackendElement()
+        const ctx = node.getBackendContext()
+        const elem = node.getBackendElement()
         if (!ctx || !elem) {
           throw new Error('no such backend node found')
         }
@@ -503,8 +506,8 @@ export class MountPointsManager {
       'CSS.addGlassEaselStyleSheetProperty',
       async ({ nodeId, styleSheetId, ruleIndex, styleText }) => {
         const { node } = this.queryActiveNode(nodeId)
-        const ctx = node?.getBackendContext()
-        const elem = node?.getBackendElement()
+        const ctx = node.getBackendContext()
+        const elem = node.getBackendElement()
         if (!ctx || !elem) {
           throw new Error('no such backend node found')
         }
@@ -524,8 +527,8 @@ export class MountPointsManager {
       'CSS.setGlassEaselStyleSheetPropertyDisabled',
       async ({ nodeId, styleSheetId, ruleIndex, propertyIndex, disabled }) => {
         const { node } = this.queryActiveNode(nodeId)
-        const ctx = node?.getBackendContext()
-        const elem = node?.getBackendElement()
+        const ctx = node.getBackendContext()
+        const elem = node.getBackendElement()
         if (!ctx || !elem) {
           throw new Error('no such backend node found')
         }
@@ -597,7 +600,8 @@ export class MountPointsManager {
 
   attach(root: glassEasel.Element, env: glassEasel.MountPointEnv) {
     const nodeMeta = this.activateNode(root)
-    const previousNode = this.mountPoints[this.mountPoints.length - 1]
+    const previousNode =
+      this.mountPoints.length > 0 ? this.mountPoints[this.mountPoints.length - 1] : null
     const previousNodeId = previousNode ? previousNode.nodeMeta.nodeId : undefined
     this.mountPoints.push({ nodeMeta, env })
     this.conn.sendEvent('DOM.childNodeInserted', {
@@ -650,11 +654,10 @@ export class MountPointsManager {
     return ret
   }
 
-  // eslint-disable-next-line class-methods-use-this
   private useInConsole(v: unknown): string {
     let i = 0
     while (i <= 0xffffffff) {
-      const varName = `temp${i}`
+      const varName = `temp${i.toString()}`
       if (!Object.prototype.hasOwnProperty.call(globalThis, varName)) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         ;(globalThis as any)[varName] = v
@@ -693,17 +696,16 @@ export class MountPointsManager {
 
   private queryActiveNode(nodeId: NodeId): NodeMeta {
     const nodeMeta = this.activeNodes[nodeId]
-    if (!nodeMeta) throw new Error(`no active node found for node id ${nodeId}`)
+    if (!nodeMeta) throw new Error(`no active node found for node id ${nodeId.toString()}`)
     return nodeMeta
   }
 
   private getMaybeBackendNode(backendNodeId: NodeId): glassEasel.Node | null {
     const nodeMeta = this.activeNodes[backendNodeId]
-    if (nodeMeta) return nodeMeta?.node
+    if (nodeMeta) return nodeMeta.node
     return this.activeBackendNodes[backendNodeId]?.deref() ?? null
   }
 
-  // eslint-disable-next-line class-methods-use-this
   private startWatch(node: glassEasel.Node) {
     const observer = glassEasel.MutationObserver.create((ev) => {
       const node = ev.target
@@ -750,11 +752,9 @@ export class MountPointsManager {
             v = marks?.[name.slice(5)]
           } else if (nameType === 'external-class') {
             const external = ev.attributeName ?? ''
-            const classes = elem.asGeneralComponent()?.getExternalClasses()?.[external]?.join(' ')
-            if (!backendUtils.classEditContext.createOrGet(external, elem)) {
-              name = external
-              v = classes ?? ''
-            }
+            const classes = elem.asGeneralComponent()?.getExternalClasses()[external]?.join(' ')
+            name = external
+            v = classes ?? ''
           } else if (ev.attributeName === 'slot') {
             name = ev.attributeName
             v = elem.slot
@@ -805,7 +805,7 @@ export class MountPointsManager {
           if (!parent.isInheritSlots() && composedParent && composedParent !== parent) {
             const composedParentId = this.getActiveNodeId(composedParent)
             if (composedParentId) {
-              let prev: glassEasel.Node | null = null
+              let prev = null as glassEasel.Node | null
               const found = composedParent.forEachComposedChild((c) => {
                 if (c === child) return false
                 prev = c
@@ -854,7 +854,6 @@ export class MountPointsManager {
     return observer
   }
 
-  // eslint-disable-next-line class-methods-use-this
   private endWatch(observer: glassEasel.MutationObserver) {
     observer.disconnect()
   }
@@ -866,6 +865,7 @@ export class MountPointsManager {
    */
   private activateNode(node: glassEasel.Node): NodeMeta {
     const nodeId = this.getNodeId(node)
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete this.activeBackendNodes[nodeId]
     if (this.activeNodes[nodeId]) {
       const nodeMeta = this.activeNodes[nodeId]
@@ -896,12 +896,13 @@ export class MountPointsManager {
     }
     const { observer } = this.activeNodes[nodeId]
     this.endWatch(observer)
-    const shadowRoot = node.asGeneralComponent()?.getShadowRoot?.()
+    const shadowRoot = node.asGeneralComponent()?.getShadowRoot()
     if (shadowRoot) this.deactivateNodeTree(shadowRoot)
-    const childNodes: glassEasel.Node[] | undefined = (node as glassEasel.Element).childNodes
+    const childNodes: glassEasel.Node[] | undefined = node.asElement()?.childNodes
     if (childNodes) {
       childNodes.forEach((node) => this.deactivateNodeTree(node))
     }
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete this.activeNodes[nodeId]
     return nodeId
   }
@@ -921,7 +922,6 @@ export class MountPointsManager {
     return this.activateNode(node)
   }
 
-  // eslint-disable-next-line class-methods-use-this
   private collectNodeBasicInfomation(
     backendNodeId: NodeId,
     node: glassEasel.Node,
@@ -991,7 +991,7 @@ export class MountPointsManager {
             if (name === ':style') attributes.push('style', elem.style)
             if (name === ':name') attributes.push('style', Reflect.get(elem, '_$slotName'))
           } else if (name.startsWith('data:')) {
-            const value = elem.dataset?.[name.slice(5)]
+            const value = elem.dataset[name.slice(5)]
             attributes.push(name, glassEaselVarToString(toGlassEaselVar(value)))
           } else if (name.startsWith('mark:')) {
             const marks = Reflect.get(elem, '_$marks') as { [key: string]: unknown } | undefined
@@ -1036,7 +1036,7 @@ export class MountPointsManager {
             attributes.push(name, glassEaselVarToString(toGlassEaselVar(value)))
           })
         }
-        Object.entries(elem.dataset ?? {}).forEach(([key, value]) => {
+        Object.entries(elem.dataset).forEach(([key, value]) => {
           const name = `data:${key}`
           attributes.push(name, glassEaselVarToString(toGlassEaselVar(value)))
         })
@@ -1056,7 +1056,7 @@ export class MountPointsManager {
       const nodeMeta = this.activateNode(sr)
       const n = this.collectNodeDetails(nodeMeta, depth - 1, false)
       n.nodeName = 'shadow-root'
-      if (n) shadowRoots = [n]
+      shadowRoots = [n]
     }
 
     // collect children
@@ -1068,7 +1068,7 @@ export class MountPointsManager {
       elem.childNodes.forEach((child) => {
         const nodeMeta = this.activateNode(child)
         const n = this.collectNodeDetails(nodeMeta, depth - 1, false)
-        if (n) children!.push(n)
+        children!.push(n)
       })
     }
 
@@ -1081,7 +1081,7 @@ export class MountPointsManager {
         if (child.parentNode?.isInheritSlots()) return
         const nodeId = this.addBackendNode(child)
         const n = this.collectNodeBasicInfomation(nodeId, child)
-        if (n) distributedNodes!.push(n)
+        distributedNodes!.push(n)
       })
     }
 

package/src/overlay.ts

@@ -1,6 +1,6 @@
 import * as glassEasel from 'glass-easel'
 
-// eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-call
 const wxml = require('./overlay.wxml') as Record<string, unknown>
 
 export const enum OverlayState {
@@ -71,7 +71,6 @@ export const overlayCompDef = space
         return
       }
       setData({ selectMoveDetecting: true })
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       elementFromPointInContext(ctx, x, y)
         .then(async (elem) => {
           setData({ selectMoveDetecting: false })
@@ -135,11 +134,10 @@ const elementFromPointInContext = (
   y: number,
 ) =>
   new Promise<glassEasel.Element | null>((resolve) => {
-    if (!context?.elementFromPoint) {
+    if (!context.elementFromPoint) {
       resolve(null)
       return
     }
-    // eslint-disable-next-line
     context.elementFromPoint(x, y, (elem) => {
       resolve(elem)
     })
@@ -216,10 +214,10 @@ export class OverlayManager {
       parentElement = ctx.getRootNode()
       placeholder = ctx.document.createElement('glass-easel-devtools-agent')
       parentElement.appendChild(placeholder)
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     } else if (ctx.mode === glassEasel.BackendMode.Shadow) {
       const sr = ctx.getRootNode()
       parentElement = sr
-      if (!sr) throw new Error('the host element should be inside of a shadow tree')
       placeholder = sr.createElement('glass-easel-devtools-agent', 'glass-easel-devtools-agent')
       sr.appendChild(placeholder)
     } else {

package/src/protocol/dom.ts

@@ -63,7 +63,6 @@ export const glassEaselNodeTypeToCDP = (t: GlassEaselNodeType) => {
   if (t === GlassEaselNodeType.Component) return CDPNodeType.ELEMENT_NODE
   if (t === GlassEaselNodeType.VirtualNode) return CDPNodeType.ELEMENT_NODE
   if (t === GlassEaselNodeType.InheritVirtualNode) return CDPNodeType.ELEMENT_NODE
-  if (t === GlassEaselNodeType.Unknown) return CDPNodeType.DOCUMENT_NODE
   return CDPNodeType.DOCUMENT_NODE
 }
 

package/src/protocol/var.ts

@@ -32,6 +32,5 @@ export const glassEaselVarToString = (v: GlassEaselVar): string => {
   if (v.type === 'symbol') return v.value
   if (v.type === 'function') return '() => {...}'
   if (v.type === 'object') return '{...}'
-  if (v.type === 'array') return '[...]'
   return '[unknown]'
 }

package/.eslintignore

@@ -1,2 +0,0 @@
-/node_modules
-/dist