Skip to content

Instantly share code, notes, and snippets.

@aifrak

aifrak/phoenix-heex.json

Last active February 14, 2025 16:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aifrak/7f960b949c7a5b0b6713f114df2be285 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aifrak/7f960b949c7a5b0b6713f114df2be285 to your computer and use it in GitHub Desktop.
Download ZIP
VSCode Phoenix HEEx snippets
Raw
phoenix-heex.json
{
"LiveView: Phoenix.LiveComponent call": {
"body": [
"<.live_component",
" module={$1}",
" id={$2}",
" $0",
"/>"
],
"description": "LiveView: Phoenix.LiveComponent call",
"prefix": [
"plvs",
"plc",
"plcc",
"<.",
"<.live",
"<.live_component",
]
},
"Phoenix: Phoenix.Component.live_img_preview/1": {
"body": [
"<.live_img_preview entry={${1:image}}$2/>$0"
],
"description": "Phoenix: Phoenix.Component.live_img_preview/1",
"prefix": [
"plvs",
"pc",
"pcli",
"pclip",
"<.",
"<.live",
"<.live_img",
"<.live_img_preview",
]
},
"Phoenix: Phoenix.Component.async_result/1": {
"body": [
"<.async_result :let={${1:result}} assign={${2:@assigned_var}}$3>",
"<:loading>",
" ${4:Loading}",
"</:loading>",
"<:failed :let={{:error, reason}}>",
" ${5:Failed: <%= reason %>}",
"</:failed>",
" $0",
"</.async_result>"
],
"description": "Phoenix: Phoenix.Component.async_result/1",
"prefix": [
"plvs",
"pc",
"pcar",
"<.",
"<.async",
"<.async_result",
]
},
// BEGIN: Link attribute
"LiveView: Link patch attribute": {
"body": [
"patch={~p\"/${1:path}\"}"
],
"description": "LiveView: link patch attribute",
"prefix": [
"patch=",
"lv_attr_patch"
]
},
"LiveView: Link navigate attribute": {
"body": [
"navigate={~p\"/${1:path}\"}"
],
"description": "LiveView: link navigate attributee",
"prefix": [
"navigate=",
"lv_attr_navigate"
]
},
// END: Special HTML attribute
// BEGIN: Special HTML attribute
"LiveView: :if special HTML attribute": {
"body": [
":if={$1}"
],
"description": "LiveView: :if special HTML attribute",
"prefix": [
":if",
"lv_attr_if"
]
},
"LiveView: :for special HTML attribute": {
"body": [
":for={$1 <- $2}"
],
"description": "LiveView: :for special HTML attribute",
"prefix": [
":for",
"lv_attr_for"
]
},
"LiveView: :let special HTML attribute": {
"body": [
":let={$1}"
],
"description": "LiveView: :let special HTML attribute",
"prefix": [
":let",
"lv_attr_let"
]
},
// END: Special HTML attribute
// BEGIN: Bindings
"LiveView Binding Params: phx-value": {
"body": [
"phx-value-${1:key}=\"${2:value}\""
],
"description": "Binding LiveView Params: phx-value",
"prefix": [
"plb",
"plbp",
"plbpv",
"phx-value"
]
},
"LiveView Binding Click Events: phx-click": {
"body": [
"phx-click=\"${1:event}\""
],
"description": "LiveView Binding Click Events: phx-click",
"prefix": [
"plb",
"plbce",
"plbcec",
"phx-click"
]
},
"LiveView Binding Click Events: phx-click-away": {
"body": [
"phx-click-away=\"${1:event}\""
],
"description": "LiveView Binding Click Events: phx-click-away",
"prefix": [
"plb",
"plbce",
"plbceca",
"phx-click-away"
]
},
"LiveView Form Events: phx-change": {
"body": [
"phx-change=\"${1:event}\""
],
"description": "LiveVie Binding Form Eventsw: phx-change",
"prefix": [
"plb",
"plbfre",
"plbfrec",
"phx-change"
]
},
"LiveView Binding Form Events: phx-submit": {
"body": [
"phx-submit=\"${1:event}\""
],
"description": "LiveView Binding Form Events: phx-submit",
"prefix": [
"plb",
"plbfre",
"plbfres",
"phx-submit"
]
},
"LiveView Binding Form Events: phx-feedback-for": {
"body": [
"phx-feedback-for={@${1:field}}"
],
"description": "LiveView Binding Form Events: phx-feedback-for",
"prefix": [
"plb",
"plbfre",
"plbfreff",
"phx-feedback-for"
]
},
"LiveView Binding Form Events: phx-disable-with": {
"body": [
"phx-disable-with=\"${1:Saving...}\""
],
"description": "LiveView Binding Form Events: phx-disable-with",
"prefix": [
"plb",
"plbfre",
"plbfredw",
"phx-disable-with"
]
},
"LiveView Binding Form Events: phx-trigger-action": {
"body": [
"phx-trigger-action={@${1:trigger_submit}}"
],
"description": "LiveView Binding Form Events: phx-trigger-action",
"prefix": [
"plb",
"plbfre",
"plbfreta",
"phx-trigger-action"
]
},
"LiveView Binding Form Events: phx-auto-recover": {
"body": [
"phx-auto-recover=\"${1:event}\""
],
"description": "LiveView Binding Form Events: phx-auto-recover",
"prefix": [
"plb",
"plbfre",
"plbfrear",
"phx-auto-recover"
]
},
"LiveView Binding Focus Events: phx-blur": {
"body": [
"phx-blur=\"${1:event}\""
],
"description": "LiveView Binding Focus Events: phx-blur",
"prefix": [
"plb",
"plbfce",
"plbfceb",
"phx-blur"
]
},
"LiveView Binding Focus Events: phx-focus": {
"body": [
"phx-focus=\"${1:event}\""
],
"description": "LiveView Binding Focus Events: phx-focus",
"prefix": [
"plb",
"plbfce",
"plbfcef",
"phx-focus"
]
},
"LiveView Binding Focus Events: phx-window-blur": {
"body": [
"phx-window-blur=\"${1:event}\""
],
"description": "LiveView Binding Focus Events: phx-window-blur",
"prefix": [
"plb",
"plbfce",
"plbfcewb",
"phx-window-blur"
]
},
"LiveView Binding Focus Events: phx-window-focus": {
"body": [
"phx-window-focus=\"${1:event}\""
],
"description": "LiveView Binding Focus Events: phx-window-focus",
"prefix": [
"plb",
"plbfce",
"plbfcewf",
"phx-window-focus"
]
},
"LiveView Binding Key Events: phx-keydown": {
"body": [
"phx-keydown=\"${1:event}\""
],
"description": "LiveView Binding Key Events: phx-keydown",
"prefix": [
"plb",
"plbke",
"plbkekd",
"phx-keydown"
]
},
"LiveView Binding Key Events: phx-keyup": {
"body": [
"phx-keyup=\"${1:event}\""
],
"description": "LiveView Binding Key Events: phx-keyup",
"prefix": [
"plb",
"plbke",
"plbkeku",
"phx-keyup"
]
},
"LiveView Binding Key Events: phx-window-keydown": {
"body": [
"phx-window-keydown=\"${1:event}\""
],
"description": "LiveView Binding Key Events: phx-window-keydown",
"prefix": [
"plb",
"plbke",
"plbkewkd",
"phx-window-keydown"
]
},
"LiveView Binding Key Events: phx-window-keyup": {
"body": [
"phx-window-keyup=\"${1:event}\""
],
"description": "LiveView Binding Key Events: phx-window-keyup",
"prefix": [
"plb",
"plbke",
"plbkewku",
"phx-window-keyup"
]
},
"LiveView Binding Key Events: phx-key": {
"body": [
"phx-key=\"${1:event}\""
],
"description": "LiveView Binding Key Events: phx-key",
"prefix": [
"plb",
"plbke",
"plbkek",
"phx-key"
]
},
"LiveView Binding Scroll Events: phx-viewport-top": {
"body": [
"phx-viewport-top={${1:@${2:page} > 1 && \"${3:prev-page}\"}}"
],
"description": "LiveView Binding Scroll Events: phx-viewport-top",
"prefix": [
"plb",
"plbse",
"plbsevt",
"phx-viewport-top"
]
},
"LiveView Binding Scroll Events: phx-viewport-bottom": {
"body": [
"phx-viewport-bottom={${1:!@${2:end_of_timeline}? && \"${3:next-page}\"}}"
],
"description": "LiveView Binding Scroll Events: phx-viewport-bottom",
"prefix": [
"plb",
"plbse",
"plbsevb",
"phx-viewport-bottom"
]
},
"LiveView Binding DOM Patching: phx-mounted": {
"body": [
"phx-mounted={${1:JS.transition(\"${2:animate-ping}\", time: ${3:500})}}"
],
"description": "LiveView Binding DOM Patching: phx-mounted",
"prefix": [
"plb",
"plbdp",
"plbdpm",
"phx-mounted"
]
},
"LiveView Binding DOM Patching: phx-update": {
"body": [
"phx-update=\"${1|replace,stream,ignore|}\""
],
"description": "LiveView Binding DOM Patching: phx-update",
"prefix": [
"plb",
"plbdp",
"plbdpu",
"phx-update"
]
},
"LiveView Binding DOM Patching: phx-remove": {
"body": [
"phx-remove=\"${1:event}\""
],
"description": "LiveView Binding DOM Patching: phx-remove",
"prefix": [
"plb",
"plbdp",
"plbdpr",
"phx-remove"
]
},
"LiveView Binding JS Interop: phx-hook": {
"body": [
"phx-hook=\"${1:MyApp.PhoneNumber}\""
],
"description": "LiveView Binding JS Interop: phx-hook",
"prefix": [
"plb",
"plbjsi",
"plbjsih",
"phx-hook"
]
},
"LiveView Binding Lifecycle Events: phx-mounted": {
"body": [
"phx-mounted={${1:JS.transition(\"${2:animate-ping}\", time: ${3:500})}}"
],
"description": "LiveView Binding Lifecycle Events: phx-mounted",
"prefix": [
"plb",
"plble",
"plblem",
"phx-mounted"
]
},
"LiveView Binding Lifecycle Events: phx-disconnected": {
"body": [
"phx-disconnected=\"${1:JS.show()}\""
],
"description": "LiveView Binding Lifecycle Events: phx-disconnected",
"prefix": [
"plb",
"plble",
"plbled",
"phx-disconnected"
]
},
"LiveView Binding Lifecycle Events: phx-connected": {
"body": [
"phx-connected=\"${1:JS.hide()}\""
],
"description": "LiveView Binding Lifecycle Events: phx-connected",
"prefix": [
"plb",
"plble",
"plblec",
"phx-connected"
]
},
"LiveView Binding Rate Limiting: phx-debounce": {
"body": [
"phx-debounce=\"${1|300,blur|}\""
],
"description": "LiveView Binding Rate Limiting: phx-debounce",
"prefix": [
"plb",
"plbrl",
"plbrld",
"phx-debounce"
]
},
"LiveView Binding Rate Limiting: phx-throttle": {
"body": [
"phx-throttle=\"${1:1000}\""
],
"description": "LiveView Binding Rate Limiting: phx-throttle",
"prefix": [
"plb",
"plbrl",
"plbrlt",
"phx-throttle"
]
},
"LiveView Binding Static Tracking: phx-track-static": {
"body": [
"phx-track-static"
],
"description": "LiveView Binding Static Tracking: phx-track-static",
"prefix": [
"plb",
"plbst",
"plbstts",
"phx-track-static"
]
},
"LiveView Binding File Upload: phx-drop-target": {
"body": [
"phx-drop-target={@uploads.${1:image}.ref}"
],
"description": "LiveView Binding File Upload: phx-drop-target",
"prefix": [
"plb",
"plbfu",
"plbfudt",
"phx-drop-target"
]
},
// END: Bindings
// BEGIN: Phoenix.Component
"LiveView: Phoenix.Component - Function Component": {
"body": [
"<.${1:component}>",
" $0",
"</.${1:component}>"
],
"description": "LiveView: Phoenix.Component - Function Component",
"prefix": [
"fcc",
"<.",
]
},
"LiveView: Phoenix.Component - Function Component (short)": {
"body": [
"<.${1:component} />"
],
"description": "LiveView: Phoenix.Component - Function Component (short)",
"prefix": [
"fc",
"<.",
]
},
"LiveView: Phoenix.Component - Slot": {
"body": [
"<:${1:slot}>",
" $0",
"</:${1:slot}>"
],
"description": "LiveView: Phoenix.Component - Function Component",
"prefix": [
"sl",
"slot",
"<:",
]
},
// END: Phoenix.Component
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment