Skip to content

Latest commit

 

History

History
959 lines (691 loc) · 18.5 KB

README.md

File metadata and controls

959 lines (691 loc) · 18.5 KB
Raw

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

neovim compatibility

LazyVim

Assuming you've already installed LuaSnip

return {
  "L3MON4D3/LuaSnip",
  opts = function()
    -- Not actually running anything that modifies the snippet options, primarily just trying to configure
    -- snippets to be loaded
    require("luasnip.loaders.from_vscode").lazy_load({
      paths = { "/Users/blakedietz/projects/blakedietz/vscode-snippets-liveview/build/neovim" },
    })
  end,
}

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,<.,<.live,<.live_component 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.focus_wrap/1 plvs,pc,pcc,pcf,pcfw,<.,<.focus_wrap,focus_wrap 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_render/3 plvs,pc,pc,pclr,<,<%,<%=,<%= live_render,live_render Reference
Phoenix: Phoenix.Component.live_title/1 plvs,pc,pc,pclt,<.,<.live_,<.live_title,live_title Reference
Phoenix: Phoenix.Component.render_slot/2 plvs,pc,pc,pcr,pcrs,<,<%,<%=,<%= render_slot,render_slot 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
heex: Comment plvs,heex,heexc,<%! 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,<.,<.live,<.live_component

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:{:ok, 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.focus_wrap/1

Prefixes

plvs,pc,pcc,pcf,pcfw,<.,<.focus_wrap,focus_wrap

Template

<.focus_wrap id="$1" $2>
  $0
<./focus_wrap>

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_img_preview entry={$1}$2/>$0

Phoenix: Phoenix.Component.live_render/3

Prefixes

plvs,pc,pc,pclr,<,<%,<%=,<%= live_render,live_render

Template

<%= live_render($1, $2, $3) %>

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>

Phoenix: Phoenix.Component.render_slot/2

Prefixes

plvs,pc,pc,pcr,pcrs,<,<%,<%=,<%= render_slot,render_slot

Template

<%= render_slot(${1:slot}, ${2:argument}) %>

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 %>

heex: Comment

Prefixes

plvs,heex,heexc,<%!

Template

<%!-- $0 --%>

Contributing

Generating snippets and documentation

# This generates the README.md and corresponding snippet json.
make build

Publishing

# assuming you have vsce installed
make publish