feat: add refresh method (#84)

* feat: add refresh method

* fix: yarn

* fix: typo

* fix: add missing component

* fix: link to post page

* feat: add tests for the refresh method

* fix: remove single quotes, add newer prettier config

* fix: remove useless assertions

* fix: clean up tests

.gitignore

@@ -8,4 +8,13 @@ node_modules/
 # misc
 npm-debug.log*
 yarn-error.log
-.DS_Store
+/.DS_Store
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

ember-engines-router-service/src/services/engine-router-service.js

@@ -65,6 +65,24 @@ export default class EngineRouterService extends Service.extend(Evented) {
     return this._externalRoutes[externalRouteName];
   }
 
+  refresh(routeName = this.currentRouteName, ...args) {
+    if (resemblesURL(routeName)) {
+      return this.externalRouter.refresh(routeName);
+    }
+
+    return this.externalRouter.refresh(
+      namespaceEngineRouteName(this._mountPoint, routeName),
+      ...args
+    );
+  }
+
+  refreshExternal(routeName, ...args) {
+    return this.externalRouter.refresh(
+      this.getExternalRouteName(routeName),
+      ...args
+    );
+  }
+
   transitionTo(routeName, ...args) {
     if (resemblesURL(routeName)) {
       return this.externalRouter.transitionTo(routeName);

ember-engines-router-service/types/services/router.d.ts

@@ -1,11 +1,13 @@
 import type RouterService from '@ember/routing/router-service';
 
-export default interface EnginesRouterService extends Omit<
-  RouterService,
-  "currentRoute" | "recognize" | "recognizeAndLoad"
-> {
+export default interface EnginesRouterService
+  extends Omit<
+    RouterService,
+    'currentRoute' | 'recognize' | 'recognizeAndLoad'
+  > {
   isActiveExternal: RouterService['isActive'];
   replaceWithExternal: RouterService['replaceWith'];
   transitionToExternal: RouterService['transitionTo'];
+  refreshExternal: RouterService['refresh'];
   urlForExternal: RouterService['urlFor'];
 }

package.json

@@ -14,9 +14,9 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "release-it": "^15.5.1",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
-    "@release-it-plugins/workspaces": "^3.2.0"
+    "@release-it-plugins/workspaces": "^3.2.0",
+    "release-it": "^15.5.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

test-app/.prettierrc.js

@@ -1,5 +1,12 @@
 'use strict';
 
 module.exports = {
-  singleQuote: true,
+  overrides: [
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
 };

test-app/app/routes/application.js

@@ -0,0 +1,11 @@
+import Route from '@ember/routing/route';
+
+let count = 0;
+
+export default class extends Route {
+  model() {
+    return {
+      count: count++,
+    };
+  }
+}

test-app/app/templates/application.hbs

@@ -1,7 +1,12 @@
 <h1>Ember Engines Demo</h1>
+<span class="global-refresh-counter">
+  {{@model.count}}
+</span>
 
-<LinkTo @route="routeless-engine-demo" class="routeless-engine">Routeless Engine</LinkTo> |
-<LinkTo @route="routable-engine-demo" class="routeable-engine">Routeable Engine</LinkTo> |
+<LinkTo @route="routeless-engine-demo" class="routeless-engine">Routeless Engine</LinkTo>
+|
+<LinkTo @route="routable-engine-demo" class="routeable-engine">Routeable Engine</LinkTo>
+|
 <LinkTo @route="post" @model="1" class="non-blog-post">Non-Blog Post</LinkTo>
 
 {{outlet}}

test-app/lib/eager-blog/addon/templates/application.hbs

@@ -1,6 +1,6 @@
 <h3 class="title">Eager engine</h3>
 
 <LinkTo @route="index" @current-when="index post" class="current-when-test-link">All Posts</LinkTo> |
-<LinkTo @route="post">Post 1</LinkTo>
+<LinkTo @route="post" @model={{1}}>Post 1</LinkTo>
 
 {{outlet}}

test-app/lib/ember-blog/addon/components/hello-name.hbs

@@ -1,3 +1,30 @@
-<div class="hello-name" ...attributes>
-  Hello, {{@name}}!
+<div class='hello-name' ...attributes>
+  <span class='greeting'>
+    Hello,
+    {{@name}}!
+  </span>
+
+  <button
+    class='refresh'
+    type='button'
+    {{on 'click' this.refresh}}
+  >
+    Refresh
+  </button>
+
+  <button
+    class='refresh-route'
+    type='button'
+    {{on 'click' this.refreshRoute}}
+  >
+    Refresh Route
+  </button>
+
+  <button
+    class='refresh-external'
+    type='button'
+    {{on 'click' this.refreshExternal}}
+  >
+    Refresh External
+  </button>
 </div>

test-app/lib/ember-blog/addon/components/hello-name.js

@@ -1,9 +1,14 @@
-import { later, cancel } from '@ember/runloop';
 import Component from '@glimmer/component';
+import { later, cancel } from '@ember/runloop';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class extends Component {
+  @service router;
+
   @tracked name = this.args.name;
+  @tracked clickCount = 0;
 
   constructor() {
     super(...arguments);
@@ -20,4 +25,23 @@ export default class extends Component {
     cancel(this._later);
     super.willDestroy(...arguments);
   }
+
+  @action click() {
+    this.clickCount++;
+  }
+
+  @action
+  refresh() {
+    this.router.refresh();
+  }
+
+  @action
+  refreshRoute() {
+    this.router.refresh('new');
+  }
+
+  @action
+  refreshExternal() {
+    this.router.refreshExternal('home');
+  }
 }

test-app/lib/ember-blog/addon/routes/new.js

@@ -0,0 +1,19 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+
+let count = 0;
+
+export default class extends Route {
+  @service exampleService;
+
+  model() {
+    // cause a service to be instantiated, so that our tests can
+    // confirm that it gets cleaned up
+    this.exampleService;
+
+    return {
+      name: 'Derek Zoolander',
+      count: count++,
+    };
+  }
+}

test-app/lib/ember-blog/addon/templates/new.hbs

@@ -1,6 +1,10 @@
 <div class="engine">
   New Route!!
 
+  <span class="route-refresh-counter">
+    {{@model.count}}
+  </span>
+
   <HelloWorld class="routable-hello-world" />
 
   <button class="trigger-transition-to" type="button" {{on "click" this.goAway}}>Go Away!</button>

test-app/lib/ember-blog/addon/templates/post.hbs

@@ -34,7 +34,7 @@
 </button>
 
 <button class="routable-replace-external-button {{if this.replaceWithExternal "replaced-with-external"}}" type="button" {{on "click" this.replaceWithHomeByService}}>
-    Go home progammatically (Engine Router Service)
+    Go home programmatically (Engine Router Service)
 </button>
 
 

test-app/lib/ember-chat/addon/components/spanish-greeting.hbs

@@ -0,0 +1,3 @@
+<span class="greeting">Hola</span> from {{@name}}!
+<button class="clicker" type="button" {{on "click" this.click}}>Clicker</button>
+<span class="click-count">{{this.clickCount}}</span>

test-app/lib/ember-chat/addon/components/spanish-greeting.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked clickCount = 0;
+
+  @action click() {
+    this.clickCount++;
+  }
+}

test-app/package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.7",
     "@babel/eslint-parser": "^7.19.1",
+    "@ember/legacy-built-in-components": "0.4.1",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.9.3",
     "@embroider/test-setup": "^2.0.2",

test-app/tests/acceptance/routeable-engine-demo-refresh-test.js

@@ -0,0 +1,43 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { visit, find, click } from '@ember/test-helpers';
+
+module('Acceptance | Engine Router Service | Refresh Method', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('refresh without params triggers refresh with current route', async function (assert) {
+    await visit('/routable-engine-demo/ember-blog/new');
+
+    let counter = await find('.route-refresh-counter').textContent;
+    await click('.refresh');
+
+    counter = parseInt(counter, 10);
+    counter = ++counter;
+    counter = counter.toString();
+    assert.dom('.route-refresh-counter').hasText(counter);
+  });
+
+  test('refresh with params triggers refresh on provided route', async function (assert) {
+    await visit('/routable-engine-demo/ember-blog/new');
+
+    let counter = await find('.route-refresh-counter').textContent;
+    await click('.refresh-route');
+
+    counter = parseInt(counter, 10);
+    counter = ++counter;
+    counter = counter.toString();
+    assert.dom('.route-refresh-counter').hasText(counter);
+  });
+
+  test('refresh external route', async function (assert) {
+    await visit('/routable-engine-demo/ember-blog/new');
+
+    let counter = await find('.route-refresh-counter').textContent;
+    await click('.refresh-external');
+
+    counter = parseInt(counter, 10);
+    counter = ++counter;
+    counter = counter.toString();
+    assert.dom('.global-refresh-counter').hasText(counter);
+  });
+});