search

luckyframework / lucky

A full-featured Crystal web framework that catches bugs for you, runs incredibly fast, and helps you write code that lasts.
https://luckyframework.org
MIT License
2.58k stars 157 forks source link

Add optional data-trace HTML attribute #850

Closed sfcgeorge closed 4 years ago

sfcgeorge commented 5 years ago

What

A suggestion to add an option (probably on by default in development, off in production) for a data-trace HTML attribute with the path to the view where the element was generated from.

Haml in Ruby has this and it looks like <div data-trace="/compass/outlets/bookings/step_two/edit.html.haml:⁠3">. You turn it on in your development.rb

Why

It's super useful in large codebases with lots of nested views and custom URLs (non-resourceful) with lots of similar views making it really hard for a new dev (or existing dev) to find where anything is. With this you just right click whatever you're interested in in your browser, "Inspect", and find the path in the HTML.

Etc

Another approach to this is Xray Rails which gives a whole UI for finding where things are, but I think that's overkill. The browser inspector is more than enough for finding the element you're trying to change, and then just look at the data-trace to find the file. Someone else could write a framework agnostic browser extension for a fancy UI using the data-trace if they wanted.

paulcsmith commented 5 years ago

@sfcgeorge Thanks for the suggestion! I totally agree! We actually already have something similar here: https://github.com/luckyframework/lucky/blob/89f7fda4ab1fb67cf0fd7c2f8897e3ed5f4c0d81/src/lucky/mount_component.cr#L39-L41 but it does not include the file path.

I think it'd be good to add that though! Let me know if you'd like to work on that, otherwise I might pick this up next week