dev-resources.site
for different kinds of informations.
Phoenix Liveview - open editor for element
Published at
3/27/2024
Categories
elixir
phoenix
liveview
ash
Author
neophen
Author
7 person written this
neophen
open
In your dev.exs update the live_reload
config and add the web_console_logger: true
key
config :no_spark, NoSparkWeb.Endpoint,
live_reload: [
web_console_logger: true,
patterns: [
~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
~r"priv/gettext/.*(po)$",
~r"lib/no_spark_web/(controllers|live|components)/.*(ex|heex)$"
]
]
Then in your assets/js/app.js
add the following!
window.addEventListener("phx:live_reload:attached", ({ detail: reloader }) => {
// Enable server log streaming to client.
// Disable with reloader.disableServerLogs()
reloader.enableServerLogs()
window.liveReloader = reloader
let keyDown
window.addEventListener("keydown", (event) => keyDown = event.key)
window.addEventListener("keyup", (_) => keyDown = null)
window.addEventListener("click", (event) => {
if (keyDown === "c") {
event.preventDefault()
event.stopImmediatePropagation()
reloader.openEditorAtCaller(event.target)
} else if (keyDown === "d") {
event.preventDefault()
event.stopImmediatePropagation()
reloader.openEditorAtDef(event.target)
}
})
})
You also need to export the PLUG_EDITOR
env variable:
export PLUG_EDITOR="vscode://file/__FILE__:__LINE__"
You're welcome!!! And have a nice day!!!
liveview Article's
30 articles in total
Phoenix LiveView, hooks and push_event: json_view
read article
Phoenix LiveView is slot empty?
read article
Bridging the Gap: Simplifying Live Component Invocation in Phoenix LiveView
read article
Optimize LiveView Performance with Temporary Assigns
read article
Phoenix LiveView Optimization Guide
read article
Better LiveView Hooks with Typescript
read article
Automatically clearing flash messages in Phoenix LiveView
read article
Debug and visualise TailwindCSS document structure
read article
Build a small chat service using Elixir and deploy it on Amazon ec2 using AWS (Part 1)
read article
Build a small chat service using Elixir and deploy it on Amazon ec2 using AWS (Part 2)
read article
Weather API: A GenServer and LiveView Implementation Part I
read article
Build a small chat service using Elixir and deploy it on Amazon ec2 using AWS (Last part)
read article
Backpex - a highly customizable admin panel for Phoenix LiveView applications
read article
AI powered app (with open-source LLMs like Llama) with Elixir, Phoenix, LiveView, and TogetherAI
read article
Using Ecto (without Db) for validating Phoenix form
read article
Adding stream_async() to Phoenix LiveView
read article
SaladUI - Implement avatar component for Phoenix LiveView
read article
Connectivity status with Phoenix LiveView
read article
Phoenix Liveview components for Shadcn UI
read article
Ash - Create with relationship
read article
My Failed Student Housing App
read article
Beter data-confirm modals in Phoenix LiveView
read article
Free Beginner Friendly LiveView Course in English and Portuguese
read article
LiveView + WebComponents = 🚀
read article
Ash AshSqlite - Aggregates not supported
read article
Phoenix Liveview - open editor for element
currently reading
Ash Calculations - Cond
read article
How does Ecto.Schema's `has_one/3` works?
read article
Creating a Date Range Picker with Phoenix LiveView
read article
Listing matches for users
read article
Featured ones: