How to use ember-compatibility-helpers - 10 common examples

} else if (scrollWhenPainted) {
      // as described in ember-app-scheduler, this addon can be used to delay rendering until after First Meaningful Paint.
      // If you loading your routes progressively, this may be a good option to delay scrollTop until the remaining DOM elements are painted.
      whenRoutePainted().then(() => {
        this.updateScrollPosition(transition);
      });
    } else {
      // as described in ember-app-scheduler, this addon can be used to delay rendering until after the route is idle
      whenRouteIdle().then(() => {
        this.updateScrollPosition(transition);
      });
    }
  }
});

if (!gte('3.6.0-beta.1')) {
  RouterScrollMixin = Mixin.create(RouterScrollMixin, {
    willTransition(...args) {
      this._super(...args);

      this._routeWillChange();
    },

    didTransition(transitions, ...args) {
      this._super(transitions, ...args);

      this._routeDidChange(transitions);
    }
  });
}

export default RouterScrollMixin;

function defineErrorProp(proto, key, getterMethod) {
    Object.defineProperty(proto, key, {
      get: () => getterMethod(key),
      set(value) {
        Object.defineProperty(this, key, { value });
      },
    });
  }

  // Methods should still throw whenever they are accessed
  defineErrorProp(proto, 'bounds', throwPropertyUseError);
  defineErrorProp(proto, 'element', throwPropertyUseError);
  defineErrorProp(proto, 'debugName', throwPropertyUseError);
}

if (gte('3.8.0-beta.1')) {
  setComponentManager((owner: ApplicationInstance) => {
    return new GlimmerComponentManager(owner);
  }, GlimmerComponent);
} else {
  setComponentManager('glimmer', GlimmerComponent);
}

export default GlimmerComponent;

//update(modifier: ModifierInstanceState): void;
        update(state) {
          let { args, delegate, modifier } = state;
          let modifierArgs = valueForCapturedArgs(args);
          delegate.updateModifier(modifier, modifierArgs);
        }

        //getDestructor(modifier: ModifierInstanceState): Option;
        getDestructor(state) {
          return state;
        }
      }

      let Polyfilled_CustomModifierManagerLt36;
      if (lte('3.6.0-alpha.1')) {
        Polyfilled_CustomModifierManagerLt36 = class Polyfilled_CustomModifierManagerLt36 extends Polyfilled_CustomModifierManager {
          constructor(name, ModifierClass, manager) {
            super();

            this.state = {
              ModifierClass,
              delegate: manager,
            };
          }

          // create(element: Simple.Element, args: Arguments, _dynamicScope: DynamicScope, dom: any) {
          create(element, args) {
            return super.create(element, this.state, args);
          }
        };
      }

export function initialize() {
  if (lte('3.5.1')) {
    // Delete all of this in the Ember 3.8 LTS and rev major
    if (!hasInitialized) {
      hasInitialized = true;

      EmberRouter.reopen({
        _initRouterJs() {
          this._super.apply(this, arguments);

          // now this.router is available
          // router.router renamed to _routerMicrolib in 2.13
          // https://emberjs.com/deprecations/v2.x/#toc_ember-router-router-renamed-to-ember-router-_routermicrolib
          const router = this._routerMicrolib || this.router;
          const emberRouter = this;
          const stack = [];
          let latest = null;

TemplateCompiler.create = function() {
          let compiler = ORIGINAL_TEMPLATE_COMPILER_CREATE(...arguments);
          let compileTimeLookup = compiler.resolver;
          let runtimeResolver = compileTimeLookup.resolver;

          // meta was not passed to `_lookupModifier` until 3.7
          if (lte('3.7.0-alpha.1')) {
            runtimeResolver.lookupModifier = function(name, meta) {
              return this.handle(this._lookupModifier(name, meta));
            };
          }

          runtimeResolver._lookupModifier = function(name, meta) {
            let builtin = this.builtInModifiers[name];

            if (builtin === undefined) {
              let { owner } = meta;
              let modifier = owner.factoryFor(`modifier:${name}`);
              if (modifier !== undefined) {
                let managerFactory = getModifierManager(modifier.class);
                let manager = managerFactory(owner);

                if (gte('3.6.0-alpha.1')) {

manager.didCreateElement = function(bucket, element, operations) {
                  ORIGINAL_DID_CREATE_ELEMENT.apply(this, arguments);
                  let { args } = bucket;

                  if (lte('2.15.0-beta.1')) {
                    args = args.namedArgs;
                  }

                  // on < 2.15 `namedArgs` is only present when there were arguments
                  if (args && args.has('__ANGLE_ATTRS__')) {
                    let attributeReferences = args.get('__ANGLE_ATTRS__');
                    let snapshot = attributeReferences.value();
                    if (snapshot) {
                      let names = Object.keys(snapshot);
                      for (let i = 0; i < names.length; i++) {
                        let attributeName = names[i];
                        let attributeReference = attributeReferences.get(attributeName);

                        operations.addDynamicAttribute(
                          element,
                          attributeName,

```javascript
  import Controller from '@ember/controller';
  import { inject as controller } from '@ember-decorators/controller';

  export default class IndexController extends Controller {
    @controller application;
  }

@function @param {string} controllerName? - The name of the controller to inject. If not provided, the property name will be used @return {Controller} */ export let inject;

if (gte('3.10.0')) { inject = computedDecoratorWithParams( injectController, 'controller', "import { inject as controller } from '@ember/controller'" ); } else { inject = computedDecoratorWithParams( (desc, params) => { return injectController.apply(this, params); }, 'controller', "import { inject as controller } from '@ember/controller'" ); }

import { DEBUG } from '@glimmer/env';
import Ember from 'ember';
import { set } from '@ember/object';
import { getOwner, setOwner } from '@ember/application';
import { capabilities } from '@ember/component';
import { schedule } from '@ember/runloop';
import { gte } from 'ember-compatibility-helpers';
import BaseComponentManager, {
  ComponentManagerArgs,
  CustomComponentCapabilities,
} from './base-component-manager';

import GlimmerComponent, { setDestroyed, setDestroying } from './component';

const CAPABILITIES = gte('3.13.0-beta.1')
  ? capabilities('3.13', {
      destructor: true,
      asyncLifecycleCallbacks: false,
      updateHook: false,
    })
  : capabilities('3.4', {
      destructor: true,
      asyncLifecycleCallbacks: false,
    });

/**
 * This component manager runs in Ember.js environments and extends the base component manager to:
 *
 * 1. Properly destroy the component's associated `meta` data structure
 * 2. Schedule destruction using Ember's runloop
 */

export const TaskGroup = EmberObject.extend(TaskStateMixin, {
  isTaskGroup: true,

  toString() {
    return ``;
  },

  _numRunningOrNumQueued: or('numRunning', 'numQueued'),
  isRunning: bool('_numRunningOrNumQueued'),
  isQueued: false,
});

export let TaskGroupProperty;

if (gte('3.10.0-alpha.1')) {
  TaskGroupProperty = class {};
} else {
  TaskGroupProperty = class extends _ComputedProperty {};
}

objectAssign(TaskGroupProperty.prototype, propertyModifiers);

import { DEBUG } from '@glimmer/env';
import { assert, deprecate } from '@ember/debug';
import ComputedProperty from '@ember/object/computed';

/**
 * A macro that receives a decorator function which returns a ComputedProperty,
 * and defines that property using `Ember.defineProperty`. Conceptually, CPs
 * are custom property descriptors that require Ember's intervention to apply
 * correctly. In the future, we will use finishers to define the CPs rather than
 * directly defining them in the decorator function.
 *
 * @param {Function} fn - decorator function
 */
export let computedDecorator;

if (gte('3.10.0')) {
  class ComputedDecoratorImpl extends Function {
    readOnly() {
      this.__computed.readOnly(...arguments);
      return this;
    }

    volatile() {
      this.__computed.volatile(...arguments);
      return this;
    }

    property() {
      this.__computed.property(...arguments);
      return this;
    }