Add watch function to gr.HTML js_on_load

[aliabid94]

New function in js_on_load that allows for reactive functions like $effect in svelte:

    watch_html = gr.HTML(
        value=0,
        html_template="""
        <div>
            <div>Will 'submit' at 10, currently ${value}</div>
            <button class="inc">+1</button>
            <button class="reset">Reset</button>
        </div>
        """,
        js_on_load="""
        element.querySelector('.inc').addEventListener('click', () => {
            props.value++;
        });
        element.querySelector('.reset').addEventListener('click', () => {
            props.value = 0;
        });

        watch('value', () => {
            if (props.value === 10) {
                trigger('submit');
            }
        });
        """,
        elem_id="watch_demo",
    )

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/ade077eed2857e48507ca3867735d9a5ce2e59db/gradio-6.9.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@ade077eed2857e48507ca3867735d9a5ce2e59db#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/ade077eed2857e48507ca3867735d9a5ce2e59db/gradio-client-2.1.0.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/html	minor
gradio	minor

---

• Add watch function to gr.HTML js_on_load

---

‼️ Changeset not approved. Ensure the version bump is appropriate for all packages before approving.

• Maintainers can approve the changeset by checking this checkbox.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[hannahblair]

there's a stray backtick at the end of this line

[hannahblair]

handy demo @aliabid94!

[hannahblair]

nice one @aliabid94!

i did a bit of digging to better understand the component and one thing i found is that the max_flush_depth doesn't seem to be having an effect and flushDepth never actually exceeds 1 because it gets reset. running this demo demonstrates that and causes the browser to freeze:

import gradio as gr

with gr.Blocks() as demo:
    freeze_html = gr.HTML(
        value=0,
        html_template="""
        <div>
            <div>Value: ${value}</div>
            <button class="freeze">Click to freeze browser</button>
        </div>
        """,
        js_on_load="""
        element.querySelector('.freeze').addEventListener('click', () => {
            props.value = 1;
        });

        watch('value', () => {
            props.value++;  // infinite loop here
        });
        """,
    )

if __name__ == "__main__":
    demo.launch()

[aliabid94]

Ok, updated the watch method to only listen to updates from the backend. So watch is only triggered when the component is an output to an event listener.

I think this is the best approach, it allows for a lot more interactivity when a prop updates from the backend, which wasn't possible before. I had to draw the line of complexity at some point and trying to recreate svelte with full reactivity to props in the frontend was just getting way too messy, and I think this is a simple clean compromise.

If I can get a re-review @hannahblair that would be great!