These are chat archives for mithriljs/mithril.js

23rd
Jan 2018
James Forbes
@JAForbes
Jan 23 00:22

Re: |>, I really don't get why await is event part of the proposal, we just need a then function. Promises infect everything man. It makes simple proposals seem complicated.

What's wrong with:

x |> f |> g |> then (h) |> then (i) |> then (j)

It's not like await g($) |> await h($) is less code

Moreno Ardohain
@MorenoArdohain_twitter
Jan 23 00:22
hello :)
James Forbes
@JAForbes
Jan 23 00:36
hello
Gilbert
@gilbert
Jan 23 01:25
@isiahmeadows I'm quite aware of the partial app proposal as I'm the one who started this thread
Isiah Meadows
@isiahmeadows
Jan 23 01:26
@JAForbes I'm actually kind of with you, but not fully.
@gilbert Okay. I'm still not seeing the full point of the bug, since it failed to even notice that other proposal. (Also, to be fair, it wasn't you who created that pipeline operator issue.)
@JAForbes I think the main use of it is that engines could optimize it better and it introduces some analogue with async/await, but IMHO, I agree it's pointless.
(The only benefit there is is that you can auto-resolve promises, but that's already something you could do as part of then, transparent to the user.)
Gilbert
@gilbert
Jan 23 01:46
to be perfectly fair, you can make the "just import a helper function" argument for the pipeline operator itself
Isiah Meadows
@isiahmeadows
Jan 23 03:47

Yes, but the complexity is where things differ from the await/then supplement:

  • With the pipeline operator, engines can trivially desugar the pipeline operator to reverse application in the parse stage. This is much simpler than a pipe(value, ...funcs) helper, where the engine would have to detect the loop as actually reducing and use that to also lower the functions. (Not impossible, but exceptionally difficult in a dynamic language.)
  • With the then/await, engines would have to desugar it to a async/await function, when the then callback could just do that internally pretty trivally. (One such definition would be this: const then = f => async x => await f(x)).

It's much easier to inline a nested function than it is to detect reducing loops that call their arguments. LuaJIT appears to be an exception that can do the latter, but that's a far cry from the norm when it comes to dynamic language VMs, even high performance ones.

Gilbert
@gilbert
Jan 23 06:03
Hack-style await has no complexity as there's no special casing. x |> await ? desugars to await x and would only work within an async function
James Forbes
@JAForbes
Jan 23 06:12
@gilbert my issue with it is basic function composition suddenly requires placeholders every time. I get from an implementation perspective that's sort of elegant, but it's a shame to me. I just want to make sure it's even a necessary trade off.
Barney Carroll
@barneycarroll
Jan 23 08:06
@JAForbes we should set up a foundation to organise, catalogue and fund a perpetual campaign of demanding async clauses for every language feature.
Kitchen Async
James Forbes
@JAForbes
Jan 23 08:25

Haha @barneycarroll

I really don't want to annoy anybody @gilbert, I just think this design is pleasing for those involved for its design elegance but in actual usage f(?) |> g(?) |> h(?) will grow tiresome quickly, and we'll wonder if it was all worth it. I just want to know there's a reason for the constraint in the first place.

I know how much work you've put into this language proposal and I'm swooping in with my opinions and it's pretty annoying.
Isiah Meadows
@isiahmeadows
Jan 23 08:37
@JAForbes x |> f(?) |> g(?) |> h(?) is equivalent to x |> f |> g |> h.
Also, I'm personally kind of a mild :-1: on the partial application proposal as it stands. It could use a syntactic marker to denote it's not some ordinary expression, and it could use a better explanation of what's going on when variadic arguments get involved.
vegetable
@vegetable
Jan 23 09:50

Hi there everybody!
one question about accessing mithril components state outside of mithril environment (through jquery plugin)
i'm using dropzone to upload multiple files, and I'm trying to extend it using mithril components, mounting a component for each zone extended. I've added extra controls over uploaded files in order to select and edit them.
these extra controls are added via mithril components, but then I need to retrieve state from components from the dropzone plugin. How would you do it?
I've seen that mounting on a dom node, creates a vnodes attribute on that dom from which I can access components mounted there.

Is this the way to go? Thanks!

Isiah Meadows
@isiahmeadows
Jan 23 09:57
@gilbert Thanks for the clarification on what x |> await f(...) means. Note that I have separate criticisms, but I detailed those there.
Patrik Johnson
@orbitbot
Jan 23 10:00
@porsager btw, just to throw another stone on your shoulders, have you had a thought about getting access to the geolocation, getusermedia etc apis in flems?
Isiah Meadows
@isiahmeadows
Jan 23 10:02
@vegetable Something to that effect, yes. Here's a quick guide on integrating third-party libraries, using a jQuery plugin as an example.
For more details on what tools you have at your disposal, you probably already are familiar with vnode.dom being the underlying DOM node, but there are also numerous other lifecycle methods at your disposal.
vegetable
@vegetable
Jan 23 10:03
thanks @isiahmeadows I'll check it out :)
Isiah Meadows
@isiahmeadows
Jan 23 10:03
:+1:
Patrik Johnson
@orbitbot
Jan 23 10:03
@isiahmeadows mebbe we should highlight using @CreaturesInUnitards mithril-datepicker on the 3rd party integration page as an alternative to using fullcalendar, even if it's a bit beside the point?
Isiah Meadows
@isiahmeadows
Jan 23 10:05
Not in that page...let's try to keep it topical.
Patrik Johnson
@orbitbot
Jan 23 10:06
🤷
James Forbes
@JAForbes
Jan 23 10:06

@isiahmeadows

x |> f(?) |> g(?) |> h(?) is equivalent to x |> f |> g |> h.

I know? :D

Yeah I'm not familiar with the partial application proposal, but it just sounds like something that should be a separate spec.

Isiah Meadows
@isiahmeadows
Jan 23 10:07
If you read the few comments in that issue, they basically amount to me agreeing with you. :wink:
I personally oppose the very existence of the bug as independent of that proposal, and I'm surprised it's a TC39 member who filed it. (I'd normally expect someone on that committee to be better acquainted with what proposals are out there, especially stage 1+ proposals, which they both are.)
@tivac Quick question: what's the easiest way to force a site rebuild? (I made a docs commit to next that needs cherry-picked to v1_1_x, but it has no code associated with it.)
(Ideally, that change should just be deployed to the live site, along with the page it links to.)
Barney Carroll
@barneycarroll
Jan 23 10:28

I'm surprised it's a TC39 member who filed it

Really?

Rasmus Porsager
@porsager
Jan 23 12:34
@orbitbot nothing more than the global allow that's there currently
Patrik Johnson
@orbitbot
Jan 23 12:35
oh, didn't realise that was pushed
only tested chrome and firefox though.. safari doesn't seem to work
Patrik Johnson
@orbitbot
Jan 23 12:37
yeah, they suck
:)
maybe next year
somehow read that to mean that you pulled the global allow earlier
Isiah Meadows
@isiahmeadows
Jan 23 13:19
@barneycarroll Yes, really. Same guy behind the ES observable proposal, among a few others. I'd normally expect regular TC39 committee members to actually be aware of other ES proposals, particularly those stage 1 and above (those have to be presented to the committee to even get that far).
Barney Carroll
@barneycarroll
Jan 23 13:26
I'm not that surprised TBH
@porsager is the Github repo's source up to date? the thing I see doesn't seem to have the sidebar
Patrik Johnson
@orbitbot
Jan 23 13:35
@barneycarroll it's in another repo, not public
Kevin Fiol
@kevinfiol
Jan 23 17:23
anyone use or find a way to use https://www.styled-components.com/ with Mithril?
Rasmus Porsager
@porsager
Jan 23 17:26
You can do the same using bss very easily @kevinfiol
Personally I don't think the extra abstraction is beneficial though
Pat Cavit
@tivac
Jan 23 17:27
Isiah Meadows
@isiahmeadows
Jan 23 17:27
Of course...I completely missed that file. :smile:
Pat Cavit
@tivac
Jan 23 17:27
:+1:
Kevin Fiol
@kevinfiol
Jan 23 17:27
@porsager i do use bss actuall :wink: just curious cuz i saw styled-components on hackernews today
Isiah Meadows
@isiahmeadows
Jan 23 17:28
One more question @tivac: git co == git checkout?
Pat Cavit
@tivac
Jan 23 17:28
yeah apparently that shorthand was removed at some point?
Isiah Meadows
@isiahmeadows
Jan 23 17:28
I just never saw it before.
Pat Cavit
@tivac
Jan 23 17:28
I used to use it constantly but it's gone now, need to update that doc
Isiah Meadows
@isiahmeadows
Jan 23 17:28
:smile:
Pat Cavit
@tivac
Jan 23 17:32
There doc fixed
Isiah Meadows
@isiahmeadows
Jan 23 17:43
Okay. Thanks.
BTW, expect me to be barely present mod Gitter for about a month or two, potentially three. (also, cc: @pygy and @spacejack, the two primary others dealing with the issues)
@tivac
Pat Cavit
@tivac
Jan 23 17:46
Ok, good luck
Isiah Meadows
@isiahmeadows
Jan 23 17:52
:+1: I could use all the wishes I could get :smile:
Barney Carroll
@barneycarroll
Jan 23 18:02
Take care @isiahmeadows
oofoe
@oofoe
Jan 23 18:12
Hi! If I want to use the same component (like a molly button) several times on the same page, is it reasonable to manage it's state outside of the component? e.g. var Parent = { molly_sv: { state: "ready"}, view: return m(Molly, {sv: molly_sv})}};
I might need to change the state of the component inside of it (someone clicks on it) or outside from the parent (resetting after db call).
Barney Carroll
@barneycarroll
Jan 23 18:14
That makes sense
Beware though, if you have several parents, with several Mollies each, there will be only one Molly state between all of them
oofoe
@oofoe
Jan 23 18:16
Why? I thought each one would have it's own independent vnode.attrs?
To expand the previous example: var Parent = { molly1: {state: "ready"}, molly2: { state: "confirm" }, view: (vnode) { return m("div", m(Molly, {sv: molly1}), m(Molly, {sv: molly2})); }}
Barney Carroll
@barneycarroll
Jan 23 18:18
When you define state properties statically on the component, each instance of that component will reference the same unique property defined on the component declaration
Yeah that would be fine
oofoe
@oofoe
Jan 23 18:19
I'm declaring it on the parent... The component (Molly) doesn't have any state variables.
OK, so that's idiomatic enough then? There's no better (standard) way to achieve that goal?
Oscar
@osban
Jan 23 18:19
@isiahmeadows Good luck! :)
Barney Carroll
@barneycarroll
Jan 23 18:27
@oofoe there's all sorts of complicated patterns and tools for managing state but I always think it's difficult to get good use out of them without a particular state related problem to solve
oofoe
@oofoe
Jan 23 18:31
Well, the main problem is that I want to be able to use the same component more than once on the same page (and the component has state because it can go through various stages (ready <-> armed -> disabled)). However, I don't want to get complicated at all! If my approach seems reasonable, that's what I'll do. It's kind of reminiscent of the SmallTalk thing where the data is separate held out from the thing presenting the data...
I just wanted to make sure I wasn't engaging in an "anti-pattern"...
Barney Carroll
@barneycarroll
Jan 23 18:36
Oh definitely not, it seems eminently sensible
oofoe
@oofoe
Jan 23 18:36
Great! Thanks very much for looking it over!
Barney Carroll
@barneycarroll
Jan 23 18:36
The 'singular state' thing I was describing is a bit weird, but you'd know if it happened and I doubt it would
No worries
By the way… what is a 'Molly'?
oofoe
@oofoe
Jan 23 18:38
With my first tries at it, that was what I was doing: var Molly: { state: "ready", arming: (e) => { Molly.state = "armed"; }, ...};
"A shield to prevent tripping of some Big Red Switch..." In this case, it's a control that requests the user to confirm the action before they actually prosecute it.
So:
[delete] <- User clicks.
[X] Are you sure? [yes!] <- User clicks "x" to return to "ready" status, or "yes!" execute action.
Scotty Simpson
@CreaturesInUnitards
Jan 23 18:43

@oofoe there's a pretty common pattern we use to isolate each instance of a reused component's state:

const MyComp  = {
    oninit: (vnode) => { vnode.state.myProp = vnode.attrs.myProp }
    ...
}

Then in your view, make use of `vnode.state.myProp instead of the attrs version. Properties of vnode.state persist across redraws, so now each instance will be unique

oofoe
@oofoe
Jan 23 18:44
Yes, but how do I access that from the Parent?
I need to be able to set the status depending on what happens with the Parent.
Such as in an event handler.
Isiah Meadows
@isiahmeadows
Jan 23 18:45
I typically do it this way: I'll use a custom event handler and use that to pass the data to the parent. I'll use attributes to pass data from the parent to the child.
Scotty Simpson
@CreaturesInUnitards
Jan 23 18:45
^ yes
Isiah Meadows
@isiahmeadows
Jan 23 18:46
Something like this:
m(Child, {
    foo: vnode.state.foo,
    bar: vnode.state.bar,
    onchange: function (props) {
        vnode.state.foo = props.foo
        vnode.state.bar = props.bar
    }
})
oofoe
@oofoe
Jan 23 18:47
Then, if I understand you correctly, I would have to have special handling code in the Molly view() method that determines if it should update internal state based on incoming attribute?
Isiah Meadows
@isiahmeadows
Jan 23 18:47
Or, in ES6:
m(Child, {
    foo: this.foo,
    bar: this.bar,
    onchange: ({foo, bar}) => {
        this.foo = foo
        this.bar = bar
    }
})
This message was deleted

Then, if I understand you correctly, I would have to have special handling code in the Molly view() method that determines if it should update internal state based on incoming attribute?

Yes, pretty much. The child determines when to call onchange, and the parent acts accordingly.

Patrik Johnson
@orbitbot
Jan 23 18:54
alternatively, don't store any particular state in the components themselves and just call redraw
so, if you don't need to persist the state of the molly confirmation, just have that local to the component and keep the rest elsewhere
oofoe
@oofoe
Jan 23 18:57

Let me try to recast your example:

const Molly = {
   view: (vnode) => {
      if ("ready" === vnode.attrs.state) { return m("button", "delete"); }
      else if ("confirm" === vnode.attrs.state { return m("div", ...); }
      else { return m("button.disabled", "delete"); }
   }
}
const Parent = {
   m1: "ready",
   m2: "confirm",
   view: (vnode) => {
       return m("div", m(Molly, {state: vnode.state.m1}),
                       m(Molly, {state: vnode.state.m2}));
   }
}

Something like that?

Patrik Johnson
@orbitbot
Jan 23 19:06
@oofoe kinda, something like this example
barring the cancel functionality etc
if you'd need to persist the state of the molly, that would then live beside the data, if that's meaningful
though I'd guess that the data might be more persistant, stored on a server or something whereas the confirmation state is actually only relevant for a single session, so that'd be decorated persistent data in some reasonable fashion
oofoe
@oofoe
Jan 23 19:16
In this case, there's no data (except the destructive event, which is set as a vnode.attr in the conventional way m(Molly, { does: (e) => destruction() }, ...). But with more than one molly on the page, I don't want them to share state (as @barneycarroll mentioned earlier).
Thanks for the example!
Rasmus Porsager
@porsager
Jan 23 19:27
@kevinfiol oh, cool 😊 out of interest, what made you curious about styled-components?
Scotty Simpson
@CreaturesInUnitards
Jan 23 20:43
hey does anyone have a stock .htaccess rewrite rule for allowing pushstate in a subdirectory? All my googling has turned up root directory stuff, or WAY more conditions than I need.
Scotty Simpson
@CreaturesInUnitards
Jan 23 20:50
crickets...
you'd think all these JS kids are terrified of Apache or something :smile:
Patrik Johnson
@orbitbot
Jan 23 20:53
haven't used Apache in a decade, so can't help...
Scotty Simpson
@CreaturesInUnitards
Jan 23 20:55
Heehee, yeah it was worth a shot
Kasper Tidemann
@KasperTidemann
Jan 23 20:57
Me neither, I'm afraid. :/
spacejack
@spacejack
Jan 23 21:28
@CreaturesInUnitards maybe something like this?
Your image/css/js links might need to be absolute then
Scotty Simpson
@CreaturesInUnitards
Jan 23 22:11
@spacejack thanks, but that's what I already have. That sends every request to index.html, but I only want to rewrite requests for /subdir/*
Pat Cavit
@tivac
Jan 23 22:29

Rollup just shipped code-splitting, took a few minutes to build up a tiny example of it w/ mithril & systemjs:

https://gist.github.com/tivac/d5ad2e548a97fac7152ca827b0d07c8b

thanks for the giant embed, gitter :unamused:
Gilbert
@gilbert
Jan 23 22:34
wow, nice. I was thinking code splitting would never land in rollup
how does dynamic import work? Is it polyfilled via systemjs?
Barney Carroll
@barneycarroll
Jan 23 22:36
:)
Amazing @tivac!
Pat Cavit
@tivac
Jan 23 22:46
@gilbert yeah you set up rollup to barf out systemjs compatible output and it handles the loading bits
Gilbert
@gilbert
Jan 23 22:53
got it :)
Pat Cavit
@tivac
Jan 23 23:00
Could also use requirejs w/ amd output
or... maybe some sort of CJS shim for browsers that can support returning async?
I don't know of one though
Andrea Coiutti
@ACXgit
Jan 23 23:23
anyone using Parcel here? huge release today https://mobile.twitter.com/parceljs/status/955855137402109952
Gilbert
@gilbert
Jan 23 23:30
web assembly? Not saying it's bad but... why? O:
for rust? hmm
Pat Cavit
@tivac
Jan 23 23:33
cannot believe it didn't support source maps
Andrea Coiutti
@ACXgit
Jan 23 23:51
It was a real PITA and I fell into it in the middle of the development :) luckily they were quick to add them