JSON stringify data-source

Author: siddharthkp

README.md

@@ -26,27 +26,27 @@
 ```html
 <div
   id="app"
-  data-source='"{
+  data-source="{
     "filename": "root/src/App.vue",
     "start": 0,
     "end": 14
-  }"'
+  }"
 >
   <img
     alt="Vue logo"
     src="./assets/logo.png"
-    data-source='"{
+    data-source="{
       "filename": "root/src/App.vue",
       "start": 17,
       "end": 61
-    }"'
+    }"
   />
   <h1
-    data-source='"{
+    data-source="{
       "filename": "root/src/HelloWorld.vue",
       "start": 22,
       "end": 26
-    }"'
+    }"
   >
     Welcome to Your Vue.js App
   </h1>

index.js

@@ -5,7 +5,11 @@ const generateCompilerModule = () => {
       const { start, end } = node;
 
       const meta = { filename, start, end };
-      const value = `"{\"filename\":\"${meta.filename}\",\"start\":${meta.start},\"end\":${meta.end}}"`;
+      const value = JSON.stringify({
+        filename: meta.filename,
+        start: meta.start,
+        end: meta.end,
+      });
 
       if (!node.attrsList) node.attrsList = [];
       node.attrsList.push({ name: 'data-source', value: value });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-source",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Add source location to elements",
   "main": "index.js",
   "scripts": {},