Phoenix LiveView Snippets

A comprehensive VS Code extension with advanced snippets, language support, and productivity tools for Phoenix LiveView, Function Components, Ecto, and Elixir development.

✨ Features

🧩 Function Components

• fc. - Component with opening and closing tags
• fcs. - Self-closing component
• fca. - Component with attributes
• fcslot. - Component with a named slot
• fcms. - Component with multiple slots
• slot. - Named slot block
• slotlet. - Named slot with let binding
• slotif. - Conditional named slot
• fclet. - Component with let binding
• fcif. - Condicional component
• fcbtn. - Button component
• fcmodal. - Modal component
• fctable. - Table component
• fcform. - Form componnent
• fclink. - Navigation link component
• fcerror. - Error component
• fcflash. - Flash component

🏷️ HTML + LiveView

• divclick. - Div with phx-click
• btnclick. - Button with phx-click
• formsubmit. - Form with phx-submit and phx-change
• inputchange. - Input with phx-change
• selectchange. - Select with options and phx-change
• checkboxclick. - Checkbox with phx-click
• filechange. - File upload
• liveregion. - Live-updating region
• tableupdate. - Table with live updates
• modalaway. - Modal with click-away
• searchform. - Search form with debounce
• infinitescroll. - Infinite scroll
• dragdrop. - Drag and drop
• livenav. - LiveView navigation
• ifelse. - Conditional content
• forindex. - Loop with index

🗃️ Ecto

• eschema. - Complete schema with changeset
• equery. - Query with common operations
• emigration. - Complete migration
• echangeset. - Changeset with validations
• eassoc. - Associations (has_many/belongs_to)
• ecrud. - Complete CRUD functions
• equeryj. - Query with join
• emulti. - Multi transaction
• epreload. - Query with preload
• edynamic. - Dynamic query
• ecustomtype. - Custom type (enum)
• eembedded. - Embedded schema
• eaggregate. - Query with aggregations
• epagination. - Pagination implementation

⚡ LiveView

• livemodule. - Complete LiveView module
• lvmount. - Mount function
• lvhandle. - Handle event
• lvinfo. - Handle info
• lvparams. - Handle params
• lvrender. - Render function
• lvcomp. - Component definition
• lvcompslot. - Component with slots
• lvasync. - Handle async
• lvstream. - Stream implementation
• lvupload. - File upload
• lvpubsub. - PubSub subscription
• lvform. - Form handling
• lvmodal. - Modal handling
• lvpagination. - Pagination
• lverror. - Error handling
• lvhook. - JavaScript hooks integration

🔥 Phoenix Framework

• pxcontroller. - Controller with CRUD actions
• pxrouter. - Router scope
• pxcontext. - Context with CRUD functions
• pxchannel. - Channel implementation
• pxplug. - Plug implementation
• pxendpoint. - Endpoint configuration
• pxgenserver. - GenServer
• pxtest. - Controller test
• pxlivetest. - LiveView test

🚀 Advanced Features

Smart Auto-Completion

• Phoenix component suggestions when typing <.
• Auto-complete for phx-* attributes
• Inline documentation for LiveView attributes

Comandos

• Phoenix LiveView: Create Component - Creates a new function component
• Phoenix LiveView: Create LiveView - Creates a new LiveView module

Diagnósticos

Diagnostics

• Detection of unclosed function components
• HEEx syntax validation
• Automatic correction suggestions

HEEx Language Support

• Syntax highlighting for .heex files
• Automatic tag pairing
• Smart indentation
• Code folding

📦 Installation

1. Open VS Code
2. Go to the Extensions tab (Ctrl+Shift+X)
3. Search for "Phoenix LiveView Snippets"
4. Click Install

Or install via the command line:

code --install-extension alanpdev.phoenix-liveview-snippets

🎯 Como Usar

Snippets

Digite o prefixo do snippet seguido de um ponto (.) e pressione Tab:

fc. + Tab → <.component_name>
             $0
           </.component_name>

fcs. + Tab → <.component_name />

fcform. + Tab → <.simple_form for="@changeset" phx-submit="save" phx-change="validate">
                  <.input field={@changeset[:field_name]} label="Field Label" />

                  <:actions>
                    <.button>Save Item</.button>
                  </:actions>
                </.simple_form>

Comandos LiveView

• Ctrl+Shift+P → "Phoenix LiveView: Create Component"
• Ctrl+Shift+P → "Phoenix LiveView: Create LiveView"

Ecto Schema Rápido

eschema. + Tab → defmodule MyApp.User do
                   use Ecto.Schema
                   import Ecto.Changeset

                   schema "users" do
                     field :name, :string
                     field :email, :string

                     timestamps(type: :utc_datetime)
                   end

                   def changeset(user, attrs) do
                     user
                     |> cast(attrs, [:name, :email])
                     |> validate_required([:name, :email])
                     |> validate_format(:email, ~r/^[^\s]+@[^\s]+\.[^\s]+$/)
                     |> unique_constraint(:email)
                   end
                 end

🎨 Exemplos de Uso

Criando um Modal Interativo

fcmodal. + Tab → <.modal id="user_modal" show="@show_modal">
                   <:title>User Details</:title>

                   Modal content here

                   <:actions>
                     <.button phx-click="close_modal" class="btn-secondary">
                       Cancel
                     </.button>
                     <.button phx-click="confirm_action" class="btn-primary">
                       Confirm
                     </.button>
                   </:actions>
                 </.modal>

Formulário com Validação ao Vivo

formsubmit. + Tab → <form phx-submit="save_user" phx-change="validate_user">
                      $0
                    </form>

Query Ecto Complexa

equeryj. + Tab → def get_users_with_posts() do
                   from(u in User,
                     join: p in assoc(u, :posts),
                     where: p.published == true,
                     select: {u, p},
                     order_by: [desc: u.inserted_at]
                   )
                   |> Repo.all()
                 end

⚙️ Configurações

A extensão funciona out-of-the-box, mas você pode personalizar:

{
  "files.associations": {
    "*.heex": "phoenix-heex"
  },
  "emmet.includeLanguages": {
    "phoenix-heex": "html"
  }
}

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir:

1. Fork o repositório
2. Crie uma branch para sua feature (git checkout -b feature/amazing-feature)
3. Commit suas mudanças (git commit -m 'Add some amazing feature')
4. Push para a branch (git push origin feature/amazing-feature)
5. Abra um Pull Request

📝 Roadmap

• [ ] Suporte para Phoenix 1.7+
• [ ] Snippets para LiveView Native
• [ ] Integração com ElixirLS
• [ ] Suporte para templates Tailwind CSS
• [ ] Snippets para Phoenix Channels
• [ ] Suporte para LiveBook

🐛 Issues

Encontrou um bug ou tem uma sugestão? Crie uma issue

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.

🙏 Agradecimentos

• Time do Phoenix Framework
• Comunidade Elixir
• Contribuidores open source

Desenvolvido com ❤️ para a comunidade Elixir/Phoenix

Acelere seu desenvolvimento Phoenix LiveView com snippets inteligentes e ferramentas produtivas!