Surface Compatibility

[jpyamamoto]

I am porting my vanilla LiveView project to use the Surface library (https://github.com/surface-ui/surface).

I would like to keep using this library to test components in isolation, but I can't get the two libraries to work properly.

The error that comes up when trying to simply pass a Surface Live Component to live_assign as I normally would is that the component does not have the pid attribute.

Could you add support for surface components? Or can I have some pointers on how this library deals with components in isolation so I could try to propose a solution myself?

Thank you.

[Serabe]

I have never used surface. Can you provide me a simple repo with its usage and a failing test so I can investigate?

I see they have their own sigil and slot format, so it might be a bit difficult to make it work for both, but I can give a look.

[jpyamamoto]

Thank you for your response.

Here's a repo with a simple example: https://github.com/jpyamamoto/demo

The two important files are lib/demo_web/components/counter.ex and test/demo_web/components/counter_test.exs.

By doing this example I was able to notice that the error I mentioned previously about a missing PID was my fault, and actually it seems like the library works correctly when you don't have prop assigns, or when you pass all the props, despite them having a default value.

The surface library allows you to give props a default value, so you don't need to pass them.

This doesn't work with live_isolated_component as it will throw an error due to missing values in the assigns.

[Serabe]

I have not forgotten about this. I've take a couple of brief looks and:

• Looks like Surface rendering is completely different though it is built on top of LV. How do you call surface component from a LiveView template (with sigil_H/2)? Is there any way to render a component dynamically in surface templates (sigil_F)?
• I might not be able to pull this out, but I'm willing to find a middle ground solution, just currently I don't know what it'll look like as I'm not familiar at all with Surface. Would you be willing to work with me on this?

Thank you!

[Serabe]

Hey, I've just added a way to customise LiveViews to be used as mock views in LiveIsolatedComponent (see #42 ). Can you check if this is enough for it to work?