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,plvhc,plvhcl,def,def handle_call	Reference
LiveView: handle_cast	plvs,plv,plvhc,plvhcs,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,plvhp,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 Macros attr/3	plvs,pc,pcm,pcma,attr	Reference
Phoenix: Component Macros embed_templates/2	plvs,pc,pcm,pcme,pcmet,embed_	Reference
Phoenix: Component Macros sigil_H/2	plvs,pc,pcm,pcms,pcmsh,~H	Reference
Phoenix: Component Macros slot/2	plvs,pc,pcm,pcms,slot	Reference
Phoenix: Component assign/2	plvs,pc,pca,a,assign	Reference
Phoenix: Component assign_new/3	plvs,pc,pca,pcan,a,assign,assign_new	Reference
Phoenix: Component assigns_to_attributes/2	plvs,pc,pca,pcat,pcata,a,assigns,assigns_to_attributes	Reference
Phoenix: Component changed?/2	plvs,pc,pcc,c,changed?	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: Phoenix.Component.dynamic_tag/1	plvs,pc,pcc,pcd,pcdt,<.,<.dynamic_tag,dynamic_tag	Reference
Phoenix: Phoenix.Component.form/1	plvs,pc,pcf,<.,<.form,form	Reference
Phoenix: Phoenix.Component.inputs_for/1	plvs,pc,pci,pcif,<.,<.inputs_for,inputs_for	Reference
Phoenix: Phoenix.Component.intersperse/1	plvs,pc,pci,<.,<.intersperse,intersperse	Reference
Phoenix: Phoenix.Component.link/1	plvs,pc,pcl,<.,<.link,link	Reference
Phoenix: Phoenix.Component.live_file_input/1	plvs,pc,pc,pclf,pclfi,<.,<.live_,<.live_file,live_file_input	Reference
Phoenix: Phoenix.Component.live_img_preview/1	plvs,pc,pc,pcli,pclip,<.,<.live_,<.live_img,live_img_preview	Reference
Phoenix: Phoenix.Component.live_title/1	plvs,pc,pc,pclt,<.,<.live_,<.live_title,live_title	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

<.live_component
  module={$1}
  id={$2}
  $0
/>

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

<%= render_slot(${1:@inner_block}) %>

LiveView: handle_call

Prefixes

plvs,plv,plvhc,plvhcl,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,plvhc,plvhcs,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,plvhp,def,def handle_params

Template

@impl Phoenix.LiveView
def handle_params(${1:unsigned_params}, ${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 Macros attr/3

Prefixes

plvs,pc,pcm,pcma,attr

Template

attr :$1, :$2, required: $3$0

Phoenix: Component Macros embed_templates/2

Prefixes

plvs,pc,pcm,pcme,pcmet,embed_

Template

embed_templates "$1"

Phoenix: Component Macros sigil_H/2

Prefixes

plvs,pc,pcm,pcms,pcmsh,~H

Template

~H"""
$0
"""

Phoenix: Component Macros slot/2

Prefixes

plvs,pc,pcm,pcms,slot

Template

slot :${1:name}, required: $2

Phoenix: Component assign/2

Prefixes

plvs,pc,pca,a,assign

Template

assign(${1:socket_or_assigns}, $2: $3)$0

Phoenix: Component assign_new/3

Prefixes

plvs,pc,pca,pcan,a,assign,assign_new

Template

assign_new(${1:socket_or_assigns}, :${2:key}, ${3:fn %{$4} = assigns ->
  $0
end})

Phoenix: Component assigns_to_attributes/2

Prefixes

plvs,pc,pca,pcat,pcata,a,assigns,assigns_to_attributes

Template

assigns_to_attributes(${1:assigns}, ${2:[]})$0

Phoenix: Component changed?/2

Prefixes

plvs,pc,pcc,c,changed?

Template

changed?(${1:socket_or_assigns}, :$2)$0

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/(.*)/${1:/pascalcase}/} 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/(.*)/${1:/pascalcase}/}.

## 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/(.*)/${1:/pascalcase}/}.

  ## 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/(.*)/${1:/pascalcase}/}.

## 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 ${1/(.*)/${1:/pascalcase}/}.

## 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.Changeset{}}

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

Phoenix: Phoenix.Component.dynamic_tag/1

Prefixes

plvs,pc,pcc,pcd,pcdt,<.,<.dynamic_tag,dynamic_tag

Template

<.dynamic_tag name="$1" type="$2">
  $0
</.dynamic_tag >

Phoenix: Phoenix.Component.form/1

Prefixes

plvs,pc,pcf,<.,<.form,form

Template

<.form
  for={${1:@changeset}}
  let={${2:form}}
  phx-change="${3:validate}"
  phx-submit="${4:submit}"
>
  $0
</.form>

Phoenix: Phoenix.Component.inputs_for/1

Prefixes

plvs,pc,pci,pcif,<.,<.inputs_for,inputs_for

Template

<.inputs_for :let={${1:f_nested}} field={${2:f[:nested]}}>
  $0
</.inputs_for>

Phoenix: Phoenix.Component.intersperse/1

Prefixes

plvs,pc,pci,<.,<.intersperse,intersperse

Template

<.intersperse :let={${1:item}} enum={${2:[$3]}}>
  <:separator>
    $0
  </:separator>
</.intersperse>

Phoenix: Phoenix.Component.link/1

Prefixes

plvs,pc,pcl,<.,<.link,link

Template

<.link $1>
  $0
</.link>

Phoenix: Phoenix.Component.live_file_input/1

Prefixes

plvs,pc,pc,pclf,pclfi,<.,<.live_,<.live_file,live_file_input

Template

<.live_file_input upload={@uploads.$1} />$0

Phoenix: Phoenix.Component.live_img_preview/1

Prefixes

plvs,pc,pc,pcli,pclip,<.,<.live_,<.live_img,live_img_preview

Template

<.live_image_preview entry={$1}$2/>$0

Phoenix: Phoenix.Component.live_title/1

Prefixes

plvs,pc,pc,pclt,<.,<.live_,<.live_title,live_title

Template

<.live_title prefix="${1:"My App"}">
  <%= assigns[$2] || "Welcome" %>
</.live_title>

eex: Comment

Prefixes

plvs,eex,eexc,<%#

Template

<%# $0 %>

eex: Replace with result

Prefixes

plvs,eex,<%=

Template

<%= $0 %>

eex: Return contents

Prefixes

plvs,eex,eexr,<%%

Template

<%% $0 %>

eex: case

Prefixes

plvs,eex,eexcase,<% case

Template

<% case $1 do %>
  <% $2 -> %>
<% end %>

eex: cond

Prefixes

plvs,eex,eexcond,<% cond

Template

<%= cond do %>
  <% $1 -> %>
    $2
<% end %>

eex: for

Prefixes

plvs,eex,eexfor,<% for

Template

<%= for $2 <- $1 do %>
  $0
<% end %>

eex: if

Prefixes

plvs,eex,eexif,<% if

Template

<%= if $1 do %>
  $0
<% end %>

eex: inline with output

Prefixes

plvs,eex,<%

Template

<% $0 %>

Contributing

Generating snippets and documentation

Update the version

Before generating documentation make sure that the package.json version field is changed to reflect the new semver for the changes.

Run the build script

mix escript.build;
./app

This generates the README.md and corresponding snippet json.

Publishing

mix escript.build;
./app;
vsce package;
# Assuming you have the necessary tokens on your dev machine
vsce publish;