[Deprecation] deprecate Component#isVisible

emberjs · Oct 14, 2019 · 813ac56 · 813ac56
1 parent 9a09374
commit 813ac56
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 51 deletions.
diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
@@ -340,6 +340,7 @@
   @method partial
   @for Ember.Templates.helpers
   @param {String} partialName The name of the template to render minus the leading underscore.
+  @deprecated Use `<div hidden={{this.isHidden}}>` or `{{#if this.showComponent}} <MyComponent /> {{/if}}`
   @public
 */
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
@@ -9,6 +9,7 @@ import {
   setViewElement,
 } from '@ember/-internals/views';
 import { assert, debugFreeze } from '@ember/debug';
+import { EMBER_COMPONENT_IS_VISIBLE } from '@ember/deprecated-features';
 import { _instrumentStart } from '@ember/instrumentation';
 import { assign } from '@ember/polyfills';
 import { DEBUG } from '@glimmer/env';
@@ -92,8 +93,10 @@ function applyAttributeBindings(
     operations.setAttribute('id', PrimitiveReference.create(id), false, null);
   }
 
-  if (seen.indexOf('style') === -1) {
-    IsVisibleBinding.install(element, component, operations);
+  if (EMBER_COMPONENT_IS_VISIBLE) {
+    if (seen.indexOf('style') === -1) {
+      IsVisibleBinding.install(element, component, operations);
+    }
   }
 }
 
@@ -368,7 +371,9 @@ export default class CurlyComponentManager
     } else {
       let id = component.elementId ? component.elementId : guidFor(component);
       operations.setAttribute('id', PrimitiveReference.create(id), false, null);
-      IsVisibleBinding.install(element, component, operations);
+      if (EMBER_COMPONENT_IS_VISIBLE) {
+        IsVisibleBinding.install(element, component, operations);
+      }
     }
 
     if (classRef) {

diff --git a/packages/@ember/-internals/glimmer/lib/utils/bindings.ts b/packages/@ember/-internals/glimmer/lib/utils/bindings.ts
@@ -1,5 +1,6 @@
 import { get } from '@ember/-internals/metal';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
+import { EMBER_COMPONENT_IS_VISIBLE } from '@ember/deprecated-features';
 import { dasherize } from '@ember/string';
 import { Opaque, Option, Simple } from '@glimmer/interfaces';
 import { CachedReference, combine, map, Reference, Tag } from '@glimmer/reference';
@@ -107,7 +108,11 @@ export const AttributeBinding = {
     );
 
     if (attribute === 'style') {
-      reference = new StyleBindingReference(reference, referenceForKey(component, 'isVisible'));
+      reference = new StyleBindingReference(
+        reference,
+        referenceForKey(component, 'isVisible'),
+        component
+      );
     }
 
     operations.setAttribute(attribute, reference, false, null);
@@ -120,19 +125,42 @@ const SAFE_DISPLAY_NONE = htmlSafe(DISPLAY_NONE);
 
 class StyleBindingReference extends CachedReference<string | SafeString> {
   public tag: Tag;
-  constructor(private inner: Reference<string>, private isVisible: Reference<Opaque>) {
+  private component: Component;
+  constructor(
+    private inner: Reference<string>,
+    private isVisible: Reference<Opaque>,
+    component: Component
+  ) {
     super();
 
     this.tag = combine([inner.tag, isVisible.tag]);
+    this.component = component;
   }
 
   compute(): string | SafeString {
     let value = this.inner.value();
-    let isVisible = this.isVisible.value();
 
-    if (isVisible !== false) {
-      return value;
-    } else if (!value) {
+    if (EMBER_COMPONENT_IS_VISIBLE) {
+      let isVisible = this.isVisible.value();
+
+      if (isVisible !== undefined) {
+        deprecate(
+          `\`isVisible\` is deprecated (from "${this.component._debugContainerKey}")`,
+          false,
+          {
+            id: 'ember-component.is-visible',
+            until: '4.0.0',
+            url: 'https://deprecations.emberjs.com/v3.x#toc_ember-component-is-visible',
+          }
+        );
+      }
+
+      if (isVisible !== false) {
+        return value;
+      }
+    }
+
+    if (!value) {
       return SAFE_DISPLAY_NONE;
     } else {
       let style = value + ' ' + DISPLAY_NONE;
@@ -143,20 +171,38 @@ class StyleBindingReference extends CachedReference<string | SafeString> {
 
 export const IsVisibleBinding = {
   install(_element: Simple.Element, component: Component, operations: ElementOperations) {
-    operations.setAttribute(
-      'style',
-      map(referenceForKey(component, 'isVisible'), this.mapStyleValue),
-      false,
-      null
-    );
-    // // the upstream type for addDynamicAttribute's `value` argument
-    // // appears to be incorrect. It is currently a Reference<string>, I
-    // // think it should be a Reference<string|null>.
-    // operations.addDynamicAttribute(element, 'style', ref as any as Reference<string>, false);
+    if (EMBER_COMPONENT_IS_VISIBLE) {
+      let componentMapStyleValue = (isVisible: boolean) => {
+        return this.mapStyleValue(isVisible, component);
+      };
+
+      operations.setAttribute(
+        'style',
+        map(referenceForKey(component, 'isVisible'), componentMapStyleValue),
+        false,
+        null
+      );
+      // // the upstream type for addDynamicAttribute's `value` argument
+      // // appears to be incorrect. It is currently a Reference<string>, I
+      // // think it should be a Reference<string|null>.
+      // operations.addDynamicAttribute(element, 'style', ref as any as Reference<string>, false);
+    }
   },
 
-  mapStyleValue(isVisible: boolean) {
-    return isVisible === false ? SAFE_DISPLAY_NONE : null;
+  mapStyleValue(isVisible: boolean, component: Component) {
+    if (EMBER_COMPONENT_IS_VISIBLE) {
+      if (isVisible !== undefined) {
+        deprecate(`\`isVisible\` is deprecated (from "${component._debugContainerKey}")`, false, {
+          id: 'ember-component.is-visible',
+          until: '4.0.0',
+          url: 'https://deprecations.emberjs.com/v3.x#toc_ember-component-is-visible',
+        });
+      }
+
+      return isVisible === false ? SAFE_DISPLAY_NONE : null;
+    } else {
+      return undefined;
+    }
   },
 };
 

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
@@ -2904,22 +2904,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 (from "component:foo-bar")');
 
       assertStyle('display: none;');
 
       this.assertStableRerender();
 
-      runTask(() => {
-        set(this.context, 'visible', true);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', true);
+        });
+      }, '`isVisible` is deprecated (from "component:foo-bar")');
+
       assertStyle('');
 
-      runTask(() => {
-        set(this.context, 'visible', false);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', false);
+        });
+      }, '`isVisible` is deprecated (from "component:foo-bar")');
+
       assertStyle('display: none;');
     }
 
@@ -2933,9 +2941,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 (from "component:foo-bar")');
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
@@ -2944,18 +2954,22 @@ moduleFor(
 
       this.assertStableRerender();
 
-      runTask(() => {
-        set(this.context, 'visible', true);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', true);
+        });
+      }, '`isVisible` is deprecated (from "component:foo-bar")');
 
       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 (from "component:foo-bar")');
 
       this.assertComponentElement(this.firstChild, {
         tagName: 'div',
@@ -2986,25 +3000,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 (from "component:foo-bar")');
 
       assertStyle('display: none;');
 
       this.assertStableRerender();
 
-      runTask(() => {
-        set(this.context, 'visible', true);
-      });
+      expectDeprecation(() => {
+        runTask(() => {
+          set(this.context, 'visible', true);
+        });
+      }, '`isVisible` is deprecated (from "component:foo-bar")');
 
       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 (from "component:foo-bar")');
 
       assertStyle('display: none;');
       assert.equal(this.firstChild.getAttribute('foo'), 'woo');

diff --git a/packages/@ember/deprecated-features/index.ts b/packages/@ember/deprecated-features/index.ts
@@ -14,3 +14,4 @@ export const ALIAS_METHOD = !!'3.9.0';
 export const APP_CTRL_ROUTER_PROPS = !!'3.10.0-beta.1';
 export const FUNCTION_PROTOTYPE_EXTENSIONS = !!'3.11.0-beta.1';
 export const MOUSE_ENTER_LEAVE_MOVE_EVENTS = !!'3.13.0-beta.1';
+export const EMBER_COMPONENT_IS_VISIBLE = !!'3.14.0-beta.5';