Layouts & dead views

It is possible to use sface templates on regular controllers, views and layouts in your application. This can be useful if you have an existing application and want to start using Surface stateless components on non-LiveView pages that you already have. It can also be useful if you want to render Surface components on your layout templates such as app.html.heex, root.html.heex or live.html.heex.

To enable that, add use Surface.View, template: "lib/*your_app_web*/templates" to the view function of your application on lib/your_app_web.ex:

defmodule YourAppWeb do
  # ...
  def view do
    use Phoenix.View,
      root: "lib/your_app_web/templates",
      namespace: YourAppWeb

    # ...

    use Surface.View, root: "lib/your_app_web/templates"
  end
end

To enable autoreload in dev mode, update config/dev.exs:

    patterns: [
      # ...
      ~r"lib/your_app_web/templates/.*(eex|sface)$"
    ]

Then, change the extension of your template files from .html.heex to .sface (e.g. templates/your_app_web/page/index.sface) and make sure you replace any EEx/HEEx code interpolation with the proper Surface syntax. For instance, if you have <%= foo %>, replace it with {foo}.

Enabling only in specific views

If you want to make Surface templates available only on specific views, you can add a new function on the lib/your_app_web.ex:

defmodule YourAppWeb do
  # ...

  def surface_view(options \\ []) do
    [
      view(options),
      quote do
        use Surface.View, root: "lib/your_app_web/templates"
      end
    ]
  end

  # ...
end

To enable on your specific views, replace use YourAppWeb, :view with use YourAppWeb, :surface_view.