active-group / active-group/reacl
Provide a way to declare "methods" for event handlers (and other callbacks)
- 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