fix: fix source map by fixing advancePositionWithMutation

2019-09-25 19:17:45 -04:00
parent ff2313e43a
commit 6c8f226a79
20 changed files with 533 additions and 255 deletions
--- a/packages/compiler-core/tests/snapshots/codegen.spec.ts.snap
+++ b/packages/compiler-core/tests/snapshots/codegen.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`compiler: codegen comment 1`] = `
 "
 return function render() {
  with (this) {
-    return createVNode(Comment, 0, \\"foo\\")
+    return _createVNode(_Comment, 0, \\"foo\\")
  }
 }"
 `;
@@ -29,7 +29,7 @@ exports[`compiler: codegen compound expression 1`] = `
 "
 return function render() {
  with (this) {
-    return toString(_ctx.foo)
+    return _toString(_ctx.foo)
  }
 }"
 `;
@@ -38,16 +38,30 @@ exports[`compiler: codegen forNode 1`] = `
 "
 return function render() {
  with (this) {
-    return renderList(list, (v, k, i) => toString(v))
+    return _renderList(list, (v, k, i) => {
+      return _toString(v)
+    })
  }
 }"
 `;

+exports[`compiler: codegen forNode w/ prefixIdentifiers: true 1`] = `
+"
+return function render() {
+  const _ctx = this
+  return renderList(list, (v, k, i) => {
+    return toString(v)
+  })
+}"
+`;
+
 exports[`compiler: codegen forNode w/ skipped key alias 1`] = `
 "
 return function render() {
  with (this) {
-    return renderList(list, (v, __key, i) => toString(v))
+    return _renderList(list, (v, __key, i) => {
+      return _toString(v)
+    })
  }
 }"
 `;
@@ -56,7 +70,9 @@ exports[`compiler: codegen forNode w/ skipped value alias 1`] = `
 "
 return function render() {
  with (this) {
-    return renderList(list, (__value, k, i) => toString(v))
+    return _renderList(list, (__value, k, i) => {
+      return _toString(v)
+    })
  }
 }"
 `;
@@ -65,7 +81,9 @@ exports[`compiler: codegen forNode w/ skipped value and key aliases 1`] = `
 "
 return function render() {
  with (this) {
-    return renderList(list, (__value, __key, i) => toString(v))
+    return _renderList(list, (__value, __key, i) => {
+      return _toString(v)
+    })
  }
 }"
 `;
@@ -74,12 +92,21 @@ exports[`compiler: codegen function mode preamble 1`] = `
 "const _Vue = Vue
 return function render() {
  with (this) {
-    const { helperOne, helperTwo } = _Vue
+    const { helperOne: _helperOne, helperTwo: _helperTwo } = _Vue
    return null
  }
 }"
 `;

+exports[`compiler: codegen function mode preamble w/ prefixIdentifiers: true 1`] = `
+"const { helperOne, helperTwo } = Vue
+
+return function render() {
+  const _ctx = this
+  return null
+}"
+`;
+
 exports[`compiler: codegen hoists 1`] = `
 "const _hoisted_1 = hello
 const _hoisted_2 = { id: \\"foo\\" }
@@ -98,8 +125,8 @@ return function render() {
    return foo
      ? \\"foo\\"
      : (a + b)
-        ? toString(bye)
-        : createVNode(Comment, 0, \\"foo\\")
+        ? _toString(bye)
+        : _createVNode(_Comment, 0, \\"foo\\")
  }
 }"
 `;
@@ -111,7 +138,7 @@ return function render() {
    return foo
      ? \\"foo\\"
      : (a + b)
-        ? toString(bye)
+        ? _toString(bye)
        : null
  }
 }"
@@ -121,7 +148,7 @@ exports[`compiler: codegen interpolation 1`] = `
 "
 return function render() {
  with (this) {
-    return toString(hello)
+    return _toString(hello)
  }
 }"
 `;
@@ -171,9 +198,21 @@ return function render() {
  with (this) {
    return [
      \\"foo\\",
-      toString(hello),
-      createVNode(Comment, 0, \\"foo\\")
+      _toString(hello),
+      _createVNode(_Comment, 0, \\"foo\\")
    ]
  }
 }"
 `;
+
+exports[`compiler: codegen text + comment + interpolation w/ prefixIdentifiers: true 1`] = `
+"
+return function render() {
+  const _ctx = this
+  return [
+    \\"foo\\",
+    toString(hello),
+    createVNode(Comment, 0, \\"foo\\")
+  ]
+}"
+`;
--- a/packages/compiler-core/tests/snapshots/compile.spec.ts.snap
+++ b/packages/compiler-core/tests/snapshots/compile.spec.ts.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`function mode 1`] = `
+"const _Vue = Vue
+return function render() {
+  with (this) {
+    const { createVNode: _createVNode, toString: _toString, renderList: _renderList } = _Vue
+    return _createVNode(\\"div\\", {
+      id: \\"foo\\",
+      class: bar
+    }, [
+      _toString(world),
+      ok
+        ? _createVNode(\\"div\\", 0, \\"yes\\")
+        : \\"no\\",
+      _renderList(list, (i, j) => {
+        return _createVNode(\\"div\\", 0, [_createVNode(\\"span\\", 0, _toString(i + j))])
+      })
+    ])
+  }
+}"
+`;
--- a/packages/compiler-core/tests/snapshots/parse.spec.ts.snap
+++ b/packages/compiler-core/tests/snapshots/parse.spec.ts.snap
@@ -7481,15 +7481,15 @@ Object {
            "isStatic": false,
            "loc": Object {
              "end": Object {
-                "column": 34,
+                "column": 33,
                "line": 1,
-                "offset": 33,
+                "offset": 32,
              },
              "source": "\\"{ some: condition }\\"",
              "start": Object {
-                "column": 13,
+                "column": 14,
                "line": 1,
-                "offset": 12,
+                "offset": 13,
              },
            },
            "type": 4,
@@ -7561,15 +7561,15 @@ Object {
            "isStatic": false,
            "loc": Object {
              "end": Object {
-                "column": 35,
+                "column": 34,
                "line": 2,
-                "offset": 71,
+                "offset": 70,
              },
              "source": "\\"{ color: 'red' }\\"",
              "start": Object {
-                "column": 17,
+                "column": 18,
                "line": 2,
-                "offset": 53,
+                "offset": 54,
              },
            },
            "type": 4,
@@ -7629,13 +7629,13 @@ Object {
          "isSelfClosing": true,
          "loc": Object {
            "end": Object {
-              "column": 38,
+              "column": 39,
              "line": 2,
              "offset": 73,
            },
            "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
            "start": Object {
-              "column": 2,
+              "column": 3,
              "line": 2,
              "offset": 37,
            },
@@ -7649,13 +7649,13 @@ Object {
                "isStatic": true,
                "loc": Object {
                  "end": Object {
-                    "column": 17,
+                    "column": 18,
                    "line": 2,
                    "offset": 52,
                  },
                  "source": "style",
                  "start": Object {
-                    "column": 12,
+                    "column": 13,
                    "line": 2,
                    "offset": 47,
                  },
@@ -7670,26 +7670,26 @@ Object {
                  "end": Object {
                    "column": 36,
                    "line": 2,
-                    "offset": 71,
+                    "offset": 70,
                  },
                  "source": "\\"{ color: 'red' }\\"",
                  "start": Object {
-                    "column": 18,
+                    "column": 20,
                    "line": 2,
-                    "offset": 53,
+                    "offset": 54,
                  },
                },
                "type": 4,
              },
              "loc": Object {
                "end": Object {
-                  "column": 36,
+                  "column": 37,
                  "line": 2,
                  "offset": 71,
                },
                "source": "v-bind:style=\\"{ color: 'red' }\\"",
                "start": Object {
-                  "column": 5,
+                  "column": 6,
                  "line": 2,
                  "offset": 40,
                },
@@ -7707,13 +7707,13 @@ Object {
          "content": " a comment with <html> inside it ",
          "loc": Object {
            "end": Object {
-              "column": 42,
+              "column": 43,
              "line": 3,
              "offset": 116,
            },
            "source": "<!-- a comment with <html> inside it -->",
            "start": Object {
-              "column": 2,
+              "column": 3,
              "line": 3,
              "offset": 76,
            },
@@ -7767,15 +7767,15 @@ Object {
            "isStatic": false,
            "loc": Object {
              "end": Object {
-                "column": 34,
+                "column": 33,
                "line": 1,
-                "offset": 33,
+                "offset": 32,
              },
              "source": "\\"{ some: condition }\\"",
              "start": Object {
-                "column": 13,
+                "column": 14,
                "line": 1,
-                "offset": 12,
+                "offset": 13,
              },
            },
            "type": 4,
--- a/packages/compiler-core/tests/codegen.spec.ts
+++ b/packages/compiler-core/tests/codegen.spec.ts
@@ -12,7 +12,12 @@ import {
  createArrayExpression,
  ElementNode
 } from '../src'
-import { CREATE_VNODE, COMMENT, TO_STRING } from '../src/runtimeConstants'
+import {
+  CREATE_VNODE,
+  COMMENT,
+  TO_STRING,
+  RENDER_LIST
+} from '../src/runtimeConstants'

 const mockLoc: SourceLocation = {
  source: ``,
@@ -56,7 +61,22 @@ describe('compiler: codegen', () => {
    })
    const { code } = generate(root, { mode: 'function' })
    expect(code).toMatch(`const _Vue = Vue`)
-    expect(code).toMatch(`const { helperOne, helperTwo } = _Vue`)
+    expect(code).toMatch(
+      `const { helperOne: _helperOne, helperTwo: _helperTwo } = _Vue`
+    )
+    expect(code).toMatchSnapshot()
+  })
+
+  test('function mode preamble w/ prefixIdentifiers: true', () => {
+    const root = createRoot({
+      imports: [`helperOne`, `helperTwo`]
+    })
+    const { code } = generate(root, {
+      mode: 'function',
+      prefixIdentifiers: true
+    })
+    expect(code).not.toMatch(`const _Vue = Vue`)
+    expect(code).toMatch(`const { helperOne, helperTwo } = Vue`)
    expect(code).toMatchSnapshot()
  })

@@ -121,7 +141,7 @@ describe('compiler: codegen', () => {
        children: [createExpression(`hello`, false, mockLoc, true)]
      })
    )
-    expect(code).toMatch(`return toString(hello)`)
+    expect(code).toMatch(`return _${TO_STRING}(hello)`)
    expect(code).toMatchSnapshot()
  })

@@ -137,7 +157,7 @@ describe('compiler: codegen', () => {
        ]
      })
    )
-    expect(code).toMatch(`return ${CREATE_VNODE}(${COMMENT}, 0, "foo")`)
+    expect(code).toMatch(`return _${CREATE_VNODE}(_${COMMENT}, 0, "foo")`)
    expect(code).toMatchSnapshot()
  })

@@ -163,12 +183,43 @@ describe('compiler: codegen', () => {
    expect(code).toMatch(`
    return [
      "foo",
-      toString(hello),
-      ${CREATE_VNODE}(${COMMENT}, 0, "foo")
+      _${TO_STRING}(hello),
+      _${CREATE_VNODE}(_${COMMENT}, 0, "foo")
    ]`)
    expect(code).toMatchSnapshot()
  })

+  test('text + comment + interpolation w/ prefixIdentifiers: true', () => {
+    const { code } = generate(
+      createRoot({
+        children: [
+          {
+            type: NodeTypes.TEXT,
+            content: 'foo',
+            isEmpty: false,
+            loc: mockLoc
+          },
+          createExpression(`hello`, false, mockLoc, true),
+          {
+            type: NodeTypes.COMMENT,
+            content: 'foo',
+            loc: mockLoc
+          }
+        ]
+      }),
+      {
+        prefixIdentifiers: true
+      }
+    )
+    expect(code).toMatch(`
+  return [
+    "foo",
+    ${TO_STRING}(hello),
+    ${CREATE_VNODE}(${COMMENT}, 0, "foo")
+  ]`)
+    expect(code).toMatchSnapshot()
+  })
+
  test('compound expression', () => {
    const { code } = generate(
      createRoot({
@@ -184,7 +235,7 @@ describe('compiler: codegen', () => {
        ]
      })
    )
-    expect(code).toMatch(`return toString(_ctx.foo)`)
+    expect(code).toMatch(`return _${TO_STRING}(_ctx.foo)`)
    expect(code).toMatchSnapshot()
  })

@@ -195,13 +246,11 @@ describe('compiler: codegen', () => {
          {
            type: NodeTypes.IF,
            loc: mockLoc,
-            isRoot: true,
            branches: [
              {
                type: NodeTypes.IF_BRANCH,
                condition: createExpression('foo', false, mockLoc),
                loc: mockLoc,
-                isRoot: true,
                children: [
                  {
                    type: NodeTypes.TEXT,
@@ -215,14 +264,12 @@ describe('compiler: codegen', () => {
                type: NodeTypes.IF_BRANCH,
                condition: createExpression('a + b', false, mockLoc),
                loc: mockLoc,
-                isRoot: true,
                children: [createExpression(`bye`, false, mockLoc, true)]
              },
              {
                type: NodeTypes.IF_BRANCH,
                condition: undefined,
                loc: mockLoc,
-                isRoot: true,
                children: [
                  {
                    type: NodeTypes.COMMENT,
@@ -240,8 +287,8 @@ describe('compiler: codegen', () => {
    return foo
      ? "foo"
      : (a + b)
-        ? ${TO_STRING}(bye)
-        : ${CREATE_VNODE}(${COMMENT}, 0, "foo")`)
+        ? _${TO_STRING}(bye)
+        : _${CREATE_VNODE}(_${COMMENT}, 0, "foo")`)
    expect(code).toMatchSnapshot()
  })

@@ -252,13 +299,11 @@ describe('compiler: codegen', () => {
          {
            type: NodeTypes.IF,
            loc: mockLoc,
-            isRoot: true,
            branches: [
              {
                type: NodeTypes.IF_BRANCH,
                condition: createExpression('foo', false, mockLoc),
                loc: mockLoc,
-                isRoot: true,
                children: [
                  {
                    type: NodeTypes.TEXT,
@@ -272,7 +317,6 @@ describe('compiler: codegen', () => {
                type: NodeTypes.IF_BRANCH,
                condition: createExpression('a + b', false, mockLoc),
                loc: mockLoc,
-                isRoot: true,
                children: [createExpression(`bye`, false, mockLoc, true)]
              }
            ]
@@ -284,7 +328,7 @@ describe('compiler: codegen', () => {
    return foo
      ? "foo"
      : (a + b)
-        ? ${TO_STRING}(bye)
+        ? _${TO_STRING}(bye)
        : null`)
    expect(code).toMatchSnapshot()
  })
@@ -305,7 +349,38 @@ describe('compiler: codegen', () => {
        ]
      })
    )
-    expect(code).toMatch(`renderList(list, (v, k, i) => toString(v))`)
+    expect(code).toMatch(
+      `return _${RENDER_LIST}(list, (v, k, i) => {
+      return _${TO_STRING}(v)
+    })`
+    )
+    expect(code).toMatchSnapshot()
+  })
+
+  test('forNode w/ prefixIdentifiers: true', () => {
+    const { code } = generate(
+      createRoot({
+        children: [
+          {
+            type: NodeTypes.FOR,
+            loc: mockLoc,
+            source: createExpression(`list`, false, mockLoc),
+            valueAlias: createExpression(`v`, false, mockLoc),
+            keyAlias: createExpression(`k`, false, mockLoc),
+            objectIndexAlias: createExpression(`i`, false, mockLoc),
+            children: [createExpression(`v`, false, mockLoc, true)]
+          }
+        ]
+      }),
+      {
+        prefixIdentifiers: true
+      }
+    )
+    expect(code).toMatch(
+      `return ${RENDER_LIST}(list, (v, k, i) => {
+    return ${TO_STRING}(v)
+  })`
+    )
    expect(code).toMatchSnapshot()
  })

@@ -325,7 +400,11 @@ describe('compiler: codegen', () => {
        ]
      })
    )
-    expect(code).toMatch(`renderList(list, (__value, k, i) => toString(v))`)
+    expect(code).toMatch(
+      `return _${RENDER_LIST}(list, (__value, k, i) => {
+      return _${TO_STRING}(v)
+    })`
+    )
    expect(code).toMatchSnapshot()
  })

@@ -345,7 +424,11 @@ describe('compiler: codegen', () => {
        ]
      })
    )
-    expect(code).toMatch(`renderList(list, (v, __key, i) => toString(v))`)
+    expect(code).toMatch(
+      `return _${RENDER_LIST}(list, (v, __key, i) => {
+      return _${TO_STRING}(v)
+    })`
+    )
    expect(code).toMatchSnapshot()
  })

@@ -365,7 +448,11 @@ describe('compiler: codegen', () => {
        ]
      })
    )
-    expect(code).toMatch(`renderList(list, (__value, __key, i) => toString(v))`)
+    expect(code).toMatch(
+      `return _${RENDER_LIST}(list, (__value, __key, i) => {
+      return _${TO_STRING}(v)
+    })`
+    )
    expect(code).toMatchSnapshot()
  })

--- a/packages/compiler-core/tests/compile.spec.ts
+++ b/packages/compiler-core/tests/compile.spec.ts
@@ -2,35 +2,138 @@ import { compile } from '../src'
 import { SourceMapConsumer, RawSourceMap } from 'source-map'

 // Integration tests for parser + transform + codegen
-test('basic source map support', async () => {
-  const source = `hello {{ world }}`
+test('function mode', async () => {
+  const source = `
+<div id="foo" :class="bar">
+  {{ world }}
+  <div v-if="ok">yes</div>
+  <template v-else>no</template>
+  <div v-for="(i, j) in list"><span>{{ i + j }}</span></div>
+</div>
+`.trim()
  const { code, map } = compile(source, {
    sourceMap: true,
    filename: `foo.vue`
  })
-  expect(code).toMatch(
-    `const _Vue = Vue
-return function render() {
-  with (this) {
-    const { toString } = _Vue
-    return [
-      "hello ",
-      toString(world)
-    ]
-  }
-}`
-  )

+  expect(code).toMatchSnapshot()
  expect(map!.sources).toEqual([`foo.vue`])
  expect(map!.sourcesContent).toEqual([source])

  const consumer = await new SourceMapConsumer(map as RawSourceMap)
-  const pos = consumer.originalPositionFor({
-    line: 7,
-    column: 16
-  })
-  expect(pos).toMatchObject({
+
+  // id=
+  expect(
+    consumer.originalPositionFor({
+      line: 6,
+      column: 6
+    })
+  ).toMatchObject({
    line: 1,
-    column: 6
+    column: 5
+  })
+
+  // "foo"
+  expect(
+    consumer.originalPositionFor({
+      line: 6,
+      column: 10
+    })
+  ).toMatchObject({
+    line: 1,
+    column: 8
+  })
+
+  // :class=
+  expect(
+    consumer.originalPositionFor({
+      line: 7,
+      column: 6
+    })
+  ).toMatchObject({
+    line: 1,
+    column: 15
+  })
+  // bar
+  expect(
+    consumer.originalPositionFor({
+      line: 7,
+      column: 13
+    })
+  ).toMatchObject({
+    line: 1,
+    column: 22
+  })
+
+  // {{ world }}
+  expect(
+    consumer.originalPositionFor({
+      line: 9,
+      column: 16
+    })
+  ).toMatchObject({
+    line: 2,
+    column: 2
+  })
+
+  // ok
+  expect(
+    consumer.originalPositionFor({
+      line: 10,
+      column: 6
+    })
+  ).toMatchObject({
+    line: 3,
+    column: 13
+  })
+
+  // i
+  expect(
+    consumer.originalPositionFor({
+      line: 13,
+      column: 25
+    })
+  ).toMatchObject({
+    line: 5,
+    column: 15
+  })
+
+  // j
+  expect(
+    consumer.originalPositionFor({
+      line: 13,
+      column: 28
+    })
+  ).toMatchObject({
+    line: 5,
+    column: 18
+  })
+
+  // list
+  expect(
+    consumer.originalPositionFor({
+      line: 13,
+      column: 18
+    })
+  ).toMatchObject({
+    line: 5,
+    column: 24
+  })
+
+  // i + j
+  expect(
+    consumer.originalPositionFor({
+      line: 14,
+      column: 81
+    })
+  ).toMatchObject({
+    line: 5,
+    column: 36
  })
 })
+
+test.todo('function mode w/ prefixIdentifiers: true')
+
+test.todo('module mode')
+
+test.todo('module mode w/ prefixIdentifiers: true')
--- a/packages/compiler-core/tests/parse.spec.ts
+++ b/packages/compiler-core/tests/parse.spec.ts
@@ -894,8 +894,8 @@ describe('compiler: parse', () => {
          isStatic: false,
          isInterpolation: false,
          loc: {
-            start: { offset: 10, line: 1, column: 11 },
-            end: { offset: 13, line: 1, column: 14 },
+            start: { offset: 11, line: 1, column: 12 },
+            end: { offset: 12, line: 1, column: 13 },
            source: '"a"'
          }
        },
@@ -1303,25 +1303,27 @@ describe('compiler: parse', () => {

  test('parse with correct location info', () => {
    const [foo, bar, but, baz] = parse(
-      'foo \n is {{ bar }} but {{ baz }}'
+      `
+foo
+ is {{ bar }} but {{ baz }}`.trim()
    ).children

    let offset = 0
    expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
    offset += foo.loc.source.length
-    expect(foo.loc.end).toEqual({ line: 2, column: 4, offset })
+    expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })

-    expect(bar.loc.start).toEqual({ line: 2, column: 4, offset })
+    expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
    offset += bar.loc.source.length
-    expect(bar.loc.end).toEqual({ line: 2, column: 13, offset })
+    expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })

-    expect(but.loc.start).toEqual({ line: 2, column: 13, offset })
+    expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
    offset += but.loc.source.length
-    expect(but.loc.end).toEqual({ line: 2, column: 18, offset })
+    expect(but.loc.end).toEqual({ line: 2, column: 19, offset })

-    expect(baz.loc.start).toEqual({ line: 2, column: 18, offset })
+    expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
    offset += baz.loc.source.length
-    expect(baz.loc.end).toEqual({ line: 2, column: 27, offset })
+    expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
  })

  describe('namedCharacterReferences option', () => {
--- a/packages/compiler-core/tests/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/tests/transforms/transformElement.spec.ts
@@ -3,8 +3,7 @@ import {
  CompilerOptions,
  parse,
  transform,
-  ErrorCodes,
-  compile
+  ErrorCodes
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 import {
@@ -74,7 +73,7 @@ describe('compiler: element transform', () => {
    const { root, node } = parseWithElementTransform(
      `<div id="foo" class="bar" />`
    )
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    // should hoist the static object
    expect(root.hoists).toMatchObject([
      createStaticObjectMatcher({
@@ -95,7 +94,7 @@ describe('compiler: element transform', () => {
    const { root, node } = parseWithElementTransform(
      `<div id="foo"><span/></div>`
    )
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(root.hoists).toMatchObject([
      createStaticObjectMatcher({
        id: 'foo'
@@ -112,7 +111,7 @@ describe('compiler: element transform', () => {
          type: NodeTypes.ELEMENT,
          tag: 'span',
          codegenNode: {
-            callee: CREATE_VNODE,
+            callee: `_${CREATE_VNODE}`,
            arguments: [`"span"`]
          }
        }
@@ -122,7 +121,7 @@ describe('compiler: element transform', () => {

  test('0 placeholder for children with no props', () => {
    const { node } = parseWithElementTransform(`<div><span/></div>`)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments).toMatchObject([
      `"div"`,
      `0`,
@@ -131,7 +130,7 @@ describe('compiler: element transform', () => {
          type: NodeTypes.ELEMENT,
          tag: 'span',
          codegenNode: {
-            callee: CREATE_VNODE,
+            callee: `_${CREATE_VNODE}`,
            arguments: [`"span"`]
          }
        }
@@ -143,7 +142,7 @@ describe('compiler: element transform', () => {
    const { root, node } = parseWithElementTransform(`<div v-bind="obj" />`)
    // single v-bind doesn't need mergeProps
    expect(root.imports).not.toContain(MERGE_PROPS)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    // should directly use `obj` in props position
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.EXPRESSION,
@@ -156,10 +155,10 @@ describe('compiler: element transform', () => {
      `<div id="foo" v-bind="obj" />`
    )
    expect(root.imports).toContain(MERGE_PROPS)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: `_${MERGE_PROPS}`,
      arguments: [
        createStaticObjectMatcher({
          id: 'foo'
@@ -177,10 +176,10 @@ describe('compiler: element transform', () => {
      `<div v-bind="obj" id="foo" />`
    )
    expect(root.imports).toContain(MERGE_PROPS)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: `_${MERGE_PROPS}`,
      arguments: [
        {
          type: NodeTypes.EXPRESSION,
@@ -198,10 +197,10 @@ describe('compiler: element transform', () => {
      `<div id="foo" v-bind="obj" class="bar" />`
    )
    expect(root.imports).toContain(MERGE_PROPS)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: `_${MERGE_PROPS}`,
      arguments: [
        createStaticObjectMatcher({
          id: 'foo'
@@ -222,17 +221,17 @@ describe('compiler: element transform', () => {
      `<div id="foo" v-on="obj" class="bar" />`
    )
    expect(root.imports).toContain(MERGE_PROPS)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: `_${MERGE_PROPS}`,
      arguments: [
        createStaticObjectMatcher({
          id: 'foo'
        }),
        {
          type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: TO_HANDLERS,
+          callee: `_${TO_HANDLERS}`,
          arguments: [
            {
              type: NodeTypes.EXPRESSION,
@@ -252,17 +251,17 @@ describe('compiler: element transform', () => {
      `<div id="foo" v-on="handlers" v-bind="obj" />`
    )
    expect(root.imports).toContain(MERGE_PROPS)
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_CALL_EXPRESSION,
-      callee: MERGE_PROPS,
+      callee: `_${MERGE_PROPS}`,
      arguments: [
        createStaticObjectMatcher({
          id: 'foo'
        }),
        {
          type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: TO_HANDLERS,
+          callee: `_${TO_HANDLERS}`,
          arguments: [
            {
              type: NodeTypes.EXPRESSION,
@@ -301,7 +300,7 @@ describe('compiler: element transform', () => {
        }
      }
    })
-    expect(node.callee).toBe(CREATE_VNODE)
+    expect(node.callee).toBe(`_${CREATE_VNODE}`)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_OBJECT_EXPRESSION,
      properties: [
@@ -333,11 +332,11 @@ describe('compiler: element transform', () => {
    expect(root.imports).toContain(RESOLVE_DIRECTIVE)
    expect(root.statements[0]).toMatch(`${RESOLVE_DIRECTIVE}("foo")`)

-    expect(node.callee).toBe(APPLY_DIRECTIVES)
+    expect(node.callee).toBe(`_${APPLY_DIRECTIVES}`)
    expect(node.arguments).toMatchObject([
      {
        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_VNODE,
+        callee: `_${CREATE_VNODE}`,
        arguments: [
          `"div"`,
          {
@@ -388,7 +387,7 @@ describe('compiler: element transform', () => {
    expect(root.statements[1]).toMatch(`${RESOLVE_DIRECTIVE}("bar")`)
    expect(root.statements[2]).toMatch(`${RESOLVE_DIRECTIVE}("baz")`)

-    expect(node.callee).toBe(APPLY_DIRECTIVES)
+    expect(node.callee).toBe(`_${APPLY_DIRECTIVES}`)
    expect(node.arguments).toMatchObject([
      {
        type: NodeTypes.JS_CALL_EXPRESSION
@@ -467,13 +466,7 @@ describe('compiler: element transform', () => {
    ])
  })

-  test('props dedupe', () => {
-    const { code } = compile(
-      `<div class="a" :class="b" @click.foo="a" @click.bar="b" style="color: red" />
-      <div id="foo"/>`
-    )
-    console.log(code)
-  })
+  test.todo(`props dedupe`)

  test.todo('slot outlets')
 })
--- a/packages/compiler-core/tests/transforms/vBind.spec.ts
+++ b/packages/compiler-core/tests/transforms/vBind.spec.ts
@@ -49,11 +49,11 @@ describe('compiler: transform v-bind', () => {
        loc: {
          start: {
            line: 1,
-            column: 16
+            column: 17
          },
          end: {
            line: 1,
-            column: 20
+            column: 19
          }
        }
      },
--- a/packages/compiler-core/tests/transforms/vFor.spec.ts
+++ b/packages/compiler-core/tests/transforms/vFor.spec.ts
@@ -212,150 +212,155 @@ describe('compiler: transform v-for', () => {
      const source = '<span v-for="item in items" />'
      const forNode = parseWithForTransform(source)

+      const itemOffset = source.indexOf('item')
      expect(forNode.valueAlias!.content).toBe('item')
-      expect(forNode.valueAlias!.loc.start.offset).toBe(
-        source.indexOf('item') - 1
-      )
+      expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
      expect(forNode.valueAlias!.loc.start.line).toBe(1)
-      expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+      expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
      expect(forNode.valueAlias!.loc.end.line).toBe(1)
      expect(forNode.valueAlias!.loc.end.column).toBe(
-        source.indexOf('item') + 4
+        itemOffset + 1 + `item`.length
      )

+      const itemsOffset = source.indexOf('items')
      expect(forNode.source.content).toBe('items')
-      expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+      expect(forNode.source.loc.start.offset).toBe(itemsOffset)
      expect(forNode.source.loc.start.line).toBe(1)
-      expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+      expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
      expect(forNode.source.loc.end.line).toBe(1)
-      expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+      expect(forNode.source.loc.end.column).toBe(
+        itemsOffset + 1 + `items`.length
+      )
    })

    test('bracketed value', () => {
      const source = '<span v-for="( item ) in items" />'
      const forNode = parseWithForTransform(source)

+      const itemOffset = source.indexOf('item')
      expect(forNode.valueAlias!.content).toBe('item')
-      expect(forNode.valueAlias!.loc.start.offset).toBe(
-        source.indexOf('item') - 1
-      )
+      expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
      expect(forNode.valueAlias!.loc.start.line).toBe(1)
-      expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+      expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
      expect(forNode.valueAlias!.loc.end.line).toBe(1)
      expect(forNode.valueAlias!.loc.end.column).toBe(
-        source.indexOf('item') + 4
+        itemOffset + 1 + `item`.length
      )

+      const itemsOffset = source.indexOf('items')
      expect(forNode.source.content).toBe('items')
-      expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+      expect(forNode.source.loc.start.offset).toBe(itemsOffset)
      expect(forNode.source.loc.start.line).toBe(1)
-      expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+      expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
      expect(forNode.source.loc.end.line).toBe(1)
-      expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+      expect(forNode.source.loc.end.column).toBe(
+        itemsOffset + 1 + `items`.length
+      )
    })

    test('de-structured value', () => {
      const source = '<span v-for="(  { id, key })in items" />'
      const forNode = parseWithForTransform(source)

+      const valueIndex = source.indexOf('{ id, key }')
      expect(forNode.valueAlias!.content).toBe('{ id, key }')
-      expect(forNode.valueAlias!.loc.start.offset).toBe(
-        source.indexOf('{ id, key }') - 1
-      )
+      expect(forNode.valueAlias!.loc.start.offset).toBe(valueIndex)
      expect(forNode.valueAlias!.loc.start.line).toBe(1)
-      expect(forNode.valueAlias!.loc.start.column).toBe(
-        source.indexOf('{ id, key }')
-      )
+      expect(forNode.valueAlias!.loc.start.column).toBe(valueIndex + 1)
      expect(forNode.valueAlias!.loc.end.line).toBe(1)
      expect(forNode.valueAlias!.loc.end.column).toBe(
-        source.indexOf('{ id, key }') + '{ id, key }'.length
+        valueIndex + 1 + '{ id, key }'.length
      )

+      const itemsOffset = source.indexOf('items')
      expect(forNode.source.content).toBe('items')
-      expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+      expect(forNode.source.loc.start.offset).toBe(itemsOffset)
      expect(forNode.source.loc.start.line).toBe(1)
-      expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+      expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
      expect(forNode.source.loc.end.line).toBe(1)
-      expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+      expect(forNode.source.loc.end.column).toBe(
+        itemsOffset + 1 + `items`.length
+      )
    })

    test('bracketed value, key, index', () => {
      const source = '<span v-for="( item, key, index ) in items" />'
      const forNode = parseWithForTransform(source)

+      const itemOffset = source.indexOf('item')
      expect(forNode.valueAlias!.content).toBe('item')
-      expect(forNode.valueAlias!.loc.start.offset).toBe(
-        source.indexOf('item') - 1
-      )
+      expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
      expect(forNode.valueAlias!.loc.start.line).toBe(1)
-      expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+      expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
      expect(forNode.valueAlias!.loc.end.line).toBe(1)
      expect(forNode.valueAlias!.loc.end.column).toBe(
-        source.indexOf('item') + 4
+        itemOffset + 1 + `item`.length
      )

+      const keyOffset = source.indexOf('key')
      expect(forNode.keyAlias!.content).toBe('key')
-      expect(forNode.keyAlias!.loc.start.offset).toBe(source.indexOf('key') - 1)
+      expect(forNode.keyAlias!.loc.start.offset).toBe(keyOffset)
      expect(forNode.keyAlias!.loc.start.line).toBe(1)
-      expect(forNode.keyAlias!.loc.start.column).toBe(source.indexOf('key'))
+      expect(forNode.keyAlias!.loc.start.column).toBe(keyOffset + 1)
      expect(forNode.keyAlias!.loc.end.line).toBe(1)
-      expect(forNode.keyAlias!.loc.end.column).toBe(source.indexOf('key') + 3)
+      expect(forNode.keyAlias!.loc.end.column).toBe(
+        keyOffset + 1 + `key`.length
+      )

+      const indexOffset = source.indexOf('index')
      expect(forNode.objectIndexAlias!.content).toBe('index')
-      expect(forNode.objectIndexAlias!.loc.start.offset).toBe(
-        source.indexOf('index') - 1
-      )
+      expect(forNode.objectIndexAlias!.loc.start.offset).toBe(indexOffset)
      expect(forNode.objectIndexAlias!.loc.start.line).toBe(1)
-      expect(forNode.objectIndexAlias!.loc.start.column).toBe(
-        source.indexOf('index')
-      )
+      expect(forNode.objectIndexAlias!.loc.start.column).toBe(indexOffset + 1)
      expect(forNode.objectIndexAlias!.loc.end.line).toBe(1)
      expect(forNode.objectIndexAlias!.loc.end.column).toBe(
-        source.indexOf('index') + 5
+        indexOffset + 1 + `index`.length
      )

+      const itemsOffset = source.indexOf('items')
      expect(forNode.source.content).toBe('items')
-      expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+      expect(forNode.source.loc.start.offset).toBe(itemsOffset)
      expect(forNode.source.loc.start.line).toBe(1)
-      expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+      expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
      expect(forNode.source.loc.end.line).toBe(1)
-      expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+      expect(forNode.source.loc.end.column).toBe(
+        itemsOffset + 1 + `items`.length
+      )
    })

    test('skipped key', () => {
      const source = '<span v-for="( item,, index ) in items" />'
      const forNode = parseWithForTransform(source)

+      const itemOffset = source.indexOf('item')
      expect(forNode.valueAlias!.content).toBe('item')
-      expect(forNode.valueAlias!.loc.start.offset).toBe(
-        source.indexOf('item') - 1
-      )
+      expect(forNode.valueAlias!.loc.start.offset).toBe(itemOffset)
      expect(forNode.valueAlias!.loc.start.line).toBe(1)
-      expect(forNode.valueAlias!.loc.start.column).toBe(source.indexOf('item'))
+      expect(forNode.valueAlias!.loc.start.column).toBe(itemOffset + 1)
      expect(forNode.valueAlias!.loc.end.line).toBe(1)
      expect(forNode.valueAlias!.loc.end.column).toBe(
-        source.indexOf('item') + 4
+        itemOffset + 1 + `item`.length
      )

+      const indexOffset = source.indexOf('index')
      expect(forNode.objectIndexAlias!.content).toBe('index')
-      expect(forNode.objectIndexAlias!.loc.start.offset).toBe(
-        source.indexOf('index') - 1
-      )
+      expect(forNode.objectIndexAlias!.loc.start.offset).toBe(indexOffset)
      expect(forNode.objectIndexAlias!.loc.start.line).toBe(1)
-      expect(forNode.objectIndexAlias!.loc.start.column).toBe(
-        source.indexOf('index')
-      )
+      expect(forNode.objectIndexAlias!.loc.start.column).toBe(indexOffset + 1)
      expect(forNode.objectIndexAlias!.loc.end.line).toBe(1)
      expect(forNode.objectIndexAlias!.loc.end.column).toBe(
-        source.indexOf('index') + 5
+        indexOffset + 1 + `index`.length
      )

+      const itemsOffset = source.indexOf('items')
      expect(forNode.source.content).toBe('items')
-      expect(forNode.source.loc.start.offset).toBe(source.indexOf('items') - 1)
+      expect(forNode.source.loc.start.offset).toBe(itemsOffset)
      expect(forNode.source.loc.start.line).toBe(1)
-      expect(forNode.source.loc.start.column).toBe(source.indexOf('items'))
+      expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
      expect(forNode.source.loc.end.line).toBe(1)
-      expect(forNode.source.loc.end.column).toBe(source.indexOf('items') + 5)
+      expect(forNode.source.loc.end.column).toBe(
+        itemsOffset + 1 + `items`.length
+      )
    })
  })
 })
--- a/packages/compiler-core/tests/transforms/vIf.spec.ts
+++ b/packages/compiler-core/tests/transforms/vIf.spec.ts
@@ -29,9 +29,7 @@ describe('compiler: transform v-if', () => {
  test('basic v-if', () => {
    const node = parseWithIfTransform(`<div v-if="ok"/>`)
    expect(node.type).toBe(NodeTypes.IF)
-    expect(node.isRoot).toBe(true)
    expect(node.branches.length).toBe(1)
-    expect(node.branches[0].isRoot).toBe(true)
    expect(node.branches[0].condition!.content).toBe(`ok`)
    expect(node.branches[0].children.length).toBe(1)
    expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
--- a/packages/compiler-core/tests/transforms/vOn.spec.ts
+++ b/packages/compiler-core/tests/transforms/vOn.spec.ts
@@ -50,11 +50,11 @@ describe('compiler: transform v-bind', () => {
        loc: {
          start: {
            line: 1,
-            column: 17
+            column: 18
          },
          end: {
            line: 1,
-            column: 26
+            column: 25
          }
        }
      },
--- a/packages/compiler-core/tests/utils.spec.ts
+++ b/packages/compiler-core/tests/utils.spec.ts
@@ -28,7 +28,7 @@ describe('advancePositionWithClone', () => {
    const pos = p(1, 1, 0)
    const newPos = advancePositionWithClone(pos, 'foo\nbar\nbaz', 10)

-    expect(newPos.column).toBe(2)
+    expect(newPos.column).toBe(3)
    expect(newPos.line).toBe(3)
    expect(newPos.offset).toBe(10)
  })
@@ -62,7 +62,7 @@ describe('getInnerRange', () => {
    expect(loc2.start.column).toBe(1)
    expect(loc2.start.line).toBe(2)
    expect(loc2.start.offset).toBe(4)
-    expect(loc2.end.column).toBe(3)
+    expect(loc2.end.column).toBe(4)
    expect(loc2.end.line).toBe(2)
    expect(loc2.end.offset).toBe(7)
  })