Phoenix LiveView snippets

Description

A well documented set of snippets commonly used when writing LiveView code. The snippets touch on all aspects of development when writing LiveView code. Here's a high level list

• Ecto
  • schema
• Embedded elixir aka eex
• LiveView
  • Lifecycle functions such as handle_event, render, preload, mount
  • LiveComponent
• Phoenix
  • Context
  • Component

Getting started

Not sure where to start

All snippets support the prefix plvs. So if you don't know where to get started, just type plvs and wait for the snippet recommendation to come up. From there a browsable list is given to you.

Mnemonic layout

All snippets use a mnemonic layout that matches the component name name space. So for example if you want to render a form in Phoenix LiveView

You'll want to reach for Phoenix.Component.form/1 this mnemonically translates to pcf.

This applies to all snippets. See the table below to get a better understanding. Worst case, you just type plvs for a while and teach yourself which snippet mnemonics you would prefer to use.

Snippet index

Name	Prefix	Reference
Ecto: Schema changeset	plvs,es,esc	Reference
Ecto: Schema changeset optional attrs	plvs,es,esoa	Reference
Ecto: Schema changeset required attrs	plvs,es,escra	Reference
LiveView: @impl Phoenix.LiveComponent	plvs,plv,@impl	Reference
LiveView: @impl Phoenix.LiveView	plvs,plv,@impl	Reference
LiveView: New LiveView module	plvs,plv,plvnlvm,defmodule	Reference
LiveView: Phoenix.LiveComponent assign helper	plvs,plc,plca,plcah	Reference
LiveView: Phoenix.LiveComponent call	plvs,plc,plcc	Reference
LiveView: Phoenix.LiveComponent handle_event	plvs,plc,plche	Reference
LiveView: Phoenix.LiveComponent mount	plvs,plc,plcm	Reference
LiveView: Phoenix.LiveComponent preload	plvs,plc,plcp	Reference
LiveView: Phoenix.LiveComponent render	plvs,plc,plcr	Reference
LiveView: Phoenix.LiveComponent update	plvs,plc,plcu	Reference
LiveView: Phoenix.LiveView mount	plvs,plv,plvm,def mount	Reference
LiveView: Render slot	plvs,plvrs	Reference
LiveView: handle_call	plvs,plv,plvhi,def,def handle_call	Reference
LiveView: handle_cast	plvs,plv,plvhi,def,def handle_cast	Reference
LiveView: handle_event	plvs,plv,plvhe,def,def handle_event	Reference
LiveView: handle_info	plvs,plv,plvhi,def,def handle_info	Reference
LiveView: handle_params	plvs,plv,plvhe,def,def handle_params	Reference
LiveView: render implementation	plvs,plv,plvr,def render	Reference
LiveView: socket destructure	plvs,plv,plvsd,socket	Reference
LiveView: terminate	plvs,plv,plvt,def terminate	Reference
Phoenix: Component definition	plvs,pc,pcd	Reference
Phoenix: Context change	plvs,pctx,pctxch	Reference
Phoenix: Context create	plvs,pctx,pctxcr	Reference
Phoenix: Context delete	plvs,pctx,pctxd	Reference
Phoenix: Context get	plvs,pctx,pctxg	Reference
Phoenix: Context list	plvs,pctx,pctxl	Reference
Phoenix: Context update	plvs,pctx,pctxu	Reference
Phoenix: HTML inputs_for	plvs,phtml,phtmlif,inputs_for,<%= for	Reference
Phoenix: Phoenix.Component.form/1	plvs,pc,pcf	Reference
eex: Comment	plvs,eex,eexc,<%#	Reference
eex: Replace with result	plvs,eex,<%=	Reference
eex: Return contents	plvs,eex,eexr,<%%	Reference
eex: case	plvs,eex,eexcase,<% case	Reference
eex: cond	plvs,eex,eexcond,<% cond	Reference
eex: for	plvs,eex,eexfor,<% for	Reference
eex: if	plvs,eex,eexif,<% if	Reference
eex: inline with output	plvs,eex,<%	Reference

Snippets

Ecto: Schema changeset

Prefixes

plvs,es,esc

Template

def changeset(${1:name}, attrs) do
  required_attrs = [$2]
  optional_attrs = [$3]

  ${1:name}
  |> cast(attrs, required_attrs ++ optional_attrs)
  |> validate_required(required_attrs)
end

Ecto: Schema changeset optional attrs

Prefixes

plvs,es,esoa

Template

optional_attrs = [$0]

Ecto: Schema changeset required attrs

Prefixes

plvs,es,escra

Template

required_attrs = [$0]

LiveView: @impl Phoenix.LiveComponent

Prefixes

plvs,plv,@impl

Template

@impl Phoenix.LiveComponent

LiveView: @impl Phoenix.LiveView

Prefixes

plvs,plv,@impl

Template

@impl Phoenix.LiveView

LiveView: New LiveView module

Prefixes

plvs,plv,plvnlvm,defmodule

Template

defmodule $1 do
  use $2, :live_view

  @impl Phoenix.LiveView
  def render(assigns) do
    ~H"""
    $0
    """
  end

  @impl Phoenix.LiveView
  def mount(${3: params}, ${4: session}, ${5: socket}) do
    $6
    {:ok, socket}
  end
end

LiveView: Phoenix.LiveComponent assign helper

Prefixes

plvs,plc,plca,plcah

Template

def assign_$1(socket, $1) do
  assign(socket, $1: $1)
end

LiveView: Phoenix.LiveComponent call

Prefixes

plvs,plc,plcc

Template

LiveView: Phoenix.LiveComponent handle_event

Prefixes

plvs,plc,plche

Template

@impl Phoenix.LiveComponent
def handle_event(${1:event}, ${2:unsigned_params}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: Phoenix.LiveComponent mount

Prefixes

plvs,plc,plcm

Template

@impl Phoenix.LiveComponent
def mount(${1:socket}) do
  $0
  {:ok, ${2:socket}}
end

LiveView: Phoenix.LiveComponent preload

Prefixes

plvs,plc,plcp

Template

@impl Phoenix.LiveComponent
def preload(${1:list_of_assigns}) do
  $0
  $1
end

LiveView: Phoenix.LiveComponent render

Prefixes

plvs,plc,plcr

Template

@impl Phoenix.LiveComponent
def render(${1:assigns}) do
  ~H"""
  $0
  """
end

LiveView: Phoenix.LiveComponent update

Prefixes

plvs,plc,plcu

Template

@impl Phoenix.LiveComponent
def update(${1:assigns}, ${2:socket}) do
  $0

  {:ok, socket}
end

LiveView: Phoenix.LiveView mount

Prefixes

plvs,plv,plvm,def mount

Template

@impl Phoenix.LiveView
def mount(${1:params}, ${2:session}, ${3:socket}) do
  ${4:{:noreply, socket}}
end

LiveView: Render slot

Prefixes

plvs,plvrs

Template

LiveView: handle_call

Prefixes

plvs,plv,plvhi,def,def handle_call

Template

@impl Phoenix.LiveView
def handle_call(${1:msg}, ${2:from}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: handle_cast

Prefixes

plvs,plv,plvhi,def,def handle_cast

Template

@impl Phoenix.LiveView
def handle_cast(${1:msg}, ${2:socket}) do
  $0

  ${3:{:noreply, socket}}
end

LiveView: handle_event

Prefixes

plvs,plv,plvhe,def,def handle_event

Template

@impl Phoenix.LiveView
def handle_event(${1:event}, ${2:unsigned_params}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: handle_info

Prefixes

plvs,plv,plvhi,def,def handle_info

Template

@impl Phoenix.LiveView
def handle_info(${1:message}, ${2:socket}) do
  $0

  {:noreply, ${3:socket}}
end

LiveView: handle_params

Prefixes

plvs,plv,plvhe,def,def handle_params

Template

@impl Phoenix.LiveView
def handle_params(${1:event}, ${2:uri}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: render implementation

Prefixes

plvs,plv,plvr,def render

Template

@impl Phoenix.LiveView
def render(${1:assigns}) do
  ~H"""
  $0
  """
end

LiveView: socket destructure

Prefixes

plvs,plv,plvsd,socket

Template

%{ assigns: %{$1} } = $0

LiveView: terminate

Prefixes

plvs,plv,plvt,def terminate

Template

@impl Phoenix.LiveView
def terminate(${1: reason}, ${2:socket}) do
  $3
end

Phoenix: Component definition

Prefixes

plvs,pc,pcd

Template

def ${1:component}(${2:assigns}) do
  ~H"""
  $3
  """
end

Phoenix: Context change

Prefixes

plvs,pctx,pctxch

Template

@doc """
Returns an `%Ecto.Changeset{}` for tracking $1 changes.

## Examples

    iex> change_$1(%{field: value})
    %Ecto.Changeset{data: %${1/(.*)/${1:/pascalcase}/}{}}

"""
def change_${1:name}(%${1/(.*)/${1:/pascalcase}/}{} = $1, attrs \\\\ %{} ) do
  ${1/(.*)/${1:/pascalcase}/}.changeset($1, attrs)
end

Phoenix: Context create

Prefixes

plvs,pctx,pctxcr

Template

@doc """
Creates a $1.

## Examples

    iex> create_$1(%{field: value})
    {:ok, %${1/(.*)/${1:/pascalcase}/}{}}

    iex> create_$1(%{field: bad_value})
    {:error, ...}

"""
def create_${1:name}(attrs \\\\ %{}) do
  %${1/(.*)/${1:/pascalcase}/}{}
  |> ${1/(.*)/${1:/pascalcase}/}.changeset(attrs)
  |> Repo.insert()
end

Phoenix: Context delete

Prefixes

plvs,pctx,pctxd

Template

@doc """
  Deletes a $1.

  ## Examples

      iex> delete_$1($1)
      {:ok, %${1/(.*)/${1:/pascalcase}/}{}}

      iex> delete_$1($1)
      {:error, %Ecto.Changeset{}}
"""
def delete_${1:name}(%${1/(.*)/${1:/pascalcase}/}{} = $1) do
  Repo.delete($1)
end

Phoenix: Context get

Prefixes

plvs,pctx,pctxg

Template

@doc """
Gets a single $1.

## Examples

    iex> get_$1!(123)
    %${1/(.*)/${1:/pascalcase}/}{}

    iex> get_$1!(456)
    ** (Ecto.NoResultsError)

"""
def get_${1:name}!(id) do
  Repo.get!(${1/(.*)/${1:/pascalcase}/}, id)
end

Phoenix: Context list

Prefixes

plvs,pctx,pctxl

Template

@doc """
Returns the list of $1s.

## Examples

    iex> list_$1()
    [%${1/(.*)/${1:/pascalcase}/}{}, ...]

"""
def list_${1:name}s do
  Repo.all(${1/(.*)/${1:/pascalcase}/})
end

Phoenix: Context update

Prefixes

plvs,pctx,pctxu

Template

@doc """
Updates a $1.

## Examples

    iex> update_$1(%{field: value})
    {:ok, %${1/(.*)/${1:/pascalcase}/}{}}

    iex> update_$1(%{field: bad_value})
    {:error, %Ecto.Chnageset{}}

"""
def update_${1:name}(%${1/(.*)/${1:/pascalcase}/}{} = $1, attrs) do
  $1
  |> ${1/(.*)/${1:/pascalcase}/}.changeset(attrs)
  |> Repo.update()
end

Phoenix: HTML inputs_for

Prefixes

plvs,phtml,phtmlif,inputs_for,
  
  $0

Phoenix: Phoenix.Component.form/1

Prefixes

plvs,pc,pcf

Template

  $0

eex: Comment

Prefixes

plvs,eex,eexc,

eex: Replace with result

Prefixes

plvs,eex,

eex: Return contents

Prefixes

plvs,eex,eexr,

eex: case

Prefixes

plvs,eex,eexcase,
  

eex: cond

Prefixes

plvs,eex,eexcond,
  
    $2

eex: for

Prefixes

plvs,eex,eexfor,
  $0

eex: if

Prefixes

plvs,eex,eexif,
  $0

eex: inline with output

Prefixes

plvs,eex,