DEV Community

Discussion on: The Quest for ReactiveScript

View post
Collapse
 
oxharris profile image
Oxford Harrison •

These are all interesting experimentations. And here's one approach I've been explororing since last year: Subscript - reactivity without any special syntaxes or language tokens, but just regular, valid JavaScript.

It is implemented as a UI binding language:

<div title="">
  <script type="subscript">
    let title = this.state.title || 'Some initial text';
    this.setAttribute('title', title);
  </script>
</div>
Enter fullscreen mode Exit fullscreen mode

Above, the 'this' keyword is a reference to the <div> element; and this.state.title is the state being observed. Now the let expression evaluates each time the state of this.state.title changes, and the this.setAttribute() call picks up the new value of title each time. This is what happens when state is changed as in below:

let div = document.querySelector('div');
div.state.title = 'New title';
Enter fullscreen mode Exit fullscreen mode

It's that simple; it's pure JavaScript that works reactively by just understanding reference stacks. Details are here: webqit.io/tooling/oohtml/docs/gett...

I moved on implementing it's runtime and making a real world app with it. Waiting to see where this leads.

Collapse
 
ryansolid profile image
Ryan Carniato •

I see in this example you have accessor on the state on the element which serves as the signal and the script("subscript") itself is the wrapped effect. Makes sense. I see no problem with runtime reactivity without special syntax. SolidJS works that way today. But the desire for getting rid of the this.___ or state.___ is almost feverish pitch so I thought I'd try my hand at the problem.