Request for documentation examples without the typescript

[stevies]

Would it be possible to add some documentation examples in ESNext JavaScript without typescript?

[samuelmolinski]

I am having similar issues. I have tried to install the plugin after creating a es6 new project with the cli. I have appended my aurelia.json dependencies with

{
  "name": "redux",
  "path": "../node_modules/redux/dist",
  "main": "redux.min"
},
{
  "name": "aurelia-redux-plugin",
  "path": "../node_modules/aurelia-redux-plugin"
}

I still have not been able to use the plugin. Can you help with an example or some direction to how to do with?

[jmzagorski]

Examples would be great because I am running into problems with the select decorator and babel decorators/propertiers. It seems, the custom getter in your select decorator is not passed to the _initDefineProperty method when babel is creating the property. As soon as that line of code is hit in the constructor of the class, my readonly property is undefined. I tried decorating an empty method as a workaround @select users() { }, but same results as well. Any help will be appreciated.

[steelsojka]

@jmzagorski This will work with TypeScript decorators as well as babel decorators since they are both based off the spec proposal. The select decorator requires an argument. In the example you have you are not providing an argument.

class MyClass {
  @select('mySelector') // This will return the decorator
  users() {}

  @select // This will not work as the actual decorator was never created.
  users() {}
}

@samuelmolinski What issues are keeping you from using it? @stevies Are you looking for examples not using decorators?

[jmzagorski]

@steelsojka sorry for my laziness, I meant to put the argument in my example. That example you showed was my exact code and i was still having issues with babel 6.x. However i might have been testing it from another method in the same class using this.users because I needed to dynamically generate routes. But that should still work right? I can show you my entire class if that helps, but can't get to my computer right now.

[steelsojka]

@jmzagorski Give me your example when you get to it. That will help.

[jmzagorski]

Okay lets hope i did not mess this up...starting from a clean aurelia navigation esnext version 1.1.2

1. add a dummy reducer to src folder just to populate initial state

   
   import { combineReducers } from 'redux';

function memberReducer(state = { id: 'bob'}, action) { return state; }

const rootReducer = combineReducers({ member: memberReducer });

export default rootReducer;

2. Add reducer to store in `main.js`

import 'bootstrap'; import { createStore } from 'redux'; import rootReducer from './reducer';

export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging() .plugin('aurelia-redux-plugin', { store: createStore(rootReducer) });

aurelia.start().then(() => aurelia.setRoot()); }

3. Change `users.js` to:

import { Store, select } from 'aurelia-redux-plugin';

const selector = state => { console.log('SELECTOR CALLED') return state.member.id }

export class Users {

static inject() { return [Store]}

constructor(store) { this.member = store.getState().member; }

@select(selector) funcSel() {};

@select('member.id') funcStr() {};

@select('member.id') propStr;

@select(selector) propSel; }

4. Change users.html to:

Unless i messed something up trying to recreate a very simple version, I only see the name "Bob" from the first header "Store State Bob"

Now if i put a `debugger` in the constructor of the `Users` view model i can see what each property is before babel calls `_initDefineProp`. In this simple recreation I actually get an error when I try to inspect the getter (`[Exception: TypeError: isString_1.default is not a function at Store.select (http://localhost:9000/jspm_packages/npm/aurelia-redux-plugin@0.0.4/dist/commonjs/Store.js:54:31) at Users.getter [as propSel]`) so maybe I did something wrong in the recreation, but in my production app (using webpack) I actually see the value returned from the selector on my property when inspected. Now when `initDefineProp` is called it gets undefined. The empty functions dont seem to work from the start. Hopefully I am doing something wrong that can be corrected. I will be glad to provide anymore details if this is not clear enough.

[tochoromero]

I'm having issues when using ESNext as well.

I have a very simple example, and it works as expected with Typescript, but when I port that to ESNext it stops working. In the console I get this:

 Cannot observe property 'value' of object 
Welcome {value: undefined, __observers__: Object, addOne: function, subtractOne: function}

value is the property I have annotated with @select like this:

  @select('value')
  value;

At the same time I cannot get the @dispatch annotation to work, I'm using it like this:

 @dispatch(() => ({type: 'ADD'}))
  addOne = () => {};

As mentioned before the example works with Typescript, but unfortunately our project is not Typescript.