Imagine you have a core component for LiveView/Phoenix component, and it has some static component like icon For example: <Heroicons.inbox_stack class="w-6 h-6 mx-auto stroke-current" /> You want to load it in a loop something like this: <.block :for={{id, title, icon_module} <- tailwind_settings…

I found Phoenix.LiveView.HTMLEngine.component, but I could not use with string name of Elixir module and function like: "Elixir.Heroicons.inbox_stack" <.block :for={{id, title, module} <- tailwind_settings} id={id} title={title}> <%= Phoenix.LiveView.HTMLEngine.component( String.to_existing_a…

I did like this, finally see it works: <.block :for={{id, title, module} <- tailwind_settings} id={id} title={title}> <%= Phoenix.LiveView.HTMLEngine.component( Code.eval_string("&#{module}/1") |> elem(0), [class: "w-6 h-6 mx-auto stroke-current"], {__ENV__.module, __ENV__.function, _…

[image] shahryarjb: If you have another way, please let me know Function.capture/3 is what you’re looking for.

[image] LostKobrakai: Function.capture I tried this, I have full name of module and its function which is like this: "Heroicons.inbox_stack", but it needs to have module and function name separately.

I’d suggest changing the input then to e.g. provide the function name only. Or the module and function name separately.

Yes, you’re right, I just have one question, <.block :for={{id, title, module} <- tailwind_settings} id={id} title={title}> <%= Phoenix.LiveView.HTMLEngine.component( Code.eval_string("&#{module}/1") |> elem(0), [class: "w-6 h-6 mx-auto stroke-current"], {__ENV__.module, __ENV__.funct…

https://github.com/petalframework/petal_components/blob/main/lib/petal_components/icon.ex

Hey all! It seems that HTMLEngine.component is no longer there… does anyone have another way of dynamically render a component?

Seems it got moved to Phoenix.LiveView.TagEngine: Open Tokenizer for customization by feliperenan · Pull Request #2482 · phoenixframework/phoenix_live_view · GitHub

You rock @LostKobrakai ! Thanks a lot! I need to find a “public” api to do this before it changes again.

Call a LiveView/Phoenix component dynamically

Questions & Help Questions

LostKobrakai February 16, 2023, 8:33pm 4

Function.capture/3 is what you’re looking for.