├── .gitignore
├── LICENSE
├── README.md
├── index.js
├── module.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 ui-devtools
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img height="90" src="https://user-images.githubusercontent.com/1863771/99888680-000fb500-2c4f-11eb-83ef-1b80a112f84e.png">
 3 |   <br><br>
 4 |   <b>Add source location to elements</b>
 5 | </p>
 6 | 
 7 | &nbsp;
 8 | 
 9 | &nbsp;
10 | 
11 | #### In
12 | 
13 | ```html
14 | <template>
15 |   <div id="app">
16 |     <img alt="Vue logo" src="./assets/logo.png" />
17 |     <HelloWorld msg="Welcome to Your Vue.js App" />
18 |   </div>
19 | </template>
20 | ```
21 | 
22 | &nbsp;
23 | 
24 | #### Out
25 | 
26 | ```html
27 | <div
28 |   id="app"
29 |   data-source="{
30 |     "filename": "root/src/App.vue",
31 |     "start": 0,
32 |     "end": 14
33 |   }"
34 | >
35 |   <img
36 |     alt="Vue logo"
37 |     src="./assets/logo.png"
38 |     data-source="{
39 |       "filename": "root/src/App.vue",
40 |       "start": 17,
41 |       "end": 61
42 |     }"
43 |   />
44 |   <h1
45 |     data-source="{
46 |       "filename": "root/src/HelloWorld.vue",
47 |       "start": 22,
48 |       "end": 26
49 |     }"
50 |   >
51 |     Welcome to Your Vue.js App
52 |   </h1>
53 | </div>
54 | ```
55 | 
56 | &nbsp;
57 | 
58 | #### Why?
59 | 
60 | &nbsp;
61 | 
62 | Useful for building developer tools that can use the location of the element — like [UI Devtools](https://ui-devtools.com)
63 | 
64 | &nbsp;
65 | 
66 | #### Installation
67 | 
68 | &nbsp;
69 | 
70 | ```
71 | vue add source
72 | ```
73 | 
74 | or
75 | 
76 | ```
77 | yarn add -D vue-cli-plugin-source
78 | ```
79 | 
80 | `vue-cli` will automatically pick it up.
81 | 
82 | &nbsp;
83 | 
84 | #### like it?
85 | 
86 | :star: this repo
87 | 
88 | &nbsp;
89 | 
90 | #### license
91 | 
92 | MIT © [siddharthkp](https://github.com/siddharthkp)
93 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const sourceModule = require('./module');
 2 | 
 3 | module.exports = (api) => {
 4 |   api.chainWebpack((config) => {
 5 |     const rule = config.module.rule('vue');
 6 | 
 7 |     rule.use('vue-loader').tap((vueLoaderOptions) => {
 8 |       const compilerOptions = vueLoaderOptions.compilerOptions;
 9 |       const modules = compilerOptions.modules || [];
10 | 
11 |       modules.push(sourceModule);
12 | 
13 |       compilerOptions.modules = modules;
14 |       vueLoaderOptions.compilerOptions = compilerOptions;
15 | 
16 |       return { ...vueLoaderOptions };
17 |     });
18 |   });
19 | };
20 | 


--------------------------------------------------------------------------------
/module.js:
--------------------------------------------------------------------------------
 1 | const sourceModule = {
 2 |   preTransformNode(node, options) {
 3 |     const { filename } = options;
 4 |     const { start, end } = node;
 5 | 
 6 |     const meta = { filename, start, end };
 7 |     const value = JSON.stringify({
 8 |       filename: meta.filename,
 9 |       start: meta.start,
10 |       end: meta.end,
11 |     });
12 | 
13 |     if (!node.attrsList) node.attrsList = [];
14 |     node.attrsList.push({ name: 'data-source', value: value });
15 | 
16 |     return node;
17 |   },
18 | };
19 | 
20 | module.exports = sourceModule;
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cli-plugin-source",
 3 |   "version": "1.1.0",
 4 |   "description": "Add source location to elements",
 5 |   "main": "index.js",
 6 |   "scripts": {},
 7 |   "keywords": [],
 8 |   "author": "siddharthkp",
 9 |   "license": "MIT"
10 | }
11 | 


--------------------------------------------------------------------------------