View mithril-view-attrs.md

Precedent: render props (or, view attributes)

I've been toying the idea of 'view attributes' for a while, but over the past year they've taken off in the popular domain of React as 'render props'.

A component written to make use of view attributes is a 'view component' inasmuch as it doesn't have an opinion on downstream virtual DOM, but performs a useful function in the context of virtual DOM (whether that be transforming other attribute input, querying DOM or external references, providing state), which can be exposed via the view attribute provided to it.

Here's a sample of view components with associated demos.

The React community has already proved the far-reaching value of this concept to the point where the pattern is part of the official documentation, ahead of 'integrating with other libraries'. React Router

View NoopComponent.js
export const {
view: v => (
v.attrs.view
?
v.attrs.view.call(v.state, v)
:
v.children
)
}
View Blockm.js
const callOBR = v =>
Promise.all(
['tag', 'attrs']
.map(x =>
v[x]
&& v[x].onbeforeremove
&& v[x].onbeforeremove.call(v.state, v)
)
)
View Blocker.js
const findOBR = v => {
while(v.length || !(v.tag.onbeforeremove || v.attrs && v.attrs.onbeforeremove))
v = v.instance || v.children || v[0]
return v
}
const persist = v => {
const target = findOBR(v.instance || v.children)
View diffm.js
export default (component, previous = undefined) => ({
...component,
onbeforeupdate: (a, b) => (
component.onbeforeupdate
&&
component.onbeforeupdate(a, b) !== false
&&
previous = b
),
View domicile.js
import m from 'mithril'
const find = predicate => generator => {
for(const item of generator)
if(predicate(item))
return item
}
const horizontalElementQuery = function * (root = document){
const backlog = []
View pave.js
const pave = (container, target, path = []) => (
container === target
?
path
:
Array.isArray(container)
?
container.filter((a, i) => pave(a, target, [...path, i])).pop()
:
container.instance
View overloaded-patchinko.js
export default function O(a){
return (
arguments.length == 1
?
typeof a != 'function'
?
new O(a => O(b, a))
:
this instanceof O
?
View m.inline-refs.js
const login = {
view : ({state}) =>
m('form#login', {
onsubmit: e => {
e.preventDefault()
console.log(
state.email.dom.value,
state.pass.dom.value,
)
View thinkpol.js
export const censored = $ =>
$ == undefined || $ === false ? '' : $
export const censor = ({ censored, strings, expressions }) =>
strings.reduce((a, c, i, [], b = expressions[i - 1]) =>
a + censored(b) ? '' : b + c
)
export default (strings, ...expressions) =>
Array.isArray(strings)