├── CONTRIBUTING.md
├── demo
    ├── .eslintignore
    ├── babel.config.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   └── logo.png
    │   ├── main.js
    │   ├── components
    │   │   ├── TodoItem.vue
    │   │   └── Todos.vue
    │   └── App.vue
    ├── .gitignore
    ├── .eslintrc.js
    ├── README.md
    └── package.json
├── extensions
    ├── devtools.html
    ├── icon-128.png
    ├── icon-16.png
    ├── icon-48.png
    ├── vue-flash-updates.png
    ├── devtools.js
    ├── manifest.json
    ├── vue-flash-updates.svg
    ├── checkbox.css
    ├── panel.js
    └── panel.html
├── misc
    ├── vue-flash-updates.png
    ├── live-demo-screenshot.gif
    └── screenshot-dev-window.gif
├── package.json
├── .github
    └── ISSUE_TEMPLATE
    │   └── bug_report.md
├── .gitignore
├── src
    └── vue-devtools-flash-updates.js
├── translations
    ├── README.ch.md
    └── README.ja.md
└── README.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | TBD


--------------------------------------------------------------------------------
/demo/.eslintignore:
--------------------------------------------------------------------------------
1 | ../src/


--------------------------------------------------------------------------------
/extensions/devtools.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <script src="./devtools.js"></script>


--------------------------------------------------------------------------------
/demo/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/demo/src/assets/logo.png


--------------------------------------------------------------------------------
/extensions/icon-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/extensions/icon-128.png


--------------------------------------------------------------------------------
/extensions/icon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/extensions/icon-16.png


--------------------------------------------------------------------------------
/extensions/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/extensions/icon-48.png


--------------------------------------------------------------------------------
/misc/vue-flash-updates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/misc/vue-flash-updates.png


--------------------------------------------------------------------------------
/misc/live-demo-screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/misc/live-demo-screenshot.gif


--------------------------------------------------------------------------------
/misc/screenshot-dev-window.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/misc/screenshot-dev-window.gif


--------------------------------------------------------------------------------
/extensions/vue-flash-updates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuichkun/vue-devtool-flash-updates/HEAD/extensions/vue-flash-updates.png


--------------------------------------------------------------------------------
/extensions/devtools.js:
--------------------------------------------------------------------------------
1 | chrome.devtools.panels.create(
2 |   "Vue Flash Updates",
3 |   "vue-flash-updates.png",
4 |   "panel.html",
5 |   function (panel) {
6 |     console.log('successfully created a panel', panel);
7 |   }
8 | )


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import FlashUpdates from 'vue-devtool-flash-updates'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.use(FlashUpdates, {
 8 |   logUpdatedComponents: true,
 9 | })
10 | 
11 | new Vue({
12 |   render: h => h(App),
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 
25 | .vercel
26 | 


--------------------------------------------------------------------------------
/extensions/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Vue Devtool Flash Updates",
 3 |   "description": "A handy devtool that enables highlighting re-rendered components!",
 4 |   "version": "1.0.0",
 5 |   "manifest_version": 3,
 6 |   "devtools_page": "devtools.html",
 7 |   "permissions": ["storage"],
 8 |   "icons": {
 9 |     "16": "icon-16.png",
10 |     "48": "icon-48.png",
11 |     "128": "icon-128.png"
12 |   }
13 | }


--------------------------------------------------------------------------------
/demo/src/components/TodoItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span>{{ todo }}</span>
 4 |     <button id="delete-button" @click="removeTodo(todo)">Delete</button>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | import Vue from 'vue'
 9 | 
10 | export default Vue.extend({
11 |   name: 'TodoItem',
12 |   props: ['todo', 'removeTodo'],
13 | })
14 | 
15 | </script>
16 | 
17 | <style scoped>
18 | #delete-button {
19 |   margin-left: 32px;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/demo/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es6": true
 5 |     },
 6 |     "extends": "plugin:vue/essential",
 7 |     "globals": {
 8 |         "Atomics": "readonly",
 9 |         "SharedArrayBuffer": "readonly"
10 |     },
11 |     "parserOptions": {
12 |         "ecmaVersion": 2018,
13 |         "sourceType": "module"
14 |     },
15 |     "plugins": [
16 |         "vue"
17 |     ],
18 |     "rules": {
19 |     }
20 | };


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # Demo for Vue-Devtool-Flash-Updates
 2 | 
 3 | TBD
 4 | 
 5 | ## Project setup
 6 | ```
 7 | npm install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | npm run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | npm run build
18 | ```
19 | 
20 | ### Lints and fixes files
21 | ```
22 | npm run lint
23 | ```
24 | 
25 | ### Customize configuration
26 | See [Configuration Reference](https://cli.vuejs.org/config/).
27 | 


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Todos />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Todos from './components/Todos.vue'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     Todos
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | #app {
20 |   font-family: Avenir, Helvetica, Arial, sans-serif;
21 |   -webkit-font-smoothing: antialiased;
22 |   -moz-osx-font-smoothing: grayscale;
23 |   text-align: center;
24 |   color: #2c3e50;
25 |   margin-top: 60px;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/extensions/vue-flash-updates.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 221"><defs><style>.cls-1{fill:#41b883;}.cls-2{fill:#35495e;}.cls-3{fill:#d8c909;}</style></defs><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M204.8,0H256L128,220.8,0,0H97.92L128,51.2,157.44,0Z"/><path class="cls-1" d="M0,0,128,220.8,256,0H204.8L128,132.48,50.56,0Z"/><path class="cls-2" d="M50.56,0,128,133.12,204.8,0H157.44L128,51.2,97.92,0Z"/></g><g id="Layer_2" data-name="Layer 2"><polygon class="cls-3" points="204.8 0 128 132.48 128 220.8 256 0 204.8 0"/></g></svg>


--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-devtool-flash-updates",
 3 |   "version": "0.1.1",
 4 |   "description": "A handy devtool that enables highlighting re-rendered components!",
 5 |   "main": "src/vue-devtools-flash-updates.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/yuichkun/vue-devtool-flash-updates.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "devtool"
16 |   ],
17 |   "author": "Yuichi Yogo",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/yuichkun/vue-devtool-flash-updates/issues"
21 |   },
22 |   "homepage": "https://github.com/yuichkun/vue-devtool-flash-updates#readme",
23 |   "devDependencies": {
24 |     "@types/chrome": "0.0.154"
25 |   },
26 |   "files": ["./src"]
27 | }
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Chrome Extension Version [e.g. `v1.0.0`]
30 |  - NPM Package Version [e.g. `v0.1.0`]
31 | 
32 | 
33 | **Additional context**
34 | Add any other context about the problem here.
35 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-devtool-flash-updates-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "babel-eslint": "^10.1.0",
19 |     "eslint": "^6.7.2",
20 |     "eslint-plugin-vue": "^6.2.2",
21 |     "vue-devtool-flash-updates": "0.1.0",
22 |     "vue-template-compiler": "^2.6.11"
23 |   },
24 |   "eslintConfig": {
25 |     "root": true,
26 |     "env": {
27 |       "node": true
28 |     },
29 |     "extends": [
30 |       "plugin:vue/essential",
31 |       "eslint:recommended"
32 |     ],
33 |     "parserOptions": {
34 |       "parser": "babel-eslint"
35 |     },
36 |     "rules": {}
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "last 2 versions",
41 |     "not dead"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/extensions/checkbox.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat");
 2 | 
 3 | *, *:before, *:after {
 4 | 	box-sizing: border-box;
 5 | }
 6 | 
 7 | html {
 8 | 	font-size: 18px;
 9 | }
10 | 
11 | fieldset {
12 | 	display: block;
13 | 	position: absolute;
14 | 	top: 50%;
15 | 	left: 50%;
16 | 	transform: translate(-50%, -50%);
17 | }
18 | 
19 | label {
20 | 	font-family: "Montserrat", sans-serif;
21 | 	font-size: 1.2rem;
22 | 	cursor: pointer;
23 | 	display: block;
24 | 	margin: 1em;
25 | }
26 | 
27 | label > input {
28 | 	display: none;
29 | }
30 | 
31 | label span {
32 | 	color: #6A759B;
33 | 	margin-left: 8px;
34 | }
35 | 
36 | label i {
37 | 	display: inline-block;
38 | 	width: 64px;
39 | 	height: 40px;
40 | 	border-radius: 20px;
41 | 	vertical-align: middle;
42 | 	transition: .25s .09s;
43 | 	position: relative;
44 | 	background: #deeff7;
45 | }
46 | 
47 | label i:after {
48 | 	content: " ";
49 | 	display: block;
50 | 	width: 30px;
51 | 	height: 30px;
52 | 	top: 5px;
53 | 	left: 5px;
54 | 	border-radius: 50%;
55 | 	background: #fff;
56 | 	position: absolute;
57 | 	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
58 | 	transition: .15s;
59 | }
60 | 
61 | label > input:checked + i {
62 | 	background: #D8C909;
63 | }
64 | 
65 | label > input:checked + i + span {
66 | 	color: white;
67 | }
68 | 
69 | label > input:checked + i:after {
70 | 	transform: translateX(25px);
71 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### https://raw.github.com/github/gitignore/18654b47c86bef38add5cd091ec2dac7d6e6e37b/Node.gitignore
 2 | 
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | .env.test
62 | 
63 | # parcel-bundler cache (https://parceljs.org/)
64 | .cache
65 | 
66 | # next.js build output
67 | .next
68 | 
69 | # nuxt.js build output
70 | .nuxt
71 | 
72 | # vuepress build output
73 | .vuepress/dist
74 | 
75 | # Serverless directories
76 | .serverless/
77 | 
78 | # FuseBox cache
79 | .fusebox/
80 | 
81 | # DynamoDB Local files
82 | .dynamodb/
83 | 
84 | 
85 | 


--------------------------------------------------------------------------------
/extensions/panel.js:
--------------------------------------------------------------------------------
 1 | console.log('hello from panel.js')
 2 | const input = document.getElementById('flash-on-update-checkbox')
 3 | const logoImage = document.getElementById('flash-on-update-logo')
 4 | const FEATURE_AVAILABILITY_KEY = 'VUE_DEVTOOLS_FLASH_UPDATES_ENABLED'
 5 | 
 6 | window.addEventListener('DOMContentLoaded', () => {
 7 |   console.log('DOMContentLoaded')
 8 |   getFeatureAvailability().then(enabled => {
 9 |     console.log('getFeatureAvailability', enabled)
10 |     input.checked = enabled
11 |   }).catch(console.error)
12 | 
13 | })
14 | 
15 | function onChange(e) {
16 |   console.log('onChange', e)
17 |   setFeatureAvailability(e.target.checked)
18 |   const reverse = e.target.checked
19 |   spinLogo(reverse)
20 | }
21 | input.addEventListener('change', onChange)
22 | 
23 | function getFeatureAvailability() {
24 |   return new Promise((resolve, reject) => {
25 |     const script = `
26 |       localStorage.getItem('${FEATURE_AVAILABILITY_KEY}') === 'true'
27 |     `
28 |     chrome.devtools.inspectedWindow.eval(script, (result, exception) => {
29 |       if(exception) {
30 |         reject(exception)
31 |         return
32 |       }
33 |       resolve(result)
34 |     })
35 |   })
36 | }
37 | 
38 | function setFeatureAvailability(enabled) {
39 |   const script = `
40 |     localStorage.setItem('${FEATURE_AVAILABILITY_KEY}', '${enabled}')
41 |   `
42 |   chrome.devtools.inspectedWindow.eval(script, (result, exception) => {
43 |     if(exception) {
44 |       console.error(exception)
45 |     }
46 |     console.log('result', result)
47 |   })
48 | }
49 | 
50 | function spinLogo(reverse=false) {
51 |   function removeClassName(className) {
52 |     if(logoImage.classList.contains(className)) {
53 |       logoImage.classList.remove(className)
54 |     }
55 |   }
56 |   ['spin-reversed', 'spin'].forEach(removeClassName)
57 |   const newClassName = reverse ? 'spin-reversed' : 'spin'
58 |   void logoImage.offsetWidth
59 |   logoImage.classList.add(newClassName)
60 | }


--------------------------------------------------------------------------------
/extensions/panel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Flash Updates</title>
 6 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 7 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 8 |     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
 9 |     <link rel="stylesheet" href="checkbox.css">
10 |     <style>
11 |       * {
12 |         margin: 0;
13 |         padding: 0;
14 |       }
15 |       html, body {
16 |         background: #233127;
17 |         height: 100%;
18 |         font-family: 'Roboto', sans-serif;
19 |       }
20 |       #container {
21 |         display: flex;
22 |         height: 100%;
23 |         flex-direction: column;
24 |         align-items: center;
25 |         justify-content: center;
26 |       }
27 |       #container > img {
28 |         margin-bottom: 64px;
29 |       }
30 |       label {
31 |         font-weight: bold;
32 |         cursor: pointer;
33 |         user-select: none;
34 |         font-size: 32px;
35 |       }
36 | 
37 |       .spin {
38 |         animation: 1.2s spin ease-out forwards;
39 |       }
40 |       .spin-reversed {
41 |         animation: 1.2s spin reverse ease-out forwards
42 |       }
43 | 
44 |       @keyframes spin {
45 |         from {
46 |           transform: rotateY(0deg);
47 |         }
48 |         to {
49 |           transform: rotateY(360deg);
50 |         }
51 |       }
52 | 
53 |     </style>
54 |   </head>
55 |   <body>
56 |     <div id="container">
57 |       <img id="flash-on-update-logo" width="200" src="vue-flash-updates.svg" alt="vue-flash-updates-logo">
58 |       <label>
59 |         <input class="cb cb1" id="flash-on-update-checkbox" type="checkbox"/>
60 |         <i></i>
61 |         <span>
62 |           Flash Components on Updates:
63 |         </span> 
64 |       </label>
65 |     </div>
66 |     <script src="panel.js"></script>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/demo/src/components/Todos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>Demo Todo App</h1>
 4 |     <div class="bottom">
 5 |       <div>
 6 |         <input type="text" @input="updateInputTodo" :value="inputTodo" >
 7 |         <button @click="addTodo">Add</button>
 8 |       </div>
 9 |       <div>
10 |         My Todos:
11 |         <ul>
12 |           <li v-for="(todo, i) in todos" :key=i>
13 |             <todo-item :todo="todo" :removeTodo="removeTodo" />
14 |           </li>
15 |         </ul>
16 |       </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 |   import TodoItem from './TodoItem.vue'
23 |   export default {
24 |     name: 'Todo',
25 |     components: {
26 |       TodoItem
27 |     },
28 |     data(){
29 |       return {
30 |         inputTodo: '',
31 |         todos: []
32 |       }
33 |     },
34 |     methods: {
35 |       updateInputTodo(e){
36 |         this.inputTodo = e.target.value
37 |       },
38 |       addTodo(){
39 |         const todo = this.inputTodo
40 |         this.todos.push(todo)
41 |         this.inputTodo = ''
42 |       },
43 |       removeTodo(todo){
44 |         this.todos.splice(this.todos.indexOf(todo), 1)
45 |       }
46 |     }
47 |   }
48 | </script>
49 | 
50 | <!-- Global CSS -->
51 | <style>
52 |   code {
53 |     font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
54 |     font-size: 0.9em;
55 |     white-space: pre-wrap;
56 |     color: #2c3e50;
57 |   }
58 | 
59 |   code::before, code::after {
60 |     content: '`';
61 |   }
62 | </style>
63 | 
64 | <!-- Scoped component css -->
65 | <!-- It only affect current component -->
66 | <style scoped>
67 |   #app {
68 |     text-align: center;
69 |   }
70 | 
71 |   #app h1 {
72 |     color: #2c3e50;
73 |     font-weight: 300;
74 |     margin: 0;
75 |   }
76 | 
77 |   .bottom {
78 |     padding: 80px 10px;
79 |     font-size: 24px;
80 |     font-weight: 300;
81 |   }
82 | 
83 |   .fade {
84 |     font-size: 14px;
85 |   }
86 | 
87 |   .logo {
88 |     animation: spin 4s 1s infinite linear
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/vue-devtools-flash-updates.js:
--------------------------------------------------------------------------------
 1 | // This needs to be a thoughtful class name to avoid collision with users' class names
 2 | const FLASH_CLASS_NAME = 'vue-devtools-flash-updates-flash';
 3 | // This value is set in the local storage by the extension
 4 | const FEATURE_AVAILABILITY_KEY = 'VUE_DEVTOOLS_FLASH_UPDATES_ENABLED'
 5 | 
 6 | const animationCss = `
 7 | /* this might cause an issue depending on situations. needs to be implemented with better solutions.*/
 8 | .${FLASH_CLASS_NAME} {
 9 |   position: relative;
10 | }
11 | .${FLASH_CLASS_NAME}::before {
12 |   animation: 1s ${FLASH_CLASS_NAME} linear forwards;
13 |   box-sizing: border-box;
14 | 
15 |   content: '';
16 |   pointer-events: none;
17 |   position: absolute;
18 |   display: block;
19 |   top: 0;
20 |   left: 0;
21 |   width: 100%;
22 |   height: 100%;
23 | }
24 | 
25 | @keyframes ${FLASH_CLASS_NAME} {
26 |   0% {
27 |     border: 3px solid rgb(55, 175, 169, 1);
28 |   }
29 |   100% {
30 |     border: 3px solid rgba(55, 175, 169, 0);
31 |   }
32 | }
33 | `
34 | 
35 | 
36 | function initialize() {
37 |   const style = document.createElement('style')
38 |   style.innerHTML = animationCss
39 |   document.head.appendChild(style)
40 | }
41 | 
42 | function checkAvailability() {
43 |   const featureAvailabilityValueStr = localStorage.getItem(FEATURE_AVAILABILITY_KEY)
44 |   const enabled = featureAvailabilityValueStr === 'true'
45 |   return enabled
46 | }
47 | 
48 | const DEFAULT_OPTIONS = Object.freeze({
49 |   logUpdatedComponents: false,
50 |   isProduction: false
51 | })
52 | 
53 | function buildOptions(_options) {
54 |   const options = { ...DEFAULT_OPTIONS }
55 |   if (_options != null) {
56 |     const { logUpdatedComponents, isProduction } = _options
57 |     if (logUpdatedComponents) {
58 |       if (typeof logUpdatedComponents !== 'boolean') {
59 |         throw new Error('logUpdatedComponents must be a boolean value')
60 |       }
61 |       options.logUpdatedComponents = logUpdatedComponents
62 |     }
63 |     if (isProduction) {
64 |       if (typeof isProduction !== 'boolean') {
65 |         throw new Error('isProduction must be a boolean value')
66 |       }
67 |       options.isProduction = isProduction
68 |     }
69 |   }
70 |   return options
71 | }
72 | 
73 | function log(content) {
74 |   console.debug(`vue-devtool-flash-updates: detected updates on %c ${content}`, 'color: #D8C909');
75 | }
76 | 
77 | export default {
78 |   install(Vue, _options) {
79 |     const options = buildOptions(_options)
80 |     if (!options.isProduction) {
81 |       initialize()
82 |       Vue.mixin({
83 |         updated: function() {
84 |           if(!checkAvailability()) return
85 |           if (options.logUpdatedComponents) {
86 |             log(this.$options.name)
87 |           }
88 |           if (this.$el.classList) {
89 |             if (this.$el.classList.contains(FLASH_CLASS_NAME)) {
90 |               this.$el.classList.remove(FLASH_CLASS_NAME)
91 |             }
92 |             void this.$el.offsetWidth
93 |             this.$el.classList.add(FLASH_CLASS_NAME)
94 |           }
95 |         },
96 |       })
97 |     }
98 |   }
99 | }


--------------------------------------------------------------------------------
/translations/README.ch.md:
--------------------------------------------------------------------------------
  1 | # vue-devtool-flash-updates
  2 | 
  3 | <p align="center">
  4 |   <img src="../misc/vue-flash-updates.png">
  5 | </p>
  6 | 
  7 | [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
  8 | [![package size](https://img.shields.io/bundlephobia/min/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/bundlephobia/min/vue-devtool-flash-updates?style=flat-square)
  9 | [![downloads](https://img.shields.io/npm/dw/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/npm/dw/vue-devtool-flash-updates?style=flat-square)
 10 | [![release](https://img.shields.io/github/v/release/yuichkun/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/github/v/release/yuichkun/vue-devtool-flash-updates?style=flat-square)
 11 | [![chrome web store](https://img.shields.io/chrome-web-store/users/fhoioahocakkbcghinblimnenhdnhmnj?style=flat-square)](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj)
 12 | 
 13 | ---
 14 | 
 15 | 🇬🇧 [English Version](../README.md)  
 16 | 🇨🇳 中文版 👈  
 17 | 🇯🇵 [日本語版](./README.ja.md)
 18 | 
 19 | ---
 20 | 
 21 | > 一个方便的工具，可以突出显示重新渲染的组件！
 22 | 
 23 | 这个插件使Vue项目能够通过突出显示重新渲染的组件来快速发现性能问题，就像[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)所做的那样。
 24 | 
 25 | ## 目录
 26 | 
 27 | - [现场演示🔥](#现场演示🔥)
 28 | - [安装](#安装)
 29 | - [用法](#用法)
 30 | - [可用的选项](#可用的选项)
 31 | - [捐赠者](#捐赠者)
 32 | - [贡献方法](#贡献方法)
 33 | - [许可证](#许可证)
 34 | 
 35 | ## 现场演示🔥
 36 | 
 37 | *想快速看到它的性能吗？*  
 38 | 
 39 | 下面是一个启用了插件的繁琐的模拟todo app。
 40 | 
 41 | <p align="center">
 42 |   <img src="../misc/live-demo-screenshot.gif">
 43 | </p>
 44 | 
 45 | 1. [在此](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj)下载Chrome扩展程序。
 46 | 1. [在此](https://vue-devtool-flash-updates-demo-yuichkun.vercel.app/)访问演示网站。
 47 | 1. 在devtool面板上，选择 "Vue Flash Updates "选项卡，并启用能力!⚡️⚡️
 48 | 
 49 | 你也会看到更新后的组件名称被打印在控制台中!
 50 | 
 51 | ## 安装
 52 | 
 53 | ```bash
 54 | npm install -D vue-devtool-flash-updates
 55 | ```
 56 | 
 57 | 或者
 58 | 
 59 | ```bash
 60 | yarn add -D vue-devtool-flash-updates
 61 | ```
 62 | 
 63 | ## 用法
 64 | 
 65 | 1. [从Chrome Web Store下载扩展](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj).
 66 | 2. 安装软件包并在所需的项目中设置该插件。
 67 | 
 68 | ```js
 69 | import FlashUpdates from 'vue-devtool-flash-updates'
 70 | 
 71 | Vue.use(FlashUpdates)
 72 | ```
 73 | 
 74 | 3. 打开Chrome Developer Tools，启用该插件。
 75 | 
 76 | ![screen shot of devtool](../misc/screenshot-dev-window.gif)
 77 | 
 78 | **就是这么简单的 🔥**
 79 | 
 80 | <br />
 81 | 
 82 | ---
 83 | 
 84 | 对了，
 85 | 如果你喜欢这个插件，在[GitHub](https://github.com/yuichkun/vue-devtool-flash-updates)上给这个repo加星，**真的**会提高我继续改进它的动力💪
 86 | 
 87 | ---
 88 | 
 89 | <br />
 90 | 
 91 | ## 可用的选项
 92 | 
 93 | 名称 | 类型 | 默认值 | 描述
 94 | --- | --- | --- | ---
 95 | `logUpdatedComponents` | 布尔值 | `false` | `true`的时候, 在控制台中以*debug*级别打印更新的组件名称。
 96 | `isProduction` | 布尔值 | `false` | `true`的时候, 停止插件.
 97 | 
 98 | **窍门⚡️**:  
 99 |  为了防止随机用户在production网站上使用该插件，建议你为`isProduction`选项传递一个布尔值。  
100 |  推荐的方法是将 `process.env.NODE_ENV === 'production'`传递给插件，并让模块捆绑器如webpack来转换环境变量。
101 | 
102 | ```javascript
103 | import FlashPlugin from 'vue-devtool-flash-updates'
104 | Vue.use(FlashPlugin, {
105 |   isProduction: process.env.NODE_ENV === 'production' // 该插件在production环境中停止，在其他环境中动作。
106 | })
107 | ```
108 | 
109 | ## 捐赠者
110 | 
111 | 如果你发现任何错误或有任何建议，请提交一个issue[这里](https://github.com/yuichkun/vue-devtool-flash-updates/issues/new?assignees=&labels=&template=bug_report.md&title=)
112 | 
113 | [@yuichkun](https://github.com/yuichkun)
114 | 
115 | ## Contributing
116 | 
117 | 看到 [the contributing file](../CONTRIBUTING.md)!
118 | 
119 | 欢迎大家的PRs😎!
120 | 
121 | 小提示：如果编辑README，请符合[standard-readme](https://github.com/RichardLitt/standard-readme)的规范。
122 | 
123 | ## 许可证
124 | 
125 | MIT © 2021 Yuichi Yogo
126 | 


--------------------------------------------------------------------------------
/translations/README.ja.md:
--------------------------------------------------------------------------------
  1 | # vue-devtool-flash-updates
  2 | 
  3 | <p align="center">
  4 |   <img src="../misc/vue-flash-updates.png">
  5 | </p>
  6 | 
  7 | [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
  8 | [![package size](https://img.shields.io/bundlephobia/min/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/bundlephobia/min/vue-devtool-flash-updates?style=flat-square)
  9 | [![downloads](https://img.shields.io/npm/dw/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/npm/dw/vue-devtool-flash-updates?style=flat-square)
 10 | [![release](https://img.shields.io/github/v/release/yuichkun/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/github/v/release/yuichkun/vue-devtool-flash-updates?style=flat-square)
 11 | [![chrome web store](https://img.shields.io/chrome-web-store/users/fhoioahocakkbcghinblimnenhdnhmnj?style=flat-square)](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj)
 12 | 
 13 | ---
 14 | 🇬🇧 [English Version](../README.md)  
 15 | 🇨🇳 [中文版](./README.ch.md)  
 16 | 🇯🇵 日本語版 👈
 17 | 
 18 | ---
 19 | 
 20 | > 再描画の走ったVueコンポーネントをハイライトしてくれる画期的な開発ツール！
 21 | 
 22 | このプラグインをVueプロジェクトに導入すれば、[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)のように、再描画の走ったコンポーネントをハイライトできるようになります。
 23 | 
 24 | ## 目次
 25 | 
 26 | - [Live Demo🔥](#live-demo🔥)
 27 | - [Install](#install)
 28 | - [Usage](#usage)
 29 | - [Available Options](#available-options)
 30 | - [Maintainers](#maintainers)
 31 | - [Contributing](#contributing)
 32 | - [License](#license)
 33 | 
 34 | ## Live Demo🔥
 35 | 
 36 | *いいから早く見せろって?*  
 37 | 
 38 | 簡単なTodoアプリをデモで作りました:
 39 | 
 40 | <p align="center">
 41 |   <img src="../misc/live-demo-screenshot.gif">
 42 | </p>
 43 | 
 44 | 1. [こちら](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj)からChromeの拡張プラグインをインストールしてください。
 45 | 1. [こちら](https://vue-devtool-flash-updates-demo-yuichkun.vercel.app/)のデモサイトをクリック。
 46 | 1. 開発者ツールから `Vue Flash Updates`のタブを開いて、機能を有効化しましょう! ⚡️⚡️
 47 | 
 48 | 再描画の走ったコンポーネントの名前も、コンソールにデバッグレベルで出力されます。
 49 | 
 50 | ## Install
 51 | 
 52 | ```bash
 53 | npm install -D vue-devtool-flash-updates
 54 | ```
 55 | 
 56 | あるいは
 57 | 
 58 | ```bash
 59 | yarn add -D vue-devtool-flash-updates
 60 | ```
 61 | 
 62 | ## 使い方
 63 | 
 64 | 1. [Chromeストアから拡張機能をダウンロード](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj).
 65 | 2. 使いたいプロジェクトでnpmパッケージをインストールし、下記のようにセットアップします。
 66 | 
 67 | ```js
 68 | import FlashUpdates from 'vue-devtool-flash-updates'
 69 | 
 70 | Vue.use(FlashUpdates)
 71 | ```
 72 | 
 73 | 3. 開発者ツールを開き、プラグインを有効化します。
 74 | 
 75 | ![screen shot of devtool](../misc/screenshot-dev-window.gif)
 76 | 
 77 | **ね、簡単でしょう？ 🔥**
 78 | 
 79 | <br />
 80 | 
 81 | ---
 82 | 
 83 | ところで、  
 84 | もしこのリポジトリを少しでもいいと思ってくれた方は、[GitHub](https://github.com/yuichkun/vue-devtool-flash-updates)上でスターを押してくれるともっと頑張ろうと励まされるのでよかったら是非お願いします 💪
 85 | 
 86 | ---
 87 | 
 88 | <br />
 89 | 
 90 | ## 使用可能なオプション
 91 | 
 92 | 名前 | 型 | デフォルト値 | 説明
 93 | --- | --- | --- | ---
 94 | `logUpdatedComponents` | Boolean | `false` | `true`の時, 再描画の走ったコンポーネントの名前を*debug*レベルでコンソールに出力します。
 95 | `isProduction` | Boolean | `false` | `true`の時, プラグインを無効化します。
 96 | 
 97 | **コツ⚡️**:  
 98 | 本番環境でこのプラグインが使えることは望ましくないので、`isProduction` オプションに真偽値を渡してコントロールしてください。オススメの方法は、`process.env.NODE_ENV === 'production'` と渡しておいて、webpackなどでのバンドル時に環境に応じてプラグインを無効化することです。
 99 | 
100 | ```javascript
101 | import FlashPlugin from 'vue-devtool-flash-updates'
102 | Vue.use(FlashPlugin, {
103 |   isProduction: process.env.NODE_ENV === 'production' // 本番環境では無効になり、それ以外では有効になる
104 | })
105 | ```
106 | 
107 | ## Maintainers
108 | 
109 | もしも何かバグを見つけたり提案がある場合は、[こちら](https://github.com/yuichkun/vue-devtool-flash-updates/issues/new?assignees=&labels=&template=bug_report.md&title=)からお願いします。
110 | 
111 | [@yuichkun](https://github.com/yuichkun)
112 | 
113 | ## Contributing
114 | 
115 | [the contributing file](../CONTRIBUTING.md)をご確認ください!
116 | 
117 | PRはいつでも大歓迎です 😎!
118 | 
119 | READMEをいじる場合は、[standard-readme](https://github.com/RichardLitt/standard-readme)仕様に準拠をお願いします。
120 | 
121 | ## License
122 | 
123 | MIT © 2021 Yuichi Yogo
124 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-devtool-flash-updates
  2 | 
  3 | <p align="center">
  4 |   <img src="./misc/vue-flash-updates.png">
  5 | </p>
  6 | 
  7 | [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
  8 | [![package size](https://img.shields.io/bundlephobia/min/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/bundlephobia/min/vue-devtool-flash-updates?style=flat-square)
  9 | [![downloads](https://img.shields.io/npm/dw/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/npm/dw/vue-devtool-flash-updates?style=flat-square)
 10 | [![release](https://img.shields.io/github/v/release/yuichkun/vue-devtool-flash-updates?style=flat-square)](https://img.shields.io/github/v/release/yuichkun/vue-devtool-flash-updates?style=flat-square)
 11 | [![chrome web store](https://img.shields.io/chrome-web-store/users/fhoioahocakkbcghinblimnenhdnhmnj?style=flat-square)](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj)
 12 | 
 13 | ---
 14 | 🇬🇧 English Version 👈   
 15 | 🇨🇳 [中文版](./translations/README.ch.md)  
 16 | 🇯🇵 [日本語版](./translations/README.ja.md)
 17 | 
 18 | ---
 19 | 
 20 | > A handy devtool that enables highlighting re-rendered components!
 21 | 
 22 | This plugin enables Vue projects to quickly identify performance issues by highlighting re-rendered components, just like how [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) does it.
 23 | 
 24 | ## Table of Contents
 25 | 
 26 | - [Live Demo🔥](#live-demo🔥)
 27 | - [Install](#install)
 28 | - [Usage](#usage)
 29 | - [Available Options](#available-options)
 30 | - [Maintainers](#maintainers)
 31 | - [Contributing](#contributing)
 32 | - [License](#license)
 33 | 
 34 | ## Live Demo🔥
 35 | 
 36 | *Wanna quickly see it in action?*  
 37 | 
 38 | Here's a tedious demo todo app with the plugin enabled:
 39 | 
 40 | <p align="center">
 41 |   <img src="./misc/live-demo-screenshot.gif">
 42 | </p>
 43 | 
 44 | 1. Download the Chrome extension [here](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj).
 45 | 1. Visit the demo site [here](https://vue-devtool-flash-updates-demo-yuichkun.vercel.app/).
 46 | 1. From the devtool panel, select the `Vue Flash Updates` tab and enable the power! ⚡️⚡️
 47 | 
 48 | You will see the updated components' names logged in the console as well!
 49 | 
 50 | ## Install
 51 | 
 52 | ```bash
 53 | npm install -D vue-devtool-flash-updates
 54 | ```
 55 | 
 56 | or
 57 | 
 58 | ```bash
 59 | yarn add -D vue-devtool-flash-updates
 60 | ```
 61 | 
 62 | ## Usage
 63 | 
 64 | 1. [Download the extension from the Chrome Web Store](https://chrome.google.com/webstore/detail/vue-devtool-flash-updates/fhoioahocakkbcghinblimnenhdnhmnj).
 65 | 2. Install the package and setup the plugin in your desired project.
 66 | 
 67 | ```js
 68 | import FlashUpdates from 'vue-devtool-flash-updates'
 69 | 
 70 | Vue.use(FlashUpdates)
 71 | ```
 72 | 
 73 | 3. Open the Chrome Dev Tools and enable the plugin.
 74 | 
 75 | ![screen shot of devtool](./misc/screenshot-dev-window.gif)
 76 | 
 77 | **It's that easy! 🔥**
 78 | 
 79 | <br />
 80 | 
 81 | ---
 82 | 
 83 | By the way,  
 84 | If you like the plugin, star-ing this repo on [GitHub](https://github.com/yuichkun/vue-devtool-flash-updates) really **DOES** boost my motivation to keep improving it 💪
 85 | 
 86 | ---
 87 | 
 88 | <br />
 89 | 
 90 | ## Available Options
 91 | 
 92 | Name | Type | Default | Description
 93 | --- | --- | --- | ---
 94 | `logUpdatedComponents` | Boolean | `false` | When `true`, log the updated components' names in the console with *debug* level.
 95 | `isProduction` | Boolean | `false` | When `true`, disable the plugin.
 96 | 
 97 | **Tips⚡️**:  
 98 |  In order to prevent random users from using the plugin on production sites, you're encouraged to pass a boolean value to the `isProduction` option. Recommended way of doing so is by passing `process.env.NODE_ENV === 'production'` to the plugin, and let module bundlers like webpack to transform the environment variable.
 99 | 
100 | ```javascript
101 | import FlashPlugin from 'vue-devtool-flash-updates'
102 | Vue.use(FlashPlugin, {
103 |   isProduction: process.env.NODE_ENV === 'production' // The plugin is disabled on production, enabled on other environments
104 | })
105 | ```
106 | 
107 | ## Maintainers
108 | 
109 | Should you find any bugs or have any suggestions, please submit an issue [here](https://github.com/yuichkun/vue-devtool-flash-updates/issues/new?assignees=&labels=&template=bug_report.md&title=)
110 | 
111 | [@yuichkun](https://github.com/yuichkun)
112 | 
113 | ## Contributing
114 | 
115 | See [the contributing file](CONTRIBUTING.md)!
116 | 
117 | PRs are more than welcome 😎!
118 | 
119 | Small note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
120 | 
121 | ## License
122 | 
123 | MIT © 2021 Yuichi Yogo
124 | 


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