[FEATURE tagless-event-assert] Update assertion for events in tagless…

… component
emberjs · Apr 16, 2019 · 5130b4a · 5130b4a
1 parent 9c48578
commit 5130b4a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/component.ts b/packages/@ember/-internals/glimmer/lib/component.ts
@@ -16,6 +16,7 @@ import { DirtyableTag } from '@glimmer/reference';
 import { normalizeProperty, SVG_NAMESPACE } from '@glimmer/runtime';
 
 import { RootReference, UPDATE } from './utils/references';
+import { DEBUG } from '@glimmer/env';
 
 export const DIRTY_TAG = symbol('DIRTY_TAG');
 export const ARGS = symbol('ARGS');
@@ -727,13 +728,10 @@ const Component = CoreView.extend(
       this[ROOT_REF] = new RootReference(this);
       this[BOUNDS] = null;
 
-      // If in a tagless component, assert that no event handlers are defined
-      assert(
-        // tslint:disable-next-line:max-line-length
-        `You can not define a function that handles DOM events in the \`${this}\` tagless component since it doesn't have any DOM element.`,
-        this.tagName !== '' ||
-          !this.renderer._destinedForDOM ||
-          !(() => {
+      if (DEBUG) {
+        let eventName = '';
+        if (this.tagName === '') {
+          eventName = (() => {
             let eventDispatcher = getOwner(this).lookup<any | undefined>('event_dispatcher:main');
             let events = (eventDispatcher && eventDispatcher._finalEvents) || {};
 
@@ -742,12 +740,19 @@ const Component = CoreView.extend(
               let methodName = events[key];
 
               if (typeof this[methodName] === 'function') {
-                return true; // indicate that the assertion should be triggered
+                return methodName;
               }
             }
-            return false;
-          })()
-      );
+            return null;
+          })();
+        }
+        // If in a tagless component, assert that no event handlers are defined
+        assert(
+          // tslint:disable-next-line:max-line-length
+          `You can not define a function \`${eventName}\` to handle DOM event in the \`${this}\` tagless component since it doesn't have any DOM element.`,
+          !this.renderer._destinedForDOM || !eventName
+        );
+      }
     },
 
     rerender() {

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/fragment-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/fragment-components-test.js
@@ -66,7 +66,7 @@ moduleFor(
 
       expectAssertion(() => {
         this.render(`{{#foo-bar}}{{/foo-bar}}`);
-      }, /You can not define a function that handles DOM events in the .* tagless component since it doesn't have any DOM element./);
+      }, /You can not define a function `click` to handle DOM event in the .* tagless component since it doesn't have any DOM element./);
     }
 
     ['@test throws an error if a custom defined event function is defined in a tagless component']() {
@@ -83,7 +83,7 @@ moduleFor(
 
       expectAssertion(() => {
         this.render(`{{#foo-bar}}{{/foo-bar}}`);
-      }, /You can not define a function that handles DOM events in the .* tagless component since it doesn't have any DOM element./);
+      }, /You can not define a function `folks` to handle DOM event in the .* tagless component since it doesn't have any DOM element./);
     }
 
     ['@test throws an error if `tagName` is an empty string and `classNameBindings` are specified']() {