Surface - A component-based library for Phoenix LiveView

@msaraiva thanks! re: .sface vs .leex, I would definitely use .sface files in this case. I’m a big fan of Surface and it is my go to approach to LiveView whenever it is possible to use.

ps. thanks so much for your work on this great library!

This is very interesting. What’s the story around forms? Currently I get a lot of mileage out of the phoenix html form helpers, would that require a port to this or is there a way to embed ordinary LEEX inside this?

1 Like

Hi Ben!

Any LEEX code generated with ~L or loaded from a file can be injected in a Surface template. You can even use ~L directly instead of ~H in your render/1 function. That’s the strategy I use to wrap form helpers when I need. However, the plan is to create official built-in wrappers around all those helpers to offer a more context friendly set of components that can be used directly without the need to fallback to LEEX. There’s already an issue for it and it’s on the roadmap for the first stable version :wink:

4 Likes

Hi folks!

Surface v0.1.0-alpha.1 has just been released with lots of bug fixes and new features. Here are some highlights:

  • Slots - Support for default and named slots has been added to the API. Features like fallback content and slot props are also available. See http://surface-demo.msaraiva.io/slots for full documentation and live examples.

  • New built-in LivePatch and LiveRedirect components

  • Update LiveView to v0.11.1

  • Improved documentation with new sections and live examples for all main features. See surface-demo.msaraiva.io/documentation for more.

  • A minimal boilerplate app is now available for those who want to take Surface for a spin without even installing npm/node, i.e., no webpack, no babel, etc. Details can be found at the Getting Started page.

  • A new version of the VS Code extension has been released adding syntax highlighting for slots.

The support for slots was the last planned feature that was supposed to have a big impact on how you write components. From now on, you shouldn’t expect any major change in the API until we reach the first stable version.

What’s next?

  1. Performance tuning

  2. Improve error handling

  3. Extend the built-in set of components (e.g. wrappers around Form helpers and friends)

  4. Create a full-featured suite of UI components using Bulma or Tailwind.

I’ll probably spend the next couple of weeks working on #1 and #2, so if you’re willing to contribute and wanna give #3 or #4 a try, please let me know. I’ll be glad to give any assistance you might need!

I’ve spent quite some time working on the docs and examples to make sure you have enough resources to get started. I hope you enjoy it!

Cheers.

-marlus

13 Likes

This isn’t related to your library, but I wanted to check out the demos on the site you linked.

If you load http://surface-demo.msaraiva.io/slots (you linked to this in your reply), and in the sidebar you click any other links, such as “Events”, and then click “Slots” again, it will always dim out the entire side bar’s icons after you do that more than once.

Then if you keep alternating clicks between 2 items that are “Slots” + anything else, it consistently dims and un-dims the side bar icons.

I’m curious, is this a bug with navigating pages with LV, or something else?

2 Likes

Just wanted to thank you for creating Surface - I have used it extensively the last couple of weeks and it has been so much fun :slightly_smiling_face:

The latest updates and docs look awesome. Keep up the good work :+1:

4 Likes

Hi @cnck1387!

I’m curious, is this a bug with navigating pages with LV, or something else?

Definitely something else! :slight_smile:

It’s not directly related to LV. I believe it’s fixed now. I’ll review all CSS stuff to make sure I get rid of any other CSS style leaking.

Thanks a lot for reporting this! :heart:

4 Likes

No problem, I’m noticing it’s fixed here too. I even tried in a fresh browser to make sure it wasn’t cached.

1 Like

Really digging this library, I have used Vue a lot in the past so it’s really nice to have a familiar mental model.

One thing I’m not clear on is, can you use template files (like LiveVIew .leex files) or do you have to define your Surface markup in render/1? Can’t see this in the docs but perhaps I’m having a case of the Mondays :grin:

Hi @darraghenright!

Support for colocated template files (.sface) is planned and should be available before the first official release.

4 Likes

That is beautiful news!

This is terrific work @msaraiva !

any chance of a version bump to phoenix 1.5.1 and live_view 0.13 ?

My mix complains about surface (version 0.1.0-alpha.1) requires ~> 0.11.1

Wanting to get “on the surface boat” :slight_smile:

Hi @wdiechmann!

I’ll release a new version some time this weekend as soon as I finish the docs & examples for the new components. In the meantime, feel free to use the master branch which is already compatible with LV v0.13.

4 Likes

Hi folks!

Surface v0.1.0-alpha.2 has just been released with lots of bug fixes and new components. Here are the highlights:

Along with the new built-in components, there are also some new UI components available. For documentation and live examples see:

Source code can found at GitHub - surface-ui/surface_bulma: A set of simple Surface components based on Bulma.

The Markdown component

The new <#Markdown> component allows users to write markdown content directly in a Surface template. The content will be validated and translated to HTML at compile-time.

Surface’s website was mostly written using this component. It’s very handy, especially if you want to mix static markdown and HTML content with runtime interactive components.

Example:

Reporting syntax errors:

If you’re using VS Code, there’s a new version of the Surface extension which adds syntax highlighting to the Markdown component’s content, as you can see in the examples above.

Have fun.

22 Likes

Very excited to see a version of LiveView which follows a component-based architecture. My main gripe with LiveView has been the use of templates – going away from a component-based frontend and back to template-based one feels like taking a step backwards, and seeking to repeat architecture mistakes of the past.

2 Likes

Hi folks!

Surface v0.1.0-rc.0 has been released on Github.

Version v0.1.0 will be released on Hex as soon as LiveView v0.15 is out. Until then, feel free to use the rc-0 version directly from Github:

def deps do
  [
    {:surface, git: "https://github.com/msaraiva/surface.git", tag: "v0.1.0-rc.0"}
  ]
end

Full changelog can be found at CHANGELOG.md.

The documentation and examples at surface-demo.msaraiva.io, as well as the boilerplate project, have been fully updated to conform to the new API changes.

There are no further API changes planned for v0.1.0 so if you want to take Surface for a spin, that’s a great time to do it!

Feel free to give feedback either on Github or on our #surface channel on Slack.

I also want to thank @lnr0626 (our new core team member) for all his work on the new compiler and on many other contributions.

Cheers.

11 Likes

Hi folks!

Surface v0.1.0-rc.1 has just been released on Github.

Full changelog can be found at CHANGELOG.md.

The highlights are:

  • New compile-time check for undefined assign. Thanks to @lnr0626.
  • New form controls: <DateTimeSelect> and <TimeSelect>. With this addition, Surface now includes context-aware wrappers for all built-in Phoenix form controls. Thanks to @miguel-s.
  • Fix support for Elixir >= v1.11

New compile-time check in action

Thanks!

16 Likes

Hi folks!

Surface v0.1.0-rc.2 has just been released on Github.

Full changelog can be found at CHANGELOG.md.

Many thanks to all contributors!

10 Likes

Hi @msaraiva, I know its been discussed here before and at the time it wasnt possible to use Surface on non LiveView projects.
Is it still the case? Are you aware of any workarrounds or alternatives if I want do to “components” on my views?

Hi @cpgo!

That’s definitely on the roadmap. I’ve just created an issue for it. We’re already discussing the best way to implement this feature so we can start working on it as soon as possible.

As explained on the issue, since components are built on top of Phoenix.LiveComponent, currently there’s no workaround without depending on LV.

1 Like