Updating and rerendering while still running a callback

[arrudagates]

Ok so for context: I'm writing a programming language, i have everything working and i have a CLI runner, now I want to build a WASM web app for it and it works great, I'm using conditional compile to maintain the same codebase for both interfaces.
And then comes the problem, I have to run my interpreter and before it finishes interpreting everything i need to handle input and output. Just input works fine, because even though the output field in the page only updates after everything finishes running, that's not a problem for output, but input breaks that, because let say this happens:

output 1
input
output 2

Then what will happen is:

Interpreter will send the output 1
User will be prompted for input
Interpreter will send output 2
Page will re-render and only then it will show inputs 1 and 2

So visually for the user it's like this happened:

input
output 1
output 2

Here is my code (with only the relevant parts):

pub fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
    match msg {
        Msg::Run => run_code(model.code.clone(), &mut model.output).unwrap(),
    }
}

pub fn view(model: &Model) -> Node<Msg> {
    button!["Run", ev(Ev::Click, |_| Msg::Run),],
}

Edit: Sorry thats not Yew haha, here's yew:

fn update(&mut self, msg: Self::Message) -> ShouldRender {
            match msg {
                Msg::Run => {
                    self.output = String::new();
                    run_code(self.code.clone(), &mut self.output).unwrap();
                }
                Msg::CodeChange(code) => self.code = code,
            }
            true
        }

fn view(&self) -> Html {
            html! {
                <div>
                    <textarea cols="100" rows="20" onchange=self.link.callback(|event| Msg::CodeChange(if let ChangeData::Value(value) = event {value} else {String::new()}))></textarea>
                    <textarea cols="100" rows="20">{ self.output.clone() }</textarea>
                    <button onclick=self.link.callback(|_| Msg::Run)>{ "Run" }</button>
                </div>
            }
        }

I also tried agents and the exact same thing happened, I believe it has to run in a separate thread but i couldn't find out how to properly do it within Yew.

I appreciate any help :)

[mc1098]

Sorry, I need some clarification.
If I understand correctly you have the output which is triggered to update when the "Run" button is clicked? You have some input (not shown here) which triggers another Msg on the same Component?
When input is added what does it do now and what should it do?

Also, your code is not in Yew🙃

[arrudagates]

Haha yeah i was trying to make it work in Seed and forgot to roll back oops, I think it would be better if i just send the actual code, so here it is https://github.com/arrudagates/PTBRi/blob/web/src/main.rs#L40

[arrudagates]

But basically, input has code to run, output is supposed to be 'stdout', and the run button should shove the input code in the interpreter function and from inside the interpreter function i need to update the output textarea in real time

[arrudagates]

I updated the question with the proper code in Yew, sorry about that haha

[mc1098]

Oh, so your hoping for changes made to the &mut self.output in the run_code function to trigger a render to update the output shown on the web app?

[arrudagates]

Or another solution actually, anything that allows me to trigger a render multiple times while still running that function.

…

On Fri, Jul 30, 2021 at 9:08 AM mc1098 ***@***.***> wrote: Oh, so your hoping for changes made to the &mut self.output in the run_code function to trigger a render to update the output shown on the web app? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1975 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHGXNIUGJ2S2HUUEGTRJGLTT2KI2PANCNFSM5BHR4MYA> .

-- *Gabriel Facco de Arruda* +55 (51) 99826-0101 ***@***.*** ***@***.***>*

[mc1098]

Okay, so updating the state inside the component won't change the rendered html the only thing that can do that is the Component::view method so this would only occur after your run_code finished and when Component::update gets true returned it schedules to render the Component again. This might explain the behaviour you've been seeing - this would occur in an agent too because nothing is triggered when altering local state.

A possible solution is to edit the run_code function to include a Sink that you can send the updates to output on and for the Yew sink you can make it send an update Msg for each input to the sink. I think this would require that the run_code work is done in an Agent which runs on it's own web worker. So the Run button would send a Msg to the Component then the Component would send a message to the Agent the Agent would then call run_code with a Sink that would send Component messages for each incremental update and the component would probably just push the update onto the output string and return true and trigger the render. The run_code being in it's own web worker means that it won't hold up the Component from rendering on each update :)

[mc1098]

You could possible do this without the Agent stuff by applying changes to the textarea element directly, however, doing it directly means that the run_code staying in the Component which will could cause delays when trying to fire other updates at the Component, this is because Yew uses a single threaded scheduler so while run_code is running nothing else can happen for Yew. In the short term this might be okay to stop the Yew world but think this will become an issue eventually :)

[arrudagates]

But wait, I'm now having trouble handling the receiver, because i'm opening a channel and giving the sender to run_code(), but then i'm not sure where to put the receiver, I've tried to spawn a thread like this

fn handle_input(&mut self, msg: Self::Input, _id: HandlerId) {
            match msg {
                Request::Run(s) => {
                    let (sender, receiver): (
                        Sender<String>,
                        Receiver<String>,
                    ) = channel();
                    std::thread::spawn(move || loop {
                        let response = &receiver.recv();
                        for sub in self.subscribers.iter() {
                            self.link.respond(*sub, response.unwrap().clone());
                        }
                 
                    run_code(s, &sender).unwrap();
                }
            }
        }

But that doesn't really work because the agent stuff can't be sent between threads

[mc1098]

You cannot call std::thread::spawn in wasm applications, oddly it will compile but panics as you run the web app :(.

So web worker agents are still bit rough round the edges - however there is another example which you might find helpful!. When you have an Agent in a web worker then it should be working concurrently with the UI thread so Yew should get to render while the run_code is inside the web worker.
I don't think you need the channel - it would be enough to define a trait which accepts those updates and an implementation of that trait which is created with the Agent link to call the respond function with the update msg back to your Component.

So I will say here that I've never done something similar to this with Agents so if you are still having issues after following the example linked above then might take me a little while work it out for myself too, either that or will try and drag someone else with more knowledge into this discussion 🙃

[arrudagates]

That sounds good, I will try that tonight, are there any more relevant code examples besides pub_sub that you could send?

…

On Fri, Jul 30, 2021 at 9:29 AM mc1098 ***@***.***> wrote: Okay, so updating the state inside the component won't change the rendered html the only thing that can do that is the Component::view method so this would only occur after your run_code finished and when Component::update gets true returned it schedules to render the Component again. This might explain the behaviour you've been seeing - this would occur in an agent too because nothing is triggered when altering local state. A possible solution is to edit the run_code function to include a Sink that you can send the updates to output on and for the Yew sink you can make it send an update Msg for each input to the sink. I think this would require that the run_code work is done in an Agent which runs on it's own web worker <https://yew.rs/concepts/agents#reaches>. So the Run button would send a Msg to the Component then the Component would send a message to the Agent the Agent would then call run_code with a Sink that would send Component messages for each incremental update and the component would probably just push the update onto the output string and return true and trigger the render. The run_code being in it's own web worker means that it won't hold up the Component from rendering on each update :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1975 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHGXNIURRSCGOGIPUNAHJQTT2KLJTANCNFSM5BHR4MYA> .

-- *Gabriel Facco de Arruda* +55 (51) 99826-0101 ***@***.*** ***@***.***>*

[mc1098]

Not that I'm aware of 😞. I think pub_sub will give you a good idea how to use an Agent and I think with your use case using either Public or Private would only require setting up a single bridge to the Component and then using that to send and receive messages.