search

Valian / live_vue

End-to-end reactivity for Phoenix LiveView and Vue
https://hex.pm/packages/live_vue
MIT License
219 stars 11 forks source link

Shortcut syntax doesn't work for nested components #1

Closed Valian closed 4 months ago

Valian commented 4 months ago

Description

Right now, use LiveVue.Components, vue_root: "./assets/vue/*.vue" doesn't work correctly for nested components.

The reason is simple - I need to decide on a convention how to name such functions. These are the options:

1. Keep only filename, discard the path:

assets/vue/helpers/Modal.vue -> <.Modal>

it can cause conflicts when two Vue in different directories files share names

2. Keep full path, replace path separators by underscores?

assets/vue/helpers/Modal.vue -> <.helpers_nested_Modal>

3. Keep full path, replace path separators by PascalCase?

assets/vue/helpers/nested/Modal.vue -> <.HelpersNestedModal>

4. Same as before, but remove duplicates (similar to Nuxt auto-imports)

assets/vue/helpers/welcome/WelcomeModal.vue -> <.HelpersWelcomeModal>

Valian commented 4 months ago

Solved in 0.2.0. Decided to go with option 1). If there are duplicated file names, then it's still possible to use full syntax <.vue v-component="nested/name" />

vheathen commented 3 months ago

Maybe make this configurable? I really like the idea Nuxt is using with appending paths to the names.

P.S. Thank a lot for this project, I just tried to find something similar - and here it is!

Valian commented 3 months ago

Thanks, glad you like it 😊

Could you tell more about your use-case? I'm trying to be careful about this feature since it can potentially create a lot of functions.

vheathen commented 3 months ago

Could you tell more about your use-case? I'm trying to be careful about this feature since it can potentially create a lot of functions.

I like conventions used in Nuxt (and in Phoenix) - with paths, imports, component names etc, - and the idea of having conventions. For example, when you have a MainMenu component it would probably have children like MenuItem which make sense only in context of the MainMenu component. So, when we auto-import such hierarchy, it makes sense to name the child as MainMenuMenuItem. Of course, it is possible to just name the component file like that, but then we can have a lot of unnecessary duplication for deep hierarchies.

But probably I was a bit too hasty, I need to experiment more before I can formulate more clear ideas :)

Currently I'm playing with the lib, trying to adapt UnoCSS for my setup with LiveVue and get rid of Tailwind. But it's a bit chaotic at the moment :) And it is not clear for me yet how to work with LiveView and LiveVue components together in general. Of course, the easiest way is to build the full frontend part on Vue components and maybe use useState or Pinia to work with the backend, but in this case, there will be one entry point from the LiveView part, which would then need to route everything inside, a lot of LiveView futures will be lost etc.

Please mind that I'm just thinking out loud, my words might not make sense, I spent just a few hours with all of this so far. :-D

Btw, I've added eslint and typechecker and sometimes they are not happy about absence of type for the LiveVue object :) Also, I got some issues with imports: the default /assets/vue path conflicts with node_modules/vue on imports, but most probably its related to my clumsy hands: I'm not that experienced with the frontend stuff.