Merge pull request #24 from retejs/new-linter

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.1",
     "rollup-plugin-sass": "^0.9.2"
   },
   "dependencies": {

src/area.ts

@@ -17,8 +17,8 @@ type Events = {
   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 @@ export class Area {
   }
 
   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()
   }
@@ -162,7 +162,7 @@ export class Area {
 
     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 @@ import { PointerListener, usePointerListener } from './utils'
 
 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
 }
 
@@ -69,7 +69,7 @@ export class Drag {
     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

@@ -13,7 +13,9 @@ import { getNodesRect } from './shared/utils'
  */
 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

@@ -119,14 +119,14 @@ export function selectableNodes<T>(base: BaseAreaPlugin<Schemes, T>, core: Selec
   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 @@ export function selectableNodes<T>(base: BaseAreaPlugin<Schemes, T>, core: Selec
         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])')