diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts index 881b3cc7309..5693e5b7662 100644 --- 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,7 +93,7 @@ function applyAttributeBindings( operations.setAttribute('id', PrimitiveReference.create(id), false, null); } - if (seen.indexOf('style') === -1) { + if (EMBER_COMPONENT_IS_VISIBLE && seen.indexOf('style') === -1) { IsVisibleBinding.install(element, component, operations); } } @@ -368,7 +369,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/component.ts b/packages/@ember/-internals/glimmer/lib/component.ts index 10d3ab44f1c..5086f71b45c 100644 --- a/packages/@ember/-internals/glimmer/lib/component.ts +++ b/packages/@ember/-internals/glimmer/lib/component.ts @@ -1104,6 +1104,7 @@ const Component = CoreView.extend( @property isVisible @type Boolean @default null + @deprecated Use `
foo
`, }); - 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: `foo
`, }); - 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: `foo
`, }); - 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 index 724ffb311f3..d49510de203 100644 --- 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.15.0-beta.1';