├── .gitignore ├── package.json ├── LICENSE ├── rollup.config.js ├── demo └── index.html ├── src └── main.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-source", 3 | "version": "1.1.1", 4 | "description": "Global Vue mixin which identifies components in source code with HTML comments", 5 | "module": "dist/bundle.esm.js", 6 | "jsnext:main": "dist/bundle.esm.js", 7 | "main": "dist/bundle.js", 8 | "files": [ 9 | "dist/*" 10 | ], 11 | "scripts": { 12 | "dev": "rollup -c -w", 13 | "build": "rollup -c", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/davestewart/vue-source.git" 19 | }, 20 | "author": "Dave Stewart ", 21 | "homepage": "https://github.com/davestewart/vue-source#readme", 22 | "license": "MIT", 23 | "keywords": [ 24 | "vue", 25 | "development", 26 | "debugging" 27 | ], 28 | "bugs": { 29 | "url": "https://github.com/davestewart/vue-source/issues" 30 | }, 31 | "devDependencies": { 32 | "rollup-plugin-buble": "^0.19.1", 33 | "rollup-plugin-commonjs": "^8.3.0", 34 | "rollup-plugin-uglify": "^3.0.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Dave Stewart 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 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------------------------------ 2 | // setup 3 | // ------------------------------------------------------------------------------------------ 4 | 5 | import commonjs from 'rollup-plugin-commonjs'; 6 | import uglify from 'rollup-plugin-uglify'; 7 | import buble from 'rollup-plugin-buble'; 8 | 9 | const pkg = require('./package.json') 10 | const external = Object.keys(pkg.dependencies || {}); 11 | 12 | function output (file, format = 'umd') { 13 | return { 14 | name: pkg.name.replace(/(^\w|-\w)/g, c => c.replace('-', '').toUpperCase()), 15 | file: 'dist/' + file, 16 | format: format, 17 | exports: 'default', 18 | } 19 | } 20 | 21 | // ------------------------------------------------------------------------------------------ 22 | // build 23 | // ------------------------------------------------------------------------------------------ 24 | 25 | const umd = { 26 | input: 'src/main.js', 27 | external: external, 28 | output: output('bundle.js'), 29 | plugins: [ 30 | commonjs(), 31 | buble() 32 | ] 33 | } 34 | 35 | const min = Object.assign({}, umd, { 36 | output: output('bundle.min.js'), 37 | plugins: [...umd.plugins, uglify()] 38 | }) 39 | 40 | const es = Object.assign({}, umd, { 41 | output: output('bundle.esm.js', 'es') 42 | }) 43 | 44 | export default [umd, min, es] 45 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | VueSource Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 27 |
28 |

Check the DevTools Elements panel to see VueSource in action:

29 | 30 | 31 | 32 | 33 | 34 | Router link 35 |
36 | 37 | 60 | 61 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | const defaults = { 2 | active: 'auto', 3 | type: 'class', 4 | debug: true 5 | } 6 | 7 | function comment (type, value) { 8 | return ` ${type}: ${value} ` 9 | } 10 | 11 | function install (Vue, options) { 12 | // fake env for browser builds 13 | let env = typeof process === 'undefined' 14 | ? 'production' 15 | : process.env.NODE_ENV 16 | 17 | // build options 18 | options = Object.assign(defaults, options) 19 | options.active = options.active === 'auto' 20 | ? env !== 'production' 21 | : !!options.active 22 | 23 | const {type, active, debug} = options 24 | 25 | // exits 26 | if (!['file', 'class', 'tag'].includes(type)) { 27 | console.warn(`VueSource: invalid option type '${type}'`) 28 | return 29 | } 30 | 31 | if (!active) { 32 | return 33 | } 34 | 35 | Vue.mixin({ 36 | mounted () { 37 | if (this.$vnode) { 38 | // variables 39 | const file = this.$vnode.componentInstance.$options.__file 40 | const tag = this.$vnode.componentOptions.tag 41 | const auto = (tag || file 42 | .match(/([^/\\]+)\.vue/).pop() 43 | .replace(/([a-z])([A-Z])/g, function (input, a, b) { 44 | return (a + '-' + b) 45 | })) 46 | .toLowerCase() 47 | const className = auto.replace(/(^\w|-\w)/g, char => char.replace('-', '').toUpperCase()) 48 | 49 | // text 50 | let text 51 | switch (type) { 52 | 53 | case 'file': 54 | if (file) { 55 | text = comment('file', file) 56 | } 57 | break 58 | 59 | case 'class': 60 | if (file) { 61 | const matches = file.match(/([^\\\/]+)\.vue$/) 62 | text = comment('class', matches[1]) 63 | } 64 | else { 65 | text = comment('class', className) 66 | } 67 | break 68 | 69 | case 'tag': 70 | text = comment('component', auto) 71 | break 72 | } 73 | 74 | if (!text) { 75 | text = comment('component', auto) 76 | } 77 | 78 | // insert 79 | if (text) { 80 | this.__commentLabel = document.createComment(text) 81 | this.$el.parentNode.insertBefore(this.__commentLabel, this.$el) 82 | 83 | // debug 84 | if (debug) { 85 | this.__commentLabel.vm = this 86 | this.__commentLabel.tag = tag 87 | this.__commentLabel.file = file 88 | this.__commentLabel.class = className 89 | this.__commentLabel.inspect = () => { 90 | if (this.$inspect) { 91 | this.$inspect() 92 | } 93 | } 94 | } 95 | } 96 | } 97 | }, 98 | 99 | destroyed () { 100 | if (this.__commentLabel) { 101 | this.__commentLabel.remove() 102 | } 103 | } 104 | }) 105 | } 106 | 107 | export default { 108 | install, 109 | defaults 110 | } 111 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Source 2 | 3 | ## Overview 4 | 5 | Vue Source is a global Vue mixin which identifies components in source code by adding HTML comments: 6 | 7 | ![inspector](https://user-images.githubusercontent.com/132681/32379406-5c3b5528-c0a5-11e7-9eaf-50483e9a306d.png) 8 | 9 | 10 | The plugin has various optional features: 11 | 12 | - render comments as class names, tags, or file paths 13 | - manual or automatic activation based on environment variable 14 | - attach JavaScript references to DOM comments 15 | - inspect in Vue Devtools v4 16 | 17 | ## Installation and usage 18 | 19 | Download via NPM: 20 | 21 | ``` 22 | npm install vue-source --save 23 | ``` 24 | 25 | Import and run from your main application file: 26 | 27 | ```js 28 | import VueSource from 'vue-source' 29 | 30 | Vue.use(VueSource) 31 | ``` 32 | 33 | The default settings are: 34 | 35 | - render comments as class names 36 | - activate in development, but not in production 37 | - attach component and file references to rendered comments 38 | 39 | 40 | ## Settings 41 | 42 | You can pass settings to `Vue.use()` to change Vue Source's behaviour: 43 | 44 | ```js 45 | import Vue from 'vue' 46 | import VueSource from 'vue-source' 47 | 48 | Vue.use(VueSource, { 49 | type: 'file', 50 | active: true, 51 | debug: true 52 | }) 53 | ``` 54 | 55 | ### Type 56 | 57 | Render comment as class name, file path, or source code tag: 58 | 59 | > `type` : `('class'|'file'|'tag')` 60 | 61 | Class names: 62 | 63 | ![comment-class](https://user-images.githubusercontent.com/132681/36078037-9105de14-0f69-11e8-829c-761143a3c1c8.png) 64 | 65 | File paths: 66 | 67 | ![comment-file](https://user-images.githubusercontent.com/132681/32379421-64c238ec-c0a5-11e7-96d0-1953ee64242c.png) 68 | 69 | Tags: 70 | 71 | ![comment-component](https://user-images.githubusercontent.com/132681/32379414-6133e022-c0a5-11e7-9194-cc72a1dc558d.png) 72 | 73 | Where files don't exist (i.e router links) the plugin will attempt to render classes or tags instead. 74 | 75 | 76 | ### Active 77 | 78 | Activate or disable at startup: 79 | 80 | > `active` : `('auto'|true|false|expression)` 81 | 82 | Pass: 83 | 84 | - `'auto'` (the default) which checks `process.env.NODE_ENV` to run in anything except `production` 85 | - `true` to always enable 86 | - `false` to always disable 87 | - any other expression which evaluates to `true/false` to choose whether to enable 88 | 89 | ### Debug 90 | 91 | Attach references to the rendered comment: 92 | 93 | > `debug` : `(true|false)` 94 | 95 | By default, the plugin attaches the following references to the DOM comment: 96 | 97 | 98 | - `vm`: the Vue instance 99 | - `tag`: the markup tag 100 | - `file`: the source file path 101 | - `class`: the source class name 102 | - `inspect()`: a function to inspect the component in Vue's DevTools (v4 feature) 103 | 104 | To access these references in your browser's Vue Devtools: 105 | 106 | 1. inspect the HTML comment in the Elements panel 107 | 2. reference it in the Console via `$0` 108 | 109 | ![debug](https://user-images.githubusercontent.com/132681/32379425-68121008-c0a5-11e7-8e4f-055d3684bc46.png) 110 | 111 | Set `debug` to `false` if you want to disable this functionality. 112 | --------------------------------------------------------------------------------