These are chat archives for canjs/canjs

18th
Apr 2017
Justin Meyer
@justinbmeyer
Apr 18 2017 00:34
@web-mech yeah, we will incorporate that
Michael Price
@web-mech
Apr 18 2017 00:35
@justinbmeyer awesome!
Justin Meyer
@justinbmeyer
Apr 18 2017 00:36
just to give you a heads up, the next version of can-stream and such are going to have breaking changes
basically, you use it as a decorator / mixin
but everything else will be the same
var defineKefir = require("can-define-stream-kefir");

Type = DefineMap.extend({

})
defineKefir(Type);
var defineKefir = require("can-define-stream-kefir");

@defineKefir
Type = DefineMap.extend({

});
Michael Price
@web-mech
Apr 18 2017 00:37
nice!
Justin Meyer
@justinbmeyer
Apr 18 2017 00:38
yeah, we are taking this approach w/ as many things as possible to make it possible to use native class
Michael Price
@web-mech
Apr 18 2017 00:39
gotcha, how would this approach help?
Justin Meyer
@justinbmeyer
Apr 18 2017 00:39
The goal is that you mixin all behaviors to your class
Michael Price
@web-mech
Apr 18 2017 00:39
will the next version respect semver?
Justin Meyer
@justinbmeyer
Apr 18 2017 00:39
eventually, it would look like
Michael Price
@web-mech
Apr 18 2017 00:39
ok cool
Justin Meyer
@justinbmeyer
Apr 18 2017 00:40
well can-stream and such are 0.0.5
so yes
eventually it will look like:
@define
@defineKefir
class Type {

}
Michael Price
@web-mech
Apr 18 2017 00:41
thats awesome!
Justin Meyer
@justinbmeyer
Apr 18 2017 00:41
yeah, the ultimate goal is really to keep your modules so they never have to change
Michael Price
@web-mech
Apr 18 2017 00:41
reminds me a bit of angular2 in typescript
Justin Meyer
@justinbmeyer
Apr 18 2017 00:41
as long as they are linked to the right version of their dependencies
we want to avoid breaking changes as much as possible going forward
what this means is that instead of something like can-define-stream changing the behavior of can-define behind the scenes, everything gets mixed into your class
you could have different version of can-define-stream-kefir in the same app
(tricky to configure, but this would be possible (you'd use steal's map config))
Michael Price
@web-mech
Apr 18 2017 00:45
this is great!
Kevin Phillips
@phillipskevin
Apr 18 2017 00:46
will be really nice if you want to transition your app from can-define-stream-kefir to can-define-stream-rxjs or can-define-stream-bacon or whatever
and not have to rewrite your existing components
Justin Meyer
@justinbmeyer
Apr 18 2017 00:47
well, it's like you'd have to rewrite the stream methods
like .scan
to whatever the bacon / rxjs equivalent would be
Kevin Phillips
@phillipskevin
Apr 18 2017 00:47
i mean… keep existing components using kefir and write new components with rxjs
Michael Price
@web-mech
Apr 18 2017 00:47
unless you aliased a set of common methods?
Justin Meyer
@justinbmeyer
Apr 18 2017 00:47
yeah
@phillipskevin yeah, that's the idea
Kevin Phillips
@phillipskevin
Apr 18 2017 00:47
and transition them over time
Justin Meyer
@justinbmeyer
Apr 18 2017 00:47
@web-mech yeah, but not really worth it imo
we don't need to create a generic streaming lib that runs ontop of other streaming libs
if someone wants to extend the upcoming can-reflect for that, they can be my guest
Michael Price
@web-mech
Apr 18 2017 00:48
gotcha, its not like anyone would just swap out their streaming lib midstream anyway
Justin Meyer
@justinbmeyer
Apr 18 2017 00:49
it support generic canReflect.onValue, canReflect.offValue, canReflect.getValue, canReflect.setValue
which different stream libraries can implement
so they can automatically work in stache
in the future ... it should be possible to have component view models that look like:
ViewModel = function(){
  this.count = Kefir.sequentially(1000, [1, 2])
}
Michael Price
@web-mech
Apr 18 2017 00:51
thats purty
Justin Meyer
@justinbmeyer
Apr 18 2017 00:51
(a special-ish version of a stream that supports setValue will be needed for accepting values from the view)
Michael Price
@web-mech
Apr 18 2017 00:55
sounds simple enough
Justin Meyer
@justinbmeyer
Apr 18 2017 00:55
setableStream = function(){
  var lastEmitter;
  var stream = Kefir.stream( emitter => {
    lastEmitter = emitter;
  })
  stream[Symbol.for("can.setValue")] = function(newValue){
    lastEmitter.emit(newValue);  
  }
  return stream;
};
ViewModel = function(){
  this.value = setableStream();
  this.valueChangedCount = this.value.scan( (last) => { return last + 1 }, 0 )
}
This way a custom element will work like <my-element {value}="something"/>
value will be a stream of something values. valueChangedCount will be the number of times value changed.
Michael Price
@web-mech
Apr 18 2017 01:01
gotcha
Justin Meyer
@justinbmeyer
Apr 18 2017 01:02
or it could look like:
@define
@defineStream
class ViewModel {
  value: "setableStream",
  valueChangeCount: {
    stream: function(){
      return this.value.scan( (last) => { return last + 1 }, 0 )
    } 
  }
}
Michael Price
@web-mech
Apr 18 2017 01:14
class ViewModel {
    get value() {
        return 'setableStream';
    }

    get valueChangedCount() {
        return this.value.scan( (last) => { return last + 1 }, 0 );
    }
}
Would this work?
Szabolcs Schmidt
@sszabolcs
Apr 18 2017 07:18
@justinbmeyer You use 'class' and decorator in your example. Are you planning to migrate to ES6 (ES2015) or these codes are typescript codes?
Justin Meyer
@justinbmeyer
Apr 18 2017 14:24
@sszabolcs migrate CanJS's codebase?
I'm not sure we are going to migrate CanJS's codebase anytime soon
there's no real reason for it ... however, we do want to empower folks using ES6, hence the examples with decorators
(well there are reasons for migrating it to es6, but costs)
@web-mech I don't see how it could
Justin Meyer
@justinbmeyer
Apr 18 2017 14:29
get value() {
        return setableStream();
 }
might be more possible .... you'd also need some sort of decorator
Szabolcs Schmidt
@sszabolcs
Apr 18 2017 14:51
@justinbmeyer Ok, I was not clear enough, thank you for the clarification. I meant CanJS's codebase when I was talking about migration. Now I see your intention with ES6.
Justin Meyer
@justinbmeyer
Apr 18 2017 15:10
Here's a hint everyone ... If you look at a connection in the dev tools, you can walk its proto chain to see each behavior, the methods it implements .... in the order they are applied.
Cursor_and_JS_Bin_-_Collaborative_JavaScript_Debugging.png