feat(compiler): output source range for compiler errors (#6338) #7127

gzzhanghao · 2017-11-25T14:26:18Z

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

Yes
No

The PR fulfills these requirements:

It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
New/updated tests are included

If adding a new feature, the PR's description includes:

A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

Just like #6764, but will output the range data instead of writing it into the error message. Here's an example of how it works:

https://gist.github.com/gzzhanghao/363fac4a201306f5fccf903e35bc652a

yyx990803 · 2017-11-27T17:33:33Z

This is great! Thanks a lot for the work. Since this is a big PR, it will take some time to properly review. But I hope we can include this in 2.6.

HerringtonDarkholme

Thanks for your contribution!
I have seen that most warning code is enclosed in conditional env block. But it would be better if you can report the new bundle size in the PR.
Great work!

HerringtonDarkholme · 2017-11-28T03:27:17Z

src/compiler/directives/on.js


 export default function on (el: ASTElement, dir: ASTDirective) {
  if (process.env.NODE_ENV !== 'production' && dir.modifiers) {
-    warn(`v-on without argument does not support modifiers.`)
+    warn(`v-on without argument does not support modifiers.`, getRawAttr(el, 'v-on'))


I might be wrong, but warn's second parameter seems to accept Vue vm instance, but getRawAttr returns AstAttr

You're right, I didn't notice that warn is different from the one in other files.

HerringtonDarkholme · 2017-11-28T03:31:37Z

src/compiler/helpers.js

+  }
+}
+
+export function getRawBindingAttr (


Can you add a test for getRawBindingAttr, I mean, <div v-bind:key="wrong-key"> should return an error with :key's range, even if we call getRawBindingAttr(el, 'key').

HerringtonDarkholme · 2017-11-28T04:15:03Z

src/compiler/helpers.js

@@ -149,3 +181,18 @@ export function getAndRemoveAttr (
  }
  return val
 }
+
+function setRange (


A bit nit-picky, but setRange implies side-effect, rangeSetItem might be a better naming.

HerringtonDarkholme · 2017-11-28T04:19:01Z

src/platforms/weex/compiler/modules/props.js

@@ -22,6 +22,13 @@ function transformNode (el: ASTElement, options: CompilerOptions) {
          el.attrsMap[realName] = el.attrsMap[attr.name]
          delete el.attrsMap[attr.name]
        }
+        const rawAttrsList = el.rawAttrsList || []
+        for (let i = rawAttrsList.length - 1; i >= 0; i--) {


This is a quadratic time complexity. I wonder if it will impact compile time.

Switched to using an object to track raw attribute info in 5991522

gzzhanghao · 2017-11-28T15:34:51Z

@HerringtonDarkholme I've just enclosed outputSourceRange code into conditional env block in facacc1

And here are the new bundle size from npm run build:

File                                          | Origin        | New
---
dist\vue.runtime.common.js                    | 220.81        | 220.82
dist\vue.common.js                            | 318.01        | 322.35
dist\vue.esm.js                               | 318.00        | 322.33
dist\vue.js                                   | 315.06        | 319.35
dist\vue.min.js                               | 91.54 (31.78) | 92.21 (32.00)
packages\vue-template-compiler\build.js       | 177.66        | 185.11
packages\vue-template-compiler\browser.js     | 260.55        | 267.90
packages\vue-server-renderer\build.js         | 261.09        | 265.02
packages\vue-server-renderer\basic.js         | 316.17        | 320.05

HerringtonDarkholme · 2017-11-28T15:39:30Z

@gzzhanghao Thanks! Size overhead seems to be acceptable! Thanks again!

lbogdan · 2019-01-16T21:11:22Z

So nice to see this land! Do you know of any effort implementing support for this in vue-loader? If not, I could maybe tackle it?

yyx990803 · 2019-01-16T21:43:35Z

@lbogdan it already does! (not released yet). But thanks for offering to help!

lbogdan · 2019-01-16T22:42:06Z

Oh, nice, for some reason I was looking at PRs, and there was nothing there. 🙂
Played with it (your version) a bit, while the output is nice, it tends to get confusing with big templates (because, for example, the below error doesn't have an end marker, so generateCodeFrame() will return the whole template starting from start).

I was thinking maybe something like
might be a bit more useful, as you can see the line, and also you can Ctrl+click in VSCode and it gets you to that exact location.

ref vuejs#6338

lusarz · 2019-05-31T08:37:58Z

@yyx990803 I need to tranfsorm start, end to be line number. I'm writing small tool to static analysis of code. I have something like:

const content = FileUtils.readFile(path);
const template = compiler.parseComponent(content).template.content;
const ast = compiler.compile(template, { outputSourceRange: true }).ast;

I'm searching for "something" in ast. When I find "something" I'd like to create output like f.e.:

/components/v-some-component.vue:11

where 11 is line number. Do you you think I should do it myself in my code or I can create issue to ask about extending CompilerOptions ?

For example scss-parser create output for start or end of node like { "cursor": 60, "line": 3, "column": 0 }.

gzzhanghao added 3 commits November 25, 2017 22:06

feat(compiler): output source range for compiler errors

fed8c04

feat(sfc): support output source range & add option to disable de-indent

a67fed9

feat(sfc): output blockStart and blockEnd for debugging

a1257b1

HerringtonDarkholme reviewed Nov 28, 2017

View reviewed changes

gzzhanghao added 2 commits November 28, 2017 21:35

feat(compiler): Rename setRange to rangeSetItem

72ebce8

feat(compiler): Fix warning in directives/on

7388789

gzzhanghao force-pushed the dev branch from 678f2f6 to b474d24 Compare November 28, 2017 13:49

feat(compiler): Add test for get raw binding attr

ca71c0d

gzzhanghao force-pushed the dev branch from b474d24 to ca71c0d Compare November 28, 2017 13:54

feat(compiler): Switch from rawAttrsList to rawAttrsMap

5991522

gzzhanghao force-pushed the dev branch from 797cb85 to 5991522 Compare November 28, 2017 14:42

feat(compiler): Disable outputSourceRange in production env

facacc1

yyx990803 mentioned this pull request Dec 12, 2017

WIP: feat($compile): display line numbers for errors in the parser (#6338) #6764

Closed

13 tasks

yyx990803 added the semver:minor label Dec 12, 2017

feat(sfc): remove disableDeindent in favor of vuejs#7215

e493d79

gzzhanghao force-pushed the dev branch from 40da325 to e493d79 Compare December 13, 2017 15:42

bastiW mentioned this pull request Mar 2, 2018

Line numbers for errors in the html parser #6338

Open

gzzhanghao mentioned this pull request Apr 26, 2018

Have template compiler add source metadata to HTML tags #8034

Open

posva mentioned this pull request Aug 16, 2018

vue-template-compiler line number #8665

Closed

yyx990803 added this to Todo in 2.6 Dec 5, 2018

yyx990803 moved this from Todo to In progress in 2.6 Dec 20, 2018

yyx990803 moved this from In progress to Todo in 2.6 Dec 20, 2018

yyx990803 moved this from Todo to In progress in 2.6 Dec 21, 2018

yyx990803 changed the base branch from dev to 2.6 December 21, 2018 19:16

Merge branch '2.6' into dev

8ff78a8

yyx990803 merged commit b31a1aa into vuejs:2.6 Dec 22, 2018

2.6 automation moved this from In progress to Done Dec 22, 2018

f2009 pushed a commit to f2009/vue that referenced this pull request Jan 25, 2019

feat(compiler): output source range for compiler errors (vuejs#7127)

1a6f165

ref vuejs#6338

psimyn mentioned this pull request Jun 15, 2019

Support DOM element to source mappings for VS Code's Browser preview #10093

Open

Link-Fight mentioned this pull request Aug 12, 2019

vue源码阅读: src/compiler/helpers.js Link-Fight/Link-Fight.github.io#31

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(compiler): output source range for compiler errors (#6338) #7127

feat(compiler): output source range for compiler errors (#6338) #7127

gzzhanghao commented Nov 25, 2017 •

edited

yyx990803 commented Nov 27, 2017

HerringtonDarkholme left a comment

HerringtonDarkholme Nov 28, 2017

gzzhanghao Nov 28, 2017

HerringtonDarkholme Nov 28, 2017

HerringtonDarkholme Nov 28, 2017

HerringtonDarkholme Nov 28, 2017

gzzhanghao Nov 28, 2017

gzzhanghao commented Nov 28, 2017

HerringtonDarkholme commented Nov 28, 2017

lbogdan commented Jan 16, 2019

yyx990803 commented Jan 16, 2019

lbogdan commented Jan 16, 2019 •

edited

lusarz commented May 31, 2019 •

edited

feat(compiler): output source range for compiler errors (#6338) #7127

feat(compiler): output source range for compiler errors (#6338) #7127

Conversation

gzzhanghao commented Nov 25, 2017 • edited

yyx990803 commented Nov 27, 2017

HerringtonDarkholme left a comment

Choose a reason for hiding this comment

HerringtonDarkholme Nov 28, 2017

Choose a reason for hiding this comment

gzzhanghao Nov 28, 2017

Choose a reason for hiding this comment

HerringtonDarkholme Nov 28, 2017

Choose a reason for hiding this comment

HerringtonDarkholme Nov 28, 2017

Choose a reason for hiding this comment

HerringtonDarkholme Nov 28, 2017

Choose a reason for hiding this comment

gzzhanghao Nov 28, 2017

Choose a reason for hiding this comment

gzzhanghao commented Nov 28, 2017

HerringtonDarkholme commented Nov 28, 2017

lbogdan commented Jan 16, 2019

yyx990803 commented Jan 16, 2019

lbogdan commented Jan 16, 2019 • edited

lusarz commented May 31, 2019 • edited

gzzhanghao commented Nov 25, 2017 •

edited

lbogdan commented Jan 16, 2019 •

edited

lusarz commented May 31, 2019 •

edited