fix: resolve some strictNullChecks issues

# Conflicts:
#	packages/@interactjs/arrange/arrange.spec.ts
#	packages/@interactjs/modifiers/spring/spring.spec.ts
#	packages/@interactjs/modifiers/transform/transform.spec.ts
#	packages/@interactjs/multi-target/plugin.ts
#	packages/@interactjs/snappers/edgeTarget.spec.ts

package.json

@@ -41,10 +41,10 @@
     "@typescript-eslint/parser": "^5.27.1",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/reactivity": "^3.2.37",
-    "@vue/runtime-dom": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/reactivity": "^3.3.4",
+    "@vue/runtime-dom": "^3.3.4",
+    "@vue/test-utils": "^2.4.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babelify": "^10.0.0",
@@ -97,7 +97,7 @@
     "typescript": "^4.7.3",
     "vijest": "^0.0.1",
     "vite": "^4.1.4",
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
     "yargs": "^17.5.1"
   },
   "engines": {

packages/@interactjs/actions/drop/drop.spec.ts

@@ -75,7 +75,7 @@ describe('actions/drop', () => {
     })
 
     const onActionsDropStart = jest.fn((arg: { interaction: Interaction }) => {
-      const activeDrops = [...arg.interaction.dropState.activeDrops]
+      const activeDrops = [...arg.interaction.dropState!.activeDrops]
       // actions/drop:start is fired with all activeDrops
       expect(activeDrops.map((activeDrop) => activeDrop.element)).toEqual([dropEl3])
     })
@@ -92,7 +92,7 @@ describe('actions/drop', () => {
     expect(onActionsDropStart).toHaveBeenCalledTimes(1)
 
     // rejected dropzones are removed from activeDrops,
-    expect(interaction.dropState.activeDrops.map((d) => d.element)).toEqual([dropEl3])
+    expect(interaction.dropState!.activeDrops.map((d) => d.element)).toEqual([dropEl3])
 
     // rejected dropzones are deactivated,
     expect(onDeactivate).toHaveBeenNthCalledWith(1, expect.objectContaining({ target: dropEl1 }))

packages/@interactjs/actions/drop/plugin.ts

@@ -243,7 +243,7 @@ function install (scope: Scope) {
 
       return interact
     }
-    return scope.dynamicDrop
+    return scope.dynamicDrop!
   }
 
   extend(actions.phaselessTypes, {
@@ -331,30 +331,28 @@ function getActiveDrops (scope: Scope, dragElement: Element) {
 }
 
 function getDrop (
-  { dropState, interactable: draggable, element: dragElement }: Partial<Interaction>,
+  { dropState, interactable: draggable, element: dragElement }: Interaction,
   dragEvent,
   pointerEvent,
 ) {
-  const validDrops = []
+  const validDrops: Element[] = []
 
   // collect all dropzones and their elements which qualify for a drop
-  for (const { dropzone, element: dropzoneElement, rect } of dropState.activeDrops) {
-    validDrops.push(
-      dropzone.dropCheck(dragEvent, pointerEvent, draggable, dragElement, dropzoneElement, rect)
-        ? dropzoneElement
-        : null,
-    )
+  for (const { dropzone, element: dropzoneElement, rect } of dropState!.activeDrops) {
+    if (dropzone.dropCheck(dragEvent, pointerEvent, draggable!, dragElement!, dropzoneElement, rect)) {
+      validDrops.push(dropzoneElement)
+    }
   }
 
   // get the most appropriate dropzone based on DOM depth and order
   const dropIndex = domUtils.indexOfDeepestElement(validDrops)
 
-  return dropState.activeDrops[dropIndex] || null
+  return dropState!.activeDrops[dropIndex] || null
 }
 
 function getDropEvents (interaction: Interaction, _pointerEvent, dragEvent: DragEvent) {
-  const { dropState } = interaction
-  const dropEvents = {
+  const dropState = interaction.dropState!
+  const dropEvents: Record<string, DropEvent | null> = {
     enter: null,
     leave: null,
     activate: null,
@@ -366,14 +364,14 @@ function getDropEvents (interaction: Interaction, _pointerEvent, dragEvent: Drag
   if (dragEvent.type === 'dragstart') {
     dropEvents.activate = new DropEvent(dropState, dragEvent, 'dropactivate')
 
-    dropEvents.activate.target = null
-    dropEvents.activate.dropzone = null
+    dropEvents.activate.target = null as never
+    dropEvents.activate.dropzone = null as never
   }
   if (dragEvent.type === 'dragend') {
     dropEvents.deactivate = new DropEvent(dropState, dragEvent, 'dropdeactivate')
 
-    dropEvents.deactivate.target = null
-    dropEvents.deactivate.dropzone = null
+    dropEvents.deactivate.target = null as never
+    dropEvents.deactivate.dropzone = null as never
   }
 
   if (dropState.rejected) {
@@ -406,7 +404,6 @@ function getDropEvents (interaction: Interaction, _pointerEvent, dragEvent: Drag
   if (dragEvent.type === 'dragmove' && dropState.cur.dropzone) {
     dropEvents.move = new DropEvent(dropState, dragEvent, 'dropmove')
 
-    dropEvents.move.dragmove = dragEvent
     dragEvent.dropzone = dropState.cur.dropzone
   }
 
@@ -418,7 +415,7 @@ Record<'leave' | 'enter' | 'move' | 'drop' | 'activate' | 'deactivate', DropEven
 >
 
 function fireDropEvents (interaction: Interaction, events: FiredDropEvents) {
-  const { dropState } = interaction
+  const dropState = interaction.dropState!
   const { activeDrops, cur, prev } = dropState
 
   if (events.leave) {
@@ -447,10 +444,10 @@ function onEventCreated ({ interaction, iEvent, event }: DoPhaseArg<'drag', Even
     return
   }
 
-  const { dropState } = interaction
+  const dropState = interaction.dropState!
 
   if (scope.dynamicDrop) {
-    dropState.activeDrops = getActiveDrops(scope, interaction.element)
+    dropState.activeDrops = getActiveDrops(scope, interaction.element!)
   }
 
   const dragEvent = iEvent
@@ -490,7 +487,9 @@ function dropzoneMethod (interactable: Interactable, options?: DropzoneOptions |
         return acc
       }, {})
 
-      interactable.off(interactable.options.drop.listeners)
+      const prevListeners = interactable.options.drop.listeners
+      prevListeners && interactable.off(prevListeners)
+
       interactable.on(corrected)
       interactable.options.drop.listeners = corrected
     }
@@ -646,12 +645,12 @@ const drop: Plugin = {
         return
       }
 
-      const { dropState } = interaction
+      const dropState = interaction.dropState!
 
       // reset active dropzones
-      dropState.activeDrops = null
-      dropState.events = null
-      dropState.activeDrops = getActiveDrops(scope, interaction.element)
+      dropState.activeDrops = []
+      dropState.events = {}
+      dropState.activeDrops = getActiveDrops(scope, interaction.element!)
       dropState.events = getDropEvents(interaction, event, dragEvent)
 
       if (dropState.events.activate) {
@@ -670,10 +669,11 @@ const drop: Plugin = {
         return
       }
 
-      fireDropEvents(interaction, interaction.dropState.events)
+      const dropState = interaction.dropState!
+      fireDropEvents(interaction, dropState.events)
 
       scope.fire('actions/drop:move', { interaction, dragEvent })
-      interaction.dropState.events = {}
+      dropState.events = {}
     },
 
     'interactions:action-end': (arg: DoPhaseArg<'drag', EventPhase>, scope) => {
@@ -684,7 +684,7 @@ const drop: Plugin = {
       const { interaction, iEvent: dragEvent } = arg
 
       onEventCreated(arg, scope)
-      fireDropEvents(interaction, interaction.dropState.events)
+      fireDropEvents(interaction, interaction.dropState!.events)
       scope.fire('actions/drop:end', { interaction, dragEvent })
     },
 
@@ -696,12 +696,12 @@ const drop: Plugin = {
       const { dropState } = interaction
 
       if (dropState) {
-        dropState.activeDrops = null
-        dropState.events = null
-        dropState.cur.dropzone = null
-        dropState.cur.element = null
-        dropState.prev.dropzone = null
-        dropState.prev.element = null
+        dropState.activeDrops = null as never
+        dropState.events = null as never
+        dropState.cur.dropzone = null as never
+        dropState.cur.element = null as never
+        dropState.prev.dropzone = null as never
+        dropState.prev.element = null as never
         dropState.rejected = false
       }
     },
@@ -712,7 +712,7 @@ const drop: Plugin = {
   fireDropEvents,
   defaults: {
     enabled: false,
-    accept: null,
+    accept: null as never,
     overlap: 'pointer',
   } as DropzoneOptions,
 }

packages/@interactjs/core/Interactable.ts

@@ -48,8 +48,6 @@ export class Interactable implements Partial<Eventable> {
   readonly _doc: Document
   readonly _scopeEvents: Scope['events']
 
-  /** @internal */ _rectChecker?: typeof Interactable.prototype.getRect
-
   /** */
   constructor (
     target: Target,
@@ -84,7 +82,7 @@ export class Interactable implements Partial<Eventable> {
     return this
   }
 
-  updatePerActionListeners (actionName: ActionName, prev: Listeners, cur: Listeners) {
+  updatePerActionListeners (actionName: ActionName, prev: Listeners | undefined, cur: Listeners | undefined) {
     if (is.array(prev) || is.object(prev)) {
       this.off(actionName, prev)
     }
@@ -168,10 +166,8 @@ export class Interactable implements Partial<Eventable> {
   rectChecker(checker: (element: Element) => any): this
   rectChecker (checker?: (element: Element) => any) {
     if (is.func(checker)) {
-      this._rectChecker = checker
-
       this.getRect = (element) => {
-        const rect = extend({}, this._rectChecker(element))
+        const rect = extend({}, checker.apply(this, element))
 
         if (!(('width' in rect) as unknown)) {
           rect.width = rect.right - rect.left
@@ -185,8 +181,7 @@ export class Interactable implements Partial<Eventable> {
     }
 
     if (checker === null) {
-      delete this.getRect
-      delete this._rectChecker
+      delete (this as Partial<typeof this>).getRect
 
       return this
     }
@@ -268,7 +263,7 @@ export class Interactable implements Partial<Eventable> {
     )
   }
 
-  testAllow (this: Interactable, allowFrom: IgnoreValue, targetNode: Node, element: Node) {
+  testAllow (this: Interactable, allowFrom: IgnoreValue | undefined, targetNode: Node, element: Node) {
     if (!allowFrom) {
       return true
     }
@@ -286,7 +281,7 @@ export class Interactable implements Partial<Eventable> {
     return false
   }
 
-  testIgnore (this: Interactable, ignoreFrom: IgnoreValue, targetNode: Node, element: Node) {
+  testIgnore (this: Interactable, ignoreFrom: IgnoreValue | undefined, targetNode: Node, element: Node) {
     if (!ignoreFrom || !is.element(element)) {
       return false
     }

packages/@interactjs/core/InteractableSet.ts

@@ -45,8 +45,8 @@ export class InteractableSet {
         const targetIndex = arr.findIndex(targetMappings, (m) => m.context === context)
         if (targetMappings[targetIndex]) {
           // Destroying mappingInfo's context and interactable
-          targetMappings[targetIndex].context = null
-          targetMappings[targetIndex].interactable = null
+          targetMappings[targetIndex].context = null as never
+          targetMappings[targetIndex].interactable = null as never
         }
         targetMappings.splice(targetIndex, 1)
       },
@@ -108,9 +108,9 @@ export class InteractableSet {
     return found && found.interactable
   }
 
-  forEachMatch<T> (node: Node, callback: (interactable: Interactable) => T) {
+  forEachMatch<T> (node: Node, callback: (interactable: Interactable) => T): T | void {
     for (const interactable of this.list) {
-      let ret: void | T
+      let ret: T
 
       if (
         (is.string(interactable.target)

packages/@interactjs/core/Interaction.ts

@@ -155,7 +155,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
   _interacting = false
   _ending = false
   _stopped = true
-  _proxy: InteractionProxy<T> | null = null
+  _proxy: InteractionProxy<T>
 
   simulation = null
 

packages/@interactjs/core/scope.ts

@@ -56,7 +56,7 @@ export class Scope {
   isInitialized = false
   listenerMaps: Array<{
     map: ListenerMap
-    id: string
+    id?: string
   }> = []
 
   browser = browser
@@ -150,7 +150,8 @@ export class Scope {
   }
 
   pluginIsInstalled (plugin: Plugin) {
-    return this._plugins.map[plugin.id] || this._plugins.list.indexOf(plugin) !== -1
+    const { id } = plugin
+    return id ? !!this._plugins.map[id] : this._plugins.list.indexOf(plugin) !== -1
   }
 
   usePlugin (plugin: Plugin, options?: { [key: string]: any }) {
@@ -183,7 +184,7 @@ export class Scope {
       for (; index < len; index++) {
         const otherId = this.listenerMaps[index].id
 
-        if (before[otherId] || before[pluginIdRoot(otherId)]) {
+        if (otherId && (before[otherId] || before[pluginIdRoot(otherId)])) {
           break
         }
       }

packages/@interactjs/core/tests/_helpers.ts

@@ -122,7 +122,7 @@ export function testEnv<T extends Target = HTMLElement> ({
   return {
     scope,
     interaction,
-    target,
+    target: target as T extends undefined ? HTMLElement : T,
     interactable,
     coords,
     event,

packages/@interactjs/core/types.ts

@@ -102,7 +102,7 @@ export type CursorChecker = (
 export interface ActionMethod<T> {
   (this: Interactable): T
   // eslint-disable-next-line no-undef
-  (this: Interactable, options: Partial<OrBoolean<T>> | boolean): typeof this
+  (this: Interactable, options?: Partial<OrBoolean<T>> | boolean): typeof this
 }
 
 export interface OptionMethod<T> {

packages/@interactjs/dev-tools/plugin.ts

@@ -93,7 +93,7 @@ const checks: Check[] = [
   {
     name: CheckName.touchAction,
     perform ({ element }) {
-      return !parentHasStyle(element, 'touchAction', /pan-|pinch|none/)
+      return !!element && !parentHasStyle(element, 'touchAction', /pan-|pinch|none/)
     },
     getInfo ({ element }) {
       return [element, links.touchAction]
@@ -122,7 +122,7 @@ const checks: Check[] = [
     name: CheckName.noListeners,
     perform (interaction) {
       const actionName = interaction.prepared.name
-      const moveListeners = interaction.interactable.events.types[`${actionName}move`] || []
+      const moveListeners = interaction.interactable?.events.types[`${actionName}move`] || []
 
       return !moveListeners.length
     },

packages/@interactjs/modifiers/snap/edges.spec.ts

@@ -32,8 +32,8 @@ test('modifiers/snap/edges', () => {
   }
 
   arg.state = { options }
-  snapEdges.start(arg as any)
-  snapEdges.set(arg as any)
+  snapEdges.start!(arg as any)
+  snapEdges.set!(arg as any)
 
   // modified coords are correct
   expect(arg.coords).toEqual({ x: target0.left, y: target0.top })
@@ -42,8 +42,8 @@ test('modifiers/snap/edges', () => {
   arg.edges = { bottom: true, right: true }
 
   arg.state = { options }
-  snapEdges.start(arg as any)
-  snapEdges.set(arg as any)
+  snapEdges.start!(arg as any)
+  snapEdges.set!(arg as any)
 
   // modified coord are correct
   expect(arg.coords).toEqual({ x: target0.right, y: target0.bottom })