📈 Pluto object viewer as embeddable element

[fonsp]

You can now use Pluto's object viewer inside custom HTML output, making things possible like: interactive table viewer on the left half of a cell, plot on the right. The embedded viewer is available inside notebooks as:

embed_display(x)

and inside packages as:

if isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display)
	# if this package is used inside Pluto, and Pluto is new enough
	Main.PlutoRunner.embed_display(x)
else
	x
end

let
	left = DataFrame(rand(30,3),:auto)
	right = Matrix(left) |> plot
	
	@htl("""

	<div style="display: flex;">
		
	$(embed_display(left))
	$(embed_display(right))
		
	</div>

	""")
end

It's interactive, and you can click on "More"

Schermopname.2021-04-29.om.15.37.14.mov

let
	left = rand(50)
	right = left |> plot
	
	@htl("""

	<div style="display: flex;">
		
	<div style="max-width: 50%; overflow: auto;">
		$(embed_display(left))
	</div>
	$(embed_display(right))
		
	</div>

	""")
end

You can also use it inside Markdown

TODO:

• I had to import preact directly from esm.sh to get fields that are hidden in the htm bundle. This probably won't work in China, so either find a way to get it with jsdelivr or Artifacts to proxy&cache CDNs #241 . I think the easiest way is to create a new repo containing just https://github.com/fonsp/Pluto.jl/blob/pluto-display-custom-element/frontend/imports/Preact.js and then call deno bundle on that, and store the bundle in the same repo
• The preact contexts don't work for custom elements inside preact components, which means that bonds don't work showing more items doesn't work
• Add helper function to PlutoRunner
• Scripts are executed twice?
• How to reuse the preact state?

This is achieved in combination with #1124

Demo and test notebook

https://github.com/fonsp/Pluto.jl/blob/main/sample/test_embed_display.jl

[fonsp]

This will fix Roger-luo/Configurations.jl#34

[fonsp]

@andreypopp I was having a quick look at your fork and this PR might be of interest to you.

Note the "Persistance" in the test notebook on the bottom (still work in progress). This means that you can implement things like HBox inside user-code, it does not need to be part of Pluto's editor VDOM.

I am planning on adding hbox, vbox, grid as a new submodule PlutoUI.Layout, WIP code is currently here: https://github.com/fonsp/disorganised-mess/blob/main/Layout.jl I wrote that notebook before implementing this PR, but it would be interesting to combine the two.

[schneiderfelipe]

@fonsp Do you think this can help improve JuliaPluto/PlutoUI.jl#102?