[WIP] add isVisible deprecation warning

emberjs · Apr 18, 2019 · 0de9dec · 0de9dec
1 parent 5a93bbb
commit 0de9dec
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 30 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/utils/bindings.ts b/packages/@ember/-internals/glimmer/lib/utils/bindings.ts
@@ -1,5 +1,5 @@
 import { get } from '@ember/-internals/metal';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 import { dasherize } from '@ember/string';
 import { Opaque, Option, Simple } from '@glimmer/interfaces';
 import { CachedReference, combine, map, Reference, Tag } from '@glimmer/reference';
@@ -118,6 +118,14 @@ export const AttributeBinding = {
 const DISPLAY_NONE = 'display: none;';
 const SAFE_DISPLAY_NONE = htmlSafe(DISPLAY_NONE);
 
+function emitIdVisibleDeprecation() {
+  deprecate('`isVisible` is deprecated', false, {
+    id: 'ember-component.is-visible',
+    until: '4.0.0',
+    url: 'https://deprecations.emberjs.com/v3.x#toc_ember-component-is-visible',
+  });
+}
+
 class StyleBindingReference extends CachedReference<string | SafeString> {
   public tag: Tag;
   constructor(private inner: Reference<string>, private isVisible: Reference<Opaque>) {
@@ -130,6 +138,10 @@ class StyleBindingReference extends CachedReference<string | SafeString> {
     let value = this.inner.value();
     let isVisible = this.isVisible.value();
 
+    if (isVisible !== undefined) {
+      emitIdVisibleDeprecation();
+    }
+
     if (isVisible !== false) {
       return value;
     } else if (!value) {
@@ -156,6 +168,10 @@ export const IsVisibleBinding = {
   },
 
   mapStyleValue(isVisible: boolean) {
+    if (isVisible !== undefined) {
+      emitIdVisibleDeprecation();
+    }
+
     return isVisible === false ? SAFE_DISPLAY_NONE : null;
   },
 };

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
@@ -2946,22 +2946,30 @@ moduleFor(
         template: `<p>foo</p>`,
       });
 
-      this.render(`{{foo-bar id="foo-bar" isVisible=visible}}`, {
-        visible: false,
-      });
+      expectDeprecation(() => {
+        this.render(`{{foo-bar id="foo-bar" isVisible=visible}}`, {
+          visible: false,
+        });
+      }, '`isVisible` is deprecated');
 
       assertStyle('display: none;');
 
       this.assertStableRerender();
 
-      runTask(() => {
-        set(this.context, 'visible', true);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', true);
+        });
+      }, '`isVisible` is deprecated');
+
       assertStyle('');
 
-      runTask(() => {
-        set(this.context, 'visible', false);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', false);
+        });
+      }, '`isVisible` is deprecated');
+
       assertStyle('display: none;');
     }
 
@@ -2975,9 +2983,11 @@ moduleFor(
         template: `<p>foo</p>`,
       });
 
-      this.render(`{{foo-bar id="foo-bar" isVisible=visible}}`, {
-        visible: false,
-      });
+      expectDeprecation(() => {
+        this.render(`{{foo-bar id="foo-bar" isVisible=visible}}`, {
+          visible: false,
+        });
+      }, '`isVisible` is deprecated');
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
@@ -2986,18 +2996,22 @@ moduleFor(
 
       this.assertStableRerender();
 
-      runTask(() => {
-        set(this.context, 'visible', true);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', true);
+        });
+      }, '`isVisible` is deprecated');
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
         attrs: { id: 'foo-bar', style: styles('color: blue;') },
       });
 
-      runTask(() => {
-        set(this.context, 'visible', false);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', false);
+        });
+      }, '`isVisible` is deprecated');
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
@@ -3028,25 +3042,31 @@ moduleFor(
         template: `<p>foo</p>`,
       });
 
-      this.render(`{{foo-bar id="foo-bar" foo=foo isVisible=visible}}`, {
-        visible: false,
-        foo: 'baz',
-      });
+      expectDeprecation(() => {
+        this.render(`{{foo-bar id="foo-bar" foo=foo isVisible=visible}}`, {
+          visible: false,
+          foo: 'baz',
+        });
+      }, '`isVisible` is deprecated');
 
       assertStyle('display: none;');
 
       this.assertStableRerender();
 
-      runTask(() => {
-        set(this.context, 'visible', true);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', true);
+        });
+      }, '`isVisible` is deprecated');
 
       assertStyle('');
 
-      runTask(() => {
-        set(this.context, 'visible', false);
-        set(this.context, 'foo', 'woo');
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', false);
+          set(this.context, 'foo', 'woo');
+        });
+      }, '`isVisible` is deprecated');
 
       assertStyle('display: none;');
       assert.equal(this.firstChild.getAttribute('foo'), 'woo');