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
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.
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.
| 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 |
plvs,es,esc
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
plvs,es,esoa
optional_attrs = [$0]
plvs,es,escra
required_attrs = [$0]
plvs,plv,@impl
@impl Phoenix.LiveComponent
plvs,plv,@impl
@impl Phoenix.LiveView
plvs,plv,plvnlvm,defmodule
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
plvs,plc,plca,plcah
def assign_$1(socket, $1) do
assign(socket, $1: $1)
end
plvs,plc,plcc
<.live_component
module={$1}
id={$2}
$0
/>
plvs,plc,plche
@impl Phoenix.LiveComponent
def handle_event(${1:event}, ${2:unsigned_params}, ${3:socket}) do
$0
${4:{:noreply, socket}}
end
plvs,plc,plcm
@impl Phoenix.LiveComponent
def mount(${1:socket}) do
$0
{:ok, ${2:socket}}
end
plvs,plc,plcp
@impl Phoenix.LiveComponent
def preload(${1:list_of_assigns}) do
$0
$1
end
plvs,plc,plcr
@impl Phoenix.LiveComponent
def render(${1:assigns}) do
~H"""
$0
"""
end
plvs,plc,plcu
@impl Phoenix.LiveComponent
def update(${1:assigns}, ${2:socket}) do
$0
{:ok, socket}
end
plvs,plv,plvm,def mount
@impl Phoenix.LiveView
def mount(${1:params}, ${2:session}, ${3:socket}) do
${4:{:noreply, socket}}
end
plvs,plvrs
<%= render_slot(${1:@inner_block}) %>
plvs,plv,plvhc,plvhcl,def,def handle_call
@impl Phoenix.LiveView
def handle_call(${1:msg}, ${2:from}, ${3:socket}) do
$0
${4:{:noreply, socket}}
end
plvs,plv,plvhc,plvhcs,def,def handle_cast
@impl Phoenix.LiveView
def handle_cast(${1:msg}, ${2:socket}) do
$0
${3:{:noreply, socket}}
end
plvs,plv,plvhe,def,def handle_event
@impl Phoenix.LiveView
def handle_event(${1:event}, ${2:unsigned_params}, ${3:socket}) do
$0
${4:{:noreply, socket}}
end
plvs,plv,plvhi,def,def handle_info
@impl Phoenix.LiveView
def handle_info(${1:message}, ${2:socket}) do
$0
{:noreply, ${3:socket}}
end
plvs,plv,plvhp,def,def handle_params
@impl Phoenix.LiveView
def handle_params(${1:unsigned_params}, ${2:uri}, ${3:socket}) do
$0
${4:{:noreply, socket}}
end
plvs,plv,plvr,def render
@impl Phoenix.LiveView
def render(${1:assigns}) do
~H"""
$0
"""
end
plvs,plv,plvsd,socket
%{ assigns: %{$1} } = $0
plvs,plv,plvt,def terminate
@impl Phoenix.LiveView
def terminate(${1: reason}, ${2:socket}) do
$3
end
plvs,pc,pcm,pcma,attr
attr :$1, :$2, required: $3$0
plvs,pc,pcm,pcme,pcmet,embed_
embed_templates "$1"
plvs,pc,pcm,pcms,pcmsh,~H
~H"""
$0
"""
plvs,pc,pcm,pcms,slot
slot :${1:name}, required: $2
plvs,pc,pca,a,assign
assign(${1:socket_or_assigns}, $2: $3)$0
plvs,pc,pca,pcan,a,assign,assign_new
assign_new(${1:socket_or_assigns}, :${2:key}, ${3:fn %{$4} = assigns ->
$0
end})
plvs,pc,pca,pcat,pcata,a,assigns,assigns_to_attributes
assigns_to_attributes(${1:assigns}, ${2:[]})$0
plvs,pc,pcc,c,changed?
changed?(${1:socket_or_assigns}, :$2)$0
plvs,pc,pcd
def ${1:component}(${2:assigns}) do
~H"""
$3
"""
end
plvs,pctx,pctxch
@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
plvs,pctx,pctxcr
@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
plvs,pctx,pctxd
@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
plvs,pctx,pctxg
@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
plvs,pctx,pctxl
@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
plvs,pctx,pctxu
@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
plvs,pc,pcc,pcd,pcdt,<.,<.dynamic_tag,dynamic_tag
<.dynamic_tag name="$1" type="$2">
$0
</.dynamic_tag >
plvs,pc,pcf,<.,<.form,form
<.form
for={${1:@changeset}}
let={${2:form}}
phx-change="${3:validate}"
phx-submit="${4:submit}"
>
$0
</.form>
plvs,pc,pci,pcif,<.,<.inputs_for,inputs_for
<.inputs_for :let={${1:f_nested}} field={${2:f[:nested]}}>
$0
</.inputs_for>
plvs,pc,pci,<.,<.intersperse,intersperse
<.intersperse :let={${1:item}} enum={${2:[$3]}}>
<:separator>
$0
</:separator>
</.intersperse>
plvs,pc,pcl,<.,<.link,link
<.link $1>
$0
</.link>
plvs,pc,pc,pclf,pclfi,<.,<.live_,<.live_file,live_file_input
<.live_file_input upload={@uploads.$1} />$0
plvs,pc,pc,pcli,pclip,<.,<.live_,<.live_img,live_img_preview
<.live_image_preview entry={$1}$2/>$0
plvs,pc,pc,pclt,<.,<.live_,<.live_title,live_title
<.live_title prefix="${1:"My App"}">
<%= assigns[$2] || "Welcome" %>
</.live_title>
plvs,eex,eexc,<%#
<%# $0 %>
plvs,eex,<%=
<%= $0 %>
plvs,eex,eexr,<%%
<%% $0 %>
plvs,eex,eexcase,<% case
<% case $1 do %>
<% $2 -> %>
<% end %>
plvs,eex,eexcond,<% cond
<%= cond do %>
<% $1 -> %>
$2
<% end %>
plvs,eex,eexfor,<% for
<%= for $2 <- $1 do %>
$0
<% end %>
plvs,eex,eexif,<% if
<%= if $1 do %>
$0
<% end %>
plvs,eex,<%
<% $0 %>
Before generating documentation make sure that the package.json version field is changed to reflect the new semver for the changes.
mix escript.build;
./appThis generates the README.md and corresponding snippet json.
mix escript.build;
./app;
vsce package;
# Assuming you have the necessary tokens on your dev machine
vsce publish;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent