ember-source 3.28.5 → 4.0.0-beta.10

package/dist/packages/@ember/-internals/views/lib/system/event_dispatcher.js

@@ -1,24 +1,15 @@
 import { getOwner } from '@ember/-internals/owner';
-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 addJQueryEventDeprecation from './jquery_event_deprecation';
-import { contains } from './utils';
-import { JQUERY_INTEGRATION, MOUSE_ENTER_LEAVE_MOVE_EVENTS } from '@ember/deprecated-features';
 /**
 @module ember
 */
 
 const ROOT_ELEMENT_CLASS = 'ember-application';
 const ROOT_ELEMENT_SELECTOR = `.${ROOT_ELEMENT_CLASS}`;
-const EVENT_MAP = {
-  mouseenter: 'mouseover',
-  mouseleave: 'mouseout'
-};
 /**
   `Ember.EventDispatcher` handles delegating browser events to their
   corresponding `Ember.Views.` For example, when you click on a view,
@@ -59,7 +50,7 @@ export default EmberObject.extend({
     @type Object
     @private
   */
-  events: assign({
+  events: {
     touchstart: 'touchStart',
     touchmove: 'touchMove',
     touchend: 'touchEnd',
@@ -84,11 +75,7 @@ export default EmberObject.extend({
     dragover: 'dragOver',
     drop: 'drop',
     dragend: 'dragEnd'
-  }, MOUSE_ENTER_LEAVE_MOVE_EVENTS ? {
-    mouseenter: 'mouseEnter',
-    mouseleave: 'mouseLeave',
-    mousemove: 'mouseMove'
-  } : {}),
+  },
 
   /**
     The root DOM element to which event listeners should be attached. Event
@@ -108,6 +95,9 @@ export default EmberObject.extend({
 
     this._eventHandlers = Object.create(null);
     this._didSetup = false;
+    this.finalEventNameMapping = null;
+    this._sanitizedRootElement = null;
+    this.lazyEvents = new Map();
   },
 
   /**
@@ -126,7 +116,11 @@ export default EmberObject.extend({
       let environment = owner.lookup('-environment:main');
       return environment.isInteractive;
     })());
-    let events = this._finalEvents = assign({}, get(this, 'events'), addedEvents);
+    let events = this.finalEventNameMapping = Object.assign({}, get(this, 'events'), addedEvents);
+    this._reverseEventNameMapping = Object.keys(events).reduce((result, key) => Object.assign(result, {
+      [events[key]]: key
+    }), {});
+    let lazyEvents = this.lazyEvents;
 
     if (_rootElement !== undefined && _rootElement !== null) {
       set(this, 'rootElement', _rootElement);
@@ -135,51 +129,61 @@ export default EmberObject.extend({
     let rootElementSelector = get(this, 'rootElement');
     let rootElement;
 
-    if (!JQUERY_INTEGRATION || jQueryDisabled) {
-      if (typeof rootElementSelector !== 'string') {
-        rootElement = rootElementSelector;
-      } else {
-        rootElement = document.querySelector(rootElementSelector);
-      }
+    if (typeof rootElementSelector !== 'string') {
+      rootElement = rootElementSelector;
+    } else {
+      rootElement = document.querySelector(rootElementSelector);
+    }
 
-      assert(`You cannot use the same root element (${get(this, 'rootElement') || rootElement.tagName}) multiple times in an Ember.Application`, !rootElement.classList.contains(ROOT_ELEMENT_CLASS));
-      assert('You cannot make a new Ember.Application using a root element that is a descendent of an existing Ember.Application', (() => {
-        let target = rootElement.parentNode;
+    assert(`You cannot use the same root element (${get(this, 'rootElement') || rootElement.tagName}) multiple times in an Ember.Application`, !rootElement.classList.contains(ROOT_ELEMENT_CLASS));
+    assert('You cannot make a new Ember.Application using a root element that is a descendent of an existing Ember.Application', (() => {
+      let target = rootElement.parentNode;
 
-        do {
-          if (target.classList.contains(ROOT_ELEMENT_CLASS)) {
-            return false;
-          }
+      do {
+        if (target.classList.contains(ROOT_ELEMENT_CLASS)) {
+          return false;
+        }
 
-          target = target.parentNode;
-        } while (target && target.nodeType === 1);
+        target = target.parentNode;
+      } while (target && target.nodeType === 1);
 
-        return true;
-      })());
-      assert('You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application', !rootElement.querySelector(ROOT_ELEMENT_SELECTOR));
-      rootElement.classList.add(ROOT_ELEMENT_CLASS);
-      assert(`Unable to add '${ROOT_ELEMENT_CLASS}' class to root element (${get(this, 'rootElement') || rootElement.tagName}). Make sure you set rootElement to the body or an element in the body.`, rootElement.classList.contains(ROOT_ELEMENT_CLASS));
-    } else {
-      rootElement = jQuery(rootElementSelector);
-      assert(`You cannot use the same root element (${rootElement.selector || rootElement[0].tagName}) multiple times in an Ember.Application`, !rootElement.is(ROOT_ELEMENT_SELECTOR));
-      assert('You cannot make a new Ember.Application using a root element that is a descendent of an existing Ember.Application', !rootElement.closest(ROOT_ELEMENT_SELECTOR).length);
-      assert('You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application', !rootElement.find(ROOT_ELEMENT_SELECTOR).length);
-      rootElement.addClass(ROOT_ELEMENT_CLASS);
-
-      if (!rootElement.is(ROOT_ELEMENT_SELECTOR)) {
-        throw new TypeError(`Unable to add '${ROOT_ELEMENT_CLASS}' class to root element (${rootElement.selector || rootElement[0].tagName}). Make sure you set rootElement to the body or an element in the body.`);
-      }
-    }
+      return true;
+    })());
+    assert('You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application', !rootElement.querySelector(ROOT_ELEMENT_SELECTOR));
+    rootElement.classList.add(ROOT_ELEMENT_CLASS);
+    assert(`Unable to add '${ROOT_ELEMENT_CLASS}' class to root element (${get(this, 'rootElement') || rootElement.tagName}). Make sure you set rootElement to the body or an element in the body.`, rootElement.classList.contains(ROOT_ELEMENT_CLASS)); // save off the final sanitized root element (for usage in setupHandler)
+
+    this._sanitizedRootElement = rootElement; // setup event listeners for the non-lazily setup events
 
     for (let event in events) {
       if (Object.prototype.hasOwnProperty.call(events, event)) {
-        this.setupHandler(rootElement, event, events[event]);
+        lazyEvents.set(event, events[event]);
       }
     }
 
     this._didSetup = true;
   },
 
+  /**
+    Setup event listeners for the given browser event name
+     @private
+    @method setupHandlerForBrowserEvent
+    @param event the name of the event in the browser
+  */
+  setupHandlerForBrowserEvent(event) {
+    this.setupHandler(this._sanitizedRootElement, event, this.finalEventNameMapping[event]);
+  },
+
+  /**
+    Setup event listeners for the given Ember event name (camel case)
+     @private
+    @method setupHandlerForEmberEvent
+    @param eventName
+  */
+  setupHandlerForEmberEvent(eventName) {
+    this.setupHandler(this._sanitizedRootElement, this._reverseEventNameMapping[eventName], eventName);
+  },
+
   /**
     Registers an event listener on the rootElement. If the given event is
     triggered, the provided event handler will be triggered on the target view.
@@ -189,167 +193,92 @@ export default EmberObject.extend({
      @private
     @method setupHandler
     @param {Element} rootElement
-    @param {String} event the browser-originated event to listen to
+    @param {String} event the name of the event in the browser
     @param {String} eventName the name of the method to call on the view
   */
   setupHandler(rootElement, event, eventName) {
-    if (eventName === null) {
-      return;
+    if (eventName === null || !this.lazyEvents.has(event)) {
+      return; // nothing to do
     }
 
-    if (!JQUERY_INTEGRATION || jQueryDisabled) {
-      let viewHandler = (target, event) => {
-        let view = getElementView(target);
-        let result = true;
-
-        if (view) {
-          result = view.handleEvent(eventName, event);
-        }
-
-        return result;
-      };
+    let viewHandler = (target, event) => {
+      let view = getElementView(target);
+      let result = true;
 
-      let actionHandler = (target, event) => {
-        let actionId = target.getAttribute('data-ember-action');
-        let actions = ActionManager.registeredActions[actionId]; // In Glimmer2 this attribute is set to an empty string and an additional
-        // attribute it set for each action on a given element. In this case, the
-        // attributes need to be read so that a proper set of action handlers can
-        // be coalesced.
-
-        if (actionId === '') {
-          let attributes = target.attributes;
-          let attributeCount = attributes.length;
-          actions = [];
-
-          for (let i = 0; i < attributeCount; i++) {
-            let attr = attributes.item(i);
-            let attrName = attr.name;
-
-            if (attrName.indexOf('data-ember-action-') === 0) {
-              actions = actions.concat(ActionManager.registeredActions[attr.value]);
-            }
-          }
-        } // We have to check for actions here since in some cases, jQuery will trigger
-        // an event on `removeChild` (i.e. focusout) after we've already torn down the
-        // action handlers for the view.
+      if (view) {
+        result = view.handleEvent(eventName, event);
+      }
 
+      return result;
+    };
 
-        if (!actions) {
-          return;
-        }
+    let actionHandler = (target, event) => {
+      let actionId = target.getAttribute('data-ember-action');
+      let actions = ActionManager.registeredActions[actionId]; // In Glimmer2 this attribute is set to an empty string and an additional
+      // attribute it set for each action on a given element. In this case, the
+      // attributes need to be read so that a proper set of action handlers can
+      // be coalesced.
 
-        let result = true;
+      if (actionId === '') {
+        let attributes = target.attributes;
+        let attributeCount = attributes.length;
+        actions = [];
 
-        for (let index = 0; index < actions.length; index++) {
-          let action = actions[index];
+        for (let i = 0; i < attributeCount; i++) {
+          let attr = attributes.item(i);
+          let attrName = attr.name;
 
-          if (action && action.eventName === eventName) {
-            // return false if any of the action handlers returns false
-            result = action.handler(event) && result;
+          if (attrName.indexOf('data-ember-action-') === 0) {
+            actions = actions.concat(ActionManager.registeredActions[attr.value]);
           }
         }
-
-        return result;
-      }; // Special handling of events that don't bubble (event delegation does not work).
-      // Mimics the way this is handled in jQuery,
-      // see https://github.com/jquery/jquery/blob/899c56f6ada26821e8af12d9f35fa039100e838e/src/event.js#L666-L700
+      } // We have to check for actions here since in some cases, jQuery will trigger
+      // an event on `removeChild` (i.e. focusout) after we've already torn down the
+      // action handlers for the view.
 
 
-      if (MOUSE_ENTER_LEAVE_MOVE_EVENTS && EVENT_MAP[event] !== undefined) {
-        let mappedEventType = EVENT_MAP[event];
-        let origEventType = event;
+      if (!actions) {
+        return;
+      }
 
-        let createFakeEvent = (eventType, event) => {
-          let fakeEvent = document.createEvent('MouseEvent');
-          fakeEvent.initMouseEvent(eventType, false, false, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget); // fake event.target as we don't dispatch the event
+      let result = true;
 
-          Object.defineProperty(fakeEvent, 'target', {
-            value: event.target,
-            enumerable: true
-          });
-          return fakeEvent;
-        };
+      for (let index = 0; index < actions.length; index++) {
+        let action = actions[index];
 
-        let handleMappedEvent = this._eventHandlers[mappedEventType] = event => {
-          let target = event.target;
-          let related = event.relatedTarget;
+        if (action && action.eventName === eventName) {
+          // return false if any of the action handlers returns false
+          result = action.handler(event) && result;
+        }
+      }
 
-          while (target && target.nodeType === 1 && (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 (getElementView(target)) {
-              viewHandler(target, createFakeEvent(origEventType, event));
-            } else if (target.hasAttribute('data-ember-action')) {
-              actionHandler(target, createFakeEvent(origEventType, event));
-            } // separate mouseEnter/Leave events are dispatched for each listening element
-            // until the element (related) has been reached that the pointing device exited from/to
+      return result;
+    };
 
+    let handleEvent = this._eventHandlers[event] = event => {
+      let target = event.target;
 
-            target = target.parentNode;
+      do {
+        if (getElementView(target)) {
+          if (viewHandler(target, event) === false) {
+            event.preventDefault();
+            event.stopPropagation();
+            break;
+          } else if (event.cancelBubble === true) {
+            break;
+          }
+        } else if (typeof target.hasAttribute === 'function' && target.hasAttribute('data-ember-action')) {
+          if (actionHandler(target, event) === false) {
+            break;
           }
-        };
-
-        rootElement.addEventListener(mappedEventType, handleMappedEvent);
-      } else {
-        let handleEvent = this._eventHandlers[event] = event => {
-          let target = event.target;
-
-          do {
-            if (getElementView(target)) {
-              if (viewHandler(target, event) === false) {
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-              } else if (event.cancelBubble === true) {
-                break;
-              }
-            } else if (typeof target.hasAttribute === 'function' && target.hasAttribute('data-ember-action')) {
-              if (actionHandler(target, event) === false) {
-                break;
-              }
-            }
-
-            target = target.parentNode;
-          } while (target && target.nodeType === 1);
-        };
-
-        rootElement.addEventListener(event, handleEvent);
-      }
-    } else {
-      rootElement.on(`${event}.ember`, '.ember-view', function (evt) {
-        let view = getElementView(this);
-        let result = true;
-
-        if (view) {
-          result = view.handleEvent(eventName, addJQueryEventDeprecation(evt));
         }
 
-        return result;
-      });
-      rootElement.on(`${event}.ember`, '[data-ember-action]', evt => {
-        let attributes = evt.currentTarget.attributes;
-        let handledActions = [];
-        evt = addJQueryEventDeprecation(evt);
-
-        for (let i = 0; i < attributes.length; i++) {
-          let attr = attributes.item(i);
-          let attrName = attr.name;
-
-          if (attrName.lastIndexOf('data-ember-action-', 0) !== -1) {
-            let action = ActionManager.registeredActions[attr.value]; // We have to check for action here since in some cases, jQuery will trigger
-            // an event on `removeChild` (i.e. focusout) after we've already torn down the
-            // action handlers for the view.
+        target = target.parentNode;
+      } while (target && target.nodeType === 1);
+    };
 
-            if (action && action.eventName === eventName && handledActions.indexOf(action) === -1) {
-              action.handler(evt); // Action handlers can mutate state which in turn creates new attributes on the element.
-              // This effect could cause the `data-ember-action` attribute to shift down and be invoked twice.
-              // To avoid this, we keep track of which actions have been handled.
-
-              handledActions.push(action);
-            }
-          }
-        }
-      });
-    }
+    rootElement.addEventListener(event, handleEvent);
+    this.lazyEvents.delete(event);
   },
 
   destroy() {
@@ -370,12 +299,8 @@ export default EmberObject.extend({
       return;
     }
 
-    if (!JQUERY_INTEGRATION || jQueryDisabled) {
-      for (let event in this._eventHandlers) {
-        rootElement.removeEventListener(event, this._eventHandlers[event]);
-      }
-    } else {
-      jQuery(rootElementSelector).off('.ember', '**');
+    for (let event in this._eventHandlers) {
+      rootElement.removeEventListener(event, this._eventHandlers[event]);
     }
 
     rootElement.classList.remove(ROOT_ELEMENT_CLASS);

package/dist/packages/@ember/-internals/views/lib/views/states/destroying.js

@@ -1,7 +1,6 @@
-import { assign } from '@ember/polyfills';
 import EmberError from '@ember/error';
 import _default from './default';
-const destroying = assign({}, _default, {
+const destroying = Object.assign({}, _default, {
   appendChild() {
     throw new EmberError("You can't call appendChild on a view being destroyed");
   },

package/dist/packages/@ember/-internals/views/lib/views/states/has_element.js

@@ -1,8 +1,7 @@
-import { assign } from '@ember/polyfills';
 import _default from './default';
 import { join } from '@ember/runloop';
 import { flaggedInstrument } from '@ember/instrumentation';
-const hasElement = assign({}, _default, {
+const hasElement = Object.assign({}, _default, {
   rerender(view) {
     view.renderer.rerender(view);
   },

package/dist/packages/@ember/-internals/views/lib/views/states/in_dom.js

@@ -1,9 +1,8 @@
 import { teardownMandatorySetter } from '@ember/-internals/utils';
-import { assign } from '@ember/polyfills';
 import EmberError from '@ember/error';
 import { DEBUG } from '@glimmer/env';
 import hasElement from './has_element';
-const inDOM = assign({}, hasElement, {
+const inDOM = Object.assign({}, hasElement, {
   enter(view) {
     // Register the view for event handling. This hash is used by
     // Ember.EventDispatcher to dispatch incoming events.

package/dist/packages/@ember/-internals/views/lib/views/states/pre_render.js

@@ -1,4 +1,3 @@
 import _default from './default';
-import { assign } from '@ember/polyfills';
-const preRender = assign({}, _default);
+const preRender = Object.assign({}, _default);
 export default Object.freeze(preRender);

package/dist/packages/@ember/application/instance.js

@@ -1,10 +1,8 @@
 /**
 @module @ember/application
 */
-import { assign } from '@ember/polyfills';
 import { get, set, computed } from '@ember/-internals/metal';
 import * as environment from '@ember/-internals/browser-environment';
-import { jQuery } from '@ember/-internals/views';
 import EngineInstance from '@ember/engine/instance';
 import { renderSettled } from '@ember/-internals/glimmer';
 /**
@@ -53,8 +51,7 @@ const ApplicationInstance = EngineInstance.extend({
 
   /**
     The root DOM element of the Application as an element or a
-    [jQuery-compatible selector
-    string](http://api.jquery.com/category/selectors/).
+    CSS selector.
      @private
     @property {String|DOMElement} rootElement
   */
@@ -184,7 +181,7 @@ const ApplicationInstance = EngineInstance.extend({
     let dispatcher = this.lookup('event_dispatcher:main');
     let applicationCustomEvents = get(this.application, 'customEvents');
     let instanceCustomEvents = get(this, 'customEvents');
-    let customEvents = assign({}, applicationCustomEvents, instanceCustomEvents);
+    let customEvents = Object.assign({}, applicationCustomEvents, instanceCustomEvents);
     dispatcher.setup(customEvents, this.rootElement);
     return dispatcher;
   },
@@ -303,18 +300,6 @@ ApplicationInstance.reopenClass({
 
 class BootOptions {
   constructor(options = {}) {
-    /**
-      Provide a specific instance of jQuery. This is useful in conjunction with
-      the `document` option, as it allows you to use a copy of `jQuery` that is
-      appropriately bound to the foreign `document` (e.g. a jsdom).
-       This is highly experimental and support very incomplete at the moment.
-       @property jQuery
-      @type Object
-      @default auto-detected
-      @private
-    */
-    this.jQuery = jQuery; // This default is overridable below
-
     /**
       Interactive mode: whether we need to set up event delegation and invoke
       lifecycle callbacks on Components.
@@ -323,7 +308,6 @@ class BootOptions {
       @default auto-detected
       @private
     */
-
     this.isInteractive = environment.hasDOM; // This default is overridable below
 
     /**
@@ -360,7 +344,6 @@ class BootOptions {
     }
 
     if (!this.isBrowser) {
-      this.jQuery = null;
       this.isInteractive = false;
       this.location = 'none';
     }
@@ -383,7 +366,6 @@ class BootOptions {
     }
 
     if (!this.shouldRender) {
-      this.jQuery = null;
       this.isInteractive = false;
     }
     /**
@@ -448,10 +430,6 @@ class BootOptions {
       this.location = options.location;
     }
 
-    if (options.jQuery !== undefined) {
-      this.jQuery = options.jQuery;
-    }
-
     if (options.isInteractive !== undefined) {
       this.isInteractive = Boolean(options.isInteractive);
     }
@@ -459,7 +437,7 @@ class BootOptions {
 
   toEnvironment() {
     // Do we really want to assign all of this!?
-    let env = assign({}, environment); // For compatibility with existing code
+    let env = Object.assign({}, environment); // For compatibility with existing code
 
     env.hasDOM = this.isBrowser;
     env.isInteractive = this.isInteractive;

package/dist/packages/@ember/application/lib/application.js

@@ -10,15 +10,13 @@ import { join, once, run, schedule } from '@ember/runloop';
 import { libraries } from '@ember/-internals/metal';
 import { _loaded, runLoadHooks } from './lazy_load';
 import { RSVP } from '@ember/-internals/runtime';
-import { EventDispatcher, jQuery, jQueryDisabled } from '@ember/-internals/views';
+import { EventDispatcher } from '@ember/-internals/views';
 import { Route, Router, HashLocation, HistoryLocation, AutoLocation, NoneLocation, BucketCache } from '@ember/-internals/routing';
 import ApplicationInstance from '../instance';
 import Engine from '@ember/engine';
 import { privatize as P } from '@ember/-internals/container';
 import { setupApplicationRegistry } from '@ember/-internals/glimmer';
 import { RouterService } from '@ember/-internals/routing';
-import { JQUERY_INTEGRATION } from '@ember/deprecated-features';
-let librariesRegistered = false;
 /**
   An instance of `Application` is the starting point for every Ember
   application. It instantiates, initializes and coordinates the
@@ -112,7 +110,7 @@ let librariesRegistered = false;
   });
   ```
 
-  The `rootElement` can be either a DOM element or a jQuery-compatible selector
+  The `rootElement` can be either a DOM element or a CSS selector
   string. Note that *views appended to the DOM outside the root element will
   not receive events.* If you specify a custom root element, make sure you only
   append views inside it!
@@ -176,8 +174,7 @@ let librariesRegistered = false;
 const Application = Engine.extend({
   /**
     The root DOM element of the Application. This can be specified as an
-    element or a
-    [jQuery-compatible selector string](http://api.jquery.com/category/selectors/).
+    element or a [selector string](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors#reference_table_of_selectors).
      This is the element that will be passed to the Application's,
     `eventDispatcher`, which sets up the listeners for event delegation. Every
     view in your application should be a child of the element you specify here.
@@ -316,12 +313,6 @@ const Application = Engine.extend({
     // eslint-disable-line no-unused-vars
     this._super(...arguments);
 
-    if (!this.$) {
-      this.$ = jQuery;
-    }
-
-    registerLibraries();
-
     if (DEBUG) {
       if (ENV.LOG_VERSION) {
         // we only need to see this once per Application#init
@@ -489,10 +480,10 @@ const Application = Engine.extend({
     import Application from '@ember/application';
      let App = Application.create();
      App.deferReadiness();
-     // $ is a reference to the jQuery object/function
-    import $ from 'jquery;
-     $.getJSON('/auth-token', function(token) {
-      App.token = token;
+     fetch('/auth-token')
+    .then(response => response.json())
+    .then(data => {
+      App.token = data.token;
       App.advanceReadiness();
     });
     ```
@@ -839,7 +830,7 @@ const Application = Engine.extend({
     in the non-browser environment, the stand-in `document` object only needs to
     implement a limited subset of the full DOM API. The `SimpleDOM` library is known
     to work.
-     Since there is no access to jQuery in the non-browser environment, you must also
+     Since there is no DOM access in the non-browser environment, you must also
     specify a DOM `Element` object in the same `document` for the `rootElement` option
     (as opposed to a selector string like `"body"`).
      See the documentation on the `isBrowser`, `document` and `rootElement` properties
@@ -862,7 +853,6 @@ const Application = Engine.extend({
       } else { // node
         application.register('service:network', NodeNetworkService);
       }
-       application.inject('route', 'network', 'service:network');
     };
      export default {
       name: 'network-service',
@@ -871,11 +861,13 @@ const Application = Engine.extend({
     ```
      ```app/routes/post.js
     import Route from '@ember/routing/route';
+    import { inject as service } from '@ember/service';
      // An example of how the (hypothetical) service is used in routes.
-     export default Route.extend({
-      model(params) {
+     export default class IndexRoute extends Route {
+      @service network;
+       model(params) {
         return this.network.fetch(`/api/posts/${params.post_id}.json`);
-      },
+      }
        afterModel(post) {
         if (post.isExternalContent) {
           return this.network.fetch(`/api/external/?url=${post.externalURL}`);
@@ -883,7 +875,7 @@ const Application = Engine.extend({
           return post;
         }
       }
-    });
+    }
     ```
      ```javascript
     // Finally, put all the pieces together
@@ -970,14 +962,4 @@ function commonSetupRegistry(registry) {
   registry.register('service:router', RouterService);
 }
 
-function registerLibraries() {
-  if (!librariesRegistered) {
-    librariesRegistered = true;
-
-    if (JQUERY_INTEGRATION && hasDOM && !jQueryDisabled) {
-      libraries.registerCoreLibrary('jQuery', jQuery().jquery);
-    }
-  }
-}
-
 export default Application;