Have template compiler add source metadata to HTML tags

[zikaari]

What problem does this feature solve?

I'm developing an all-in-one editor for webdevs that runs inside Chrome DevTools.

Just by replacing npm start with [name-not-finalized] start, users can have a fully featured text editor right inside Chrome DevTools shell, automatically pointing at their project directory.

It comes with DOM inspector, where you pick an element and it'll literally take you to file:line:col where that element was defined. So you don't have to look through files to figure out where that button below the header is coming from. Useful when a new dev joins a project or you're revisiting your work after a very long time.

▶ Watch 30 sec demo w/ a React project

---

And of course, it also works with Vue projects, just as awesome.

▶ Watch 20 sec demo w/ a Vue project

Above demos were shot using locally tinkered compilers (just not clean enough to be a PR)

The goal is to deliver the ultimate developer experience ever. Other features are in development as we speak, like CSS QuickEditing, built-in image editor and a SVG editor so devs don't have to fire up Illustrator or Photoshop to make minor tweaks to their stuff.

The only hurdle in me releasing the app is getting external players to participate in revolutionizing how we write web.

So to wrap up I have only two requests:

• Please have the template compilers add metadata to each tag (either as data attribute, or property on DOM node itself), that contains path to *.vue file (can be relative to project root), line:col/offset where the tag opens and last line:col/offset where the tag closes.

• Please star this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=811036

What does the proposed API look like?

Something like this:

console.log(someElement.__vue__._debugSource)
// > { file: 'src/components/Header.vue', line: 12, col: 4, lineEnd: 16, col: 8 }
// or
// > { file: 'src/components/Header.vue', start: 241, end: 352 }

[zikaari]

@yyx990803 Gentle ping on this. Thanks

[posva]

I think there is no need to change vue core for this, it should be doable in vue-loader only plus, if necessary, vue plugins
BTW that editor looks pretty cool 🙂

[zikaari]

I definitely understand, in fact, this something anyone would want when process.env.NODE_ENV == 'development', so of course no need to have it in core.

The primary concern is to get the Vue squad on board and maybe get some help from you guys in implementing those changes[1]

I'm also trying to reach out React and Angular teams in parallel as we speak.

[1] I'm not so familiar with Vue's codebase and at this time, I'm the only one trying to tie all the loose ends together. So some help would very appreciated.

[gzzhanghao]

#7127 will add source info (start & end index) to ASTElement. We can add domProps.__vue_source__ with a template compiler module after the pr get merged.

[zikaari]

@gzzhanghao looks great, thanks. But can we not have just this feature in a separate PR instead of making a big PR even bigger?