LocalLiveView POC

[FKubisSWM]

This is a POC of LocalLiveView the LiveView that implements LiveView functionality in the browser using Popcorn.

Right now the functionality is limited to click events and does not support heex template files yet.

[mat-hek]

TBC

[mat-hek]

Lot's of commented-out code in here. I don't think we want it to be this way 🤔

[mat-hek]

• Compiling local_live_view generates a ton of warnings
• A brief overview of the architecture would be very useful for someone unfamiliar with LiveView internals

[mat-hek]

If there are any changes to the copied files, let's tag them and shortly describe their purpose, like we do in the patches

[mat-hek]

Please format the code and enforce formatting on the CI in the local live view and all examples

[mat-hek]

Wouldn't something like this work?

Suggested change

	let elements = document.querySelectorAll('[#{attribute}]');
	elements = Array.from(elements)
	const found = elements.find((element) => element.getAttribute("#{attribute}") == args.view);
	const element = document.querySelectorAll(`[#{attribute}=${args.view}]`);

[FKubisSWM]

ok

[mat-hek]

• mix deps.get is missing
• Maybe mix setup of the parent project could set up the internal project as well?
• I don't think the internal project needs to be in priv - it could be just in its directory under the root
• I'd name the internal project compare_live_views_local and keep it in the local directory
• After running mix setup I get the following error:

✘ [ERROR] Could not resolve "phoenix-colocated/compare_live_views"

    js/app.js:25:38:
      25 │ ...oks as colocatedHooks} from "phoenix-colocated/compare_live_views"
         ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "phoenix-colocated/compare_live_views" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

[mat-hek]

👀

[mat-hek]

Compiling local_live_view still generates warnings

[mat-hek]

Suggested change

	use Phoenix.LiveView
	use LocalLiveView

[mat-hek]

Suggested change

	# A LocalLiveView is a process that receives events, updates
	# A LocalLiveView.Server is a process that receives events, updates

[mat-hek]

These changes will trigger Popcorn build & test when an example changes. What's the point? Instead, I'd add an action that checks if local_live_view and the dependent examples compile successfully and without warnings

[mat-hek]

This is already done by mix setup

[mat-hek]

I meant just to put it in the local dir

Suggested change

	cd local/compare_live_views_local
	cd local

[mat-hek]

It's a bit sad that you can only close the modal :P Let's at least add a button to show the modal again

[mat-hek]

When I run it I see no difference at all :D Let's add an option to configure simulated latency using LiveView APIs for that

[mat-hek]

Either add moduledoc or @moduledoc false. Generally, generate documentation and see how it looks like

[mat-hek]

let's remove this

[mat-hek]

seems like something went wrong with the formatting

[FKubisSWM]

I reverted those changes.

[mat-hek]

This way there's a risk that the working directory stays changed and messes something. It's better to do this:

Suggested change

	Mix.shell().cmd("""
	cd local
	mix deps.get
	mix compile
	""")
	Mix.shell().cmd("""
	mix deps.get
	mix compile
	""", cd: "local")

[mat-hek]

leftover?

[mat-hek]

Isn't it rather about rendering a local live view in DOM? Perhaps the module name could be better too 🤔

[mat-hek]

Either use backticks or indent

[mat-hek]

Files in the wasm directory should be gitignored

[mat-hek]

If this file is copied automatically, it should be gitignored

[mat-hek]

This looks nice, but I'm worried about duplication with readme. WDYT about putting this into readme and adding readme as a main page in the docs?

[FKubisSWM]

I think thats a good idea.

[mat-hek]

As far as I understand, there's no need for the user to call dispatcher in any way, so it shouldn't be in the API. Actually, the only module that the user needs is LocalLiveView, so all the rest should be a private API (i.e. moduledoc -> moduledoc false & comment)

[mat-hek]

I'd mention this on the demo page too, with a notice you can change it by calling liveSocket.enableLatencySim in the console

[mat-hek]

Suggested change

	{:local_live_view, path: path_to_popcorn <> "/examples/local_live_view"}
	{:local_live_view, github: "software-mansion/popcorn", sparse: "examples/local_live_view"}

[mat-hek]

Suggested change

	The local part of the project is located in `local` directory.
	The most important files to look at are:
	```compare_live_views/lib/compare_live_views_web/live/demo_modal_online.ex``` - Phoenix LiveView that represents online part of the demo and is rendered on the left side of the page.
	```compare_live_views/local/lib/demo_modal_offline.ex``` - LocalLiveView that represents offline part of the demo and is rendered on the right side of the page.
	```compare_live_views/lib/compare_live_views_web/controllers/page_html/home.html.heex``` - home page that renders both views.
	The local part of the project is located in the `local` directory.
	The most important files to look at are:
	`compare_live_views/lib/compare_live_views_web/live/demo_modal_online.ex` - Phoenix LiveView that represents online part of the demo and is rendered on the left side of the page.
	`compare_live_views/local/lib/demo_modal_offline.ex` - LocalLiveView that represents offline part of the demo and is rendered on the right side of the page.
	`compare_live_views/lib/compare_live_views_web/controllers/page_html/home.html.heex` - home page that renders both views.

[mat-hek]

Formatting still messed up