These are chat archives for canjs/canjs

23rd
Sep 2015
Andrei Balmus
@abalmush
Sep 23 2015 07:14
Hi guys, We have gulp+webpack project, I’m trying to integrate Can.js. Is there any issues I can meet while using can.js with webpack+gulp? Is anybody used this stack?
Matthew Phillips
@matthewp
Sep 23 2015 14:57
There are people using that stack... I can't remember who though
you'll probably want to use the commonjs version which is located at node_modules/can/dist/cjs
I'm not familiar with webpack but i'm sure you can configure that somehow
Andrei Balmus
@abalmush
Sep 23 2015 17:34

Thank you Matthew!
I configured it today and it works, but I can highlight some issues I met today:

  1. Webpack requires to build the code, so I run watcher on my local environment. (And it’s not so fast as I expected)

  2. Also some issues popped up with Modernizr. can.Component returned documentShiv undefined error. (fixed it using webpack script loader but any way spend some time)

here's the event
if you want to just watch
Marshall Thompson
@marshallswain
Sep 23 2015 20:24

@justinbmeyer Why not this:

<show-plate {plate-name}=“*selectedDriver” /> two-way

<show-plate {plate-name=“*selectedDriver” /> one way

<show-plate plate-name}=“*selectedDriver” /> other way

Why change the direction of the curly brace after the attribute instead?

Justin Love
@JustinLove
Sep 23 2015 20:27
If we're going for arrows, what about plate-name{}="*selectedDrive"
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:27
seems like we can go name-centric or equal-sign-centric but right now we’re picking from both baskets
@JustinLove +1
Marshall Thompson
@marshallswain
Sep 23 2015 20:28
@JustinLove +1
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:28

<show-plate plate-name{}=“*selectedDriver” /> two-way

<show-plate plate-name{=“*selectedDriver” /> child-to-parent

<show-plate plate-name}=“*selectedDriver” /> parent-to-child

Matthew Phillips
@matthewp
Sep 23 2015 20:28
@abalmush you should try stealjs.com, no build needed.
James Atherton
@James0x57
Sep 23 2015 20:29
What about using bang to "block" the writing on that side?
{selected}=!"selectedDriver"
{selected}!="
selectedDriver"
{selected}="*selectedDriver"
I just cringe at the unmatched brace
Justin Love
@JustinLove
Sep 23 2015 20:30
The whole thing does feel odd, but I'm not versed in the technical limitations.
Ideally you'd want <=, =>, <=>, but angle brackets wont work in HTML.
James Atherton
@James0x57
Sep 23 2015 20:35
using the ! makes it "stop" the binding on that side in the syntax I suggested
Mark Stahl
@mjstahl
Sep 23 2015 20:35
Just so I don't feel left out.

<show-plate [plate-name]=“*selectedDriver” /> two-way

<show-plate (plate-name]=“*selectedDriver” /> child-to-parent

<show-plate [plate-name)=“*selectedDriver” /> parent-to-child

<show-plate (click)="doSomething()" /> click-handler

Matthew Phillips
@matthewp
Sep 23 2015 20:35
@JustinLove yes I agree
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:35
@mjstahl +
Mark Stahl
@mjstahl
Sep 23 2015 20:36
That dictates directionality, and limits the tokens required to think about.
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:36
it’s also mathy
@daffl check out @mjstahl ’s suggestion
Mark Stahl
@mjstahl
Sep 23 2015 20:36
Yes.. I was hoping someone would notice that... I don't think inclusive/exclusive really means anything in this case, but its fun. ;)
Julian
@pYr0x
Sep 23 2015 20:36
i like justinloves suggestion
David Luecke
@daffl
Sep 23 2015 20:37
@mjstahl is in the hangout ;)
Mark Stahl
@mjstahl
Sep 23 2015 20:37
It was easier to write in here.
Matthew Phillips
@matthewp
Sep 23 2015 20:38
I think if we're giving up symetry then the {, } syntax makes more sense because it at least looks like an arrow
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:39
if you want symmetry then {}= {= }=
Justin Love
@JustinLove
Sep 23 2015 20:40
So {=, =}, {=}; perhaps {=} has shorthand as =, but that loses the symmetry with one-ways
Julian
@pYr0x
Sep 23 2015 20:40
other idea... maybe we could write some dirction
maybe [childprop] form *parentpop
or [childprop] to *parentprop
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:41
@pYr0x the = isn’t negotiable
Julian
@pYr0x
Sep 23 2015 20:41
?
David Luecke
@daffl
Sep 23 2015 20:42
I think @Alfredo-Delgado meant @JustinLove ?
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:42
@pYr0x Are you proposing using words?
Julian
@pYr0x
Sep 23 2015 20:42
yes
David Luecke
@daffl
Sep 23 2015 20:43
Oh... then @Alfredo-Delgado is right.
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:43
I gathered from Matthew and Justin that the = is required in whichever scheme
David Luecke
@daffl
Sep 23 2015 20:43
Yes, otherwise you'd have to modify the HTML parser
each one would be treated as a separate attribute
Julian
@pYr0x
Sep 23 2015 20:45
there are only 2
from and to
we can add
eq
means =
and neq
for not equal
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 20:47
Let’s use morse. {parentProp}----=“childProp"
Kevin Phillips
@phillipskevin
Sep 23 2015 20:49
@pYr0x I think what they’re saying is if you do [childprop] form *parentprop the html parser would give 3 attributes [childprop], from, and *parentprop
so it would have to be modified in order to tie the key and value together
David Luecke
@daffl
Sep 23 2015 20:50
And attributes are in no specific order.
dylanrtt
@dylanrtt
Sep 23 2015 20:52
you could do [childprop]-from="*parentProp"
Kevin Phillips
@phillipskevin
Sep 23 2015 21:01

<show-plate [plate-name]=“*selectedDriver” /> two-way

<show-plate (plate-name]=“*selectedDriver” /> child-to-parent

<show-plate [plate-name)=“*selectedDriver” /> parent-to-child

<show-plate (click)="doSomething()" /> click-handler

Adam L Barrett
@BigAB
Sep 23 2015 21:03

My 2 cents:

<show-plate {plate-name}=“*selectedDriver” /> - 2 way

<show-plate {:plate-name}=“*selectedDriver” /> - 1 way to child

<show-plate {^plate-name}=“*selectedDriver” /> - 1 way to parent

Justin Love
@JustinLove
Sep 23 2015 21:07
Maybe we should go oldschool and use onevent. Maybe on(event)=""
David Luecke
@daffl
Sep 23 2015 21:08
I was just thinking the same thing.
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 21:08
nice
Justin Love
@JustinLove
Sep 23 2015 21:21
Is there a good summary of the cases that need to be covered and the syntactic limitations we have to operate under?
Julian
@pYr0x
Sep 23 2015 21:23
whats about
:=
or =:
Kevin Phillips
@phillipskevin
Sep 23 2015 21:23
syntax has to be left of the =
Julian
@pYr0x
Sep 23 2015 21:23
ok
Justin Meyer
@justinbmeyer
Sep 23 2015 21:24
A.

<div [selected]="*selectedDriver"/>
<div [^selected]="*selectedDriver"/>
<div [(selected)]="*selectedDriver()"/>
A.*
<div {selected}="selectedDriver"/>

A.1

<show-plate {plate-name}=“*selectedDriver” /> 
<show-plate {:plate-name}=“*selectedDriver” /> 
<show-plate {^plate-name}=“*selectedDriver” /> 


B.
<div [selected="*selectedDriver"/>
<div selected]="*selectedDriver"/>
<div [selected]="*selectedDriver"/>

C.
<div {selected}="*selectedDriver"/>
<div selected}="*selectedDriver"/>
<div {selected="*selectedDriver"/>
C.*
<div selected{="*selectedDriver"/>


D.
<show-plate plate-name=“*selectedDriver” /> 
<show-plate plate-name{=“*selectedDriver” /> 
<show-plate plate-name}=“*selectedDriver” />

E.
<show-plate plate-name[]=“*selectedDriver” /> 
<show-plate plate-name[=“*selectedDriver” /> 
<show-plate plate-name]=“*selectedDriver” />

F.
<show-plate (plate-name)=“*selectedDriver” />
?

G.
<show-plate [plate-name]=“*selectedDriver” /> two-way
<show-plate (plate-name]=“*selectedDriver” /> parent-to-child
<show-plate [plate-name)=“*selectedDriver” /> child-to-parent
<show-plate (click)="doSomething()" /> click-handler

H.
<div [selected]="*selectedDriver"/>
<div (selected)="*selectedDriver"/>
<div [(selected)]="*selectedDriver()"/>
<div (:selected)="*selectedDriver()"/>
<div ($selected)="*selectedDriver()"/>
Matthew Phillips
@matthewp
Sep 23 2015 21:27
A., C.
Alexis Abril
@alexisabril
Sep 23 2015 21:27
G,A
David Luecke
@daffl
Sep 23 2015 21:27
A*, H
Matthew Phillips
@matthewp
Sep 23 2015 21:27
A.*, C
A.*, C*
Adam L Barrett
@BigAB
Sep 23 2015 21:27
A1 + H
Ilya Fadeev
@ilyavf
Sep 23 2015 21:27
H, D
Julian
@pYr0x
Sep 23 2015 21:27
H / A.1
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 21:27
D, (G flipped back to original proposal)
Manuel Mujica
@m-mujica
Sep 23 2015 21:27
a
A*, E
Julian
@pYr0x
Sep 23 2015 21:29
A* won?
Kevin Phillips
@phillipskevin
Sep 23 2015 21:29
G, D
Patrick Clancy
@patrickclancy
Sep 23 2015 21:29
A1, C*
Justin Meyer
@justinbmeyer
Sep 23 2015 21:30
ugg ... A * is going to be [^$value]="name" :-(
vs $value}="name"
Adam L Barrett
@BigAB
Sep 23 2015 21:31
There are only 3 votes for A*
There are also three votes for A1 too
Adam L Barrett
@BigAB
Sep 23 2015 21:31
And H
Four for h actually
Julian
@pYr0x
Sep 23 2015 21:32
i think H is consistently
dylanrtt
@dylanrtt
Sep 23 2015 21:32
A*, C*
Matthew Phillips
@matthewp
Sep 23 2015 21:32
@justinbmeyer i like (input)="name($value)"
for that case
Julian
@pYr0x
Sep 23 2015 21:32
and the diffrence between [ and ( has to be learn
Matthew Phillips
@matthewp
Sep 23 2015 21:33
$input i guess it would be
Ilya Fadeev
@ilyavf
Sep 23 2015 21:34
and still for H there is a hint about direction - just remember the event binding
here, lets put your votes in this way
put your name
put a 2 for your favorite
and a 1 for your 2nd favorite
I know, confusing
but this way I can add them up
David Luecke
@daffl
Sep 23 2015 21:34
Can't you just make a Google form?
Matthew Phillips
@matthewp
Sep 23 2015 21:35
oh
Justin Meyer
@justinbmeyer
Sep 23 2015 21:35
I really don't want to
David Luecke
@daffl
Sep 23 2015 21:35
Ok I'll do it.
Justin Meyer
@justinbmeyer
Sep 23 2015 21:35
don't
lets just do this
Matthew Phillips
@matthewp
Sep 23 2015 21:36
2 for favorite is confusing
Justin Meyer
@justinbmeyer
Sep 23 2015 21:36
I know
Matthew Phillips
@matthewp
Sep 23 2015 21:36
oh, i see why
Julian
@pYr0x
Sep 23 2015 21:38
;)
Adam L Barrett
@BigAB
Sep 23 2015 21:44
Those who like the bullet syntax seem to really like the bullet syntax
Justin Love
@JustinLove
Sep 23 2015 21:44
Is the syntax limit roughly string="string" ?
Ilya Fadeev
@ilyavf
Sep 23 2015 21:44
its a marketing trick
the bullet name i mean
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 21:45
interval notation should get its own vote, it was the original proposal :-1:
Adam L Barrett
@BigAB
Sep 23 2015 21:47
I don’t remember the diff between C* and D?
Justin Meyer
@justinbmeyer
Sep 23 2015 21:47
@Alfredo-Delgado do you really want to split the vote :-)
Alright ... voting is closing in 30 seconds
we might have another round
after I prune some
so people won't have to worry about vote splitting
ok, voting ended
if anyone else wants to change, let me know
So, we should allow another round I think
Adam L Barrett
@BigAB
Sep 23 2015 21:49

Isn’t there a saying:

Voting is the worst way to resolve important issues - Stephen Harper

Julian
@pYr0x
Sep 23 2015 21:50
:D
Justin Meyer
@justinbmeyer
Sep 23 2015 21:50
well, I am more than happy just being dictator
Marshall Thompson
@marshallswain
Sep 23 2015 21:50
in A, is <div [^selected]="*selectedDriver”/> going out/up to the parent?
child to parent?
Justin Meyer
@justinbmeyer
Sep 23 2015 21:50
yes
I'm just worried at A* and A1
split their vote
Adam L Barrett
@BigAB
Sep 23 2015 21:51
Alfredos just cheating :smile:
Justin Meyer
@justinbmeyer
Sep 23 2015 21:53
looks like it's bullet time :-)
maybe :-)
Adam L Barrett
@BigAB
Sep 23 2015 21:54
I think you are right about splitting A
Given the option of Bullet to A*, I’d switch to A*
Justin Meyer
@justinbmeyer
Sep 23 2015 21:55
I think a lot of the D people
would go with G
though
Adam L Barrett
@BigAB
Sep 23 2015 21:55
Ya
Justin Meyer
@justinbmeyer
Sep 23 2015 21:57
being dictator, I would probably go with D
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 21:57
The {}= operator lost the {} in the screenshot
Justin Meyer
@justinbmeyer
Sep 23 2015 21:57
mixing () and [] seems weird to me
A.

<div [selected]="*selectedDriver"/>
<div [^selected]="*selectedDriver"/>
<div [(selected)]="*selectedDriver()"/>
A.*
<div {selected}="selectedDriver"/>

A.1

<show-plate {plate-name}=“*selectedDriver” /> 
<show-plate {:plate-name}=“*selectedDriver” /> 
<show-plate {^plate-name}=“*selectedDriver” /> 


B.
<div [selected="*selectedDriver"/>
<div selected]="*selectedDriver"/>
<div [selected]="*selectedDriver"/>

C.
<div {selected}="*selectedDriver"/>
<div selected}="*selectedDriver"/>
<div {selected="*selectedDriver"/>
C.*
<div selected{="*selectedDriver"/>


D.
<show-plate plate-name{}=“*selectedDriver” /> 
<show-plate plate-name{=“*selectedDriver” /> 
<show-plate plate-name}=“*selectedDriver” />

E.
<show-plate plate-name[]=“*selectedDriver” /> 
<show-plate plate-name[=“*selectedDriver” /> 
<show-plate plate-name]=“*selectedDriver” />

F.
<show-plate (plate-name)=“*selectedDriver” />
?

G.
<show-plate [plate-name]=“*selectedDriver” /> two-way
<show-plate (plate-name]=“*selectedDriver” /> parent-to-child
<show-plate [plate-name)=“*selectedDriver” /> child-to-parent
<show-plate (click)="doSomething()" /> click-handler

H.
<div [selected]="*selectedDriver"/>
<div (selected)="*selectedDriver"/>
<div [(selected)]="*selectedDriver()"/>
<div (:selected)="*selectedDriver()"/>
<div ($selected)="*selectedDriver()"/>
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 22:00
If direction-hinting is critical then the mock operators are the most concise option.
Justin Meyer
@justinbmeyer
Sep 23 2015 22:01
I'm also a bit biased against A because I spent a huge amount of time making { a valid attribute name :P
I had to rewrite stache's attribute parsing
ugg
I think we sleep on it and vote on A*, D, and G tomorrow. IF A* ends up winning, we might take the 2nd place of D and G and do a final vote off
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 22:03
In a component, I’m trying to do something like this with the view model:
  viewModel: function(attrs, parentScope) {
  }
Justin Meyer
@justinbmeyer
Sep 23 2015 22:03
it's parentScope
not parentVM
parentScope.attr(".")
would give you the current context
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 22:03
I’m getting a “Constructor” object instead of a map.
Justin Meyer
@justinbmeyer
Sep 23 2015 22:04
yeah, it's a can.view.Scope
Adam L Barrett
@BigAB
Sep 23 2015 22:04
I don’t mean to sidetrack, but I would really like to know why it can’t be in the value anymore, and has to be modified on the key
Justin Meyer
@justinbmeyer
Sep 23 2015 22:04
I mentioned this in the talk
because stache's live binding gets processed first
lets say we did it on the value
and you had
<input value="{}"/>
unless we do everything in parse time
better example
<input value="{name}"/>
Alfredo Delgado
@Alfredo-Delgado
Sep 23 2015 22:06
@justinbmeyer thanks
Justin Meyer
@justinbmeyer
Sep 23 2015 22:06
anyway ... unless we setup bindings in parse-time ... value is going to be temporarily set to "{name}"
and, say we wanted to d something like:
<input value="{{#foo}}{foo}{{else}}{bar}{{/foo}}"/>
this sorta thing becomes mostly un-workable
everything becomes a lot easier if it's on the left
where the "binding name" doesn't actually represent the "attribute name" you are setting up behavior on
well, doesn't match
it represents
{value}="foo"
{value} represents value
but isn't value
of course, if you wanted to get super meta ... I'm not sure how someone would setup behavior on an attribute named "{value}"
{\{value\}}="foo"
maybe
hope this explains @BigAB
Justin Meyer
@justinbmeyer
Sep 23 2015 22:12
Oh, A and G ....
sorry, G .. I'm not sure we can do
if we ever want to support substitution
dynamic properties
same w/ the As
Julian
@pYr0x
Sep 23 2015 22:14
seems very tricky
Justin Meyer
@justinbmeyer
Sep 23 2015 22:14
what seems tricky?
Julian
@pYr0x
Sep 23 2015 22:14
the whole problem
Justin Meyer
@justinbmeyer
Sep 23 2015 22:14
dynamic attribute assignment?
oh
Julian
@pYr0x
Sep 23 2015 22:15
is one way binding such a big thing?
Justin Meyer
@justinbmeyer
Sep 23 2015 22:15
yeah, every option has strengths
it's enough of a thing where we need to add it
(it can help provide a counterpoint to the react folks ... we can say that it's easier to setup one-way data flow)
Julian
@pYr0x
Sep 23 2015 22:16
why do the limitation of one-way-binding in the template? why not in the viewModel?
Justin Meyer
@justinbmeyer
Sep 23 2015 22:16
and references scope can be a huge time-saver
I suppose we could say "no one can listen to this property" somehow from a viewModel
but I don't know what that would look like
but sometimes you do want someone able to listen to you
just not a certain someone
if that makes sense
in some situations you might want two way binding, other times not, with the same component
I might want some date thing to only show the date
Julian
@pYr0x
Sep 23 2015 22:18
in the define plugin?
Justin Meyer
@justinbmeyer
Sep 23 2015 22:18
and another time, be able to show and update it
the define plugin would be too low level
I think
I mean, even if you only wanted 1-way binding
is very likely you still want to be able to listen to yourself
it would have to be on the component level
Julian
@pYr0x
Sep 23 2015 22:20
hm
maybe the assignation for 1-way-binding should be out of the template
and defined somewhere else
just throw my mind into the chat ;)
Justin Meyer
@justinbmeyer
Sep 23 2015 22:24
I think the template makes a lot of sense
at least provides the most amount of fine grained control
Julian
@pYr0x
Sep 23 2015 22:24
yes but with that you have business logic inside yout template
i agree with adam who said that in templates content between {} are replaced
thought about it.. maybe i am wrong ;)
Justin Meyer
@justinbmeyer
Sep 23 2015 22:26
but on the other hand ... [] is a very valuable operator
Julian
@pYr0x
Sep 23 2015 22:26
it is just too late in germany ;)
Justin Meyer
@justinbmeyer
Sep 23 2015 22:26
and {} already means "special"
and people put [] a lot in their attributes
input name="foo[bar]"