handleWarning on undefined controller or action

src/core/application.ts

@@ -6,15 +6,17 @@ import { Logger } from "./logger"
 import { Router } from "./router"
 import { Schema, defaultSchema } from "./schema"
 import { ActionDescriptorFilter, ActionDescriptorFilters, defaultActionDescriptorFilters } from "./action_descriptor"
+import { WarningHandler } from "./warning_handler"
 
-export class Application implements ErrorHandler {
+export class Application implements ErrorHandler, WarningHandler {
   readonly element: Element
   readonly schema: Schema
   readonly dispatcher: Dispatcher
   readonly router: Router
   readonly actionDescriptorFilters: ActionDescriptorFilters
   logger: Logger = console
   debug = false
+  warnings = true
 
   static start(element?: Element, schema?: Schema): Application {
     const application = new this(element, schema)
@@ -90,7 +92,13 @@ export class Application implements ErrorHandler {
     window.onerror?.(message, "", 0, 0, error)
   }
 
-  // Debug logging
+  // Logging
+
+  handleWarning(warning: string, message: string, detail: any) {
+    if (this.warnings) {
+      this.logger.warn(`%s\n\n%s\n\n%o`, message, warning, detail)
+    }
+  }
 
   logDebugActivity = (identifier: string, functionName: string, detail: object = {}): void => {
     if (this.debug) {

src/core/binding_observer.ts

@@ -61,6 +61,20 @@ export class BindingObserver implements ValueListObserverDelegate<Action> {
     const binding = new Binding(this.context, action)
     this.bindingsByAction.set(action, binding)
     this.delegate.bindingConnected(binding)
+    const { controller } = binding.context
+    const method = (controller as any)[action.methodName]
+
+    if (typeof method !== "function") {
+      this.context.handleWarning(
+        `Stimulus is unable to connect the action "${action.methodName}" with an action on the controller "${action.identifier}". Please make sure the action references a valid method on the controller.`,
+        `Element references undefined action "${action.methodName}" on controller with identifier "${action.identifier}"`,
+        {
+          element: action.element,
+          identifier: action.identifier,
+          methodName: action.methodName,
+        }
+      )
+    }
   }
 
   private disconnectAction(action: Action) {
@@ -92,4 +106,14 @@ export class BindingObserver implements ValueListObserverDelegate<Action> {
   elementUnmatchedValue(element: Element, action: Action) {
     this.disconnectAction(action)
   }
+
+  elementMatchedNoValue(element: Element, token: Token, error?: Error) {
+    const { content: action } = token
+
+    if (error) {
+      this.context.handleWarning(`Warning connecting action "${action}"`, error.message, { action, element })
+    } else {
+      this.context.handleElementMatchedNoValue(element, token, error)
+    }
+  }
 }

src/core/context.ts

@@ -10,6 +10,7 @@ import { ValueObserver } from "./value_observer"
 import { TargetObserver, TargetObserverDelegate } from "./target_observer"
 import { OutletObserver, OutletObserverDelegate } from "./outlet_observer"
 import { namespaceCamelize } from "./string_helpers"
+import { Token } from "../mutation-observers"
 
 export class Context implements ErrorHandler, TargetObserverDelegate, OutletObserverDelegate {
   readonly module: Module
@@ -101,7 +102,11 @@ export class Context implements ErrorHandler, TargetObserverDelegate, OutletObse
     this.application.handleError(error, `Error ${message}`, detail)
   }
 
-  // Debug logging
+  // Logging
+
+  handleWarning(warning: string, message: string, detail: object = {}) {
+    this.application.handleWarning(warning, `Warning: ${message}`, detail)
+  }
 
   logDebugActivity = (functionName: string, detail: object = {}): void => {
     const { identifier, controller, element } = this
@@ -137,4 +142,8 @@ export class Context implements ErrorHandler, TargetObserverDelegate, OutletObse
       controller[methodName](...args)
     }
   }
+
+  handleElementMatchedNoValue(element: Element, token: Token, error?: Error) {
+    this.application.router.handleUniqueWarningsForUnregisteredControllers(element, token, error)
+  }
 }

src/core/guide.ts

@@ -1,14 +1,14 @@
-import { Logger } from "./logger"
+import { WarningHandler } from "./warning_handler"
 
 export class Guide {
-  readonly logger: Logger
+  readonly warningHandler: WarningHandler
   readonly warnedKeysByObject: WeakMap<any, Set<string>> = new WeakMap()
 
-  constructor(logger: Logger) {
-    this.logger = logger
+  constructor(warningHandler: WarningHandler) {
+    this.warningHandler = warningHandler
   }
 
-  warn(object: any, key: string, message: string) {
+  warn(object: any, key: string, warning: string, message: string, detail?: object) {
     let warnedKeys: Set<string> | undefined = this.warnedKeysByObject.get(object)
 
     if (!warnedKeys) {
@@ -18,7 +18,7 @@ export class Guide {
 
     if (!warnedKeys.has(key)) {
       warnedKeys.add(key)
-      this.logger.warn(message, object)
+      this.warningHandler.handleWarning(warning, message, detail || object)
     }
   }
 }

src/core/router.ts

@@ -5,18 +5,23 @@ import { Module } from "./module"
 import { Multimap } from "../multimap"
 import { Scope } from "./scope"
 import { ScopeObserver, ScopeObserverDelegate } from "./scope_observer"
+import { Token } from "../mutation-observers"
+import { Guide } from "./guide"
+import { Action } from "./action"
 
 export class Router implements ScopeObserverDelegate {
   readonly application: Application
   private scopeObserver: ScopeObserver
   private scopesByIdentifier: Multimap<string, Scope>
   private modulesByIdentifier: Map<string, Module>
+  private guide: Guide
 
   constructor(application: Application) {
     this.application = application
     this.scopeObserver = new ScopeObserver(this.element, this.schema, this)
     this.scopesByIdentifier = new Multimap()
     this.modulesByIdentifier = new Map()
+    this.guide = new Guide(this.warningHandler)
   }
 
   get element() {
@@ -27,8 +32,8 @@ export class Router implements ScopeObserverDelegate {
     return this.application.schema
   }
 
-  get logger() {
-    return this.application.logger
+  get warningHandler() {
+    return this.application
   }
 
   get controllerAttribute(): string {
@@ -81,17 +86,44 @@ export class Router implements ScopeObserverDelegate {
     this.application.handleError(error, message, detail)
   }
 
+  handleUniqueWarningsForUnregisteredControllers(element: Element, token: Token, error?: Error) {
+    if (!error) {
+      const { identifier } = Action.forToken(token, this.schema)
+      const registeredIdentifiers = Array.from(this.modulesByIdentifier.keys()).sort()
+
+      if (!registeredIdentifiers.includes(identifier)) {
+        this.guide.warn(
+          element,
+          `identifier:${identifier}`,
+          `Stimulus is unable to find a registered controller with identifier "${identifier}" that is referenced from action "${token.content}". The specified controller is not registered within the application. Please ensure that the controller with the identifier "${identifier}" is properly registered. For reference, the warning details include a list of all currently registered controller identifiers.`,
+          `Warning: Element references unknown action for non-registered controller "${identifier}"`,
+          { identifier, element, registeredIdentifiers }
+        )
+      }
+    }
+  }
+
   // Scope observer delegate
 
   createScopeForElementAndIdentifier(element: Element, identifier: string) {
-    return new Scope(this.schema, element, identifier, this.logger)
+    return new Scope(this.schema, element, identifier, this.application)
   }
 
   scopeConnected(scope: Scope) {
-    this.scopesByIdentifier.add(scope.identifier, scope)
-    const module = this.modulesByIdentifier.get(scope.identifier)
+    const { element, identifier } = scope
+    this.scopesByIdentifier.add(identifier, scope)
+    const module = this.modulesByIdentifier.get(identifier)
+
     if (module) {
       module.connectContextForScope(scope)
+    } else {
+      const registeredIdentifiers = Array.from(this.modulesByIdentifier.keys()).sort()
+
+      this.application.handleWarning(
+        `Stimulus is unable to connect the controller with identifier "${identifier}". The specified controller is not registered within the application. Please ensure that the controller with the identifier "${identifier}" is properly registered. For reference, the warning details include a list of all currently registered controller identifiers.`,
+        `Warning: Element references an unregistered controller identifier "${identifier}".`,
+        { identifier, element, registeredIdentifiers }
+      )
     }
   }
 

src/core/scope.ts

@@ -1,11 +1,11 @@
 import { ClassMap } from "./class_map"
 import { DataMap } from "./data_map"
 import { Guide } from "./guide"
-import { Logger } from "./logger"
 import { Schema } from "./schema"
 import { attributeValueContainsToken } from "./selectors"
 import { TargetSet } from "./target_set"
 import { OutletSet } from "./outlet_set"
+import { WarningHandler } from "./warning_handler"
 
 export class Scope {
   readonly schema: Schema
@@ -17,11 +17,11 @@ export class Scope {
   readonly classes = new ClassMap(this)
   readonly data = new DataMap(this)
 
-  constructor(schema: Schema, element: Element, identifier: string, logger: Logger) {
+  constructor(schema: Schema, element: Element, identifier: string, warningHandler: WarningHandler) {
     this.schema = schema
     this.element = element
     this.identifier = identifier
-    this.guide = new Guide(logger)
+    this.guide = new Guide(warningHandler)
     this.outlets = new OutletSet(this.documentScope, element)
   }
 
@@ -55,6 +55,6 @@ export class Scope {
   private get documentScope(): Scope {
     return this.isDocumentScope
       ? this
-      : new Scope(this.schema, document.documentElement, this.identifier, this.guide.logger)
+      : new Scope(this.schema, document.documentElement, this.identifier, this.guide.warningHandler)
   }
 }

src/core/scope_observer.ts

@@ -79,4 +79,6 @@ export class ScopeObserver implements ValueListObserverDelegate<Scope> {
     }
     return scopesByIdentifier
   }
+
+  elementMatchedNoValue() {}
 }

src/core/target_set.ts

@@ -80,6 +80,7 @@ export class TargetSet {
       this.guide.warn(
         element,
         `target:${targetName}`,
+        `Warning: Deprecated attributeName "${attributeName}"`,
         `Please replace ${attributeName}="${identifier}.${targetName}" with ${revisedAttributeName}="${targetName}". ` +
           `The ${attributeName} attribute is deprecated and will be removed in a future version of Stimulus.`
       )

src/core/warning_handler.ts

@@ -0,0 +1,3 @@
+export interface WarningHandler {
+  handleWarning(warning: string, message: string, detail: any): void
+}

src/mutation-observers/value_list_observer.ts

@@ -3,6 +3,7 @@ import { Token, TokenListObserver, TokenListObserverDelegate } from "./token_lis
 export interface ValueListObserverDelegate<T> {
   parseValueForToken(token: Token): T | undefined
   elementMatchedValue(element: Element, value: T): void
+  elementMatchedNoValue(element: Element, token: Token, error?: Error): void
   elementUnmatchedValue(element: Element, value: T): void
 }
 
@@ -50,10 +51,12 @@ export class ValueListObserver<T> implements TokenListObserverDelegate {
 
   tokenMatched(token: Token) {
     const { element } = token
-    const { value } = this.fetchParseResultForToken(token)
+    const { error, value } = this.fetchParseResultForToken(token)
     if (value) {
       this.fetchValuesByTokenForElement(element).set(token, value)
       this.delegate.elementMatchedValue(element, value)
+    } else {
+      this.delegate.elementMatchedNoValue(element, token, error)
     }
   }
 

src/tests/cases/application_test_case.ts

@@ -15,6 +15,7 @@ export class ApplicationTestCase extends DOMTestCase {
   async runTest(testName: string) {
     try {
       this.application = new TestApplication(this.fixtureElement, this.schema)
+      this.application.warnings = false
       this.setupApplication()
       this.application.start()
       await super.runTest(testName)

src/tests/modules/core/error_handler_tests.ts

@@ -2,7 +2,7 @@ import { Controller } from "../../../core/controller"
 import { Application } from "../../../core/application"
 import { ControllerTestCase } from "../../cases/controller_test_case"
 
-class MockLogger {
+export class MockLogger {
   errors: any[] = []
   logs: any[] = []
   warns: any[] = []
@@ -15,8 +15,8 @@ class MockLogger {
     this.errors.push(event)
   }
 
-  warn(event: any) {
-    this.warns.push(event)
+  warn(event: any, message: string, warning: string, detail: string) {
+    this.warns.push({ message, warning, detail })
   }
 
   groupCollapsed() {}

src/tests/modules/core/legacy_target_tests.ts

@@ -20,6 +20,7 @@ export default class LegacyTargetTests extends ControllerTestCase(TargetControll
 
   async setupApplication() {
     super.setupApplication()
+    this.application.warnings = true
     this.application.logger = Object.create(console, {
       warn: {
         value: () => this.warningCount++,