Logo

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
Categories
4 categories in total
elixir
open
phoenix
open
liveview
open
ash
open
Author
7 person written this
neophen
open
Phoenix Liveview - open editor for element

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)$"
    ]
  ]
Enter fullscreen mode Exit fullscreen mode

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)
    }

  })
})
Enter fullscreen mode Exit fullscreen mode

You also need to export the PLUG_EDITOR env variable:

export PLUG_EDITOR="vscode://file/__FILE__:__LINE__"
Enter fullscreen mode Exit fullscreen mode

You're welcome!!! And have a nice day!!!

liveview Article's
30 articles in total
Favicon
Phoenix LiveView, hooks and push_event: json_view
Favicon
Phoenix LiveView is slot empty?
Favicon
Bridging the Gap: Simplifying Live Component Invocation in Phoenix LiveView
Favicon
Optimize LiveView Performance with Temporary Assigns
Favicon
Phoenix LiveView Optimization Guide
Favicon
Better LiveView Hooks with Typescript
Favicon
Automatically clearing flash messages in Phoenix LiveView
Favicon
Debug and visualise TailwindCSS document structure
Favicon
Build a small chat service using Elixir and deploy it on Amazon ec2 using AWS (Part 1)
Favicon
Build a small chat service using Elixir and deploy it on Amazon ec2 using AWS (Part 2)
Favicon
Weather API: A GenServer and LiveView Implementation Part I
Favicon
Build a small chat service using Elixir and deploy it on Amazon ec2 using AWS (Last part)
Favicon
Backpex - a highly customizable admin panel for Phoenix LiveView applications
Favicon
AI powered app (with open-source LLMs like Llama) with Elixir, Phoenix, LiveView, and TogetherAI
Favicon
Using Ecto (without Db) for validating Phoenix form
Favicon
Adding stream_async() to Phoenix LiveView
Favicon
SaladUI - Implement avatar component for Phoenix LiveView
Favicon
Connectivity status with Phoenix LiveView
Favicon
Phoenix Liveview components for Shadcn UI
Favicon
Ash - Create with relationship
Favicon
My Failed Student Housing App
Favicon
Beter data-confirm modals in Phoenix LiveView
Favicon
Free Beginner Friendly LiveView Course in English and Portuguese
Favicon
LiveView + WebComponents = 🚀
Favicon
Ash AshSqlite - Aggregates not supported
Favicon
Phoenix Liveview - open editor for element
Favicon
Ash Calculations - Cond
Favicon
How does Ecto.Schema's `has_one/3` works?
Favicon
Creating a Date Range Picker with Phoenix LiveView
Favicon
Listing matches for users

Featured ones: