Mangle (#312)

* user terser for compression
* load new min bundle in extension
* fixes state leak
* use module
* fixes leaky ref

Author: argyleink

.gitignore

@@ -1,8 +1,9 @@
 .DS_Store
 node_modules/
 app/bundle.js
+app/bundle.min.js
 app/bundle.css
-extension/toolbar/bundle.js
+extension/toolbar/bundle.min.js
 extension/toolbar/bundle.css
 extension/build
 extension/tuts

app/features/color.js

@@ -2,6 +2,11 @@ import $ from 'blingblingjs'
 import { TinyColor } from '@ctrl/tinycolor'
 import { getStyle } from '../utilities/'
 
+const state = {
+  active_color: 'background',
+  elements: [],
+}
+
 export function ColorPicker(pallete, selectorEngine) {
   const foregroundPicker  = $('#foreground', pallete)
   const backgroundPicker  = $('#background', pallete)

app/features/selectable.js

@@ -600,12 +600,11 @@ export function Selectable(visbug) {
 
       $(label).on('query', ({detail}) => {
         if (!detail.text) return
-        this.query_text = detail.text
 
         queryPage('[data-pseudo-select]', el =>
           el.removeAttribute('data-pseudo-select'))
 
-        queryPage(this.query_text + ':not([data-selected])', el =>
+        queryPage(detail.text + ':not([data-selected])', el =>
           detail.activator === 'mouseenter'
             ? el.setAttribute('data-pseudo-select', true)
             : select(el))

app/index.html

@@ -744,6 +744,6 @@ <h2 style="font-size: 3rem; color: green; text-shadow: 0 2px 4px red; font-weigh
 
     </main>
 
-    <script src="bundle.js" defer></script>
+    <script src="bundle.js" type="module" defer></script>
   </body>
 </html>

extension/visbug.js

@@ -22,7 +22,7 @@ const toggleIn = ({id:tab_id}) => {
   else {
     chrome.tabs.insertCSS(tab_id,     { file: 'toolbar/bundle.css' })
     chrome.tabs.executeScript(tab_id, { file: 'web-components.polyfill.js' })
-    chrome.tabs.executeScript(tab_id, { file: 'toolbar/bundle.js' })
+    chrome.tabs.executeScript(tab_id, { file: 'toolbar/bundle.min.js' })
     chrome.tabs.executeScript(tab_id, { file: 'toolbar/inject.js' })
 
     state.loaded[tab_id]    = true