SnapFramework.Component (SnapFramework v0.2.0-beta.1) View Source

Overview

SnapFramework.Component is nearly identical to a Scene. The main difference is it automatically generates some helper functions and validation functions based on the options you add when use is called.

defmodule Example.Component.MyComponent do
  use SnapFramework.Component,
    name: :my_component,
    type: :tuple
end

The above example defines a component that takes in a tuple for data and builds your helper function defined as my_component/3

Component templates also have an additional feature that primitives or scene templates do not have. You can inject children into them. Lets write a basic icon button component that takes an icon child.

defmodule Example.Component.IconButton do
  use SnapFramework.Component,
    name: :icon_button

  def render(assigns) do
    ~G"""
    <%= graph font_size: 20 %>

    <%= primitive Scenic.Primitive.Circle,
        15,
        id: :bg,
        translate: {23, 23}
    %>

    @children
    """
  end
end

Now lets see how to use this component with children in a scene. This assumes we've already made an icon component. As you can see we are nesting a component within another component. The compiler will pass any nested components onto the scene of the parent component as children.

  <%= graph font_size: 20 %>

  <%= component Example.Component.IconButton,
      nil,
      id: :icon_button
  do %>
    <%= component Example.Component.Icon,
        @icon,
        id: :icon
    %>
  <% end %>

Additionally because children are assigns in the engine whenever you change them at the top level, the graphs all the way down your component tree will be update.

That's all there is to putting children in components!