Currently we can implement things like "reactive variables" and
"reactive computations". Contrived example:
```js
import {rv, computation} from './reactive-variable'
const count = rv(0)
// read the value
console.log(count()) // 0
// set the value
count(1)
console.log(count()) // 1
// increment it every second
setInterval(() => count(count() + 1), 1000)
// logs the value initially (1), and any time it is updated by the
interval after that.
computation(() => {
console.log(count())
})
```
And we can do neat things like compile JSX to using reactive computations:
```jsx
const div = <div>The count is: {count}</div>
document.body.append(div)
```
and now the div's `textContent` updates every second with the new value.
It'd be neat if we had variable accessors as well as variable decorators.
The above example could become:
```jsx
import {rv, computation} from './reactive-variable'
// The rv variable decorator may implement this using a variable accessor
// We can already do this with class properties/fields when
transpiling class-based decorators
@rv const count = 0
// read the value
console.log(count) // 0
// set the value
count = 1
console.log(count) // 1
// increment it every second
setInterval(() => count++, 1000)
// logs the value initially (1), and any time it is updated by the
interval after that.
computation(() => {
console.log(count)
})
const div = <div>The count is: {count}</div>
document.body.append(div)
```
variable accessors may look something like
```js
// it is exportable just like regular variables
export let s {
set(v) {
console.log('set s:', v * 2)
// maybe `this` is an engine-builtin object for this specific
variable, that we can use to store stuff on.
this.s = v * 2
},
get() {
console.log('get s:', this.s)
return this.s
},
} = 0
```
A variable decorator would have some way to be able to define a getter/setter.
_______________________________________________
es-discuss mailing list
[email protected]
https://mail.mozilla.org/listinfo/es-discuss
