Macro to generate component functions

[C-Sinclair]

Changes

This PR creates an experimental macro which checks the assets/svelte folder for any Svelte components, and injects local function defs for those components into the calling module.

My thinking is that this would provide a cleaner more ergonomic interface into Svelte from Liveview, with a better DX. In the future attr macros could even be generated based on Svelte component exports.

Usage

def MyModule do
  use LiveSvelte.Components

  def render(assigns) do
    ~H"""
    <.MySvelteComponent foo="123" bar={456} />
    """
  end
end

Examples

See the live_chat file at example_project/lib/example_web/live/live_chat.ex in the example project for a working example!

Caveats

The assets/svelte directory is parsed once per module which calls use LiveSvelte.Components. A future improvement would be to only check here once per compile, and then reference the previously generated functions.

[woutdp]

This is very cool, thank you for the PR, let me check it out and see how it works, but will likely merge it. Feel free to add some documentation to the README. Maybe under the usage section.

[C-Sinclair]

This is very cool, thank you for the PR, let me check it out and see how it works, but will likely merge it. Feel free to add some documentation to the README. Maybe under the usage section.

Amazing!

One thing I just realised, nested components of the same name will overwrite each other so that will need to be more carefully generated. I'll take a look anyway, and also add to the README 👍

[woutdp]

One thing I noticed is that it's not fully working, not sure why though. For example the animations in the chat are not visible anymore and also the amount field gets reset on click in the hybrid view.

https://github.com/woutdp/live_svelte/assets/3637265/3a1fc0a1-2de4-4961-9865-07df3454ae01

[woutdp]

https://github.com/woutdp/live_svelte/issues/17 will be closed by this PR

[woutdp]

Available in 0.8.0