active-group / active-group/reacl

Provide a way to declare "methods" for event handlers (and other callbacks)

Abierto
#15 0 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement
Lenguaje dominante
Clojure
Estrellas
78
Forks
2
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

DOM elements (and other native utilities) require simple real functions as event handlers, but handling the event usually requires accessing at least the component instance (`this`):

```(dom/div {:onClick (fn [ev] (send-message! this (... ev)))})```

But "binding" `this` in the closure like that, will recreate a new function in each rendering, and esp. if this is not a simple div but something bigger, this might have an impact on performance because functions are never `=`.

React solves this by implicitly binding custom "method" declarations of a class to 'this', so that a method of the class can serve as an event handler and `this` is bound to the component instance inside of the function body. Although the same could be done in Clojure and Reacl as well, it's not very idiomatic (`this-as` and so on).
Binding via a new Clojure type implementing IFn (like reactions) does not work for event-handler, as they must be real functions (at least React checks for `typeof .. == "function"`)

Therefore I propose a new low-level class declaration like this:
```
(defclass foo this []
methods [(my-handler [ev] (send-message! this ...ev)) ...]
)
```

Where the syntax is like that of `letfn`. Only `this` should be visible in the function bodies, because the methods should be created only once for an instance of the class.

There might be use-cases where the handling depends on the then current state and props (which could lead us on the ugly path of adding `(get-local-state this)` and alike), but maybe that can/should always be done in `handle-message` if needed anyway.

A higher level, more declarative way of defining event-handlers (resp. the translation of events into messages) could later be based on this primitive.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

The issue names no implementation files or tests. Start with the proposed defclass and methods syntax, compare it with letfn-style declarations, and inspect how Reacl passes event handlers to React. Done means the API design is settled and the method handlers satisfy the stated real-function and instance-binding requirements.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
clojure, react
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.