feat(devTools): warn when no action move listeners are set

packages/dev-tools/devTools.spec.ts

@@ -4,7 +4,7 @@ import * as helpers from '@interactjs/core/tests/_helpers'
 import * as utils from '@interactjs/utils'
 import * as devTools from './'
 
-test('devTools "touch-action: none"', (t) => {
+test('devTools', (t) => {
   const scope: Interact.Scope = helpers.mockScope()
   const logs: Array<{ args: any[], type: keyof devTools.Logger }> = []
 
@@ -35,5 +35,20 @@ test('devTools "touch-action: none"', (t) => {
     { args: [devTools.touchActionMessage, element, devTools.links.touchAction], type: 'warn' },
     'warning about missing touchAction')
 
+  t.deepEqual(
+    logs[1],
+    { args: [devTools.noListenersMessage, 'drag', interactable], type: 'warn' },
+    'warning about missing move listeners')
+
+  interaction.stop()
+
+  element.style.touchAction = 'none'
+  interactable.on('dragmove', () => {})
+
+  t.equal(
+    logs.length,
+    2,
+    'no warnings when issues are resolved')
+
   t.end()
 })

packages/dev-tools/index.ts

@@ -15,44 +15,64 @@ export interface Logger {
 }
 
 export const links = {
-  touchAction: '\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/touch-action',
+  touchAction: 'https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action',
 }
 
 // eslint-disable-next-line no-restricted-syntax
 export function install (scope: Interact.Scope, { logger = console }: { logger?: Logger } = {}) {
   scope.logger = logger
   scope.interactions.signals.on('action-start', ({ interaction }) => {
-    touchAction(interaction.element, scope.logger)
+    touchAction(interaction, scope.logger)
+    noListeners(interaction, scope.logger)
   })
 }
 
 export const touchActionMessage = '[interact.js] Consider adding CSS "touch-action: none" to this element\n'
+export const noListenersMessage = '[interact.js] There are no listeners set for this action'
 
-export function _touchAction (element, logger: Console) {
+export function _touchAction ({ element }: Interact.Interaction, logger: Logger) {
   let parent = element
 
   while (utils.is.element(parent)) {
     const style = utils.win.window.getComputedStyle(parent)
 
-    if (style.touchAction === 'none') {
+    if (/pan-|pinch|none/.test(style.touchAction)) {
       return
     }
 
     parent = utils.dom.parentNode(parent)
   }
 
   logger.warn(
-    '[interact.js] Consider adding CSS "touch-action: none" to this element\n',
+    touchActionMessage,
     element,
     links.touchAction)
 }
 
+export function _noListeners (interaction: Interact.Interaction, logger: Logger) {
+  const actionName = interaction.prepared.name
+  const moveListeners = interaction.interactable.events.types[`${actionName}move`] || []
+
+  if (!moveListeners.length) {
+    logger.warn(
+      noListenersMessage,
+      actionName,
+      interaction.interactable)
+  }
+}
+
 export const touchAction = (element, logger) => {
   if (process.env.NODE_ENV !== 'production') {
     _touchAction(element, logger)
   }
 }
 
+export const noListeners = (element, logger) => {
+  if (process.env.NODE_ENV !== 'production') {
+    _noListeners(element, logger)
+  }
+}
+
 export default {
   install,
 }