[proposal-idea] Variable decorators

#!/JoePea joe at trusktr.io
Sat Nov 16 17:46:34 UTC 2019


Any one have any thoughts on this?

On Fri, Oct 4, 2019 at 11:54 AM #!/JoePea <joe at trusktr.io> wrote:
>
> 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.


More information about the es-discuss mailing list