These are chat archives for mithriljs/mithril.js

12th
Apr 2016
aucelum
@aucelum
Apr 12 2016 01:30

I have done more experiments with Mithril and Closure in advanced optimizations mode

  • App with Mithril 0.2.3 fed to Closure Compiler with unmodified source: 18 KB on disk (compiler couldn't inline or remove dead code inside the IIFE)

  • App with Mithril 0.2.3 fed to Closure Compiler with extensive annotations and removal of the wrapping IIFE: 726 bytes on disk

(the app only exercises m.prop. I will try to compile more complicated apps)

aucelum
@aucelum
Apr 12 2016 01:46
App rendering a single component: 10.9 KB (still smaller than mithril.min at 19.9 KB)
kodeo
@kodeo
Apr 12 2016 02:15
Hello. Please excuse a newbie question:
How do I add a second m.withAttr handler to the same event?
Grant Miner
@llambda
Apr 12 2016 04:22
On the other hand, fewer releases shows signs of maturity, properly scope, and stability. Take http://www.javatuples.org/ great library, and its last release was in 2011.
Koa is another example
Jonathan Curran
@joncfoo
Apr 12 2016 04:36
@llambda I completely agree - sadly it's not the first time someone has asked me about how "active" mithril is being developed
at every user group I've presented mithril to so far someone always asks: "what's the adoption rate"
I mean I get why they are asking it but I believe their reasoning is misplaced
Pat Cavit
@tivac
Apr 12 2016 04:52
@kodeo you'll either need to wrap it with a event handler function that can dispatch to the two handlers you want to execute, or I think @barneycarroll might have written a helper to attach multiple handlers to events
Evgeniy Labutin
@LabEG
Apr 12 2016 05:04

@kodeo

onclick: () => ctrl.process(number, string, object, and others)

=)

good morning all =)
Roshimon
@roshimon
Apr 12 2016 05:19
good morning
khades
@khades
Apr 12 2016 08:19
i have no idea how to make properly the app which would be mobile optimized
with width change etc
khades
@khades
Apr 12 2016 08:46
i mean view content based on document witdth
Arthur Clemens
@ArthurClemens
Apr 12 2016 08:50
@khades Have a look at CSS media queries (with breakpoints)
khades
@khades
Apr 12 2016 08:51
alredy at it
Arthur Clemens
@ArthurClemens
Apr 12 2016 08:51
alternatively have a listener on window resize, update global app width, and redraw component contents
khades
@khades
Apr 12 2016 08:51
ye, i though about second variant
Arthur Clemens
@ArthurClemens
Apr 12 2016 08:51
media queries are more robust
khades
@khades
Apr 12 2016 08:51
some of sites add information that got hidden inside another component
for example, on twitter we have left panel where additional user info is listed
some of twitter clones add this additional info in central panel, where SOME info was listed before
so view itself changed, and not css moved
Arthur Clemens
@ArthurClemens
Apr 12 2016 08:52
you can have rules inside a media query to hide elements
khades
@khades
Apr 12 2016 08:53
isnt this redundant?
only thing that bothers me
i got something like that
This message was deleted
in my sass
if screen size is 720 and lower - it hides or shows elements
and then in one component i have this
This message was deleted
gitter hates my code ._.
Arthur Clemens
@ArthurClemens
Apr 12 2016 08:55
put ``` (backticks) around it
khades
@khades
Apr 12 2016 08:55
This message was deleted
@import "bourbon"
@import "neat"
$mobile: new-breakpoint(max-width 720px 1)
div.content
    @include outer-container(1024px)

div.hiddenWhileFull
    display: none
    @include media($mobile)
      @include span-columns(1)

div.shownWhileFull
    @include span-columns(1)
    @include media($mobile)
      display: none
  m('.hiddenWhileFull', m.component(UserAdditionalInfoComponent, {
          user: args.user
        })),
it this a good idea?
component is view only
Arthur Clemens
@ArthurClemens
Apr 12 2016 09:00
The downside is that you will have view logic in your CSS, but it will work.
khades
@khades
Apr 12 2016 09:01
i have no idea about BEST way to do that
thats why i am askin
and no, i wont have view logic in my css
that's the only two classes
.hiddenWhileFull
and .shownWhileFull
Arthur Clemens
@ArthurClemens
Apr 12 2016 09:02
That is view logic.
khades
@khades
Apr 12 2016 09:02
well all css is a view logic then
Arthur Clemens
@ArthurClemens
Apr 12 2016 09:03
There is no best way, you choose what works best for you.
khades
@khades
Apr 12 2016 09:06
both way are troublesome
kodeo
@kodeo
Apr 12 2016 10:40
Sorry @LabEG , you've lost me already. So I've got the following line from the Getting Started example:
m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}),
how would I amend that to add a second handler?
Evgeniy Labutin
@LabEG
Apr 12 2016 11:50
m("input", {onchange:  () => todo.vm.description(value), value: todo.vm.description()})
=)
@kodeo
Jonathan Curran
@joncfoo
Apr 12 2016 13:04
@khades you can attach listeners for media queries as well so you will know when a device's screen dimensions change (e.g. on resize, on rotate)
khades
@khades
Apr 12 2016 13:05
i dont think there's need listeners
m.redraw on entering some page size will be enough
Jonathan Curran
@joncfoo
Apr 12 2016 13:06
depends on what you're doing - e.g. I use it so that when a tablet flips a certain way I change the menu component into a fixed sidebar instead of being a fixed on top
James Forbes
@JAForbes
Apr 12 2016 13:13
@kodeo I missed the original problem. Did you want to have two functions receive the value of the handler? Or did you want to listen to more than 1 event on a single element? Or something else.

Mutliple events events:

m("input", {
  onchange: m.withAttr("value", todo.vm.description), 
  oninput: m.withAttr("value", todo.vm.description), 
  onclick: m.withAttr("value", todo.vm.description),
  value: todo.vm.description()
})

Multiple receivers:

m("input", {
  onchange: m.withAttr('value', value => {
     todo.vm.description(value)
     todo.vm.title(value)
  }, 
  value: todo.vm.description()
})

And because props return the value that they received:

m("input", {
  onchange: m.withAttr('value', value => {
     todo.vm.title(todo.vm.description(value))
  }, 
  value: todo.vm.description()
})

And because that is just composition:

m("input", {
  onchange: m.withAttr('value', _.compose(todo.vm.description, todo.vm.title)), 
  value: todo.vm.description()
})
James Forbes
@JAForbes
Apr 12 2016 13:18
sorry if the above is completely unrelated
Let's say the second prop transforms the value somewhat, for the sake of example, lets say it capitalizes it:
//somewhere else...
var capitalize  = str => str.toUpperCase()

m("input", {
  onchange: m.withAttr('value', _.compose(todo.vm.title,capitalize,todo.vm.description)), 
  value: todo.vm.description()
})
So our todo.vm.title will be capitalized, and our todo.vm.description will be the raw value.
James Forbes
@JAForbes
Apr 12 2016 13:27
So @kodeo you can get away with a lot inline in your view without it getting too messy.
If its a complicated transform, it would probably be best to put the function that receives the event on your controller, and send the value to the respective locations from there

var Component = {
   controller: function(){

       this.value = function(value){
             todo.vm.description(value)
             todo.vm.title(capitalize(value))
       }
   }, 

   view: function(){
       return m("input", {
          onchange: m.withAttr('value', ctrl.value), 
          value: todo.vm.description()
      })
   }

}
kodeo
@kodeo
Apr 12 2016 15:18
Hi @JAForbes. Yes, it was the multiple receivers case I was struggling with. That's just what I needed, thanks a lot.
Grant Miner
@llambda
Apr 12 2016 16:44
Whoa...just rendered a wide 15,000 element table in Mithril. Chrome hit 2.0 GB of RAM but it did finally render and was scrollable.
Pat Cavit
@tivac
Apr 12 2016 16:44
Interesting, Rich Harris of rollup fame wrote his own ES2015 transpiler
Bradley Stafford
@bradstaff
Apr 12 2016 16:49
@tivac just saw your tweet
that's awesome
Pat Cavit
@tivac
Apr 12 2016 16:49
Curious to see how it goes, but knowing that it's from Rich Harris I already have more faith in it than babel
which I consider a tremendous engineering achievement marred by the worst documentation known to mankind and terrible user-unfriendly design decisions
Bradley Stafford
@bradstaff
Apr 12 2016 16:51
It makes me wonder if there's some sort of cargo cult guru on that team with all the knowledge of the inner-workings of babel
whose teammates have to ask them questions about how it actually works
and his only response is "Read the docs"
Pat Cavit
@tivac
Apr 12 2016 16:54
I spent an evening trying to rewrite mithril-objectify as a babel plugin and ended up so angry that I had to take a walk
Bradley Stafford
@bradstaff
Apr 12 2016 16:58
good god.
Are we talking XCOM angry?
Pat Cavit
@tivac
Apr 12 2016 17:07
I don't think I ever got that angry at XCOM
Bradley Stafford
@bradstaff
Apr 12 2016 17:11
ლ(ಠ_ಠლ)
Martti Laine
@codeclown
Apr 12 2016 17:12
probably been asked before: is there a dead-simple way to hook classnames to mithril, so that mithril would always automatically pass className through it?
I know some className sugar is on the way in upcoming releases, but it would be awesome to be able to do that now without including classnames manually everywhere
Bradley Stafford
@bradstaff
Apr 12 2016 17:14
Without rolling your own function wrapper, I'm not so sure there's a dead simple way.
Pat Cavit
@tivac
Apr 12 2016 17:17
m("div", { class : classnames({ your : "object", here : null }) });
seems pretty simple
Martti Laine
@codeclown
Apr 12 2016 17:18
it is simple, but wouldn't it be more convenient to do that behind the scenes, automatically ;)
Bradley Stafford
@bradstaff
Apr 12 2016 17:29
Well
if you were to alias another function to take mithril like params, you could just extract the className property out of the object that you're passed in and remerge it
here's a super naive example
function other(tag, obj, children) {
    return m(tag, lodash.merge(obj, {className: classnames(obj.className)}), children)
}
obviously there's a lot of sanity checking not done in that example, but the idea is there.
and honestly it's kind of a needless performance hit, imo
but it'd allow you to take an array and make a string. which means you could probably go so far as to set that overriding object to something like {className: classnames.split(',').join(' ')}
er. obj.className.split().join(' ')
spacejack
@spacejack
Apr 12 2016 17:51
lol @tivac re: babel
Pat Cavit
@tivac
Apr 12 2016 17:51
Opinions, I've got 'em
spacejack
@spacejack
Apr 12 2016 17:53
hey I got angry at babel's install page even before I tried doing anything with it
then it took me about a day to figure out a few lines of package.json
Bradley Stafford
@bradstaff
Apr 12 2016 18:01
Opinions are great.
I'm still in the halfway point between being open to other options and being set in my ways.
discovering that I hate underscores in variable names (save for prepended underscores)
Pat Cavit
@tivac
Apr 12 2016 18:08
yup, lower camel case forever
Bradley Stafford
@bradstaff
Apr 12 2016 18:19
Even then, I try really hard to limit camel case
I think I just enjoy single word variables. unfortunately it's not a perfect world in which I can express a concept in a single word through variables EVERY TIME
but I can come close.
:+1:
spacejack
@spacejack
Apr 12 2016 18:47
When I Write DotNet It'S PascalCase EveryWhere
Bradley Stafford
@bradstaff
Apr 12 2016 18:57
MY EYES
hahahaha.
spacejack
@spacejack
Apr 12 2016 19:03
Unity is extra confusing then
Evgeniy Labutin
@LabEG
Apr 12 2016 19:06
class Sample {
    private int prop;

    public get Prop() {
        return this.prop;
    }

    public set Prop(int value) {
        this.prop = value;
    }
}
dot net have logic =)
spacejack
@spacejack
Apr 12 2016 19:14
ugh this :)
Evgeniy Labutin
@LabEG
Apr 12 2016 19:29
i love this =) this created windows, linux, osX and many others OS =)