ember-decorators / ember-decorators Goto Github PK

Useful decorators for Ember applications.

Home Page: https://ember-decorators.github.io/ember-decorators

JavaScript 95.07% HTML 2.92% CSS 0.02% TypeScript 1.98%

decorators ember ember-addon ember-cli javascript

ember-decorators's Introduction

Ember Decorators

Ember Decorators began as a project dedicated to exploring and unlocking the future of native classes in Ember.js. Now, that future is here! Decorators will be landing soon in Ember, and there is a polyfill available for them.

This library now contains a few extra decorators which were not upstreamed to Ember, and may still be useful to some users. Check out the documentation website for detailed API documentation for all the decorators included in this addon.

Usage

First install the main ember-decorators addon.

ember install ember-decorators

This addon doesn't contain any decorators itself, but includes the core set of subaddons that are necessary to begin writing Ember using native classes:

@ember-decorators/component
@ember-decorators/object

See the API Documentation for detailed examples and documentation of the individual decorators.

Development

Specs

Ember follows the legacy decorators "stage 1" proposal API. The decorators proposal is currently being redesigned for stage 3, and the champions have publicly stated that this is the recommended path forward.

Organization

This repository consists of multiple packages managed with lerna.js. The decorators all reside in their own individual packages under /packages, along with the main ember-decorators package.

The main package serves three purposes:

A quick way to install all of the subpackages and get new projects up and running. Installing the main package also adds any necessary babel transforms, and sets up ESLint properly.
A place for common functionality, such as the native class blueprints that overwrite the default Ember blueprints.
A place for the documentation site and tests for all of the other addons. Tests were consolidated from the other addons in order to speed up the testing and development process.

Setting up

Fork the repository
git clone <your-fork-url>
cd ember-decorators
npm install

Linting

npm run lint:js
npm run lint:js -- --fix

Running tests

npm test – Runs the test suite on the current Ember version

Running the dummy application

npm start
Visit the dummy application at http://localhost:4200.

License

This project is licensed under the MIT License.

ember-decorators's People

Contributors

Stargazers

Watchers

Forkers

seanpdoyle machty stefanpenner zeppelin knownasilya topaxi kidgodzilla kturney saladfork trabus fayimora lunalium robbyoconnor jeffreybiles offirgolan zacharygolba jimmay5469 broerse taylorhg andyo729 gmurphey kellyselden rlivsey alexdiliberto pzuraq kerrick nullvoxpopuli patsy-issa ursm linearza buschtoens cryrivers jbailey4 theroncross bartocc spruce knownsubset spieker km-smith serchavalos snewcomer danielspaniel denzo xomaczar nightire sagelliv allthesignals yarigpopov pgengler faiz2 jamescdavis givanse jrjohnson ejlangev localpcguy lennyburdette mike-north acorncom smile921 bekzod ctjhoa makepanic csantero artemgurzhii brianhjelle igbopie jnleadbetter championswimmer janmisek neuromobile goods ef4 caltor hakilebara alexlafroscia tylerturdenpants semeia-io betocantu93 heroiceric simonihmig raido cyril-sf josemarluedke dfreeman scalvert rwjblue gokatz onechiporenko mifrill shohanrahman lkleisa

ember-decorators's Issues

Syntax errors with object rest spread

If you use object rest spread (...{ asdf: 'zxcv' }) in the same object as a @computed decorator you'll get some weird behavior. The first time it compiles I get this error:

The Broccoli Plugin: [StubGenerator] failed with:
Error: Error parsing code while looking for "npm:" imports: SyntaxError: Unexpected token (97:2)

If i write the same file without any changes, then it will compile without any errors, but produces a syntax error, trying to replace the spreaded object with { key: }.

Example

source

import Ember from 'ember';
import computed from 'ember-computed-decorators';

function generateProps(name, defaultValue) {
  let props = {};

  props[name] = defaultValue;
  props[`tenTimes${name.capitalize()}`] = 10 * defaultValue;

  return props;
}

export default Ember.Component.extend({
  four: 4,
  ...generateProps('five', 5),
  ...generateProps('six', 6),

  @computed('six')
  seven(six) {
    return six + 1;
  }
});

generated

define(/*...*/ {
  //function _createDecoratedObject...
  function generateProps(name, defaultValue) {
    var props = {};

    props[name] = defaultValue;
    props['tenTimes' + name.capitalize()] = 10 * defaultValue;

    return props;
  }

  exports['default'] = _ember['default'].Component.extend(_createDecoratedObject([{
    key: 'four',
    initializer: function initializer() {
      return 4;
    }
  }, {
    key:
  }, {
    key: 'seven',
    decorators: [(0, _emberComputedDecorators['default'])('six')],
    value: function seven(six) {
      return six + 1;
    }
  }]));
});

If I replace the @comptued decorator with seven: Ember.computed('six', function() { return this.get('six') + 1; }, then I get the following:

  exports['default'] = _ember['default'].Component.extend(_extends({
    four: 4
  }, generateProps('five', 5), generateProps('six', 6), {

    seven: _ember['default'].computed('six', function () {
      return this.get('six') + 1;
    })
  }));

Add decorators for observes and on

for observes:

  @observes('model')
  onUpdate(model) {
    ...
  },

for on:

  @on('init')
  setup() {
    ... do stuff ..
  }

Computed decorators do not work with Babel 5.1.13

The calling code is the following:

var MyComponent = Ember.Component.extend({
  layout: layout,
  tagName: 'h4',

  key: 'my-key',

  @computed('key')
  test(key) {
    return `${key} + computed`;
  }

});

With Ember 1.12.0-beta.1 I see this error: ember.debug.js:41940 Uncaught TypeError: unsupported content. Looks like Ember tries to render the test function as the content.

Worked before I updated Babel (was using 5.1.8) but I am not sure whether it's a problem of the code in this repo or of the Babel.

Getter and setter? Decorating accessors

I expected this to work more along the lines of

export default Ember.Component.extend({
  @computed('first', 'last')
  get name(first, last) {
    return `${first} ${last}`;
  },

  @computed('first', 'last')
  set name(value) {
    let [ first, last ] = value.split(' ')
    this.set('first', first)
    this.set('last', last)
    return value
  }
})

What do you think?

Feature Request: Allow composition of computed decorators

For feature parity with ember-macro-helpers and ember-awesome-macros.

This works:

import EmberObject from 'ember-object';

import or from 'ember-awesome-macros/or';
import computed from 'ember-macro-helpers/computed';

export default EmberObject.extend({
  foo: computed(or('bar', 'qux'), function(barOrQux) {
  })
});

This, sadly, does not:

import EmberObject from 'ember-object';

import computed, { or } from 'ember-computed-decorators';

export default EmberObject.extend({
  @computed @or('bar', 'qux') // or @computed(or(..))
  foo(barOrQux) {
  }
});

This works (with kellyselden/ember-awesome-macros#348):

import EmberObject from 'ember-object';

import mapBy from 'ember-awesome-macros/array/map-by';
import sum from 'ember-awesome-macros/sum';
import raw from 'ember-macro-helpers/raw';

export default EmberObject.extend({
  items: [],
  
  totalQuantity: sum(mapBy('items', raw('quantity')))
});

This, sadly, does not:

import EmberObject from 'ember-object';

import { mapBy, sum } from 'ember-computed-decorators';

export default EmberObject.extend({
  items: [],

  @sum @mapBy('items', 'quantity') // or @sum(mapBy(..))
  totalQuantity
});

Automatically setup host for decorator usage.

I think we can remove https://github.com/rwjblue/ember-decorators#babel-setup and end up with:

ember install ember-decorators

The rough idea would be to add the required configuration on included (when running with babel@6).

enable greenkeeper

Update to ember-cli-babel@6

Update to ember-cli-babel@6 for our own addon/ tree transpilation.

Should observers receive their dependents as arguments, like computed already does?

@observes('foo')
bar(foo) { 
  // use foo
}

Discussion about property brace expansion

The current behavior is that @computed('attr.{foo,bar}') will pass the value of attr to the callback function.

Property brace expansion is often shown as an interchangeable shortcut for multiple keys, so I would expect @computed('attr.{foo,bar}') to behave like @computed('attr.foo', 'attr.bar'). However, the latter will pass the values of attr.foo and attr.bar to the callback function.

decorator	expected args	actual args
`@computed('attr.foo', 'attr.bar')`	`attr.foo`, `attr.bar`	`attr.foo`, `attr.bar`
`@computed('attr.{foo,bar}')`	`attr.foo`, `attr.bar`	`attr`

cc @martndemus

The plugin "transform-decorators-legacy" didn't export a Plugin instance

I've just installed the library ember-computed-decorators and I have the following error:

The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (appTestTrees)] failed with:
TypeError: The plugin "transform-decorators-legacy" didn't export a Plugin instance
    at PluginManager.validate (/home/joseda/git/neuro-frontend/node_modules/babel-core/lib/transformation/file/plugin-manager.js:164:13)
    at PluginManager.add (/home/joseda/git/neuro-frontend/node_modules/babel-core/lib/transformation/file/plugin-manager.js:213:10)
    at File.buildTransformers (/home/joseda/git/neuro-frontend/node_modules/babel-core/lib/transformation/file/index.js:237:21)
    at new File (/home/joseda/git/neuro-frontend/node_modules/babel-core/lib/transformation/file/index.js:139:10)
    at Pipeline.transform (/home/joseda/git/neuro-frontend/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at Babel.transform (/home/joseda/git/neuro-frontend/node_modules/broccoli-babel-transpiler/index.js:107:21)
    at Babel.processString (/home/joseda/git/neuro-frontend/node_modules/broccoli-babel-transpiler/index.js:206:25)
    at Promise.then.result.output (/home/joseda/git/neuro-frontend/node_modules/broccoli-persistent-filter/lib/strategies/persistent.js:41:23)
    at initializePromise (/home/joseda/git/neuro-frontend/node_modules/rsvp/dist/rsvp.js:589:5)
    at new Promise$1 (/home/joseda/git/neuro-frontend/node_modules/rsvp/dist/rsvp.js:1077:33)

After a time debugging I'm not able to find what's happening :(. I'm using [email protected], [email protected] and [email protected]; and I've followed the instructions on the README. Have anyone any about what's going on?

chaining is broken

babel fixed how initializers where so sometimes chaining decorators doesn't work correctly.

I'll sort this out, just leaving this here as a reminder.

'computed' export shouldn't be default.

This is more of an es6 qualm, but I think it was be simpler to use if there was no default exported.

So this syntax

import computed, { readOnly } from 'ember-computed-decorators'; Which is odd to write, would become

import { computed, readOnly } from 'ember-computed-decorators';

and

import { computed } from 'ember-computed-decorators';

Update documentation to showcase class syntax.

Need to update the following files to showcase native ES class syntax primarily with a secondary example showing the existing .extend() syntax (and including the @decorator foo: null work around as required).

should @computed('[email protected]') provide attr.something?

example:

@computed('attr.model.@each.{something,somethingElse}')
foo(model) {
  // I think we want model === attr.model
  // not model == some useless proxy object
}

thoughts?

Release a new version!

Please?

Trying to fix linting errors

Really like using this addon. Have been trying to fix the linting errors though and been struggling.

Switching to eslint has removed the @decorator warning, but when using @alias I am still getting lint errors.

@alias('model.code')code

Results in

 9:3  error  "code" is not defined      no-undef

Came across this issue: babel/babel-eslint#204

Any ideas?

I basically have this is so many places, the thought of adding ignore flags almost seems to defeat the purpose of the addon for me.

Thanks

Document `inject` decorator in README

/cc @pzuraq

Add helper for addons to bootstrap parent app

It would be nice if a helper was included with this addon for addons to bootstrap their parent app (described here).

This would especially be helpful for some of the API changes with Babel in Ember CLI (e.g. here).

Would there be interest in accepting a PR for this?

Compatibility issues with babel6 and decorated properties

After fix build issues in #90 I continued to migrate my project and I have compatibility issues.

I have this kind of decorators :

@alias('session.endDate') sessionEndDate,

It worked with babel 5 but with the version 6 I have to use transform-decorators-legacy. It gives sessionEndDate is undefined as described in this SO thread. To use properties this way I have to use transform-class-properties and I have to migrate all my project to use es6 classes which is a huge work.

I didn't found a way to use this kind of properties with "normal" objects. Let me know if I'm wrong but I search a lot and I didn't found a solution.

Any way, if there is a simple solution, the doc have to be updated. I can do it once I have the solution.

Thanks !

It no work on 2.0

I can't seem to import the required module on ember 2.0
WHY GOD

Decorator for Mixin support?

Congrats on launching ember-decorators as a successor to ember-computed-decorators!

I was looking through the docs and I don't see anything about how to handle Mixins. Am I missing it, or is this addon missing that feature?

Here's how I think it could look, if this issue turns out to be a feature request:

import Ember from 'ember';
import RendersIntoApplication from 'my-app/mixins/renders-into-application';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(RendersIntoApplication, AuthenticatedRouteMixin, {
  foo: Ember.inject.service()
});

import Ember from 'ember'
import { mixin } from 'ember-decorators/object';
import { service } from 'ember-decorators/service';
import RendersIntoApplication from 'my-app/mixins/renders-into-application';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

@mixin(RendersIntoApplication, AuthenticatedRouteMixin)
export default class MyComponent extends Ember.Route {
  @service foo
}

Unexpected '@' messages from jshint

Hi there,

I've read some other issues on this repo about JSHint not support annotations as they are still a stage 1 proposal.

I was just wondering what we should do in order to use the annotations and not get failures in our build. Is the best solution to migrate to Eslint instead of JSHint?

Thanks for any advice!

@computed isn't converted to a computed property?

With this code using the latest released ember-cli (0.2.3):

import Ember from 'ember';
import computed from 'ember-computed-decorators'; // jshint ignore:line

export default Ember.Component.extend({
  items: null,
  currentPath: null,

  /* jshint ignore:start */
  @computed('items', 'currentPath')
  /* jshint ignore:end */
  breadCrumbs(items, currentPath) {
    let linkable = true;
    return Ember.A(items).map((item) => {
      const { label, path } = item;
      const active = path === currentPath;
      linkable = linkable && !active;
      return { label, path, active, linkable };
    });
  }
});

I'm getting this error when trying to use breadCrumbs in an #each:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed function (items, currentPath) {
        var linkable = true;
        return Ember['default'].A(items).map(function (item) {
          var label = item.label;
          var path = item.path;

          var active = path === currentPath;
          linkable = linkable && !active;
          return { label: label, path: path, active: active, linkable: linkable };
        });
      }

It's almost as if the transformation isn't being run? However, I do have the es7.decorsators optional transform enabled.

vim

Great package, I wish I would have seen it before..

Just wondered if anyone was aware of a (g)vim package which would fit with ember-computed-decorators, to get some color codes on the editor..

Thanks

ES6 classes broken in various ways

Live Demo: https://buschtoens.github.io/ember-decorators-es6-classes/
Source Code: https://github.com/buschtoens/ember-decorators-es6-classes

In the demo linked above I compare two equivalent components. The only difference is that one was defined using the traditional Ember.Object model and the other using native ES6 classes.

// classic-component.js
export default Component.extend({
  params: null,

  foo: 'bar',

  setOnInit: null,

  setOnDidReceiveAttrs: null,

  @computed('foo', 'setOnInit', 'setOnDidReceiveAttrs')
  computed(foo, setOnInit, setOnDidReceiveAttrs) {
    return `${foo} - ${setOnInit} - ${setOnDidReceiveAttrs}`;
  },

  @on('init')
  eventedInit() {
    set(this, 'setOnInit', Date.now());
  },

  @on('didReceiveAttrs')
  eventedDidReceiveAttrs() {
    set(this, 'setOnDidReceiveAttrs', Date.now());
  }
}).reopenClass({
  positionalParams: 'params'
});

// es6-component.js
export default class extends Component{
  static positionalParams = 'params';

  params = null;

  foo = 'bar';

  setOnInit = null;

  setOnDidReceiveAttrs = null;

  @computed('foo', 'setOnInit')
  computed(foo, setOnInit) {
    return `${foo} - ${setOnInit}`;
  }

  @on('init')
  eventedInit() {
    set(this, 'setOnInit', Date.now());
  }

  @on('didReceiveAttrs')
  eventedDidReceiveAttrs() {
    set(this, 'setOnDidReceiveAttrs', Date.now());
  }
}

Diff between both transpiled files: https://gist.github.com/buschtoens/29fbaec09b4d9c94443d3c175f4701ad/revisions?diff=split

This might only be tangentially related to this project, but since the README features ES6 classes so prominently, I feel like this is the right place to report this.

Multiple issues arise when using ES6 class syntax:

Initially provided attributes do not overwrite default property values. Only after triggering didReceiveAttrs by subsequently updating an attribute the default value is replaced.
Events don't work.

I'm sure there's more, but these are the most obvious. I also had some problems with class properties being ignored altogether, but I can't seem to reproduce it in a slimmed down example.

Non-cached mode

Hi!
How I can implement volatile with computed decorator?

Code from Api docs.

value: Ember.computed(function() {
    return OutsideService.getValue();
  }).volatile()

Thanks.

import everywhere / inject

Hello, newbie ES6 question here:

Is there a way to import the decorators in, say, all controllers?

=> I don't see myself adding import computed, {uniq,union,sum,sort,setDiff,reads,readOnly,or, and,oneWay,notEmpty,not,none,min,max,match,mapBy,map,lte,lt,intersect,gte,gt,filterBy,filter,equal,empty, collect, bool,alias} from 'ember-computed-decorators'; in all my controllers.

Though I could probably import at least computed, which seems the most essential for not DRY.

I tried to import * as deco from 'ember-computed-decorators' but it doesnt seem to work with the @ convention

Thanks

'value' in set from computed get/set is actually 'key'

@computed('estimatedStart', 'realStart')
start: {
  set(value, estimatedStart, realStart) {
     // value => "start"
  }
}

Failing tests for Ember 1.10.0

Details: https://travis-ci.org/rwjblue/ember-computed-decorators/builds/58532092#L358-L408

ESLint undefined errors

How can I get ESLint to not flag things like this as undefined?

@alias('user.address.validations.attrs.state.messages') stateErrorMessages,

error 'stateErrorMessages' is not defined no-undef

Uncaught TypeError: The decorator for method undefined is of the invalid type undefined

Getting this on the latest release version of ember-cli (0.2.3).

import Ember from 'ember';
import computed, { readOnly } from 'ember-computed-decorators'; // jshint ignore:line

export default Ember.Component.extend({
  items: null,
  currentPath: null,

  /* jshint ignore:start */
  @computed('items', 'currentPath')
  @readOnly
  /* jshint ignore:end */
  breadCrumbs() {
    const currentPath = this.get('currentPath');
    let linkable = true;

    return Ember.A(this.get('items')).map((item) => {
      const { label, path } = item;
      const active = path === currentPath;
      linkable = linkable && !active;
      return { label, path, active, linkable };
    });
  }
});

Doesn't work with babel-core 5.5.0+ (latest: 5.5.6)

This commit changed the interface: babel/babel@1934c16

Filter array based on another property?

Is there an equivalent way to filter an array when another property changes? Something that achieves the same thing as:

someItems: computed.filter('allItems', function(item) {
   return item.indexOf(this.get('filterText')) > -1;
}).property('filterText');

EDIT: Fix property to call computed.filter(), instead of computed().

@computed causes recalculation of all observed properties

By using Ember's computed wrapper, the function is being invoked when at least one of the observable properties has been changed. When recomputing the property, it is not forcing the recalculation of all observables.

const { computed, get, isPresent } = Ember;

export default Ember.Object.create({
  firstProperty  : null,
  secondProperty : null,
  
  firstComputed: computed('firstProperty', 'secondComputed', 'thirdComputed', function() {
    if (isPresent(get(this, 'firstProperty'))) {
      // When this condition is verified, "thirdComputed" is not "computed"
      return get(this, 'secondComputed');
    }
    return get(this, 'thirdComputed');
  }),
  
  secondComputed: computed(function() {
    console.log('secondComputed logic executed');
    // some magic here ...
  }),
  
  thirdComputed: computed('otherProperty', function() {
    console.log('thirdComputed logic executed');
    // more magic here ...
  })
});

Let's assume that firstComputed is used at some point.
On change of the firstProperty the firstComputed will be recalculated. The thirdComputed will be calculated ONLY when the condition if (isPresent(get(this, 'firstProperty'))) is false (exactly as it defined by the logic).

Using ember-computed-decorators the behavior of computed property is different.

import C from 'ember-computed-decorators';
const { isPresent } = Ember;

export default Ember.Object.create({
  firstProperty  : null,
  secondProperty : null,
  
  @C('firstProperty', 'secondComputed', 'thirdComputed')
  firstComputed(firstProperty, secondComputed, thirdComputed) {
    // At this point all 3 properties in input are 'computed' / 'recalculated'
    if (isPresent(firstProperty)) {
      // When this condition is verified, "thirdComputed" is not "computed"
      return secondComputed;
    }
    return thirdComputed;
  },

  @C('firstProperty', 'secondComputed', 'thirdComputed')
  firstComputedNoParams() {
    // Even at this point all 3 properties in input are 'computed' / 'recalculated'
    if (isPresent(get(this, 'firstProperty'))) {
      // When this condition is verified, "thirdComputed" is not "computed"
      return get(this, 'secondComputed');
    }
    return get(this, 'thirdComputed');
  },

  @C
  secondComputed() {
    console.log('secondComputed logic executed');
    // some magic here ...
  },

  @C('otherProperty')
  thirdComputed(otherProperty) {
    console.log('thirdComputed logic executed');
    // more magic here ...
  }
});

On change of any observable property, all the observables will be recalculated by firstComputed and even by firstComputedNoParams.

In case the behavior is intentional, it should be documented that all the observable properties will be eagerly calculated independently of the logic from the observer property.

mutate descriptors don't create new descriptors.

Unknown transformer es7.decorators specified in optional

After I modify my Brocfile.js with the below I get a compile time error in Ember-CLI (v1.13.1)

var app = new EmberApp({
  babel: {
      optional: ['es7.decorators']
  }
});

Visual Studio Code

Is there a way to use this addon in visual studio code without js errors. I enabled decorators, but it errors that the decorators aren't before a declaration.

//no visual studio error
@computed("attr")
function testProp(attr) {
  return attr;
}
//error in visual studio code
Ember.Component.extend({
  @computed("attr")
  testProp(attr) {
    return attr;
  }
})

The Broccoli Plugin: [broccoli-persistent-filter:Babel] failed

Hi,

I'm trying to update to ember 2.13 and it seems there is a problem with babel 6. I have this error :

The Broccoli Plugin: [broccoli-persistent-filter:Babel] failed with:
SyntaxError: tiny/components/kh-health-card-field.js: Unexpected token (10:2)
   8 |   classNameBindings: ['customField.property'],
   9 |
> 10 |   @computed('customField.property')
     |   ^
  11 |   details() {
  12 |     const property = this.get('customField.property');
  13 |     const type = this.get('customField.type');
    at Parser.pp$5.raise (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:4333:13)
    at Parser.pp.unexpected (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:1705:8)
    at Parser.pp$1.parseDecorator (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:1885:10)
    at Parser.pp$3.parseObj (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3887:28)
    at Parser.pp$3.parseExprAtom (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3639:19)
    at Parser.pp$3.parseExprSubscripts (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3414:19)
    at Parser.pp$3.parseMaybeUnary (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3394:19)
    at Parser.pp$3.parseExprOps (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3324:19)
    at Parser.pp$3.parseMaybeConditional (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3301:19)
    at Parser.pp$3.parseMaybeAssign (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3264:19)
    at Parser.pp$3.parseExprListItem (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:4190:16)
    at Parser.pp$3.parseCallExpressionArguments (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3493:20)
    at Parser.pp$3.parseSubscripts (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3453:31)
    at Parser.pp$3.parseExprSubscripts (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3424:15)
    at Parser.pp$3.parseMaybeUnary (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3394:19)
    at Parser.pp$3.parseExprOps (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3324:19)
    at Parser.pp$3.parseMaybeConditional (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3301:19)
    at Parser.pp$3.parseMaybeAssign (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:3264:19)
    at Parser.pp$1.parseExport (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:2571:19)
    at Parser.pp$1.parseStatement (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:1830:74)
    at Parser.pp$1.parseBlockBody (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:2212:21)
    at Parser.pp$1.parseTopLevel (/home/dougui/workspace/tiny/frontend/node_modules/babylon/lib/index.js:1723:8)

The broccoli plugin was instantiated at:
    at Babel.Plugin (/home/dougui/workspace/tiny/frontend/node_modules/broccoli-plugin/index.js:7:31)
    at Babel.Filter [as constructor] (/home/dougui/workspace/tiny/frontend/node_modules/broccoli-persistent-filter/index.js:62:10)
    at new Babel (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/index.js:35:10)
    at Babel (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/index.js:30:12)
    at Class.transpileTree (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli-babel/index.js:38:48)
    at Object.toTree (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli-babel/index.js:45:30)
    at /home/dougui/workspace/tiny/frontend/node_modules/ember-cli-preprocess-registry/preprocessors.js:180:26
    at Array.forEach (native)
    at processPlugins (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli-preprocess-registry/preprocessors.js:178:11)
    at module.exports.preprocessJs (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli-preprocess-registry/preprocessors.js:171:10)
    at EmberApp.appAndDependencies (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1110:27)
    at EmberApp.javascript (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1227:30)
    at EmberApp.toArray (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1664:12)
    at EmberApp.toTree (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1686:38)
    at module.exports (/home/dougui/workspace/tiny/frontend/ember-cli-build.js:25:14)
    at Builder.setupBroccoliBuilder (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/models/builder.js:56:19)
    at new Builder (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/models/builder.js:30:10)
    at BuildTask.run (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/tasks/build.js:15:19)
    at Promise.resolve.then (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/lib/models/command.js:242:46)
    at tryCatch (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:538:12)
    at invokeCallback (/home/dougui/workspace/tiny/frontend/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:553:13)
    at /home/dougui/workspace/tiny/frontend/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:628:16

Here is my `ember-cli-build.js :

/* eslint-env node */
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel: {
      optional: ['es7.decorators']
    }
  });

  return app.toTree();
};

The optional value doesn't make a difference.

Consider renaming?

We currently have decorators for a number of things other than Ember.computed. I think renaming to something more general may be a good idea.

Some suggestions:

ember-ornamentalist
ember-decorators
ember-decorator-grab-bag
ember-decorator-bonanza

Babel 6

Struggling to get this to work with ember-cli 2.14 and Babel 6 I tried various permutations and, the instructions on the readme

I followed the instructions

Runtime error with @alias in service

I'm in the process of upgrading to Ember 2.13.1, and I have this service:

import Ember from 'ember';
import computed, { alias } from 'ember-computed-decorators';

export default Ember.Service.extend({
  // ...
  @alias('session.data.authenticated.id') id,
  @alias('user.name') name,
  // ...

which works fine on ember 2.9.x, but
on 2.13.1, when I load the app in the browser, I see this in console:

ember.debug.js:19829 ReferenceError: id is not defined
    at Module.callback (current-user.js:83)
    at Module.exports (loader.js:114)
    at requireModule (loader.js:29)
    at Class._extractDefaultExport (index.js:392)
    at Class.resolveOther (index.js:108)
    at Class.superWrapper [as resolveOther] (ember.debug.js:42849)
    at Class.resolve (ember.debug.js:7201)
    at resolve (ember.debug.js:4590)
    at Registry.resolve (ember.debug.js:4051)
    at Registry.resolve (ember.debug.js:4055)

which is weird, so I click the top of the trace, and see this:


  exports.default = _ember.default.Service.extend((_dec = (0, _emberComputedDecorators.alias)('session.data.authenticated.id'), _dec2 = (0, _emberComputedDecorators.alias)('user.name'), _dec3 = (0, _emberComputedDecorators.default)('user'), _dec4 = (0, _emberComputedDecorators.default)('user'), _dec5 = (0, _emberComputedDecorators.default)('session.data.authenticated.{token}'), (_obj = {
    session: service('session'),
    store: service(),

    id: id, // <- error points here
    name: name,

what's going on?

It would be nice to have a new version published.

Pretty please 😄

Equal evaluating to false, when equal

Hi there

I have a scenario to the following effect:

@equal('incrementedProp', 'compProp') isEqual: false,

compProp(otherProp) {
  return otherProp;
},

In the above scenario isEqual never evaluates to true, even when the properties are in fact equal as logged - when logging the two dependant properties and isEqual (compProp, incrementedProp, isEqual) I get the following for example: 1 1 false

Additionally changing it to a computed property works as expected:

@computed('incrementedProp', 'compProp')
isEqual(incrementedProp, compProp) {
  return incrementedProp === compProp;
},

Use machty's jshint guard hax

There might be some not-yet-handled edge cases but I think this should do the trick:

https://github.com/machty/broccoli-es7-decorator-jshint-guards

@rwjblue and I talked about this and he suggested using and re-exporting the above in ember-computed-decorators. I was gonna do this and then got busy (and I don't totally grok the test failures due to the recent Babel change).

allow for dependencies on attrs but receive the object as the argument

I have the following setup:

@computed('somePromise.isFulfilled')
cpBasedOnPromise(promise) {
  //promise here is just the value true or false, not the promise itself
}

In this instance I don't want the value of isFulfilled, I want the value of the promise but I want the computed property dependent on if the promise is fulfilled or not.

get/set example doesn't pass key to set

The get/set example in the README doesn't seem to pass the key as the first argument to set like the standard Ember new CPs do. Is that intentional or a misprint?

Add test for @computed passing in nested property

Per discussion with @rwjblue and another issue, we should expect @computed('foo.bar') to pass the value of foo.bar to the callback function. There is currently no test for this (though there are for attr.models.@each and attr.models.[]).

Ember Data decorators do not appear to work with ES6 classes

import DS from 'ember-data';
import { attr } from 'ember-computed-decorators/ember-data';

export default class extends DS.Model {
  @attr title;
};

Using Babel 6 with this EmberApp config:

    babel: {
      plugins: [
        'transform-decorators-legacy',
        "transform-class-properties"
      ]
    }

How "bleeding edge" is this project?

Robert

I love the new syntax you show in this project but I'm curious how "bleeding edge" / "breaking" this is today. I'm asking as someone who is looking to pull this in / use it / not have a team of devs blow up on me when it stops working in 30 days :)

In all seriousness - I'll be following this personally regardless but I'm asking the question above to understand if I should pull it in at work (or wait a bit to see it mature).

Thanks for such a great project @rwjblue !!!

ember-decorators / ember-decorators Goto Github PK

ember-decorators's Introduction

Ember Decorators

Usage

Development

Specs

Organization

Setting up

Linting

Running tests

Running the dummy application

License

ember-decorators's People

Contributors

Stargazers

Watchers

Forkers

ember-decorators's Issues

Example

source

generated

Recommend Projects

Recommend Topics

Recommend Org