Add source map support (#24)

znck · web-flow · commit 26bd9aab1b64 · 2016-09-11T18:13:55.000+05:30
* Compile .vue files without <template> section fix #18 * Provide source map fix #18
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
   "dependencies": {
     "de-indent": "latest",
     "html-minifier": "latest",
+    "magic-string": "^0.16.0",
     "parse5": "latest",
     "rollup-pluginutils": "latest",
     "vue-template-compiler": "^2.0.0-rc.4",
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import { createFilter } from 'rollup-pluginutils';
 import { writeFile } from 'fs';
+import MagicString from 'magic-string';
 
 import vueTransform from './vueTransform';
 import DEFAULT_OPTIONS from './options';
@@ -106,18 +107,25 @@ export default function vue(options = {}) {
                 return null;
             }
 
-            const { js, css } = vueTransform(source, id, options);
+            const { js, css, map } = vueTransform(source, id, options);
 
             // Map of every stylesheet
             styles[id] = css || {};
 
             // Component javascript with inlined html template
-            return js;
+            return {
+                code: js,
+                map: map.generateMap({ hires: true }),
+            };
         },
         transformBundle(source) {
             generateStyleBundle();
+            const map = new MagicString(source);
 
-            return source.replace(/if[\s]*\('__VUE_WITH_STATEMENT__'\)/g, 'with(this)');
+            return {
+                code: source.replace(/if[\s]*\('__VUE_WITH_STATEMENT__'\)/g, 'with(this)'),
+                map: map.generateMap({ hires: true }),
+            };
         },
         ongenerate(opts, rendered) {
             generateStyleBundle();
diff --git a/src/vueTransform.js b/src/vueTransform.js
@@ -3,6 +3,7 @@ import htmlMinifier from 'html-minifier';
 import parse5 from 'parse5';
 import validateTemplate from 'vue-template-validator';
 import { relative } from 'path';
+import MagicString from 'magic-string';
 
 /**
  * Check the lang attribute of a parse5 node.
@@ -125,14 +126,19 @@ function processScript(node, filePath, content, templateOrRender) {
     const before = padContent(content.slice(0, location));
     script = before + script;
 
+    const map = new MagicString(script);
+
     if (template) {
         script = injectTemplate(script, template, lang);
     } else if (render) {
         script = injectRender(script, render, lang);
     }
     script = deIndent(script);
 
-    return script;
+    return {
+        code: script,
+        map,
+    };
 }
 
 export default function vueTransform(code, filePath, options) {
@@ -167,7 +173,8 @@ export default function vueTransform(code, filePath, options) {
 
     // 5. Process script & style
     return {
-        js,
+        js: js.code,
+        map: js.map,
         css: nodes.style && {
             content: parse5.serialize(nodes.style),
             lang: checkLang(nodes.style),
