API Reference surface v0.7.0

Modules

Surface is a component based library for Phoenix LiveView.

An AST node representing an attribute or property

An AST node representing an attribute expression (i.e. a dynamic value for an attribute, directive, or property)

An AST node representing a generic block.

An AST node representing a component

An AST node representing a container of other nodes. This does not have content itself, just contains children which have content, and directives that operate on the entirety of the children (i.e. for, if, debug)

An AST node representing a directive

An AST node representing a dynamic attribute (or attributes).

An AST node representing an error. This will be rendered as an html element.

An AST node representing an expression which does not resolve to a value printed out to the final DOM.

An AST node representing a for comprehension.

An AST node representing a function component

An AST node representing an if/else expression

An AST node representing interpolation within a node

An AST node representing a literal value

An AST node representing a macro component

A container for metadata about compilation.

An AST node representing a <#slot /> element

An AST node representing a standard HTML tag

An AST node representing a generic sub-block.

An AST node representing a standard HTML tag

An AST node representing a <#template> element. This is used to provide content for slots

An AST node representing a void (empty) HTML tag

A behaviour to provide additional information about the catalogue.

Experimental module that provides conveniences for manipulating data in Examples and Playgrounds.

Experimental LiveView to create examples for catalogue tools.

Experimental LiveView to create Playgrounds for catalogue tools.

Defines a behaviour that must be implemented by all HTML/Surface node translators.

This module glues together surface's AST and Phoenix.LiveView.Engine to actually render an AST.

Defines a stateless component.

A built-in component that allows users to set and retrieve values from the context.

A built-in component that allows users to inject dynamic components into a Surface template.

A built-in component that allows users to inject dynamic live components into a Surface template.

Defines a form that lets the user submit information.

Defines a checkbox.

An input field that let the user specify a color, either with a text field or a color picker interface.

An input field that let the user enter a date, either with a text field or a date picker interface.

Generates select tags for date.

An input field that let the user enter both date and time, using a text field and a date picker interface.

Generates select tags for datetime.

An input field that let the user enter one or multiple e-mails.

A component inspired by error_tag/3 that ships with mix phx.new in MyAppWeb.ErrorHelpers.

Defines a form field.

Defines a context for a form field but without the <div> wrapper in Field.

Generates a file input.

A hidden input field.

A wrapper for Phoenix.HTML.Form.html.hidden_inputs_for/1.

Properties

  • assigns :map - The assigns of the host component

Slots

  • default, args: [:form, :field]

A wrapper for Phoenix.HTML.Form.html.inputs_for/3.

An input field that let the user to enter a number.

Defines options to be used inside a select.

An input field that let the user securely specify a password.

Defines a radio button.

An input field that let the user specify a numeric value in a given range, usually using a slider.

Defines a reset button.

An input field that let the user enter search queries.

Defines a select.

Defines a submit button to send the form.

An input field that let the user enter a telephone number.

An input field that let the user enter a multi-line text.

An input field that let the user enter a single-line text.

An input field that let the user enter a time (hours, minutes and optionally seconds).

Generates select tags for time.

An input field that let the user enter a URL.

Generates a link to the given URL.

Generates a button that uses a regular HTML form to submit to the given URL.

Wrapper around Phoenix LiveView's built-in live_file_input/2 function.

Defines a link that will patch the current LiveView.

Defines a link that will redirect to a new LiveView.

A macro component that does not translate any of its contents.

Functions for formatting Surface code snippets.

A phase implementing a single "rule" for formatting code. These work as middleware between Surface.Compiler.Parser.parse and Surface.Formatter.Render.node/2 to modify node lists before they are rendered.

Handle exceptional case for blocks.

Add a newline after all of the nodes if one was present on the original input

Adds indentation nodes (:indent and :indent_one_less) where appropriate.

Standardizes usage of newlines.

Render the formatted Surface code after it has run through the other transforming phases.

In a variety of scenarios, converts :space nodes to :newline nodes.

Inspects all text nodes and "tags" leading and trailing whitespace by converting it into a :space atom or a list of :newline atoms.

A live stateful component. A wrapper around Phoenix.LiveComponent.

A wrapper component around Phoenix.LiveView.

Conveniences for testing Surface components.

A low-level component which is responsible for translating its own content at compile time.

Use this module on regular Phoenix views to enable .sface templates

Mix Tasks

Generate CSS and JS assets for components.

Converts .sface files and ~H sigils from pre-v0.5 to v0.5 syntax.

To format Surface code using Elixir 1.13 or later, use Surface.Formatter.Plugin.

Configures Surface on an phoenix project.