LiveView naming and dir structure

Phoenix Forum Questions / Help
,
1

I’m wondering what the best practices are around naming and organizing LiveViews and their components. How do you go about naming them, and how do you organize your directory structure?

I’m currently doing this (and I’m not in love with it, but maybe it’s OK)

» tree lib/widget_web/views/live/
lib/widget_web/views/live/
├── shared
│   └── x_live.ex ------------ # WidgetWeb.Shared.XLive
├── foo_live.ex -------------- # WidgetWeb.FooLiveView
└── table
    ├── components
    │   └── row_component.ex - # WidgetWeb.TableLiveView.RowComponent
    └── table_live.ex -------- # WidgetWeb.TableLiveView

I forgot where I found the following projectionist snippet, but it’s by default generating module names like WidgetWeb.Views.Live.FooView which also kinda seems OK but a little too tied to the dir structure.

.projections.json

{
  "lib/**/views/*_view.ex": {
    "type": "view",
    "alternate": "test/{dirname}/views/{basename}_view_test.exs",
    "template": [
      "defmodule {dirname|camelcase|capitalize}.{basename|camelcase|capitalize}View do",
      "  use {dirname|camelcase|capitalize}, :view",
      "end"
    ]
  }
}

I’d love to hear your thoughts, thanks!

2 Likes
2

I’m personally a fan of keeping most of my files in a single directory. As of now I like to create a “components” directory for views which are meant to be embedded.

Having said that, I have only used liveview for toy projects so I wouldn’t know if in a big project my directory structure would follow a “generic component” based approach or maybe a “context aware approach”.