fix: update cli and fix linting errors

.gitignore

@@ -4,3 +4,6 @@ node_modules
 npm-debug.log
 dist
 docs
+/coverage
+.rete-cli
+.sonar

eslint.config.mjs

@@ -0,0 +1,14 @@
+import tseslint from 'typescript-eslint';
+import configs from 'rete-cli/configs/eslint.mjs';
+import gloals from 'globals'
+
+export default tseslint.config(
+  ...configs,
+  {
+    languageOptions: {
+      globals: {
+        ...gloals.browser
+      }
+    }
+  }
+)

package.json

@@ -26,8 +26,9 @@
     "rete": "^2.0.0"
   },
   "devDependencies": {
+    "globals": "^15.9.0",
     "rete": "^2.0.0",
-    "rete-cli": "^1.0.2",
+    "rete-cli": "~2.0.0",
     "rollup-plugin-sass": "^0.9.2"
   },
   "dependencies": {

src/area.ts

@@ -17,8 +17,8 @@
   reordered: (element: HTMLElement) => Promise<unknown>
 }
 type Guards = {
-  translate: (params: TranslateEventParams) => Promise<unknown | boolean>
-  zoom: (params: ZoomEventParams) => Promise<unknown | boolean>
+  translate: (params: TranslateEventParams) => Promise<unknown>
+  zoom: (params: ZoomEventParams) => Promise<unknown>
 }
 
 export class Area {
@@ -111,12 +111,12 @@
   }
 
   private onTranslate = (x: number, y: number) => {
-    if (this.zoomHandler && this.zoomHandler.isTranslating()) return // lock translation while zoom on multitouch
-    this.translate(x, y)
+    if (this.zoomHandler?.isTranslating()) return // lock translation while zoom on multitouch
+    void this.translate(x, y)
   }
 
   private onZoom = (delta: number, ox: number, oy: number, source?: ZoomSource) => {
-    this.zoom(this.transform.k * (1 + delta), ox, oy, source)
+    void this.zoom(this.transform.k * (1 + delta), ox, oy, source)
 
     this.update()
   }
@@ -132,7 +132,7 @@
   public async translate(x: number, y: number) {
     type T = undefined | { data: TranslateEventParams }
     const position = { x, y }
     const result = await this.guards.translate({ previous: this.transform, position }) as T
 
     if (!result) return false
 
@@ -158,11 +158,11 @@
   public async zoom(zoom: number, ox = 0, oy = 0, source?: ZoomSource) {
     type T = undefined | { data: ZoomEventParams }
     const k = this.transform.k
     const result = await this.guards.zoom({ previous: this.transform, zoom, source }) as T
 
     if (!result) return true
 
-    const d = (k - result.data.zoom) / ((k - zoom) || 1)
+    const d = (k - result.data.zoom) / (k - zoom || 1)
 
     this.transform.k = result.data.zoom || 1
     this.transform.x += ox * d

src/base.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
 import { BaseSchemes, ConnectionId, NodeId, Root, Scope } from 'rete'
 
 import { NodeResizeEventParams, NodeTranslateEventParams } from './node-view'

src/drag.ts

@@ -3,7 +3,7 @@
 
 type Events = {
   start: (e: PointerEvent) => void
-  translate: (x: number, y: number, e: PointerEvent) => void
+  translate: (x: number, y: number, e: PointerEvent) => unknown
   drag: (e: PointerEvent) => void
 }
 
@@ -29,7 +29,7 @@
   protected guards: Guards
 
   constructor(guards?: Guards) {
     this.guards = guards || {
       down: e => !(e.pointerType === 'mouse' && e.button !== 0),
       move: () => true
     }
@@ -69,7 +69,7 @@
     const x = this.startPosition.x + delta.x / zoom
     const y = this.startPosition.y + delta.y / zoom
 
-    this.events.translate(x, y, e)
+    void this.events.translate(x, y, e)
   }
 
   private up = (e: PointerEvent) => {

src/extensions/bounding-box.ts

@@ -11,9 +11,11 @@
  * @param nodes The nodes to get the bounding box of
  * @returns The bounding box
  */
 export function getBoundingBox<Schemes extends BaseSchemes, K>(plugin: BaseAreaPlugin<Schemes, K>, nodes: NodeRef<Schemes>[]) {
   const editor = plugin.parentScope<NodeEditor<Schemes>>(NodeEditor)
-  const list = nodes.map(node => typeof node === 'object' ? node : editor.getNode(node))
+  const list = nodes.map(node => typeof node === 'object'
+    ? node
+    : editor.getNode(node))
   const rects = getNodesRect(list, plugin.nodeViews)
 
   return getBBox(rects)

src/extensions/restrictor.ts

@@ -26,15 +26,21 @@ export type Params = {
  */
 export function restrictor<Schemes extends BaseSchemes, K>(plugin: AreaPlugin<Schemes, K>, params?: Params) {
   const scaling = params?.scaling
-    ? params.scaling === true ? { min: 0.1, max: 1 } : params.scaling
+    ? params.scaling === true
+      ? { min: 0.1, max: 1 }
+      : params.scaling
     : false
   const translation = params?.translation
-    ? params.translation === true ? { left: 0, top: 0, right: 1000, bottom: 1000 } : params.translation
+    ? params.translation === true
+      ? { left: 0, top: 0, right: 1000, bottom: 1000 }
+      : params.translation
     : false
 
   function restrictZoom(zoom: number) {
     if (!scaling) throw new Error('scaling param isnt defined')
-    const { min, max } = typeof scaling === 'function' ? scaling() : scaling
+    const { min, max } = typeof scaling === 'function'
+      ? scaling()
+      : scaling
 
     if (zoom < min) {
       return min
@@ -82,7 +88,7 @@ export function restrictor<Schemes extends BaseSchemes, K>(plugin: AreaPlugin<Sc
     if (translation && context.type === 'zoomed') {
       const position = restrictPosition(plugin.area.transform)
 
-      plugin.area.translate(position.x, position.y)
+      void plugin.area.translate(position.x, position.y)
     }
     if (translation && context.type === 'translate') {
       return {

src/extensions/selectable.ts

@@ -2,7 +2,7 @@
 
 import { BaseArea, BaseAreaPlugin } from '../base'
 
 type Schemes = GetSchemes<BaseSchemes['Node'] & { selected?: boolean }, any>
 
 /**
  * Selector's accumulate function, activated when the ctrl key is pressed
@@ -61,11 +61,11 @@
   }
 
   unselectAll() {
     [...Array.from(this.entities.values())].forEach(item => this.remove(item))
   }
 
   translate(dx: number, dy: number) {
     this.entities.forEach(item => !this.isPicked(item) && item.translate(dx, dy))
   }
 
   pick(entity: Pick<E, 'label' | 'id'>) {
@@ -119,14 +119,14 @@
   function selectNode(node: Schemes['Node']) {
     if (!node.selected) {
       node.selected = true
-      area.update('node', node.id)
+      void area.update('node', node.id)
     }
   }
 
   function unselectNode(node: Schemes['Node']) {
     if (node.selected) {
       node.selected = false
-      area.update('node', node.id)
+      void area.update('node', node.id)
     }
   }
   /**
@@ -147,7 +147,7 @@
         const current = view?.position
 
         if (current) {
-          view.translate(current.x + dx, current.y + dy)
+          void view.translate(current.x + dx, current.y + dy)
         }
       },
       unselect() {

src/extensions/shared/types.ts

@@ -2,7 +2,7 @@ import { BaseSchemes, GetSchemes } from 'rete'
 
 export type NodeRef<Schemes extends BaseSchemes> = Schemes['Node'] | Schemes['Node']['id']
 export type SchemesWithSizes = GetSchemes<
-    BaseSchemes['Node'] & { width?: number, height?: number },
-    BaseSchemes['Connection']
+  BaseSchemes['Node'] & { width?: number, height?: number },
+  BaseSchemes['Connection']
 >
 

src/extensions/show-input-control.ts

@@ -31,10 +31,12 @@ export function showInputControl<S extends Scheme>(area: BaseAreaPlugin<BaseSche
       return connection.target === target && connection.targetInput === targetInput
     }))
 
-    input.showControl = visible ? visible({ hasAnyConnection, input }) : !hasAnyConnection
+    input.showControl = visible
+      ? visible({ hasAnyConnection, input })
+      : !hasAnyConnection
 
     if (input.showControl !== previous) {
-      area.update('node', node.id)
+      void area.update('node', node.id)
     }
   }
 

src/extensions/snap.ts

@@ -21,8 +21,12 @@ export type Params = {
  */
 export function snapGrid<Schemes extends BaseSchemes, K>(base: BaseAreaPlugin<Schemes, K>, params?: Params) {
   const area = base as BaseAreaPlugin<Schemes, BaseArea<Schemes>>
-  const size = typeof params?.size === 'undefined' ? 16 : params.size
-  const dynamic = typeof params?.dynamic === 'undefined' ? true : params.dynamic
+  const size = typeof params?.size === 'undefined'
+    ? 16
+    : params.size
+  const dynamic = typeof params?.dynamic === 'undefined'
+    ? true
+    : params.dynamic
 
   function snap(value: number) {
     return Math.round(value / size) * size
@@ -49,7 +53,7 @@ export function snapGrid<Schemes extends BaseSchemes, K>(base: BaseAreaPlugin<Sc
       if (view) {
         const { x, y } = view.position
 
-        view.translate(snap(x), snap(y))
+        void view.translate(snap(x), snap(y))
       }
     }
     return context

src/extensions/zoom-at.ts

@@ -23,7 +23,9 @@ export type Params = {
 export async function zoomAt<Schemes extends SchemesWithSizes, K>(plugin: AreaPlugin<Schemes, K>, nodes: NodeRef<Schemes>[], params?: Params) {
   const { scale = 0.9 } = params || {}
   const editor = plugin.parentScope<NodeEditor<Schemes>>(NodeEditor)
-  const list = nodes.map(node => typeof node === 'object' ? node : editor.getNode(node))
+  const list = nodes.map(node => typeof node === 'object'
+    ? node
+    : editor.getNode(node))
   const rects = getNodesRect(list, plugin.nodeViews)
   const boundingBox = getBoundingBox(rects)
   const [w, h] = [plugin.container.clientWidth, plugin.container.clientHeight]

src/index.ts

@@ -81,10 +81,10 @@ export class AreaPlugin<Schemes extends BaseSchemes, ExtraSignals = never> exten
       container,
       {
         zoomed: params => this.emit({ type: 'zoomed', data: params }),
-        pointerDown: (position, event) => this.emit({ type: 'pointerdown', data: { position, event } }),
-        pointerMove: (position, event) => this.emit({ type: 'pointermove', data: { position, event } }),
-        pointerUp: (position, event) => this.emit({ type: 'pointerup', data: { position, event } }),
-        resize: event => this.emit({ type: 'resized', data: { event } }),
+        pointerDown: (position, event) => void this.emit({ type: 'pointerdown', data: { position, event } }),
+        pointerMove: (position, event) => void this.emit({ type: 'pointermove', data: { position, event } }),
+        pointerUp: (position, event) => void this.emit({ type: 'pointerup', data: { position, event } }),
+        resize: event => void this.emit({ type: 'resized', data: { event } }),
         translated: params => this.emit({ type: 'translated', data: params }),
         reordered: element => this.emit({ type: 'reordered', data: { element } })
       },
@@ -96,18 +96,18 @@ export class AreaPlugin<Schemes extends BaseSchemes, ExtraSignals = never> exten
   }
 
   private onContextMenu = (event: MouseEvent) => {
-    this.emit({ type: 'contextmenu', data: { event, context: 'root' } })
+    void this.emit({ type: 'contextmenu', data: { event, context: 'root' } })
   }
 
   public addNodeView(node: Schemes['Node']) {
     const { id } = node
     const view = new NodeView(
       () => this.area.transform.k,
       {
-        picked: () => this.emit({ type: 'nodepicked', data: { id } }),
+        picked: () => void this.emit({ type: 'nodepicked', data: { id } }),
         translated: data => this.emit({ type: 'nodetranslated', data: { id, ...data } }),
-        dragged: () => this.emit({ type: 'nodedragged', data: node }),
-        contextmenu: event => this.emit({ type: 'contextmenu', data: { event, context: node } }),
+        dragged: () => void this.emit({ type: 'nodedragged', data: node }),
+        contextmenu: event => void this.emit({ type: 'contextmenu', data: { event, context: node } }),
         resized: ({ size }) => this.emit({ type: 'noderesized', data: { id: node.id, size } })
       },
       {
@@ -119,7 +119,7 @@ export class AreaPlugin<Schemes extends BaseSchemes, ExtraSignals = never> exten
     this.nodeViews.set(id, view)
     this.area.content.add(view.element)
 
-    this.emit({
+    void this.emit({
       type: 'render',
       data: { element: view.element, type: 'node', payload: node }
     })
@@ -131,21 +131,21 @@ export class AreaPlugin<Schemes extends BaseSchemes, ExtraSignals = never> exten
     const view = this.nodeViews.get(id)
 
     if (view) {
-      this.emit({ type: 'unmount', data: { element: view.element } })
+      void this.emit({ type: 'unmount', data: { element: view.element } })
       this.nodeViews.delete(id)
       this.area.content.remove(view.element)
     }
   }
 
   public addConnectionView(connection: Schemes['Connection']) {
     const view = new ConnectionView({
-      contextmenu: event => this.emit({ type: 'contextmenu', data: { event, context: connection } })
+      contextmenu: event => void this.emit({ type: 'contextmenu', data: { event, context: connection } })
     })
 
     this.connectionViews.set(connection.id, view)
     this.area.content.add(view.element)
 
-    this.emit({
+    void this.emit({
       type: 'render',
       data: { element: view.element, type: 'connection', payload: connection }
     })
@@ -157,7 +157,7 @@ export class AreaPlugin<Schemes extends BaseSchemes, ExtraSignals = never> exten
     const view = this.connectionViews.get(id)
 
     if (view) {
-      this.emit({ type: 'unmount', data: { element: view.element } })
+      void this.emit({ type: 'unmount', data: { element: view.element } })
       this.connectionViews.delete(id)
       this.area.content.remove(view.element)
     }

src/node-view.ts

@@ -6,14 +6,14 @@ export type NodeResizeEventParams = { size: Size }
 
 type Events = {
   picked: () => void
-  translated: (params: NodeTranslateEventParams) => Promise<unknown | boolean>
+  translated: (params: NodeTranslateEventParams) => Promise<unknown>
   dragged: () => void
   contextmenu: (event: MouseEvent) => void
-  resized: (params: NodeResizeEventParams) => Promise<unknown | boolean>
+  resized: (params: NodeResizeEventParams) => Promise<unknown>
 }
 type Guards = {
-  resize: (params: NodeResizeEventParams) => Promise<unknown | boolean>
-  translate: (params: NodeTranslateEventParams) => Promise<unknown | boolean>
+  resize: (params: NodeResizeEventParams) => Promise<unknown>
+  translate: (params: NodeTranslateEventParams) => Promise<unknown>
 }
 
 export class NodeView {
@@ -25,7 +25,7 @@ export class NodeView {
     this.element = document.createElement('div')
     this.element.style.position = 'absolute'
     this.position = { x: 0, y: 0 }
-    this.translate(0, 0)
+    void this.translate(0, 0)
 
     this.element.addEventListener('contextmenu', event => this.events.contextmenu(event))
 
@@ -43,7 +43,6 @@ export class NodeView {
       }
     )
   }
-
   public translate = async (x: number, y: number) => {
     type Params = undefined | { data: NodeTranslateEventParams }
     const previous = { ...this.position }
@@ -58,11 +57,10 @@ export class NodeView {
 
     return true
   }
-
   public resize = async (width: number, height: number) => {
     const size = { width, height }
 
-    if (!(await this.guards.resize({ size }))) return false
+    if (!await this.guards.resize({ size })) return false
 
     const el = this.element.querySelector('*:not(span):not([fragment])')
 

src/utils.ts

@@ -2,9 +2,9 @@ import { Position, Size } from './types'
 
 type PointerHandler = (event: PointerEvent) => void
 type PointerListenerHandlers = {
-    down: PointerHandler
-    move: PointerHandler
-    up: PointerHandler
+  down: PointerHandler
+  move: PointerHandler
+  up: PointerHandler
 }
 
 export type PointerListener = { destroy: () => void }
@@ -14,16 +14,16 @@ export type PointerListener = { destroy: () => void }
  * where last two not active before pointerdown triggered for performance reasons
  */
 export function usePointerListener(element: HTMLElement, handlers: PointerListenerHandlers): PointerListener {
-  const move: PointerHandler = (event) => {
+  const move: PointerHandler = event => {
     handlers.move(event)
   }
-  const up: PointerHandler = (event) => {
+  const up: PointerHandler = event => {
     window.removeEventListener('pointermove', move)
     window.removeEventListener('pointerup', up)
     window.removeEventListener('pointercancel', up)
     handlers.up(event)
   }
-  const down: PointerHandler = (event) => {
+  const down: PointerHandler = event => {
     window.addEventListener('pointermove', move)
     window.addEventListener('pointerup', up)
     window.addEventListener('pointercancel', up)
@@ -45,8 +45,12 @@ export function usePointerListener(element: HTMLElement, handlers: PointerListen
 /**
  * Bounding box
  */
-const min = (arr: number[]) => arr.length === 0 ? 0 : Math.min(...arr)
-const max = (arr: number[]) => arr.length === 0 ? 0 : Math.max(...arr)
+const min = (arr: number[]) => arr.length === 0
+  ? 0
+  : Math.min(...arr)
+const max = (arr: number[]) => arr.length === 0
+  ? 0
+  : Math.max(...arr)
 
 export function getBoundingBox(rects: ({ position: Position } & Size)[]) {
   const left = min(rects.map(rect => rect.position.x))

src/zoom.ts

@@ -37,7 +37,9 @@ export class Zoom {
 
     const { left, top } = this.element.getBoundingClientRect()
     const isNegative = e.deltaY < 0
-    const delta = isNegative ? this.intensity : - this.intensity
+    const delta = isNegative
+      ? this.intensity
+      : -this.intensity
     const ox = (left - e.clientX) * delta
     const oy = (top - e.clientY) * delta
 
@@ -63,7 +65,9 @@ export class Zoom {
   }
 
   protected move = (e: PointerEvent) => {
-    this.pointers = this.pointers.map(p => p.pointerId === e.pointerId ? e : p)
+    this.pointers = this.pointers.map(p => p.pointerId === e.pointerId
+      ? e
+      : p)
     if (!this.isTranslating()) return
 
     const { left, top } = this.element.getBoundingClientRect()

tsconfig.json

@@ -1,6 +1,6 @@
 {
+    "extends": "rete-cli/configs/tsconfig.json",
     "compilerOptions": {
-        "strict": true,
         "lib": [
             "DOM"
         ]