These are chat archives for canjs/canjs

31st
Jan 2016
Alex
@whitecolor
Jan 31 2016 13:23
Hey guys who is intrested in nice canjs DX with frictionless hot components reloading you may try my module https://github.com/whitecolor/can-hot, it also has example for novices
Julian
@pYr0x
Jan 31 2016 13:31
great work !!
i am interested on the "on the fly" compiling.. maybe we can talk about that
is this also working with stache files and can-impirt and can-connect model tags?
Alex
@whitecolor
Jan 31 2016 13:33
Thanks you may try and report/ask about bugs or something.
it works with stache out of the box as stache templates are dependancies of the components
and dependants or reloaded stache templated are reloaded too.
models is a state it should be treated a little bit different, actually state may exist as components
Julian
@pYr0x
Jan 31 2016 13:36
ok..
Alex
@whitecolor
Jan 31 2016 13:36
well I think it won't work with con-connect tags as it is not a can.Component
Julian
@pYr0x
Jan 31 2016 13:36
the configuration of HMR and watchalive seems a little bit tricky...
Alex
@whitecolor
Jan 31 2016 13:37
well but then there is a little of magic, you understand each component that is involved and can configure it
Julian
@pYr0x
Jan 31 2016 13:37
can-hot and can-hmr is only for single or multipages
no ssr inside
?
Alex
@whitecolor
Jan 31 2016 13:38
watchalive watches for changes and notifies client, steal-hmr handles this change notifications and do module reloading, and then can-hot swaps reloaded components
Julian
@pYr0x
Jan 31 2016 13:38
sounds perfect
whats the different of steal-tools livereload?
Alex
@whitecolor
Jan 31 2016 13:39
mainly - it works))
Julian
@pYr0x
Jan 31 2016 13:39
steal-tools for you not?
Alex
@whitecolor
Jan 31 2016 13:41
well i dind't try I always used my watchalive dev server as it is agnostic to loader and also can do server side transormation thus for example I now use babel6 for client development
Julian
@pYr0x
Jan 31 2016 13:41
so you transpile your code with node and serv that to the client
since babel6 has no browser support anymore
?
Alex
@whitecolor
Jan 31 2016 13:41
yes
I also transpile less/css)
Julian
@pYr0x
Jan 31 2016 13:42
that sound great
Alex
@whitecolor
Jan 31 2016 13:42
not to do this on client each time
watchalive aslo caches watched files
Julian
@pYr0x
Jan 31 2016 13:42
so it is much faster on the client
but do did not budle files?
Alex
@whitecolor
Jan 31 2016 13:43
then steal live reload probably intends to do the same as steal-hrm, it won't reload can.Component on the fly
not it just transpiles)) it is not webpack))
watchalive serves and watches, steal loads in the browser
Julian
@pYr0x
Jan 31 2016 13:43
transpile into what? AMD?
Alex
@whitecolor
Jan 31 2016 13:44
[/\.js$/, (source) =>
      babel.transform(source, {
        presets: ['es2015', 'stage-0']
      }).code
    ]
just to ES5 cjs
AMD transpile needed for build, and steal build now supports custom transpiler
actually I may add this in the example in can-hot)
and transpile there files with watchalive
less are transpiled there, and it also watches for less dependencies
imports
Julian
@pYr0x
Jan 31 2016 13:47
can-hot is a great alternative to steal-tools livereaload. while i thinking that can will go more and more to SSR so the client development without ssr will niche. so i will take a look into it and try to use it for my projects. i am not a big fan of ssr, so thanks a lot
whats about scss?
Alex
@whitecolor
Jan 31 2016 13:48
I don't use SSR
Julian
@pYr0x
Jan 31 2016 13:48
i too ;)
so can-hot is a really good alternative
Julian
@pYr0x
Jan 31 2016 14:14
whats about scss files with steal-hmr
can you support them?
scss or sass
Alex
@whitecolor
Jan 31 2016 14:24
yes, how do you handle them now?
watchalive supports very simple plugins you just need to export object with functions transfrom or transformFile (both can be sync or acync).
Julian
@pYr0x
Jan 31 2016 14:28
there is a plugin for steal
Alex
@whitecolor
Jan 31 2016 14:29
it works for client side?
Julian
@pYr0x
Jan 31 2016 14:30
yes
Alex
@whitecolor
Jan 31 2016 14:34
@pYr0x I will look it to it to test
you can eseally create a plugin for watchalive that do any transormation, but can make event steal-saas work with watchalive out of the box as it is just systemjs plugin
that exports translate funciton
Julian
@pYr0x
Jan 31 2016 14:42
i am not familiar with systemjs plugins :(
Alex
@whitecolor
Jan 31 2016 15:19
@pYr0x anyway you don't have to change anything even if you use watchalive, you still have got steal on the client side, so it will do the job, and I probably add the sass plugin that supports watching for dependencies
Julian
@pYr0x
Jan 31 2016 15:25
ok nice
thanks :)
i am very excited to test watchalive
:)
Adam Tourkow
@atourkow
Jan 31 2016 17:47
I’m confused. If I have a component with viewModel: { queue: $.get(‘url’, {}); } And in the stache file I have {{#with queue}} {{#if isPending}}loading{{else}}{{#value}}{{output.var}}{{/value}}{{/if}}{{/with}} it works fine, but then how can I change queue.output.var manually?
Kevin Phillips
@phillipskevin
Jan 31 2016 17:48
@atourkow why do you want to change it manually?
Adam Tourkow
@atourkow
Jan 31 2016 17:49
@phillipskevin Like, lets say I want to manipulate the value with a function on a click
because the $.get returned deferred, there’s no “values” that I can see.
Kevin Phillips
@phillipskevin
Jan 31 2016 17:53
you probably want to keep the deferred separate from the data returned by the deferred
gamePromise is the deferred, game is the value
that still won’t actually solve your problem though, since you need to be able to overwrite the value also
Adam Tourkow
@atourkow
Jan 31 2016 17:55
I’ve been reading and reading the docs. The then() and set() confuse me.
You kinda made something simlar for me here: http://jsbin.com/hamidalugi/edit?html,js
so that’s saying, “once gamePromise is resolved, set the value of game to gamePromise.value"
Adam Tourkow
@atourkow
Jan 31 2016 17:59
get: function(last, set){
                this.attr('gamePromise').then(set);
            }
Kevin Phillips
@phillipskevin
Jan 31 2016 18:00
it might make more sense to remove some of the shorthand:
get: function(last, set){
    this.attr('gamePromise').then(function onFulfilled(value) {
        set(value)
    });
}
does that make more sense? or was that not your question?
Adam Tourkow
@atourkow
Jan 31 2016 18:40
@phillipskevin So set is a function in function(last, set)?
Kevin Phillips
@phillipskevin
Jan 31 2016 18:41
right
Adam Tourkow
@atourkow
Jan 31 2016 18:41
oh, wait, and with the value passed in
there it’s called setAttrValue
Adam Tourkow
@atourkow
Jan 31 2016 18:45
so, then before set(value) can I manipulate stuff in value? value.somevar = “foo”
Kevin Phillips
@phillipskevin
Jan 31 2016 18:46
sorry, no, it still won’t solve your problem
Adam Tourkow
@atourkow
Jan 31 2016 18:47
NP, thanks for clearing up the first part :)
Kevin Phillips
@phillipskevin
Jan 31 2016 18:48
you probably want to separate your data that you get from the server with the data representing the user action
it’s possible to do what you’re trying to do, but it might make it more confusing to try to debug if you run into issues
since you’ll have two completely unrelated parts of your code that both modify that value
and those two unrelated parts are both async
If you still want to do it, you could do something like this:
game: {
    get: function(last, set){
        var vm = this;
        this.attr('gamePromise').then(function onFulfilled(value) {
            vm.attr(‘editableGame’, value); 
            set(value);
        });
    }
},
editableGame: {
}
Kevin Phillips
@phillipskevin
Jan 31 2016 18:53
so you can do whatever you want with editableGame
vm.attr(‘editableGame.somevar’, ‘foo’)
Dovid Bleier
@dbleier
Jan 31 2016 18:55
@phillipskevin I have been having some of the same issue. When I pass set into get, it says set is undefined
        sign: {
            get(last, set) {
                var self = this;
                this.attr('signPromise').then(function(s) {
                    var sign = s[0], actpres, curpres;

                    // 1st check if there is only 1 active presentation,
                    // if only 1 presentation exists at all, use it regardless
                    // whether it is marked active or not (better than a blank screen)
                    if(sign.presentations.length === 1) {
                        // don't need to worry about scheduling or any other multi-presention logic
                        curpres = self.processPresentation(sign.presentations[0]);
                        new Presentation({id: curpres.id, data: curpres}).save();
                        self.attr('currentPresentation', curpres.id);
                        set(sign);
I get the sign from signPromise and everything works until set(sign)
Kevin Phillips
@phillipskevin
Jan 31 2016 18:59
and set is undefined there?
Adam Tourkow
@atourkow
Jan 31 2016 19:02
so you basically use gamePromise for the deferred (when it’s done) stuff and the meat of the data is in game. I think it’s starting to make sense. Looking at it, it’s the fact that you have each one kinda “calling” each other.
Kevin Phillips
@phillipskevin
Jan 31 2016 19:02
game is derived from gamePromise
there shouldn’t be anything “calling” it the other direction
Dovid Bleier
@dbleier
Jan 31 2016 19:04
@phillipskevin yes, set is undefined
I don't think it should make a difference but this is happening when running my unit test
Kevin Phillips
@phillipskevin
Jan 31 2016 19:08
it shouldn’t matter
is that code somewhere I can see?
Dovid Bleier
@dbleier
Jan 31 2016 19:10
it's a module in a larger project with dependencies on a number of other modules, so I am not sure how I could put it up for you to see. Right now it's all on my local computer
Kevin Phillips
@phillipskevin
Jan 31 2016 19:10
can you just paste that file into a gist?
Dovid Bleier
@dbleier
Jan 31 2016 19:11
ok, one moment
thanks for your help
Dovid Bleier
@dbleier
Jan 31 2016 19:16
yes, it comes into the function as undefined
even before then()
Kevin Phillips
@phillipskevin
Jan 31 2016 19:18
I’m not sure, it looks ok to me
out of curiousity, does the same thing happen if you don’t use the es6 shorthand
Dovid Bleier
@dbleier
Jan 31 2016 19:18
weird, right?
yes
Kevin Phillips
@phillipskevin
Jan 31 2016 19:18
like if you write out get: function(last, set) {
Dovid Bleier
@dbleier
Jan 31 2016 19:18
tried it both ways
Kevin Phillips
@phillipskevin
Jan 31 2016 19:18
hmm
Dovid Bleier
@dbleier
Jan 31 2016 19:18
also last doesn't even show up on the list of variables
Kevin Phillips
@phillipskevin
Jan 31 2016 19:19
in the debugger you mean?
Dovid Bleier
@dbleier
Jan 31 2016 19:19
yes
Kevin Phillips
@phillipskevin
Jan 31 2016 19:19
if you break in the .eval code it might
sometimes the debugger just gets confused with the sourcemaps
I’m not sure why set would be undefined
it’s possible it’s a bug
but @justinbmeyer or @daffl might see something I don't
Dovid Bleier
@dbleier
Jan 31 2016 19:21
sorry, just realized in the then() code last didn't show up since it's not captured with closure (not being used in the code)
ok, thanks for you help
this is strange, the call to my getter from _get is
            this._get = function() {
                return getter.call(settings.context, self.lastSetValue.get() );
            };
nothing is being passed into set
Kevin Phillips
@phillipskevin
Jan 31 2016 19:26
yeah, maybe that is a bug
Dovid Bleier
@dbleier
Jan 31 2016 19:27
but you have gotten set to work in other getters?
Kevin Phillips
@phillipskevin
Jan 31 2016 19:28
yes
Dovid Bleier
@dbleier
Jan 31 2016 19:30
so then I wonder if I don't have something configured correctly
should make a difference that I am using a fixture, right?
should NOT I mean
Dovid Bleier
@dbleier
Jan 31 2016 19:48
btw, here is the unit test calling the code

QUnit.test('Sign Setup', function () {
      var sc = new SignController(), oldmac = Storage.get('mac');
      Storage.store('mac', 'a1b2c3d4');
      QUnit.notOk(sc.attr('currentPresentation'));
      sc.attr('sign');
      QUnit.deepEqual(sc.attr('currentPresentation'), 'test', 'currentPresentation id match id from fixture');
      oldmac ? Storage.store('mac', oldmac) : Storage.delete('mac');
});
I also included it in the gist
Kevin Phillips
@phillipskevin
Jan 31 2016 20:35
@dbleier no, it shouldn’t matter that you’re using a fixture
Kevin Phillips
@phillipskevin
Jan 31 2016 20:42
the basic set behavior is definitely working: http://jsbin.com/tiqasutevi/1/edit?html,js,output
you know what, I bet it’s because the binding doesn’t get set up if you just call attr
^ has the same problem
update your test to use bind or on like http://jsbin.com/neyatizofi/1/edit?js,console
Kevin Phillips
@phillipskevin
Jan 31 2016 20:48
@dbleier that will make it more like how a template works and solve the problem with your unit test
Dovid Bleier
@dbleier
Jan 31 2016 20:51
@phillipskevin that worked!!
thank you very much
Kevin Phillips
@phillipskevin
Jan 31 2016 20:53
Great