Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pluto: include init DOM in every display #199

Open
fonsp opened this issue Nov 22, 2023 · 3 comments
Open

Pluto: include init DOM in every display #199

fonsp opened this issue Nov 22, 2023 · 3 comments

Comments

@fonsp
Copy link
Contributor

fonsp commented Nov 22, 2023

Currently, the init DOM (the return value of setup_connection(session::Session{PlutoConnection})) is only included in the first HTML output generated by JSServe displaying in app.

This causes an issue when reloading: if you run this code in Pluto, then the app is interactive:

import JSServe.TailwindDashboard as D

app2 = App() do
    numberinput = D.NumberInput(0.0)
    slider = D.Slider("Test", 1:5)
    checkbox = D.Checkbox("check this", true)
    dropdown = D.Dropdown("chose", ["option 1", "option 2", "option 3"])

    return DOM.div(
		numberinput,
		dropdown,
		slider,
		(JSServe.Observables.@map &(slider.value) + &(numberinput.value)),
		checkbox,
    )
end

But if you then re-run the same cell and refresh your browser, it not longer works, because the init DOM is nowhere on the page.

The easy solution is to include this init DOM on every app HTML render in Pluto. This means that it does not depend on whether-it-has-been-rendered-before, and the <script type="module" src="..."> is guaranteed to run only once if included multiple times with the same src (also outside of Pluto).

Also: I was prototyping a new Connection type that uses fonsp/Pluto.jl#2726, and found the limitation that I need to include some init DOM for every app render, not just the first one. (I was hoping that SubConnection has the parent connection type as parameter. Then I could define setup_connection(session::Session{SubConnection{PlutoConnection}}).)

@SimonDanisch
Copy link
Owner

Refreshing the browser is a bit more complicated than this, since the html/js on the page will get out of sync with the state in the Session.
I included a workaround for refreshing for VSCode here: #190
Which requires to re-rendering the App completely.

@fonsp
Copy link
Contributor Author

fonsp commented Nov 22, 2023

Alright, I'll leave that up to you, but what do you think about my last paragraph? It would be nice to have API to give an init DOM that is rendered for subconnections.

@SimonDanisch
Copy link
Owner

Hm, I'd like to avoid it - does this actually need to be for the subconnection or could we do anything in the main connection?
I need to think about this, what exactly do you need in there? Just what gets into init usually?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants