[Major]: refactor: useRouterService instead of Ember Router (#270)

* chore(deps): upgrade `ember-cli-babel`

This fixes the following error:

```
Build Error (broccoli-persistent-filter:Babel > [Babel: @ember/test-helpers]) in @ember/test-helpers/dom/-is-focusable.js

Cannot find module '@babel/compat-data/corejs3-shipped-proposals'
Require stack:
- /Users/jan/open-source/ember-router-scroll/node_modules/@babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
- /Users/jan/open-source/ember-router-scroll/node_modules/@babel/preset-env/lib/index.js
- /Users/jan/open-source/ember-router-scroll/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/jan/open-source/ember-router-scroll/node_modules/@babel/core/lib/config/files/index.js
- /Users/jan/open-source/ember-router-scroll/node_modules/@babel/core/lib/index.js
- /Users/jan/open-source/ember-router-scroll/node_modules/broccoli-babel-transpiler/lib/worker.js
```

* refactor: first shot at using `RouterService`

* refactor to master

* fix lockfile

* some improvements to tests.  more to go

* fix some tests

* Fix tests

* fix bug in recursive call

* Update docs

* rm deprecation outdated

* Do not need locations/router-scroll

#193

* CHANGELOG 4.0.0

* Update addon/services/router-scroll.js

Co-authored-by: John Leja <[email protected]>

* fix comment

* Address some feedback

* Update addon/services/router-scroll.js

Co-authored-by: Chantal Broeren <[email protected]>

* moar updates

* address moar feedback

Co-authored-by: Jan Buschtöns <[email protected]>
Co-authored-by: John Leja <[email protected]>
Co-authored-by: Chantal Broeren <[email protected]>

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-- Updating to th v3.0 series was due to removing `scrollWhenPainted` as a config option.  Also, we fixed some hidden bugs with scheduling when to scroll to your last y position.
+- Updating to the v3.0 series was due to removing `scrollWhenPainted` as a config option.  Also, we fixed some hidden bugs with scheduling when to scroll to your last y position.
+
+## 4.0.0
+
+- See README for upgrade instructions
+
+* [#270](https://github.com/DockYard/ember-router-scroll/pull/270) [Major]: use`RouterService` instead of Ember `Router`
 
 ## 3.3.5
 * [#269](https://github.com/DockYard/ember-router-scroll/pull/269) [Enhancement]: improve idle case with improved scrollTo under high loads

README.md

@@ -19,8 +19,8 @@ preserved when using the back or forward browser buttons.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v2.18 or above
-* Ember CLI v2.13 or above
+* Ember.js v3.12 or above
+* Ember CLI v3.12 or above
 
 
 Installation
@@ -31,7 +31,22 @@ ember install ember-router-scroll
 ```
 
 
-Usage
+Usage > 4.x
+------------------------------------------------------------------------------
+
+Users do not need to import and extend from `ember-router-scroll` anymore.  In order to upgrade, you should remove this import.
+
+This is what your `router.js` should look like.
+
+```js
+import EmberRouter from '@ember/routing/router';
+
+export class Router extends EmberRouter {
+  ...
+}
+```
+
+Usage < 4.x
 ------------------------------------------------------------------------------
 
 **1.** Import ember-router-scroll
@@ -48,7 +63,7 @@ class Router extends EmberRouterScroll {
 }
 ```
 
-In version prior to  v2.0, you can import the mixin and use it like so.  This is necessary if your application does not support JavaScript classes yet.
+In version prior to v2.0, you can import the mixin and use it like so.  This is necessary if your application does not support JavaScript classes yet.
 
 ```javascript
 // app/router.js
@@ -60,6 +75,9 @@ const Router = EmberRouter.extend(RouterScroll, {
 });
 ```
 
+Remaining optional steps for all versions 2.x - 4.x
+------------------------------------------------------------------------------
+
 **2.** Enable `historySupportMiddleware` in your app
 
 Edit `config/environment.js` and add `historySupportMiddleware: true,` to get live-reload working in nested routes.
@@ -70,15 +88,6 @@ historySupportMiddleware: true,
 ```
 
 This location type inherits from Ember's `HistoryLocation`.
-
-**3.** If using old style QUnit tests. If tests based on [RFC](https://github.com/emberjs/rfcs/pull/232), you can
-ignore this.
-In your router and controller tests, add `'service:router-scroll'` and `'service:scheduler'` as dependencies in the
-`needs: []` block:
-
-```javascript
-//{your-app}}/tests/unit/routes/{{your-route}}.js
-needs:[ 'service:router-scroll', 'service:scheduler' ],
 ```
 
 
@@ -108,7 +117,7 @@ ENV['routerScroll'] = {
 
 #### Scroll Timing
 
-You may want the default "out of the box" behaviour.  We schedule scroll after Ember's `render`.  This occurs on the tightest schedule between route transition start and end.
+You may want the default "out of the box" behaviour.  We schedule scroll immediately after Ember's `render`.  This occurs on the tightest schedule between route transition start and end.
 
 However, you have other options. If you need an extra tick after `render`, set `scrollWhenAfterRender: true`.  You also may need to delay scroll functionality until the route is idle (approximately after the first paint completes) using `scrollWhenIdle: true` in your config.  `scrollWhenIdle` && `scrollWhenAfterRender` defaults to `false`.
 
@@ -182,19 +191,19 @@ Example:
 ```javascript
 import Controller from '@ember/controller';
 
-export default Controller.extend({
-  queryParams: [
+export default class MyController extends Controller {
+  queryParams = [
     'preserveScrollPosition',
-  ],
-});
+  ];
+}
 ```
 
 **2.** Pass in query param
 
 Next, in the place where a transition is triggered, pass in `preserveScrollPosition=true`. For example
 
 ```handlebars
-{{link-to "About Tab" 'tab.about' (query-params preserveScrollPosition=true) }}
+<LinkTo "About Tab" "tab.about" {{query-params preserveScrollPosition=true}} />
 ```
 
 
@@ -217,19 +226,19 @@ Example:
 
 ```javascript
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 
-export default Controller.extend({
-  queryParams: ['filter'],
+export default class MyController extends Controller {
+  queryParams = ['filter'];
 
-  preserveScrollPosition: false,
+  preserveScrollPosition = false;
 
-  actions: {
-    changeFilter(filter) {
-      this.set('preserveScrollPosition', true);
-      this.set('filter', filter);
-    }
+  @action
+  changeFilter(filter) {
+    this.set('preserveScrollPosition', true);
+    this.set('filter', filter);
   }
-});
+}
 ```
 
 **2.** Reset preserveScrollPosition if necessary
@@ -241,11 +250,11 @@ where `preserveScrollPosition` is always set to true.
 ```javascript
 import Router from '@ember/routing/route';
 
-export default Route.extend({
+export default class MyRoute extends Route {
   resetController(controller) {
     controller.set('preserveScrollPosition', false);
   }
-});
+}
 ```
 
 
@@ -269,28 +278,28 @@ When you need to modify `preserveScrollPosition` on the service for a specific t
 Example:
 
 ```javascript
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-
-export default Component.extend({
-  routerScroll: service(),
-  router: service(),
-
-  actions: {
-    async goToPaginationPage(pageNumber) {
-      this.set('routerScroll.preserveScrollPosition', true);
-      await this.router.transitionTo(
-        this.router.currentRouteName,
-        {
-          queryParams: { page: pageNumber }
-        }
-      );
-
-      // Reset `preserveScrollPosition` after transition so future transitions behave as expected
-      this.set('routerScroll.preserveScrollPosition', false);
-    }
+import { action } from '@ember/object';
+
+export default class MyComponent extends Component {
+  @service routerScroll;
+  @service router;
+
+  @action
+  async goToPaginationPage(pageNumber) {
+    this.set('routerScroll.preserveScrollPosition', true);
+    await this.router.transitionTo(
+      this.router.currentRouteName,
+      {
+        queryParams: { page: pageNumber }
+      }
+    );
+
+    // Reset `preserveScrollPosition` after transition so future transitions behave as expected
+    this.set('routerScroll.preserveScrollPosition', false);
   }
-});
+}
 ```
 
 ## Running Tests

addon/instance-initializers/ember-router-scroll.js

@@ -0,0 +1,8 @@
+export function initialize(appInstance) {
+  // Eagerly initialize service
+  appInstance.lookup('service:router-scroll');
+}
+
+export default {
+  initialize
+};