Live preview Villain

[tmjoen]

https://github.com/phoenixframework/phoenix_live_view

[tmjoen]

• [ ] Setup for Brando.Pages.Page
• [ ] Setup for Brando.Pages.PageFragment
• [ ] Allow custom setups for custom modules (i.e Project)

[tmjoen]

defmodule MyApp.LivePreview do
  use Brando.LivePreview

  target MyApp.Projects.Project do
    # ...
  end

[tmjoen]

How can we override the data that is fetched in the controller?

[tmjoen]

Plug a LivePreview plug into each controller?

plug Brando.LivePreview.Controller, &__MODULE__.live_preview/2

def live_preview(...) do
  # ...
  halt?
end

[tmjoen]

Or provide a husk or shell that we wrap our data into? We forego the controller and go straight to the View.

render_layout(...) # render app.html, set @view_module + @view_template. Override `assigns`

[tmjoen]

Or:

rendered_entry = Villain.render_villain(entry.data)

LettWeb.LayoutView.render(
  "app.html", [
    conn: %Plug.Conn{}, 
    categories: [], 
    view_module: LettWeb.ArticleView, 
    view_template: "show.html", 
    entry: rendered_entry,
    articles: [], 
    restaurants: []
])

[tmjoen]

KForm could try to connect to backend to see if we have a live preview target for this form. If we do, show an "eye" icon.

[tmjoen]

The backend sends the "husk" back to the frontend so we only have to update the entry/villain itself.

<div>
  this is the husk
  ${CONTENT}
</div>

[tmjoen]

Phoenix.LiveView

localhost:4000/about?lp=lpsessionkey

Plug reads that ?lp query and injects a LiveView that reads from ETS. Vue can push out updates through adminchannel that updates the entry in ETS. When ETS it updated, update LiveView.

Brando must supply an absolute_url for the schema, so if we call MyApp.Projects.Project.url(entry) it returns http://localhost:4000/projects/business/my-awesome-entry

[tmjoen]

Access "/live-preview/?whatever" in Vue. Has a channel to livepreview Needs its own render, MyApp.LiveRender? MyApp.Context.Schema.live_render()? Tries to get assigns from ETS Plugs in LivePreview plug which can cache all assigns in ETS Everytime we edit in KForm we dispatch to Brando which updates ETS When ETS updates we render again. Extract and Morphdom <main>?

[tmjoen]

Inject script that will

• Force moonwalks to be visible!

  [data-moonwalk], ... { opacity:1 !Important; }

• Forces lazyload to load!