These are chat archives for jdubray/sam

7th
Jun 2016
Jean-Jacques Dubray
@jdubray
Jun 07 2016 13:43
I am working on a typescript implementation of SAM, I was wondering if someone would be able to answer a couple of questions, I am not sure I found the best way to "wire" the pattern in Angular2/ts
Fred Daoud
@foxdonut
Jun 07 2016 14:26
@jdubray I can try
Jean-Jacques Dubray
@jdubray
Jun 07 2016 15:30
So, I got a boilerplate ng2/ts project running. It's pretty rough at the moment. The app component looks like this:
import {Component,NgZone}  from '@angular/core';
import {Model}      from './model';

@Component({
    selector: 'my-app',
    template: '<div [innerHTML] = "stateRepresentation"></div>' 
})

export class AppComponent { 

    private zone: NgZone ;

    constructor(private zone: NgZone) {}

    stateRepresentation: string ;

    ngOnInit() {
      if (actions !== undefined) { 
          actions.present = model.present ;
          view.display = this.render ;
          view.zone = this.zone ;
          view.component = this ;
      }
      this.stateRepresentation = view.init(model) ;
    }

    render(sr: string) {

        view.zone.run(() => {
            view.component.stateRepresentation = sr ;
        });

    }

}
At the moment, the view, actions, model and state are all global vars. It works well, I can wire the view display method to the AppComponent render method
The first question I have is can TypeScript support a json object (without type :-)
Jean-Jacques Dubray
@jdubray
Jun 07 2016 15:36
Second let's say now that I want the Model, View and State to be an Angular injectable class, how would I wire that?
Fred Daoud
@foxdonut
Jun 07 2016 15:43
First note that you should use: template: '<div>{{stateRepresentation}}</div>'
If you don't want a type in TypeScript, you can use: any
Fred Daoud
@foxdonut
Jun 07 2016 15:48
For dependency injection, you can use something like:
This message was deleted
import {bootstrap} from "angular2/platform/browser";

const model = ...;

bootstrap(App, [
  provide("Model", {useValue:model}),
]);
Then to inject "Model" :
import { Inject } from "angular2/core";

constructor(@Inject("Model") private model) { ... }
Edward Mulraney
@edmulraney
Jun 07 2016 16:09
@jdubray SAM is really cool, but do you have plans to make sam.js.org more accessible to the regular developer?
Its pretty heavy reading currently and quite academic
Daniel Neveux
@dagatsoin
Jun 07 2016 18:16
Its pretty heavy reading currently and quite academic
+1
Interesting new version of Mobx which integrates an action system. Maybe worth to update the site exemple.
Jean-Jacques Dubray
@jdubray
Jun 07 2016 22:54

Its pretty heavy reading currently and quite academic

I find SAM a lot simpler than anything I can see, though I understand your comment. Are the examples difficult to understand?

To be clear, SAM is just me, I don't make any money out of it and I have a day job. I don't work for Google or Facebook.

@foxdonut thank you.
actually for inner-html, it looks like you cannot use {{}} otherwise it displays the HTML as a string
This is what I was missing:
provide("Model", {useValue:model}),
Fred Daoud
@foxdonut
Jun 07 2016 23:28
@jdubray welcome!