Merge pull request #16572 from emberjs/issue-16505

Fix curly component class reference setup
emberjs · Apr 22, 2018 · 1c9cc46 · 1c9cc46
2 parents fc0b94a + 67721fd
commit 1c9cc46
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 9 deletions.
diff --git a/packages/ember-glimmer/lib/component-managers/curly.ts b/packages/ember-glimmer/lib/component-managers/curly.ts
@@ -1,7 +1,6 @@
 import { assert, deprecate } from '@ember/debug';
 import { _instrumentStart } from '@ember/instrumentation';
 import { assign } from '@ember/polyfills';
-import { dasherize } from '@ember/string';
 import { DEBUG } from '@glimmer/env';
 import {
   ComponentCapabilities,
@@ -39,9 +38,9 @@ import { Factory as TemplateFactory, OwnedTemplate } from '../template';
 import {
   AttributeBinding,
   ClassNameBinding,
-  ColonClassNameBindingReference,
   IsVisibleBinding,
   referenceForKey,
+  SimpleClassNameBindingReference,
 } from '../utils/bindings';
 import ComponentStateBucket, { Component } from '../utils/curly-component-state-bucket';
 import { processComponentArgs } from '../utils/process-args';
@@ -330,11 +329,8 @@ export default class CurlyComponentManager
       IsVisibleBinding.install(element, component, operations);
     }
 
-    if (classRef && classRef.value()) {
-      const ref =
-        classRef.value() === true
-          ? new ColonClassNameBindingReference(classRef, dasherize(classRef['_propertyKey']), null)
-          : classRef;
+    if (classRef) {
+      const ref = new SimpleClassNameBindingReference(classRef, classRef['_propertyKey']);
       operations.setAttribute('class', ref, false, null);
     }
 

diff --git a/packages/ember-glimmer/lib/utils/bindings.ts b/packages/ember-glimmer/lib/utils/bindings.ts
@@ -193,7 +193,7 @@ export const ClassNameBinding = {
   },
 };
 
-class SimpleClassNameBindingReference extends CachedReference<Option<string>> {
+export class SimpleClassNameBindingReference extends CachedReference<Option<string>> {
   public tag: Tag;
   private dasherizedPath: Option<string>;
 
@@ -220,7 +220,7 @@ class SimpleClassNameBindingReference extends CachedReference<Option<string>> {
   }
 }
 
-export class ColonClassNameBindingReference extends CachedReference<Option<string>> {
+class ColonClassNameBindingReference extends CachedReference<Option<string>> {
   public tag: Tag;
 
   constructor(

diff --git a/packages/ember-glimmer/tests/integration/components/curly-components-test.js b/packages/ember-glimmer/tests/integration/components/curly-components-test.js
@@ -363,6 +363,70 @@ moduleFor(
       });
     }
 
+    ['@test should update class using inline if, initially false, no alternate']() {
+      this.registerComponent('foo-bar', { template: 'hello' });
+
+      this.render('{{foo-bar class=(if predicate "thing") }}', {
+        predicate: false,
+      });
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { class: 'ember-view' },
+        content: 'hello',
+      });
+
+      this.runTask(() => set(this.context, 'predicate', true));
+      this.runTask(() => this.rerender());
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { class: classes('ember-view thing') },
+        content: 'hello',
+      });
+
+      this.runTask(() => set(this.context, 'predicate', false));
+      this.runTask(() => this.rerender());
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { class: 'ember-view' },
+        content: 'hello',
+      });
+    }
+
+    ['@test should update class using inline if, initially true, no alternate']() {
+      this.registerComponent('foo-bar', { template: 'hello' });
+
+      this.render('{{foo-bar class=(if predicate "thing") }}', {
+        predicate: true,
+      });
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { class: classes('ember-view thing') },
+        content: 'hello',
+      });
+
+      this.runTask(() => set(this.context, 'predicate', false));
+      this.runTask(() => this.rerender());
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { class: 'ember-view' },
+        content: 'hello',
+      });
+
+      this.runTask(() => set(this.context, 'predicate', true));
+      this.runTask(() => this.rerender());
+
+      this.assertComponentElement(this.firstChild, {
+        tagName: 'div',
+        attrs: { class: classes('ember-view thing') },
+        content: 'hello',
+      });
+    }
+
     ['@test should apply classes of the dasherized property name when bound property specified is true']() {
       this.registerComponent('foo-bar', { template: 'hello' });