Support top-level `let` by transpiling it to mutables

[pearmini]

Top-level let

We want to support top-level let, which can make Recho more accessible.

API sketch

A basic example (which throws an error right now):

let output = "";

for (let i = 0; i < 10; i++) output += i;

echo(output);

Furthermore, we can combine it with button:

let stack = new Stack();

recho.button("Push", () => {
  stack.push();
  stack = stack.clone();
})

echo("@".repeat(stack.values.length));

How it works

To achieve this, we plan to transpile top-level let to mutables:

const output = Mutable("");

for(let i = 0; i < 10; i++) output.value += i;

echo(output);

let stack = Mutable(new Stack());

recho.button("Push", () => {
  stack.push();
  stack.value = stack.value.clone();
})

echo("@".repeat(stack.values.length));

Development Plan

• Fork Observable Notebook Kit - Modify transpileJavaScript
• Support mutables in Recho Runtime.
• Update docs
• Add exampes

Discussions

Some ideation for object reactivity:

// Only works for customized Object
class Stack exntends recho.Object {}

// How to implement `notify`? 
{
  stack.push();
  notify(stack);
}

// Does this work?
{ 
  stack.push();
  const tmp = stack;
  stack = null;
  stack = temp;
}