CuauhI moved a small website from #mithriljs to #vue because I didn't feel like rebuilding a bunch of functionality from scratch. And damn, Vue has grown a lot in the five years since I last used it.
I lost a couple of hours investigating a weird issue with #MithrilJS and TypeScript when using JSX.
The documentation recommends three different approaches for handling custom component attributes:
Each option has its own downside. Hyperscript is the more idiomatic approach, but it can get confusing if you’re used to JSX. Class components won’t properly inspect or autocomplete custom attributes. So I naturally chose the third option, because it lets you keep JSX and still get attribute detection in the editor.
The problem is that the documentation provides the following snippet:
const ChildComponent = TsClosureComponent<Attributes>(vNode => {
return {
view: () => <div>{vNode.attrs.greet}</div>
};
})
However, if your component has nested children, it won’t re-render when they get updated. To make it work, the code needs to be written like this:
const ChildComponent = TsClosureComponent<Attributes>(() => {
return {
view: (vNode) => <div>{vNode.children}</div>
};
})
It works as expected, but I’m not sure if it'll introduce new issues, so I’ll keep updating.
Adam Nelson
jmsfbs
SoapDog
bach📡