goatslacker / alt

Isomorphic flux implementation
http://alt.js.org/
3.45k stars 323 forks source link

Alt is a polyglot (examples) #150

Open goatslacker opened 9 years ago

goatslacker commented 9 years ago

You can use alt with any transpile to js language.

I'd appreciate some help with alt examples written in

ziflex commented 9 years ago

Probably needs to create TypeScript type definitions too.

goatslacker commented 9 years ago

I have a branch that started doing that. I don't know typescript too well though

Shearerbeard commented 9 years ago

I'm actually bootstrapping a large project based on Alt for all my state needs. I've got a big portion of the typing worked out if this helps. I'm pretty close to having TodoMVC and chat ported over to Typescript.

goatslacker commented 9 years ago

That would be amazing. I have a local branch which I started working on types based on flow types but since I don't know typescript too well I keep running into compiler issues trying to translate from flow to typescript.

I think what I'd like to add is a d.ts file, unless I'm mistaken?

Shearerbeard commented 9 years ago

Correct its a d.ts file. Let me organize what I was working on tonight and I'll have you take a look. The problem I'm running into is that I'm new to Alt and flux so I want to make sure i'm setting up my interfaces in a way that makes sense to those experienced with the library.

Shearerbeard commented 9 years ago

todo mvc in typescript - Next I'm going to work on porting over alt-tutorial so we have an example involving async.

goatslacker commented 9 years ago

I looked over the typescript definitions and they look pretty sound, some small things are changing here and there but I think we can manage that in the next release.

Is the typescript def working out thus far?

Shearerbeard commented 9 years ago

I'm working on a quick demo to make sure my definitions for sources compile fine and if thats the case I would say were solid for an initial release. Eventually I'm sure some of the generics could be cleaned up to be a bit more intuitive.

Did we want the example project and some basic docs moved over to this repo to go along with it?

Also I ran into a bit of a problem with moving this over to a typed system in the way that Alt defines stores and actions. A basic example such as the following:

interface State {
    todos:{[key:string]:Todo}
}

class TodoStore {
    constructor() {
        this.bindActions(todoActions);
        this.todos = {};
    }
    //implementation
}

export default const todoStore = alt.createStore<State>(TodoStore);

The above will not compile due to "property bindActions does not exist on TodoStore". The workaround is to implement a dummy class with proper signatures and an empty implementation for TodoStore to inherit such as the following (from my alt-typescript-todomvc example):

interface State {
  todos:{[key:string]:Todo}
}

//dummy class - no implementation details are actually used
class StoreModel implements AltJS.StoreModel<State> {
    bindActions( ...actions:Array<Object>):void {}
    getState():State {
      return <State>{};
    }
}

class TodoStore extends StoreModel {

  todos:{[key:string]:Todo};

  constructor() {
   //now compiles because bind actions is a known quantity
    this.bindActions(todoActions);
    this.todos = {};
    super();
  }
  //implementation details
}

Running alt.createActions() shows an identical issue. I think we can release these definitions as is but in a future release I propose that we implement a base class to inherit from such as the following:

import {StoreModel}  from "alt";

interface State {
   todos:{[key:string]:Todo}
}

class TodoStore extends StoreModel<State> {

  todos:{[key:string]:Todo};

  constructor() {
   //now compiles because bindActions is a known quantity
    this.bindActions(todoActions);
    this.todos = {};
    super();
  }
  //implementation details
}

This will play much better with a type system and follows pretty closely to what the React team is doing by moving React.createClass(/*implementation*/); to class CoolComponent extends React.Component { /*implementation*/ }