From 31c40f881526752f1b7102fb4d80d8004b4e76fe Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Tue, 26 Mar 2019 15:45:02 -0400
Subject: [PATCH 1/4] [CLEANUP] remove unused `findElementInParentElement`

---
 .../views/lib/mixins/view_support.js          | 19 +------------------
 tests/docs/expected.js                        |  1 -
 2 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/@ember/-internals/views/lib/mixins/view_support.js b/packages/@ember/-internals/views/lib/mixins/view_support.js
index 214baf95529..bb3e8d0b76a 100644
--- a/packages/@ember/-internals/views/lib/mixins/view_support.js
+++ b/packages/@ember/-internals/views/lib/mixins/view_support.js
@@ -266,23 +266,6 @@ let mixin = {
    */
   elementId: null,
 
-  /**
-   Attempts to discover the element in the parent element. The default
-   implementation looks for an element with an ID of `elementId` (or the
-   view's guid if `elementId` is null). You can override this method to
-   provide your own form of lookup. For example, if you want to discover your
-   element using a CSS class name instead of an ID.
-
-   @method findElementInParentElement
-   @param {DOMElement} parentElement The parent's DOM element
-   @return {DOMElement} The discovered element
-   @private
-   */
-  findElementInParentElement(parentElem) {
-    let id = `#${this.elementId}`;
-    return jQuery(id)[0] || jQuery(id, parentElem)[0];
-  },
-
   /**
    Called when a view is going to insert an element into the DOM.
 
@@ -367,7 +350,7 @@ let mixin = {
    must destroy and recreate the view element.
 
    By default, the render buffer will use a `<div>` tag for views.
-   
+
    If the tagName is `''`, the view will be tagless, with no outer element.
    Component properties that depend on the presence of an outer element, such
    as `classNameBindings` and `attributeBindings`, do not work with tagless
diff --git a/tests/docs/expected.js b/tests/docs/expected.js
index 835053f0a98..1712ba689c0 100644
--- a/tests/docs/expected.js
+++ b/tests/docs/expected.js
@@ -211,7 +211,6 @@ module.exports = {
     'finally',
     'find',
     'findBy',
-    'findElementInParentElement',
     'findModel',
     'findWithAssert',
     'firstObject',

From 6ba61a1c5c1e405ec5d039289014ee7e5c8cc83e Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Tue, 26 Mar 2019 17:24:09 -0400
Subject: [PATCH 2/4] [BUGFIX canary] don't rely on `elementId` for event
 dispatching

Since the `id` attribute can be passed through splattributes, relying
on `elementId` for event dispatching is not quite correct.
---
 .../glimmer/lib/component-managers/curly.ts   |  8 ++++-
 .../-internals/glimmer/lib/component.ts       |  9 ++++-
 .../@ember/-internals/glimmer/lib/renderer.ts | 33 +++++++------------
 .../lib/utils/curly-component-state-bucket.ts |  8 +++++
 packages/@ember/-internals/views/index.d.ts   | 14 ++++----
 packages/@ember/-internals/views/index.js     |  5 ++-
 .../views/lib/system/event_dispatcher.js      | 24 ++++----------
 .../-internals/views/lib/system/utils.js      | 30 +++++++++++++----
 .../-internals/views/lib/views/core_view.js   |  3 --
 packages/@ember/engine/index.js               |  1 -
 .../lib/test-cases/abstract-rendering.js      |  9 +++--
 11 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
index 01b601222ff..c07f0850d40 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
@@ -2,7 +2,12 @@ import { privatize as P } from '@ember/-internals/container';
 import { get } from '@ember/-internals/metal';
 import { getOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
-import { addChildView, OwnedTemplateMeta, setViewElement } from '@ember/-internals/views';
+import {
+  addChildView,
+  OwnedTemplateMeta,
+  setElementView,
+  setViewElement,
+} from '@ember/-internals/views';
 import { assert, debugFreeze } from '@ember/debug';
 import { _instrumentStart } from '@ember/instrumentation';
 import { assign } from '@ember/polyfills';
@@ -340,6 +345,7 @@ export default class CurlyComponentManager
     operations: ElementOperations
   ): void {
     setViewElement(component, element);
+    setElementView(element, component);
 
     let { attributeBindings, classNames, classNameBindings } = component;
 
diff --git a/packages/@ember/-internals/glimmer/lib/component.ts b/packages/@ember/-internals/glimmer/lib/component.ts
index 2e76976be4a..1cc5e8d9179 100644
--- a/packages/@ember/-internals/glimmer/lib/component.ts
+++ b/packages/@ember/-internals/glimmer/lib/component.ts
@@ -725,7 +725,14 @@ const Component = CoreView.extend(
      */
     readDOMAttr(name: string) {
       // TODO revisit this
-      let element = getViewElement(this);
+      let _element = getViewElement(this);
+
+      assert(
+        `Cannot call \`readDOMAttr\` on ${this} which does not have an element`,
+        _element !== null
+      );
+
+      let element = _element!;
       let isSVG = element.namespaceURI === SVG_NAMESPACE;
       let { type, normalized } = normalizeProperty(element, name);
 
diff --git a/packages/@ember/-internals/glimmer/lib/renderer.ts b/packages/@ember/-internals/glimmer/lib/renderer.ts
index 1d3417601be..8907264c87d 100644
--- a/packages/@ember/-internals/glimmer/lib/renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/renderer.ts
@@ -1,14 +1,9 @@
 import { ENV } from '@ember/-internals/environment';
 import { runInTransaction } from '@ember/-internals/metal';
-import {
-  fallbackViewRegistry,
-  getViewElement,
-  getViewId,
-  setViewElement,
-} from '@ember/-internals/views';
+import { getViewElement, getViewId } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
 import { backburner, getCurrentRunLoop } from '@ember/runloop';
-import { Simple } from '@glimmer/interfaces';
+import { Option, Simple } from '@glimmer/interfaces';
 import { CURRENT_TAG, VersionedPathReference } from '@glimmer/reference';
 import {
   clientBuilder,
@@ -245,12 +240,14 @@ function loopEnd() {
 backburner.on('begin', loopBegin);
 backburner.on('end', loopEnd);
 
+interface ViewRegistry {
+  [viewId: string]: Opaque;
+}
+
 export abstract class Renderer {
   private _env: Environment;
   private _rootTemplate: any;
-  private _viewRegistry: {
-    [viewId: string]: Opaque;
-  };
+  private _viewRegistry: ViewRegistry;
   private _destinedForDOM: boolean;
   private _destroyed: boolean;
   private _roots: RootState[];
@@ -262,13 +259,13 @@ export abstract class Renderer {
   constructor(
     env: Environment,
     rootTemplate: OwnedTemplate,
-    _viewRegistry = fallbackViewRegistry,
+    viewRegistry: ViewRegistry,
     destinedForDOM = false,
     builder = clientBuilder
   ) {
     this._env = env;
     this._rootTemplate = rootTemplate;
-    this._viewRegistry = _viewRegistry;
+    this._viewRegistry = viewRegistry;
     this._destinedForDOM = destinedForDOM;
     this._destroyed = false;
     this._roots = [];
@@ -331,15 +328,9 @@ export abstract class Renderer {
 
     this.cleanupRootFor(view);
 
-    setViewElement(view, null);
-
     if (this._destinedForDOM) {
       view.trigger('didDestroyElement');
     }
-
-    if (!view.isDestroying) {
-      view.destroy();
-    }
   }
 
   cleanupRootFor(view: Opaque) {
@@ -370,7 +361,7 @@ export abstract class Renderer {
     this._clearAllRoots();
   }
 
-  abstract getElement(view: Opaque): Simple.Element | undefined;
+  abstract getElement(view: Opaque): Option<Simple.Element>;
 
   getBounds(view: Component) {
     let bounds = view[BOUNDS];
@@ -533,7 +524,7 @@ export class InertRenderer extends Renderer {
     return new this(env, rootTemplate, _viewRegistry, false, builder);
   }
 
-  getElement(_view: Opaque): Simple.Element | undefined {
+  getElement(_view: Opaque): Option<Simple.Element> {
     throw new Error(
       'Accessing `this.element` is not allowed in non-interactive environments (such as FastBoot).'
     );
@@ -555,7 +546,7 @@ export class InteractiveRenderer extends Renderer {
     return new this(env, rootTemplate, _viewRegistry, true, builder);
   }
 
-  getElement(view: Opaque): Simple.Element | undefined {
+  getElement(view: Opaque): Option<Simple.Element> {
     return getViewElement(view);
   }
 }
diff --git a/packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts b/packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts
index 611fd85f9d6..fd760a4c115 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts
@@ -1,3 +1,4 @@
+import { clearElementView, clearViewElement, getViewElement } from '@ember/-internals/views';
 import { Revision, VersionedReference } from '@glimmer/reference';
 import { CapturedNamedArguments } from '@glimmer/runtime';
 import { Opaque } from '@glimmer/util';
@@ -54,6 +55,13 @@ export default class ComponentStateBucket {
     if (environment.isInteractive) {
       component.trigger('willDestroyElement');
       component.trigger('willClearRender');
+
+      let element = getViewElement(component);
+
+      if (element) {
+        clearElementView(element);
+        clearViewElement(component);
+      }
     }
 
     environment.destroyedComponents.push(component);
diff --git a/packages/@ember/-internals/views/index.d.ts b/packages/@ember/-internals/views/index.d.ts
index 919ae57f4aa..0c976f0d047 100644
--- a/packages/@ember/-internals/views/index.d.ts
+++ b/packages/@ember/-internals/views/index.d.ts
@@ -1,4 +1,4 @@
-import { Simple, Template } from '@glimmer/interfaces';
+import { Simple, Template, Option } from '@glimmer/interfaces';
 import { Opaque } from '@glimmer/util';
 import { Factory, Owner } from '@ember/-internals/owner';
 
@@ -21,8 +21,12 @@ export const ViewMixin: any;
 export const ViewStateSupport: any;
 export const TextSupport: any;
 
-export function getViewElement(view: Opaque): Simple.Element;
-export function setViewElement(view: Opaque, element: Simple.Element | null): void;
+export function getElementView(element: Simple.Element): Opaque;
+export function getViewElement(view: Opaque): Option<Simple.Element>;
+export function setElementView(element: Simple.Element, view: Opaque): void;
+export function setViewElement(view: Opaque, element: Simple.Element): void;
+export function clearElementView(element: Simple.Element): void;
+export function clearViewElement(view: Opaque): void;
 
 export function addChildView(parent: Opaque, child: Opaque): void;
 
@@ -45,10 +49,6 @@ export function lookupPartial(templateName: string, owner: Owner): any;
 
 export function getViewId(view: any): string;
 
-export const fallbackViewRegistry: {
-  [id: string]: any | undefined;
-};
-
 export const MUTABLE_CELL: string;
 
 export const ActionManager: {
diff --git a/packages/@ember/-internals/views/index.js b/packages/@ember/-internals/views/index.js
index 96b7370cf40..23a99099c34 100644
--- a/packages/@ember/-internals/views/index.js
+++ b/packages/@ember/-internals/views/index.js
@@ -8,8 +8,12 @@ export {
   getRootViews,
   getChildViews,
   getViewId,
+  getElementView,
   getViewElement,
+  setElementView,
   setViewElement,
+  clearElementView,
+  clearViewElement,
   constructStyleDeprecationMessage,
 } from './lib/system/utils';
 export { default as EventDispatcher } from './lib/system/event_dispatcher';
@@ -25,4 +29,3 @@ export { MUTABLE_CELL } from './lib/compat/attrs';
 export { default as lookupPartial, hasPartial } from './lib/system/lookup_partial';
 export { default as lookupComponent } from './lib/utils/lookup-component';
 export { default as ActionManager } from './lib/system/action_manager';
-export { default as fallbackViewRegistry } from './lib/compat/fallback-view-registry';
diff --git a/packages/@ember/-internals/views/lib/system/event_dispatcher.js b/packages/@ember/-internals/views/lib/system/event_dispatcher.js
index 565719e2e21..3af4a24536b 100644
--- a/packages/@ember/-internals/views/lib/system/event_dispatcher.js
+++ b/packages/@ember/-internals/views/lib/system/event_dispatcher.js
@@ -3,9 +3,9 @@ import { assign } from '@ember/polyfills';
 import { assert } from '@ember/debug';
 import { get, set } from '@ember/-internals/metal';
 import { Object as EmberObject } from '@ember/-internals/runtime';
+import { getElementView } from '@ember/-internals/views';
 import jQuery, { jQueryDisabled } from './jquery';
 import ActionManager from './action_manager';
-import fallbackViewRegistry from '../compat/fallback-view-registry';
 import addJQueryEventDeprecation from './jquery_event_deprecation';
 import { contains } from './utils';
 import { JQUERY_INTEGRATION } from '@ember/deprecated-features';
@@ -216,11 +216,9 @@ export default EmberObject.extend({
       }
     }
 
-    let viewRegistry = this._getViewRegistry();
-
     for (let event in events) {
       if (events.hasOwnProperty(event)) {
-        this.setupHandler(rootElement, event, events[event], viewRegistry);
+        this.setupHandler(rootElement, event, events[event]);
       }
     }
   },
@@ -238,16 +236,15 @@ export default EmberObject.extend({
     @param {Element} rootElement
     @param {String} event the browser-originated event to listen to
     @param {String} eventName the name of the method to call on the view
-    @param {Object} viewRegistry
   */
-  setupHandler(rootElement, event, eventName, viewRegistry) {
+  setupHandler(rootElement, event, eventName) {
     if (eventName === null) {
       return;
     }
 
     if (!JQUERY_INTEGRATION || jQueryDisabled) {
       let viewHandler = (target, event) => {
-        let view = viewRegistry[target.id];
+        let view = getElementView(target);
         let result = true;
 
         if (view) {
@@ -340,7 +337,7 @@ export default EmberObject.extend({
             (related === null || (related !== target && !contains(target, related)))
           ) {
             // mouseEnter/Leave don't bubble, so there is no logic to prevent it as with other events
-            if (viewRegistry[target.id]) {
+            if (getElementView(target)) {
               viewHandler(target, createFakeEvent(origEventType, event));
             } else if (target.hasAttribute('data-ember-action')) {
               actionHandler(target, createFakeEvent(origEventType, event));
@@ -358,7 +355,7 @@ export default EmberObject.extend({
           let target = event.target;
 
           do {
-            if (viewRegistry[target.id]) {
+            if (getElementView(target)) {
               if (viewHandler(target, event) === false) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -378,7 +375,7 @@ export default EmberObject.extend({
       }
     } else {
       rootElement.on(`${event}.ember`, '.ember-view', function(evt) {
-        let view = viewRegistry[this.id];
+        let view = getElementView(this);
         let result = true;
 
         if (view) {
@@ -417,13 +414,6 @@ export default EmberObject.extend({
     }
   },
 
-  _getViewRegistry() {
-    let owner = getOwner(this);
-    let viewRegistry = (owner && owner.lookup('-view-registry:main')) || fallbackViewRegistry;
-
-    return viewRegistry;
-  },
-
   destroy() {
     let rootElementSelector = get(this, 'rootElement');
     let rootElement;
diff --git a/packages/@ember/-internals/views/lib/system/utils.js b/packages/@ember/-internals/views/lib/system/utils.js
index 9cb623335e0..7e4334d24f3 100644
--- a/packages/@ember/-internals/views/lib/system/utils.js
+++ b/packages/@ember/-internals/views/lib/system/utils.js
@@ -1,6 +1,6 @@
 import { getOwner } from '@ember/-internals/owner';
 /* globals Element */
-import { guidFor, symbol } from '@ember/-internals/utils';
+import { guidFor } from '@ember/-internals/utils';
 
 /**
 @module ember
@@ -60,7 +60,12 @@ export function getViewId(view) {
   }
 }
 
-const VIEW_ELEMENT = symbol('VIEW_ELEMENT');
+const ELEMENT_VIEW = new WeakMap();
+const VIEW_ELEMENT = new WeakMap();
+
+export function getElementView(element) {
+  return ELEMENT_VIEW.get(element) || null;
+}
 
 /**
   @private
@@ -68,15 +73,28 @@ const VIEW_ELEMENT = symbol('VIEW_ELEMENT');
   @param {Ember.View} view
  */
 export function getViewElement(view) {
-  return view[VIEW_ELEMENT];
+  return VIEW_ELEMENT.get(view) || null;
 }
 
-export function initViewElement(view) {
-  view[VIEW_ELEMENT] = null;
+export function setElementView(element, view) {
+  ELEMENT_VIEW.set(element, view);
 }
 
 export function setViewElement(view, element) {
-  return (view[VIEW_ELEMENT] = element);
+  VIEW_ELEMENT.set(view, element);
+}
+
+// These are not needed for GC, but for correctness. We want to be able to
+// null-out these links while the objects are still live. Specifically, in
+// this case, we want to prevent access to the element (and vice verse) during
+// destruction.
+
+export function clearElementView(element) {
+  ELEMENT_VIEW.delete(element);
+}
+
+export function clearViewElement(view) {
+  VIEW_ELEMENT.delete(view);
 }
 
 const CHILD_VIEW_IDS = new WeakMap();
diff --git a/packages/@ember/-internals/views/lib/views/core_view.js b/packages/@ember/-internals/views/lib/views/core_view.js
index d428e3fc435..1dff54ba394 100644
--- a/packages/@ember/-internals/views/lib/views/core_view.js
+++ b/packages/@ember/-internals/views/lib/views/core_view.js
@@ -1,5 +1,4 @@
 import { ActionHandler, Evented, FrameworkObject } from '@ember/-internals/runtime';
-import { initViewElement } from '../system/utils';
 import states from './states';
 
 /**
@@ -28,8 +27,6 @@ const CoreView = FrameworkObject.extend(Evented, ActionHandler, {
     this._state = 'preRender';
     this._currentState = this._states.preRender;
 
-    initViewElement(this);
-
     if (!this.renderer) {
       throw new Error(
         `Cannot instantiate a component without a renderer. Please ensure that you are creating ${this} with a proper container/registry.`
diff --git a/packages/@ember/engine/index.js b/packages/@ember/engine/index.js
index 3b4c9ab672b..97bd4a3bf34 100644
--- a/packages/@ember/engine/index.js
+++ b/packages/@ember/engine/index.js
@@ -497,7 +497,6 @@ function commonSetupRegistry(registry) {
 
   registry.injection('view', '_viewRegistry', '-view-registry:main');
   registry.injection('renderer', '_viewRegistry', '-view-registry:main');
-  registry.injection('event_dispatcher:main', '_viewRegistry', '-view-registry:main');
 
   registry.injection('route', '_topLevelViewTemplate', 'template:-outlet');
 
diff --git a/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js b/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js
index f32af637b57..cd2fb59524b 100644
--- a/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js
+++ b/packages/internal-test-helpers/lib/test-cases/abstract-rendering.js
@@ -21,12 +21,17 @@ export default class AbstractRenderingTestCase extends AbstractTestCase {
       bootOptions,
     }));
 
+    owner.register('-view-registry:main', Object.create(null), { instantiate: false });
+    owner.register('event_dispatcher:main', EventDispatcher);
+
+    // TODO: why didn't buildOwner do this for us?
+    owner.inject('view', '_viewRegistry', '-view-registry:main');
+    owner.inject('renderer', '_viewRegistry', '-view-registry:main');
+
     this.renderer = this.owner.lookup('renderer:-dom');
     this.element = document.querySelector('#qunit-fixture');
     this.component = null;
 
-    owner.register('event_dispatcher:main', EventDispatcher);
-    owner.inject('event_dispatcher:main', '_viewRegistry', '-view-registry:main');
     if (!bootOptions || bootOptions.isInteractive !== false) {
       owner.lookup('event_dispatcher:main').setup(this.getCustomDispatcherEvents(), this.element);
     }

From a08596f9743b0eedced24af011e8b6b711a1a38b Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Wed, 27 Mar 2019 09:32:50 -0400
Subject: [PATCH 3/4] stop using @id in tests

---
 .../angle-bracket-invocation-test.js          |  34 +++-
 .../link-to/query-params-angle-test.js        |  82 ++++-----
 .../link-to/rendering-angle-test.js           |   2 +-
 .../components/link-to/routing-angle-test.js  | 157 +++++++++---------
 .../transitioning-classes-angle-test.js       |  14 +-
 5 files changed, 156 insertions(+), 133 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
index c1cdd05a236..0ecfea65700 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
@@ -94,20 +94,46 @@ moduleFor(
         content: 'bizz bizz',
       });
 
-      runTask(() => this.rerender());
+      this.assertStableRerender();
+
+      runTask(() => set(this.context, 'customId', 'bar'));
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { id: 'bizz' },
+        content: 'bar bizz',
+      });
+
+      runTask(() => set(this.context, 'customId', 'bizz'));
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
         attrs: { id: 'bizz' },
         content: 'bizz bizz',
       });
+    }
 
-      runTask(() => set(this.context, 'customId', 'bar'));
+    '@test it can have a custom id attribute and it is bound'() {
+      this.registerComponent('foo-bar', { template: 'hello' });
+
+      this.render('<FooBar id={{customId}} />', {
+        customId: 'bizz',
+      });
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
         attrs: { id: 'bizz' },
-        content: 'bar bizz',
+        content: 'hello',
+      });
+
+      this.assertStableRerender();
+
+      runTask(() => set(this.context, 'customId', 'bar'));
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { id: 'bar' },
+        content: 'hello',
       });
 
       runTask(() => set(this.context, 'customId', 'bizz'));
@@ -115,7 +141,7 @@ moduleFor(
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
         attrs: { id: 'bizz' },
-        content: 'bizz bizz',
+        content: 'hello',
       });
     }
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js
index c89d83b6f58..36c22206b0e 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/query-params-angle-test.js
@@ -110,7 +110,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       }
 
       [`@test doesn't update controller QP properties on current route when invoked`](assert) {
-        this.addTemplate('index', `<LinkTo @id='the-link' @route='index'>Index</LinkTo>`);
+        this.addTemplate('index', `<LinkTo id='the-link' @route='index'>Index</LinkTo>`);
 
         return this.visit('/').then(() => {
           this.click('#the-link');
@@ -129,7 +129,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       ) {
         this.addTemplate(
           'index',
-          `<LinkTo @id='the-link' @route='index' @query={{hash}}>Index</LinkTo>`
+          `<LinkTo id='the-link' @route='index' @query={{hash}}>Index</LinkTo>`
         );
 
         return this.visit('/').then(() => {
@@ -147,7 +147,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test doesn't update controller QP properties on current route when invoked (empty query-params obj, inferred route)`](
         assert
       ) {
-        this.addTemplate('index', `<LinkTo @id='the-link' @query={{hash}}>Index</LinkTo>`);
+        this.addTemplate('index', `<LinkTo id='the-link' @query={{hash}}>Index</LinkTo>`);
 
         return this.visit('/').then(() => {
           this.click('#the-link');
@@ -165,7 +165,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="the-link" @route='index' @query={{hash foo='456'}}>
+          <LinkTo id="the-link" @route='index' @query={{hash foo='456'}}>
             Index
           </LinkTo>
           `
@@ -189,7 +189,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="the-link" @query={{hash foo='456'}}>
+          <LinkTo id="the-link" @query={{hash foo='456'}}>
             Index
           </LinkTo>
           `
@@ -217,7 +217,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="the-link" @route="about" @query={{hash baz='lol'}}>
+          <LinkTo id="the-link" @route="about" @query={{hash baz='lol'}}>
             About
           </LinkTo>
           `
@@ -243,7 +243,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="the-link" @query={{hash foo=boundThing}}>
+          <LinkTo id="the-link" @query={{hash foo=boundThing}}>
             Index
           </LinkTo>
           `
@@ -265,7 +265,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="the-link" @query={{hash abool=boundThing}}>
+          <LinkTo id="the-link" @query={{hash abool=boundThing}}>
             Index
           </LinkTo>
           `
@@ -294,7 +294,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="the-link" @query={{hash foo='lol'}}>
+          <LinkTo id="the-link" @query={{hash foo='lol'}}>
             Index
           </LinkTo>
           `
@@ -323,15 +323,15 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'cars',
           `
-          <LinkTo @id='create-link' @route='cars.create'>Create new car</LinkTo>
-          <LinkTo @id='page2-link' @query={{hash page='2'}}>Page 2</LinkTo>
+          <LinkTo id='create-link' @route='cars.create'>Create new car</LinkTo>
+          <LinkTo id='page2-link' @query={{hash page='2'}}>Page 2</LinkTo>
           {{outlet}}
           `
         );
 
         this.addTemplate(
           'cars.create',
-          `<LinkTo @id='close-link' @route='cars'>Close create form</LinkTo>`
+          `<LinkTo id='close-link' @route='cars'>Close create form</LinkTo>`
         );
 
         this.router.map(function() {
@@ -374,22 +374,22 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id='cat-link' @query={{hash foo='cat'}}>Index</LinkTo>
-          <LinkTo @id='dog-link' @query={{hash foo='dog'}}>Index</LinkTo>
-          <LinkTo @id='change-nothing' @route='index'>Index</LinkTo>
+          <LinkTo id='cat-link' @query={{hash foo='cat'}}>Index</LinkTo>
+          <LinkTo id='dog-link' @query={{hash foo='dog'}}>Index</LinkTo>
+          <LinkTo id='change-nothing' @route='index'>Index</LinkTo>
           `
         );
 
         this.addTemplate(
           'search',
           `
-          <LinkTo @id='same-search' @query={{hash search='same'}}>Index</LinkTo>
-          <LinkTo @id='change-search' @query={{hash search='change'}}>Index</LinkTo>
-          <LinkTo @id='same-search-add-archive' @query={{hash search='same' archive=true}}>Index</LinkTo>
-          <LinkTo @id='only-add-archive' @query={{hash archive=true}}>Index</LinkTo>
-          <LinkTo @id='both-same' @query={{hash search='same' archive=true}}>Index</LinkTo>
-          <LinkTo @id='change-one' @query={{hash search='different' archive=true}}>Index</LinkTo>
-          <LinkTo @id='remove-one' @query={{hash search='different' archive=false}}>Index</LinkTo>
+          <LinkTo id='same-search' @query={{hash search='same'}}>Index</LinkTo>
+          <LinkTo id='change-search' @query={{hash search='change'}}>Index</LinkTo>
+          <LinkTo id='same-search-add-archive' @query={{hash search='same' archive=true}}>Index</LinkTo>
+          <LinkTo id='only-add-archive' @query={{hash archive=true}}>Index</LinkTo>
+          <LinkTo id='both-same' @query={{hash search='same' archive=true}}>Index</LinkTo>
+          <LinkTo id='change-one' @query={{hash search='different' archive=true}}>Index</LinkTo>
+          <LinkTo id='remove-one' @query={{hash search='different' archive=false}}>Index</LinkTo>
           {{outlet}}
           `
         );
@@ -397,13 +397,13 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'search.results',
           `
-          <LinkTo @id='same-sort-child-only' @query={{hash sort='title'}}>Index</LinkTo>
-          <LinkTo @id='same-search-parent-only' @query={{hash search='same'}}>Index</LinkTo>
-          <LinkTo @id='change-search-parent-only' @query={{hash search='change'}}>Index</LinkTo>
-          <LinkTo @id='same-search-same-sort-child-and-parent' @query={{hash search='same' sort='title'}}>Index</LinkTo>
-          <LinkTo @id='same-search-different-sort-child-and-parent' @query={{hash search='same' sort='author'}}>Index</LinkTo>
-          <LinkTo @id='change-search-same-sort-child-and-parent' @query={{hash search='change' sort='title'}}>Index</LinkTo>
-          <LinkTo @id='dog-link' @query={{hash foo='dog'}}>Index</LinkTo>
+          <LinkTo id='same-sort-child-only' @query={{hash sort='title'}}>Index</LinkTo>
+          <LinkTo id='same-search-parent-only' @query={{hash search='same'}}>Index</LinkTo>
+          <LinkTo id='change-search-parent-only' @query={{hash search='change'}}>Index</LinkTo>
+          <LinkTo id='same-search-same-sort-child-and-parent' @query={{hash search='same' sort='title'}}>Index</LinkTo>
+          <LinkTo id='same-search-different-sort-child-and-parent' @query={{hash search='same' sort='author'}}>Index</LinkTo>
+          <LinkTo id='change-search-same-sort-child-and-parent' @query={{hash search='change' sort='title'}}>Index</LinkTo>
+          <LinkTo id='dog-link' @query={{hash foo='dog'}}>Index</LinkTo>
           `
         );
 
@@ -480,7 +480,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id='page-link' @query={{hash page=pageNumber}}>
+          <LinkTo id='page-link' @query={{hash page=pageNumber}}>
             Index
           </LinkTo>
           `
@@ -509,9 +509,9 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id='array-link' @query={{hash pages=pagesArray}}>Index</LinkTo>
-          <LinkTo @id='bigger-link' @query={{hash pages=biggerArray}}>Index</LinkTo>
-          <LinkTo @id='empty-link' @query={{hash pages=emptyArray}}>Index</LinkTo>
+          <LinkTo id='array-link' @query={{hash pages=pagesArray}}>Index</LinkTo>
+          <LinkTo id='bigger-link' @query={{hash pages=biggerArray}}>Index</LinkTo>
+          <LinkTo id='empty-link' @query={{hash pages=emptyArray}}>Index</LinkTo>
           `
         );
 
@@ -562,9 +562,9 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'application',
           `
-          <LinkTo @id='parent-link' @route='parent'>Parent</LinkTo>
-          <LinkTo @id='parent-child-link' @route='parent.child'>Child</LinkTo>
-          <LinkTo @id='parent-link-qp' @route='parent' @query={{hash foo=cat}}>Parent</LinkTo>
+          <LinkTo id='parent-link' @route='parent'>Parent</LinkTo>
+          <LinkTo id='parent-child-link' @route='parent.child'>Child</LinkTo>
+          <LinkTo id='parent-link-qp' @route='parent' @query={{hash foo=cat}}>Parent</LinkTo>
           {{outlet}}
           `
         );
@@ -602,7 +602,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'application',
           `
-          <LinkTo @id='app-link' @route='parent' @query={{hash page=1}} @current-when='parent'>
+          <LinkTo id='app-link' @route='parent' @query={{hash page=1}} @current-when='parent'>
             Parent
           </LinkTo>
           {{outlet}}
@@ -612,7 +612,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'parent',
           `
-          <LinkTo @id='parent-link' @route='parent' @query={{hash page=1}} @current-when='parent'>
+          <LinkTo id='parent-link' @route='parent' @query={{hash page=1}} @current-when='parent'>
             Parent
           </LinkTo>
           {{outlet}}
@@ -675,9 +675,9 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'application',
           `
-          <LinkTo @id='foos-link' @route='foos'>Foos</LinkTo>
-          <LinkTo @id='baz-foos-link' @route='foos' @query={{hash baz=true}}>Baz Foos</LinkTo>
-          <LinkTo @id='bars-link' @route='bars' @query={{hash quux=true}}>Quux Bars</LinkTo>
+          <LinkTo id='foos-link' @route='foos'>Foos</LinkTo>
+          <LinkTo id='baz-foos-link' @route='foos' @query={{hash baz=true}}>Baz Foos</LinkTo>
+          <LinkTo id='bars-link' @route='bars' @query={{hash quux=true}}>Quux Bars</LinkTo>
           `
         );
 
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/rendering-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/rendering-angle-test.js
index 48b9ab05227..68493a3434c 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/rendering-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/rendering-angle-test.js
@@ -12,7 +12,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test throws a useful error if you invoke it wrong`](assert) {
         assert.expect(1);
 
-        this.addTemplate('application', `<LinkTo @id='the-link'>Index</LinkTo>`);
+        this.addTemplate('application', `<LinkTo id='the-link'>Index</LinkTo>`);
 
         expectAssertion(() => {
           this.visit('/');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
index 2b1fe78393b..19d6bab6f47 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
@@ -42,16 +42,16 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @route='about' @id='about-link'>About</LinkTo>
-          <LinkTo @route='index' @id='self-link'>Self</LinkTo>
+          <LinkTo @route='about' id='about-link'>About</LinkTo>
+          <LinkTo @route='index' id='self-link'>Self</LinkTo>
           `
         );
         this.addTemplate(
           'about',
           `
           <h3 class="about">About</h3>
-          <LinkTo @route='index' @id='home-link'>Home</LinkTo>
-          <LinkTo @route='about' @id='self-link'>Self</LinkTo>
+          <LinkTo @route='index' id='home-link'>Home</LinkTo>
+          <LinkTo @route='about' id='self-link'>Self</LinkTo>
           `
         );
       }
@@ -91,7 +91,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test the <LinkTo /> component doesn't add an href when the tagName isn't 'a'`](assert) {
         this.addTemplate(
           'index',
-          `<LinkTo @route='about' @id='about-link' @tagName='div'>About</LinkTo>`
+          `<LinkTo @route='about' id='about-link' @tagName='div'>About</LinkTo>`
         );
 
         return this.visit('/').then(() => {
@@ -103,8 +103,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id="about-link-static" @route="about" @disabledWhen="shouldDisable">About</LinkTo>
-          <LinkTo @id="about-link-dynamic" @route="about" @disabledWhen={{dynamicDisabledWhen}}>About</LinkTo>
+          <LinkTo id="about-link-static" @route="about" @disabledWhen="shouldDisable">About</LinkTo>
+          <LinkTo id="about-link-dynamic" @route="about" @disabledWhen={{dynamicDisabledWhen}}>About</LinkTo>
           `
         );
 
@@ -142,7 +142,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test the <LinkTo /> component doesn't apply a 'disabled' class if disabledWhen is not provided`](
         assert
       ) {
-        this.addTemplate('index', `<LinkTo @id="about-link" @route="about">About</LinkTo>`);
+        this.addTemplate('index', `<LinkTo id="about-link" @route="about">About</LinkTo>`);
 
         return this.visit('/').then(() => {
           assert.ok(
@@ -155,7 +155,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test the <LinkTo /> component supports a custom disabledClass`](assert) {
         this.addTemplate(
           'index',
-          `<LinkTo @id="about-link" @route="about" @disabledWhen={{true}} @disabledClass="do-not-want">About</LinkTo>`
+          `<LinkTo id="about-link" @route="about" @disabledWhen={{true}} @disabledClass="do-not-want">About</LinkTo>`
         );
 
         return this.visit('/').then(() => {
@@ -172,7 +172,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       ) {
         this.addTemplate(
           'index',
-          `<LinkTo @id="about-link" @route="about" @disabledWhen={{true}} @disabledClass={{disabledClass}}>About</LinkTo>`
+          `<LinkTo id="about-link" @route="about" @disabledWhen={{true}} @disabledClass={{disabledClass}}>About</LinkTo>`
         );
 
         this.add(
@@ -194,7 +194,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test the <LinkTo /> component does not respond to clicks when disabledWhen`](assert) {
         this.addTemplate(
           'index',
-          `<LinkTo @id="about-link" @route="about" @disabledWhen={{true}}>About</LinkTo>`
+          `<LinkTo id="about-link" @route="about" @disabledWhen={{true}}>About</LinkTo>`
         );
 
         return this.visit('/')
@@ -209,7 +209,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       [`@test the <LinkTo /> component does not respond to clicks when disabled`](assert) {
         this.addTemplate(
           'index',
-          `<LinkTo @id="about-link" @route="about" @disabled={{true}}>About</LinkTo>`
+          `<LinkTo id="about-link" @route="about" @disabled={{true}}>About</LinkTo>`
         );
 
         return this.visit('/')
@@ -226,7 +226,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
       ) {
         this.addTemplate(
           'index',
-          `<LinkTo @id="about-link" @route="about" @disabledWhen={{disabledWhen}}>About</LinkTo>`
+          `<LinkTo id="about-link" @route="about" @disabledWhen={{disabledWhen}}>About</LinkTo>`
         );
 
         this.add(
@@ -265,8 +265,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about'>About</LinkTo>
-          <LinkTo @id='self-link' @route='index' @activeClass='zomg-active'>Self</LinkTo>
+          <LinkTo id='about-link' @route='about'>About</LinkTo>
+          <LinkTo id='self-link' @route='index' @activeClass='zomg-active'>Self</LinkTo>
           `
         );
 
@@ -290,8 +290,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about'>About</LinkTo>
-          <LinkTo @id='self-link' @route='index' @activeClass={{activeClass}}>Self</LinkTo>
+          <LinkTo id='about-link' @route='about'>About</LinkTo>
+          <LinkTo id='self-link' @route='index' @activeClass={{activeClass}}>Self</LinkTo>
           `
         );
 
@@ -325,7 +325,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about' @classNameBindings='foo:foo-is-true:foo-is-false'>About</LinkTo>
+          <LinkTo id='about-link' @route='about' @classNameBindings='foo:foo-is-true:foo-is-false'>About</LinkTo>
           `
         );
 
@@ -388,16 +388,16 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about'>About</LinkTo>
-          <LinkTo @id='self-link' @route='index'>Self</LinkTo>
+          <LinkTo id='about-link' @route='about'>About</LinkTo>
+          <LinkTo id='self-link' @route='index'>Self</LinkTo>
           `
         );
         this.addTemplate(
           'about',
           `
           <h3 class="about">About</h3>
-          <LinkTo @id='home-link' @route='index'>Home</LinkTo>
-          <LinkTo @id='self-link' @route='about'>Self</LinkTo>
+          <LinkTo id='home-link' @route='index'>Home</LinkTo>
+          <LinkTo id='self-link' @route='about'>Self</LinkTo>
           `
         );
       }
@@ -414,7 +414,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about' @replace={{true}}>About</LinkTo>
+          <LinkTo id='about-link' @route='about' @replace={{true}}>About</LinkTo>
           `
         );
 
@@ -443,7 +443,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about' @replace={{boundTruthyThing}}>About</LinkTo>
+          <LinkTo id='about-link' @route='about' @replace={{boundTruthyThing}}>About</LinkTo>
           `
         );
 
@@ -477,7 +477,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about' replace={{boundFalseyThing}}>About</LinkTo>
+          <LinkTo id='about-link' @route='about' replace={{boundFalseyThing}}>About</LinkTo>
           `
         );
 
@@ -523,16 +523,16 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
             'index',
             `
             <h3 class="home">Home</h3>
-            <LinkTo @id='about-link' @route='about'>About</LinkTo>
-            <LinkTo @id='self-link' @route='index'>Self</LinkTo>
+            <LinkTo id='about-link' @route='about'>About</LinkTo>
+            <LinkTo id='self-link' @route='index'>Self</LinkTo>
             `
           );
           this.addTemplate(
             'about',
             `
             <h3 class="about">About</h3>
-            <LinkTo @id='home-link' @route='index'>Home</LinkTo>
-            <LinkTo @id='self-link' @route='about'>Self</LinkTo>
+            <LinkTo id='home-link' @route='index'>Home</LinkTo>
+            <LinkTo id='self-link' @route='about'>Self</LinkTo>
             `
           );
         }
@@ -633,7 +633,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);
         this.addTemplate(
           'index.about',
-          `<LinkTo @id='other-link' @route='item' @current-when='index'>ITEM</LinkTo>`
+          `<LinkTo id='other-link' @route='item' @current-when='index'>ITEM</LinkTo>`
         );
 
         return this.visit('/about').then(() => {
@@ -661,7 +661,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);
         this.addTemplate(
           'index.about',
-          `<LinkTo @id='other-link' @route='items' @current-when='index'>ITEM</LinkTo>`
+          `<LinkTo id='other-link' @route='items' @current-when='index'>ITEM</LinkTo>`
         );
 
         return this.visit('/about').then(() => {
@@ -696,7 +696,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);
         this.addTemplate(
           'index.about',
-          `<LinkTo @id='other-link' @route='items' @current-when={{currentWhen}}>ITEM</LinkTo>`
+          `<LinkTo id='other-link' @route='items' @current-when={{currentWhen}}>ITEM</LinkTo>`
         );
 
         return this.visit('/about').then(() => {
@@ -720,15 +720,15 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);
         this.addTemplate(
           'index.about',
-          `<LinkTo @id='link1' @route='item' @current-when='item index'>ITEM</LinkTo>`
+          `<LinkTo id='link1' @route='item' @current-when='item index'>ITEM</LinkTo>`
         );
         this.addTemplate(
           'item',
-          `<LinkTo @id='link2' @route='item' @current-when='item index'>ITEM</LinkTo>`
+          `<LinkTo id='link2' @route='item' @current-when='item index'>ITEM</LinkTo>`
         );
         this.addTemplate(
           'foo',
-          `<LinkTo @id='link3' @route='item' @current-when='item index'>ITEM</LinkTo>`
+          `<LinkTo id='link3' @route='item' @current-when='item index'>ITEM</LinkTo>`
         );
 
         return this.visit('/about')
@@ -770,8 +770,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index.about',
           `
-          <LinkTo @id='index-link' @route='index' @current-when={{isCurrent}}>ITEM</LinkTo>
-          <LinkTo @id='about-link' @route='item' @current-when={{true}}>ITEM</LinkTo>
+          <LinkTo id='index-link' @route='index' @current-when={{isCurrent}}>ITEM</LinkTo>
+          <LinkTo id='about-link' @route='item' @current-when={{true}}>ITEM</LinkTo>
           `
         );
 
@@ -802,7 +802,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'about',
           `
           <div {{action 'hide'}}>
-            <LinkTo @id='about-contact' @route='about.contact'>About</LinkTo>
+            <LinkTo id='about-contact' @route='about.contact'>About</LinkTo>
           </div>
           {{outlet}}
           `
@@ -845,7 +845,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'about',
           `
           <div {{action 'hide'}}>
-            <LinkTo @id='about-contact' @route='about.contact' @bubbles={{false}}>
+            <LinkTo id='about-contact' @route='about.contact' @bubbles={{false}}>
               About
             </LinkTo>
           </div>
@@ -890,7 +890,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'about',
           `
           <div {{action 'hide'}}>
-            <LinkTo @id='about-contact' @route='about.contact' @bubbles={{boundFalseyThing}}>
+            <LinkTo id='about-contact' @route='about.contact' @bubbles={{boundFalseyThing}}>
               About
             </LinkTo>
           </div>
@@ -949,13 +949,13 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           <ul>
             {{#each model as |person|}}
               <li>
-                <LinkTo @id={{person.id}} @route='item' @model={{person}}>
+                <LinkTo id={{person.id}} @route='item' @model={{person}}>
                   {{person.name}}
                 </LinkTo>
               </li>
             {{/each}}
           </ul>
-          <LinkTo @id='home-link' @route='index'>Home</LinkTo>
+          <LinkTo id='home-link' @route='index'>Home</LinkTo>
           `
         );
 
@@ -964,7 +964,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           `
           <h3 class="item">Item</h3>
           <p>{{model.name}}</p>
-          <LinkTo @id='home-link' @route='index'>Home</LinkTo>
+          <LinkTo id='home-link' @route='index'>Home</LinkTo>
           `
         );
 
@@ -972,7 +972,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='about-link' @route='about'>About</LinkTo>
+          <LinkTo id='about-link' @route='about'>About</LinkTo>
           `
         );
 
@@ -1027,7 +1027,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='self-link' @route='index' title='title-attr' rel='rel-attr' tabindex='-1'>
+          <LinkTo id='self-link' @route='index' title='title-attr' rel='rel-attr' tabindex='-1'>
             Self
           </LinkTo>
           `
@@ -1046,7 +1046,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='self-link' @route='index' target='_blank'>Self</LinkTo>
+          <LinkTo id='self-link' @route='index' target='_blank'>Self</LinkTo>
           `
         );
 
@@ -1063,7 +1063,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='self-link' @route='index' target={{boundLinkTarget}}>Self</LinkTo>
+          <LinkTo id='self-link' @route='index' target={{boundLinkTarget}}>Self</LinkTo>
           `
         );
 
@@ -1085,7 +1085,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           this.route('about');
         });
 
-        this.addTemplate('index', `<LinkTo @route='about' @id='about-link'>About</LinkTo>`);
+        this.addTemplate('index', `<LinkTo @route='about' id='about-link'>About</LinkTo>`);
 
         return this.visit('/').then(() => {
           assertNav({ prevented: true }, () => this.$('#about-link').click(), assert);
@@ -1101,7 +1101,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
         this.addTemplate(
           'index',
-          `<LinkTo @id='about-link' @route='about' @preventDefault={{false}}>About</LinkTo>`
+          `<LinkTo id='about-link' @route='about' @preventDefault={{false}}>About</LinkTo>`
         );
 
         return this.visit('/').then(() => {
@@ -1118,7 +1118,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
         this.addTemplate(
           'index',
-          `<LinkTo @id='about-link' @route='about' @preventDefault={{boundFalseyThing}}>About</LinkTo>`
+          `<LinkTo id='about-link' @route='about' @preventDefault={{boundFalseyThing}}>About</LinkTo>`
         );
 
         this.add(
@@ -1140,7 +1140,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='self-link' @route='index' target='_blank'>Self</LinkTo>
+          <LinkTo id='self-link' @route='index' target='_blank'>Self</LinkTo>
           `
         );
 
@@ -1154,7 +1154,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id='self-link' @route='index' target='_self'>Self</LinkTo>
+          <LinkTo id='self-link' @route='index' target='_self'>Self</LinkTo>
           `
         );
 
@@ -1169,7 +1169,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id='about-link' @route='about' @replace={{true}} target='_blank'>
+          <LinkTo id='about-link' @route='about' @replace={{true}} target='_blank'>
             About
           </LinkTo>
           `
@@ -1215,11 +1215,11 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'filter',
           `
           <p>{{filter}}</p>
-          <LinkTo @id="link" @route="filter" @model="unpopular">Unpopular</LinkTo>
-          <LinkTo @id="path-link" @route="filter" @model={{filter}}>Unpopular</LinkTo>
-          <LinkTo @id="post-path-link" @route="post" @model={{post_id}}>Post</LinkTo>
-          <LinkTo @id="post-number-link" @route="post" @model={{123}}>Post</LinkTo>
-          <LinkTo @id="repo-object-link" @route="repo" @model={{repo}}>Repo</LinkTo>
+          <LinkTo id="link" @route="filter" @model="unpopular">Unpopular</LinkTo>
+          <LinkTo id="path-link" @route="filter" @model={{filter}}>Unpopular</LinkTo>
+          <LinkTo id="post-path-link" @route="post" @model={{post_id}}>Post</LinkTo>
+          <LinkTo id="post-number-link" @route="post" @model={{123}}>Post</LinkTo>
+          <LinkTo id="repo-object-link" @route="repo" @model={{repo}}>Repo</LinkTo>
           `
         );
 
@@ -1258,12 +1258,12 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
         this.addTemplate(
           'lobby.index',
-          `<LinkTo @id='lobby-link' @route='lobby' @model='foobar'>Lobby</LinkTo>`
+          `<LinkTo id='lobby-link' @route='lobby' @model='foobar'>Lobby</LinkTo>`
         );
 
         this.addTemplate(
           'lobby.list',
-          `<LinkTo @id='lobby-link' @route='lobby' @model='foobar'>Lobby</LinkTo>`
+          `<LinkTo id='lobby-link' @route='lobby' @model='foobar'>Lobby</LinkTo>`
         );
 
         return this.visit('/lobby/list')
@@ -1279,8 +1279,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id='string-link' @route='index'>string</LinkTo>
-          <LinkTo @id='path-link' @route={{foo}}>path</LinkTo>
+          <LinkTo id='string-link' @route='index'>string</LinkTo>
+          <LinkTo id='path-link' @route={{foo}}>path</LinkTo>
           `
         );
 
@@ -1314,7 +1314,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         let post = { id: '1' };
         let secondPost = { id: '2' };
 
-        this.addTemplate('index', `<LinkTo @id="post" @route="post" @model={{post}}>post</LinkTo>`);
+        this.addTemplate('index', `<LinkTo id="post" @route="post" @model={{post}}>post</LinkTo>`);
 
         this.add('controller:index', Controller.extend());
 
@@ -1357,8 +1357,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'about',
           `
           <div id='about'>
-            <LinkTo @id='about-link' @route='about'>About</LinkTo>
-            <LinkTo @id='item-link' @route='about.item'>Item</LinkTo>
+            <LinkTo id='about-link' @route='about'>About</LinkTo>
+            <LinkTo id='item-link' @route='about.item'>Item</LinkTo>
             {{outlet}}
           </div>
           `
@@ -1462,10 +1462,10 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'application',
           `
-          <LinkTo @id='home-link' @route='index'>Home</LinkTo>
-          <LinkTo @id='default-post-link' @route='post' @model={{defaultPost}}>Default Post</LinkTo>
+          <LinkTo id='home-link' @route='index'>Home</LinkTo>
+          <LinkTo id='default-post-link' @route='post' @model={{defaultPost}}>Default Post</LinkTo>
           {{#if currentPost}}
-            <LinkTo @id='current-post-link' @route='post' @model={{currentPost}}>Current Post</LinkTo>
+            <LinkTo id='current-post-link' @route='post' @model={{currentPost}}>Current Post</LinkTo>
           {{/if}}
           `
         );
@@ -1512,8 +1512,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'application',
           `
-          <LinkTo @id='omg-link' @route='things' @model='omg'>OMG</LinkTo>
-          <LinkTo @id='lol-link' @route='things' @model='lol'>LOL</LinkTo>
+          <LinkTo id='omg-link' @route='things' @model='omg'>OMG</LinkTo>
+          <LinkTo id='lol-link' @route='things' @model='lol'>LOL</LinkTo>
           `
         );
 
@@ -1541,7 +1541,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           })
         );
 
-        this.addTemplate('index', `<LinkTo @id='the-link' @route='index'>Index</LinkTo>`);
+        this.addTemplate('index', `<LinkTo id='the-link' @route='index'>Index</LinkTo>`);
 
         return this.visit('/').then(() => {
           assert.equal(this.$('#the-link').attr('href'), '/', 'link has right href');
@@ -1561,7 +1561,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
         this.addTemplate(
           'index',
-          `<LinkTo @id='the-link' @route='index' @query={{hash}}>Index</LinkTo>`
+          `<LinkTo id='the-link' @route='index' @query={{hash}}>Index</LinkTo>`
         );
 
         return this.visit('/').then(() => {
@@ -1587,7 +1587,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
         this.addTemplate(
           'application',
-          `<LinkTo @id='the-link' @query={{hash foo='456' bar='NAW'}}>Index</LinkTo>`
+          `<LinkTo id='the-link' @query={{hash foo='456' bar='NAW'}}>Index</LinkTo>`
         );
 
         return this.visit('/')
@@ -1667,7 +1667,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'index',
           `
           <h3 class="home">Home</h3>
-          <LinkTo @id="dynamic-link" @params={{dynamicLinkParams}}>Dynamic</LinkTo>
+          <LinkTo id="dynamic-link" @params={{dynamicLinkParams}}>Dynamic</LinkTo>
           `
         );
 
@@ -1705,10 +1705,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           })
         );
 
-        this.addTemplate(
-          'application',
-          `<LinkTo @id='parent-link' @route='parent'>Parent</LinkTo>`
-        );
+        this.addTemplate('application', `<LinkTo id='parent-link' @route='parent'>Parent</LinkTo>`);
 
         return this.visit('/')
           .then(() => {
@@ -1739,10 +1736,10 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         this.addTemplate(
           'index',
           `
-          <LinkTo @id='context-link' @route={{destinationRoute}} @model={{routeContext}} @loadingClass='i-am-loading'>
+          <LinkTo id='context-link' @route={{destinationRoute}} @model={{routeContext}} @loadingClass='i-am-loading'>
             string
           </LinkTo>
-          <LinkTo @id='static-link' @route={{secondRoute}} @loadingClass={{loadingClass}}>
+          <LinkTo id='static-link' @route={{secondRoute}} @loadingClass={{loadingClass}}>
             string
           </LinkTo>
           `
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/transitioning-classes-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/transitioning-classes-angle-test.js
index dc1306c5f67..2d1ffb92fa0 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/link-to/transitioning-classes-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/link-to/transitioning-classes-angle-test.js
@@ -66,10 +66,10 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           'application',
           `
           {{outlet}}
-          <LinkTo @id='index-link' @route='index'>Index</LinkTo>
-          <LinkTo @id='about-link' @route='about'>About</LinkTo>
-          <LinkTo @id='other-link' @route='other'>Other</LinkTo>
-          <LinkTo @id='news-link' @route='news' @activeClass={{false}}>News</LinkTo>
+          <LinkTo id='index-link' @route='index'>Index</LinkTo>
+          <LinkTo id='about-link' @route='about'>About</LinkTo>
+          <LinkTo id='other-link' @route='other'>Other</LinkTo>
+          <LinkTo id='news-link' @route='news' @activeClass={{false}}>News</LinkTo>
           `
         );
       }
@@ -193,13 +193,13 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           `
           {{outlet}}
           <LinkTo @tagName='li' @route='index'>
-            <LinkTo @id='index-link' @route='index'>Index</LinkTo>
+            <LinkTo id='index-link' @route='index'>Index</LinkTo>
           </LinkTo>
           <LinkTo @tagName='li' @route='parent-route.about'>
-            <LinkTo @id='about-link' @route='parent-route.about'>About</LinkTo>
+            <LinkTo id='about-link' @route='parent-route.about'>About</LinkTo>
           </LinkTo>
           <LinkTo @tagName='li' @route='parent-route.other'>
-            <LinkTo @id='other-link' @route='parent-route.other'>Other</LinkTo>
+            <LinkTo id='other-link' @route='parent-route.other'>Other</LinkTo>
           </LinkTo>
           `
         );

From d1688b5234ff51dfdd77637e3dd4d2d7a3834856 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Wed, 27 Mar 2019 13:17:14 -0400
Subject: [PATCH 4/4] export getElementView

---
 packages/ember/index.js                | 1 +
 packages/ember/tests/reexports_test.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/ember/index.js b/packages/ember/index.js
index 6125477d372..fdda6f97ecc 100644
--- a/packages/ember/index.js
+++ b/packages/ember/index.js
@@ -588,6 +588,7 @@ if (JQUERY_INTEGRATION && !views.jQueryDisabled) {
 
 Ember.ViewUtils = {
   isSimpleClick: views.isSimpleClick,
+  getElementView: views.getElementView,
   getViewElement: views.getViewElement,
   getViewBounds: views.getViewBounds,
   getViewClientRects: views.getViewClientRects,
diff --git a/packages/ember/tests/reexports_test.js b/packages/ember/tests/reexports_test.js
index 882914b7167..62d310aa4be 100644
--- a/packages/ember/tests/reexports_test.js
+++ b/packages/ember/tests/reexports_test.js
@@ -194,6 +194,7 @@ let allExports = [
 
   // @ember/-internals/views
   ['ViewUtils.isSimpleClick', '@ember/-internals/views', 'isSimpleClick'],
+  ['ViewUtils.getElementView', '@ember/-internals/views', 'getElementView'],
   ['ViewUtils.getViewElement', '@ember/-internals/views', 'getViewElement'],
   ['ViewUtils.getViewBounds', '@ember/-internals/views', 'getViewBounds'],
   ['ViewUtils.getViewClientRects', '@ember/-internals/views', 'getViewClientRects'],