feat: Provide sourcemap for blocks in .vue file (#215)

znck · web-flow · commit a5928ad1d054 · 2018-06-25T00:57:09.000+05:30
* feat: Provide sourcemaps for .vue files

* chore: Bump @vue/component-compiler

* test: Add inline source URL for generated bundle

* chore: Code style fix
diff --git a/cookbook/typescript-simple/src/MyComponent.vue b/cookbook/typescript-simple/src/MyComponent.vue
@@ -6,7 +6,18 @@
 // @ts-ignore
 import Vue, { VueConstructor } from 'vue'
 
-export default Vue.extend<{ name: string }, {/* methods */}, {/* computed */}, {/* props */}>({
+export default Vue.extend<
+  { name: string },
+  {
+    /* methods */
+  },
+  {
+    /* computed */
+  },
+  {
+    /* props */
+  }
+>({
   data() {
     return { name: 'Jane Doe' }
   }
diff --git a/src/index.ts b/src/index.ts
@@ -175,10 +175,12 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
       if (!request) return
 
       const element = resolveVuePart(descriptors, request)
-
-      return 'code' in element
+      const code = 'code' in element
         ? ((element as any).code as string) // .code is set when extract styles is used. { css: false }
         : element.content
+      const map = element.map as any
+
+      return { code, map }
     },
 
     async transform(source: string, filename: string) {
diff --git a/test/setup/index.ts b/test/setup/index.ts
@@ -37,26 +37,41 @@ export async function build(filename, css = false): Promise<string> {
     external: ['vue']
   })
 
-  cache[cacheKey] = (await bundle.generate({
+  const output = await bundle.generate({
     format: 'iife',
     name: 'App',
+    sourcemap: true,
     globals: {
       vue: 'Vue'
     }
-  })).code + (style ? `\n;(function() { 
-    var s = document.createElement('style'); 
-    s.type = 'text/css'; 
-    document.head.appendChild(s);
-    s.appendChild(document.createTextNode(${JSON.stringify(style)}))
-  })()` : '')
-
-  return cache[cacheKey]
+  })
+
+  let outputCode = output.code
+
+  if (style) {
+    outputCode += `\n;(function() { 
+      var s = document.createElement('style'); 
+      s.type = 'text/css'; 
+      document.head.appendChild(s);
+      s.appendChild(document.createTextNode(${JSON.stringify(style)}))
+    })()` 
+  }
+
+  outputCode += `\n\n//# sourceMappingURL=data:application/json;base64,${new Buffer(JSON.stringify(output.map)).toString('base64')}\n`
+
+  cache[cacheKey] = outputCode
+
+  return outputCode
 }
 
 const VUE_SOURCE = promised(fs).readFile(
   path.resolve(__dirname, '../../node_modules/vue/dist/vue.min.js')
 )
 
+function encode(any: any) {
+  return any.toString().replace(/<\//g, '&lt;\/')
+}
+
 export async function open(name: string, browser: Browser, code: string, id: string = '#test'): Promise<Page> {
   const page = await browser.newPage()
 
@@ -69,10 +84,10 @@ export async function open(name: string, browser: Browser, code: string, id: str
     <body>
       <div id="app"></div>
       <script>
-      ${await VUE_SOURCE}
+      ${encode(await VUE_SOURCE)}
       </script>
       <script>
-      ${await code}
+      ${encode(await code)}
       </script>
     </body>
   </html>`
diff --git a/yarn.lock b/yarn.lock
@@ -589,13 +589,14 @@
     vue-template-es2015-compiler "^1.6.0"
 
 "@vue/component-compiler@^3.3.2":
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.3.3.tgz#f23b5353515025e81d36448b71422b2510939502"
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.4.0.tgz#3413b02a4ea76354a38db3e0bffd4ecec82b0563"
   dependencies:
     "@vue/component-compiler-utils" "^1.2.1"
     clean-css "^4.1.11"
     hash-sum "^1.0.2"
     postcss-modules-sync "^1.0.0"
+    source-map "0.6.*"
 
 "@znck/promised@^1.0.0":
   version "1.0.0"
@@ -1374,14 +1375,14 @@ collection-visit@^1.0.0:
     object-visit "^1.0.0"
 
 color-convert@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147"
   dependencies:
-    color-name "^1.1.1"
+    color-name "1.1.1"
 
-color-name@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+color-name@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
 
 combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
   version "1.0.6"
@@ -4056,7 +4057,15 @@ postcss@^5.2.5:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.20, postcss@^6.0.22, postcss@^6.0.9:
+postcss@^6.0.1:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^6.0.10, postcss@^6.0.20, postcss@^6.0.22, postcss@^6.0.9:
   version "6.0.22"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
   dependencies:
@@ -4818,16 +4827,16 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
+source-map@0.6.*, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 source-map@^0.4.2, source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 spdx-correct@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
