Merge pull request #15015 from status200/bound-mount-syntax

Allow mounting routeless engines with a bound engine name
emberjs · Mar 18, 2017 · 286af16 · 286af16
2 parents 4263970 + 28c94ec
commit 286af16
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 21 deletions.
diff --git a/packages/ember-glimmer/lib/syntax/mount.js b/packages/ember-glimmer/lib/syntax/mount.js
@@ -47,11 +47,6 @@ export function mountMacro(path, params, hash, builder) {
     params.length === 1 && hash === null
   );
 
-  assert(
-    'The first argument of {{mount}} must be quoted, e.g. {{mount "chat-engine"}}.',
-    typeof params[0] === 'string'
-  );
-
   let definitionArgs = [params.slice(0, 1), null, null, null];
   let args = [null, null, null, null];
   builder.component.dynamic(definitionArgs, dynamicEngineFor, args, builder.symbolTable);
@@ -72,23 +67,32 @@ class DynamicEngineReference {
     let { env, nameRef, /*symbolTable*/ } = this;
     let nameOrDef = nameRef.value();
 
-    if (this._lastName === nameOrDef) {
-      return this._lastDef;
-    }
+    if (typeof nameOrDef === 'string') {
+      if (this._lastName === nameOrDef) {
+        return this._lastDef;
+      }
 
-    assert(
-      `You used \`{{mount '${nameOrDef}'}}\`, but the engine '${nameOrDef}' can not be found.`,
-      env.owner.hasRegistration(`engine:${nameOrDef}`)
-    );
+      assert(
+        `You used \`{{mount '${nameOrDef}'}}\`, but the engine '${nameOrDef}' can not be found.`,
+        env.owner.hasRegistration(`engine:${nameOrDef}`)
+      );
 
-    if (!env.owner.hasRegistration(`engine:${nameOrDef}`)) {
-      return null;
-    }
+      if (!env.owner.hasRegistration(`engine:${nameOrDef}`)) {
+        return null;
+      }
 
-    this._lastName = nameOrDef;
-    this._lastDef = new MountDefinition(nameOrDef);
+      this._lastName = nameOrDef;
+      this._lastDef = new MountDefinition(nameOrDef);
 
-    return this._lastDef;
+      return this._lastDef;
+    } else {
+      assert(
+        `Invalid engine name '${nameOrDef}' specified, engine name must be either a string, null or undefined.`,
+        nameOrDef === null || nameOrDef === undefined
+      );
+
+      return null;
+    }
   }
 }
 

diff --git a/packages/ember-glimmer/tests/integration/mount-test.js b/packages/ember-glimmer/tests/integration/mount-test.js
@@ -17,10 +17,10 @@ moduleFor('{{mount}} assertions', class extends RenderingTest {
     }, /You can only pass a single argument to the {{mount}} helper, e.g. {{mount "chat-engine"}}./i);
   }
 
-  ['@test it asserts that the engine name argument is quoted']() {
+  ['@test it asserts when an invalid engine name is provided']() {
     expectAssertion(() => {
-      this.render('{{mount chat}}');
-    }, /The first argument of {{mount}} must be quoted, e.g. {{mount "chat-engine"}}./i);
+      this.render('{{mount engineName}}', { engineName: {} });
+    }, /Invalid engine name '\[object Object\]' specified, engine name must be either a string, null or undefined./i);
   }
 
   ['@test it asserts that the specified engine is registered']() {
@@ -117,4 +117,63 @@ moduleFor('{{mount}} test', class extends ApplicationTest {
       });
     }
   }
+
+  ['@test it renders with a bound engine name']() {
+    this.router.map(function() {
+      this.route('bound-engine-name');
+    });
+    let controller;
+    this.registerController('bound-engine-name', Controller.extend({
+      engineName: null,
+      init() {
+        this._super();
+        controller = this;
+      }
+    }));
+    this.registerTemplate('bound-engine-name', '{{mount engineName}}');
+
+    this.registerEngine('foo', Engine.extend({
+      router: null,
+      init() {
+        this._super(...arguments);
+        this.register('template:application', compile('<h2>Foo Engine</h2>', { moduleName: 'application' }));
+      }
+    }));
+    this.registerEngine('bar', Engine.extend({
+      router: null,
+      init() {
+        this._super(...arguments);
+        this.register('template:application', compile('<h2>Bar Engine</h2>', { moduleName: 'application' }));
+      }
+    }));
+
+    return this.visit('/bound-engine-name').then(() => {
+      this.assertComponentElement(this.firstChild, { content: '<!---->' });
+
+      this.runTask(() => set(controller, 'engineName', 'foo'));
+
+      this.assertComponentElement(this.firstChild, { content: '<h2>Foo Engine</h2>' });
+
+      this.runTask(() => set(controller, 'engineName', undefined));
+
+      this.assertComponentElement(this.firstChild, { content: '<!---->' });
+
+      this.runTask(() => set(controller, 'engineName', 'foo'));
+
+      this.assertComponentElement(this.firstChild, { content: '<h2>Foo Engine</h2>' });
+
+      this.runTask(() => set(controller, 'engineName', 'bar'));
+
+      this.assertComponentElement(this.firstChild, { content: '<h2>Bar Engine</h2>' });
+
+      this.runTask(() => set(controller, 'engineName', 'foo'));
+
+      this.assertComponentElement(this.firstChild, { content: '<h2>Foo Engine</h2>' });
+
+      this.runTask(() => set(controller, 'engineName', null));
+
+      this.assertComponentElement(this.firstChild, { content: '<!---->' });
+    });
+  }
+
 });