feat(compiler): correct source map generation

2019-09-26 14:55:53 -04:00
parent 2e3a1ff3c3
commit 63b6902bdb
8 changed files with 120 additions and 111 deletions
--- a/packages/compiler-core/tests/snapshots/compile.spec.ts.snap
+++ b/packages/compiler-core/tests/snapshots/compile.spec.ts.snap
@@ -7,9 +7,9 @@ return function render() {
    const { createVNode: _createVNode, toString: _toString, renderList: _renderList } = _Vue
    return _createVNode(\\"div\\", {
      id: \\"foo\\",
-      class: bar
+      class: bar.baz
    }, [
-      _toString(world),
+      _toString(world.burn()),
      ok
        ? _createVNode(\\"div\\", 0, \\"yes\\")
        : \\"no\\",
@@ -21,25 +21,6 @@ return function render() {
 }"
 `;

-exports[`compiler: integration tests function mode 2`] = `
-Object {
-  "mappings": ";;;;WAAA,oBAAA;MAAK,IAAG;MAAO,OAAO;;gBACpB;MACW;UAAX,uBAAe;UACE;MACjB,YAA8B,OAAjB,OAAO;eAApB,wBAAoC,kCAAM",
-  "names": Array [],
-  "sources": Array [
-    "foo.vue",
-  ],
-  "sourcesContent": Array [
-    "<div id=\\"foo\\" :class=\\"bar\\">
-  {{ world }}
-  <div v-if=\\"ok\\">yes</div>
-  <template v-else>no</template>
-  <div v-for=\\"(value, index) in list\\"><span>{{ value + index }}</span></div>
-</div>",
-  ],
-  "version": 3,
-}
-`;
-
 exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
 "const { createVNode, toString, renderList } = Vue

@@ -47,9 +28,9 @@ return function render() {
  const _ctx = this
  return createVNode(\\"div\\", {
    id: \\"foo\\",
-    class: _ctx.bar
+    class: _ctx.bar.baz
  }, [
-    toString(_ctx.world),
+    toString(_ctx.world.burn()),
    (_ctx.ok)
      ? createVNode(\\"div\\", 0, \\"yes\\")
      : \\"no\\",
@@ -60,30 +41,6 @@ return function render() {
 }"
 `;

-exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 2`] = `
-Object {
-  "mappings": ";;;;SAAA,mBAAA;IAAK,IAAG;IAAO,OAAOA;;aACpBC;KACWC;QAAX,sBAAe;QACE;IACjB,WAA8BC,YAAjB,OAAO;aAApB,uBAAoC,gCAAS,QAAQ",
-  "names": Array [
-    "bar",
-    "world",
-    "ok",
-    "list",
-  ],
-  "sources": Array [
-    "foo.vue",
-  ],
-  "sourcesContent": Array [
-    "<div id=\\"foo\\" :class=\\"bar\\">
-  {{ world }}
-  <div v-if=\\"ok\\">yes</div>
-  <template v-else>no</template>
-  <div v-for=\\"(value, index) in list\\"><span>{{ value + index }}</span></div>
-</div>",
-  ],
-  "version": 3,
-}
-`;
-
 exports[`compiler: integration tests module mode 1`] = `
 "import { createVNode, toString, renderList } from \\"vue\\"

@@ -91,9 +48,9 @@ export default function render() {
  const _ctx = this
  return createVNode(\\"div\\", {
    id: \\"foo\\",
-    class: _ctx.bar
+    class: _ctx.bar.baz
  }, [
-    _toString(_ctx.world),
+    _toString(_ctx.world.burn()),
    (_ctx.ok)
      ? createVNode(\\"div\\", 0, \\"yes\\")
      : \\"no\\",
--- a/packages/compiler-core/tests/snapshots/parse.spec.ts.snap
+++ b/packages/compiler-core/tests/snapshots/parse.spec.ts.snap
@@ -3889,15 +3889,15 @@ Object {
          "isStatic": false,
          "loc": Object {
            "end": Object {
-              "column": 20,
+              "column": 18,
              "line": 1,
-              "offset": 19,
+              "offset": 17,
            },
-            "source": "{{a < b}}",
+            "source": "a < b",
            "start": Object {
-              "column": 11,
+              "column": 13,
              "line": 1,
-              "offset": 10,
+              "offset": 12,
            },
          },
          "type": 4,
@@ -6965,15 +6965,15 @@ Object {
          "isStatic": false,
          "loc": Object {
            "end": Object {
-              "column": 23,
+              "column": 21,
              "line": 1,
-              "offset": 22,
+              "offset": 20,
            },
-            "source": "{{'</div>'}}",
+            "source": "'</div>'",
            "start": Object {
-              "column": 11,
+              "column": 13,
              "line": 1,
-              "offset": 10,
+              "offset": 12,
            },
          },
          "type": 4,
@@ -7322,15 +7322,15 @@ Object {
      "isStatic": true,
      "loc": Object {
        "end": Object {
-          "column": 5,
+          "column": 3,
          "line": 1,
-          "offset": 4,
+          "offset": 2,
        },
-        "source": "{{}}",
+        "source": "",
        "start": Object {
-          "column": 1,
+          "column": 3,
          "line": 1,
-          "offset": 0,
+          "offset": 2,
        },
      },
      "type": 4,
@@ -7485,7 +7485,7 @@ Object {
                "line": 1,
                "offset": 32,
              },
-              "source": "\\"{ some: condition }\\"",
+              "source": "{ some: condition }",
              "start": Object {
                "column": 14,
                "line": 1,
@@ -7565,7 +7565,7 @@ Object {
                "line": 2,
                "offset": 70,
              },
-              "source": "\\"{ color: 'red' }\\"",
+              "source": "{ color: 'red' }",
              "start": Object {
                "column": 18,
                "line": 2,
@@ -7672,7 +7672,7 @@ Object {
                    "line": 2,
                    "offset": 70,
                  },
-                  "source": "\\"{ color: 'red' }\\"",
+                  "source": "{ color: 'red' }",
                  "start": Object {
                    "column": 20,
                    "line": 2,
@@ -7771,7 +7771,7 @@ Object {
                "line": 1,
                "offset": 32,
              },
-              "source": "\\"{ some: condition }\\"",
+              "source": "{ some: condition }",
              "start": Object {
                "column": 14,
                "line": 1,
--- a/packages/compiler-core/tests/compile.spec.ts
+++ b/packages/compiler-core/tests/compile.spec.ts
@@ -3,8 +3,8 @@ import { SourceMapConsumer, RawSourceMap } from 'source-map'

 describe('compiler: integration tests', () => {
  const source = `
-<div id="foo" :class="bar">
-  {{ world }}
+<div id="foo" :class="bar.baz">
+  {{ world.burn() }}
  <div v-if="ok">yes</div>
  <template v-else>no</template>
  <div v-for="(value, index) in list"><span>{{ value + index }}</span></div>
@@ -55,7 +55,6 @@ describe('compiler: integration tests', () => {
    )

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

@@ -77,9 +76,21 @@ describe('compiler: integration tests', () => {
      consumer.originalPositionFor(getPositionInCode(code, `bar`))
    ).toMatchObject(getPositionInCode(source, `bar`))

+    // without prefixIdentifiers: true, identifiers inside compound expressions
+    // are mapped to closest parent expression.
+    expect(
+      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+    ).toMatchObject(getPositionInCode(source, `bar`))
+
    expect(
      consumer.originalPositionFor(getPositionInCode(code, `world`))
-    ).toMatchObject(getPositionInCode(source, `{{ world }}`))
+    ).toMatchObject(getPositionInCode(source, `world`))
+
+    // without prefixIdentifiers: true, identifiers inside compound expressions
+    // are mapped to closest parent expression.
+    expect(
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+    ).toMatchObject(getPositionInCode(source, `world`))

    expect(
      consumer.originalPositionFor(getPositionInCode(code, `ok`))
@@ -99,7 +110,7 @@ describe('compiler: integration tests', () => {

    expect(
      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
-    ).toMatchObject(getPositionInCode(source, `{{ value + index }}`))
+    ).toMatchObject(getPositionInCode(source, `value + index`))
  })

  test('function mode w/ prefixIdentifiers: true', async () => {
@@ -112,7 +123,6 @@ describe('compiler: integration tests', () => {
    expect(code).toMatch(`const { createVNode, toString, renderList } = Vue`)

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

@@ -136,15 +146,22 @@ describe('compiler: integration tests', () => {
    expect(
      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`))
    ).toMatchObject(getPositionInCode(source, `bar`, true))
+    expect(
+      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+    ).toMatchObject(getPositionInCode(source, `baz`))

    expect(
      consumer.originalPositionFor(getPositionInCode(code, `world`, true))
-    ).toMatchObject(getPositionInCode(source, `{{ world }}`, `world`))
+    ).toMatchObject(getPositionInCode(source, `world`, `world`))
    expect(
      consumer.originalPositionFor(
        getPositionInCode(code, `_ctx.world`, `world`)
      )
-    ).toMatchObject(getPositionInCode(source, `{{ world }}`, `world`))
+    ).toMatchObject(getPositionInCode(source, `world`, `world`))
+
+    expect(
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+    ).toMatchObject(getPositionInCode(source, `burn()`))

    expect(
      consumer.originalPositionFor(getPositionInCode(code, `ok`))
@@ -208,15 +225,22 @@ describe('compiler: integration tests', () => {
    expect(
      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`))
    ).toMatchObject(getPositionInCode(source, `bar`, true))
+    expect(
+      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+    ).toMatchObject(getPositionInCode(source, `baz`))

    expect(
      consumer.originalPositionFor(getPositionInCode(code, `world`, true))
-    ).toMatchObject(getPositionInCode(source, `{{ world }}`, `world`))
+    ).toMatchObject(getPositionInCode(source, `world`, `world`))
    expect(
      consumer.originalPositionFor(
        getPositionInCode(code, `_ctx.world`, `world`)
      )
-    ).toMatchObject(getPositionInCode(source, `{{ world }}`, `world`))
+    ).toMatchObject(getPositionInCode(source, `world`, `world`))
+
+    expect(
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+    ).toMatchObject(getPositionInCode(source, `burn()`))

    expect(
      consumer.originalPositionFor(getPositionInCode(code, `ok`))
--- a/packages/compiler-core/tests/parse.spec.ts
+++ b/packages/compiler-core/tests/parse.spec.ts
@@ -298,9 +298,9 @@ describe('compiler: parse', () => {
        isStatic: false,
        isInterpolation: true,
        loc: {
-          start: { offset: 0, line: 1, column: 1 },
-          end: { offset: 11, line: 1, column: 12 },
-          source: '{{message}}'
+          start: { offset: 2, line: 1, column: 3 },
+          end: { offset: 9, line: 1, column: 10 },
+          source: 'message'
        }
      })
    })
@@ -315,9 +315,9 @@ describe('compiler: parse', () => {
        isStatic: false,
        isInterpolation: true,
        loc: {
-          start: { offset: 0, line: 1, column: 1 },
-          end: { offset: 9, line: 1, column: 10 },
-          source: '{{ a<b }}'
+          start: { offset: 3, line: 1, column: 4 },
+          end: { offset: 6, line: 1, column: 7 },
+          source: 'a<b'
        }
      })
    })
@@ -333,9 +333,9 @@ describe('compiler: parse', () => {
        isStatic: false,
        isInterpolation: true,
        loc: {
-          start: { offset: 0, line: 1, column: 1 },
-          end: { offset: 9, line: 1, column: 10 },
-          source: '{{ a<b }}'
+          start: { offset: 3, line: 1, column: 4 },
+          end: { offset: 6, line: 1, column: 7 },
+          source: 'a<b'
        }
      })
      expect(interpolation2).toStrictEqual({
@@ -344,9 +344,9 @@ describe('compiler: parse', () => {
        isStatic: false,
        isInterpolation: true,
        loc: {
-          start: { offset: 9, line: 1, column: 10 },
-          end: { offset: 18, line: 1, column: 19 },
-          source: '{{ c>d }}'
+          start: { offset: 12, line: 1, column: 13 },
+          end: { offset: 15, line: 1, column: 16 },
+          source: 'c>d'
        }
      })
    })
@@ -362,9 +362,9 @@ describe('compiler: parse', () => {
        isStatic: false,
        isInterpolation: true,
        loc: {
-          start: { offset: 5, line: 1, column: 6 },
-          end: { offset: 19, line: 1, column: 20 },
-          source: '{{ "</div>" }}'
+          start: { offset: 8, line: 1, column: 9 },
+          end: { offset: 16, line: 1, column: 17 },
+          source: '"</div>"'
        }
      })
    })
@@ -896,7 +896,7 @@ describe('compiler: parse', () => {
          loc: {
            start: { offset: 11, line: 1, column: 12 },
            end: { offset: 12, line: 1, column: 13 },
-            source: '"a"'
+            source: 'a'
          }
        },
        loc: {
@@ -1313,17 +1313,20 @@ foo
    offset += foo.loc.source.length
    expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })

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

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

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

  describe('namedCharacterReferences option', () => {