Fix extension no longer working after latest release (#93)

* Add svg attributes that broke built

* Fix webpack issue

* version bump

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change Log
 
+## v2.0.3 (Apr. 29, 2021)
+* [#93](https://github.com/Shopify/shopify-theme-inspector/pull/93) Fix extension due to broken minification
+
 ## v2.0.2 (Apr. 26, 2021)
 * [#87](https://github.com/Shopify/shopify-theme-inspector/pull/87) Security update packages
 

package.json

@@ -35,26 +35,30 @@
     "d3": "^5.16.0",
     "d3-flame-graph": "^2.2.2",
     "jsdom": "^15.2.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.escape": "^4.0.1",
     "nullthrows": "^1.1.1",
     "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.91",
     "@types/jest": "^24.9.1",
     "@types/jest-environment-puppeteer": "^4.4.1",
-    "@types/lodash": "^4.14.168",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.escape": "^4.0.6",
     "@types/puppeteer": "^1.20.7",
     "clean-webpack-plugin": "^3.0.0",
+    "closure-webpack-plugin": "^2.5.0",
     "css-loader": "^3.6.0",
     "eslint": "^6.8.0",
     "eslint-plugin-shopify": "^30.0.1",
+    "google-closure-compiler": "^20210406.0.0",
     "html-webpack-inline-svg-plugin": "^2.3.0",
     "html-webpack-plugin": "^5.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-fetch-mock": "^2.1.2",
     "jest-puppeteer": "^5.0.2",
-    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^1.5.0",
     "prettier": "^1.19.1",
     "puppeteer": "^9.0.0",

src/components/liquid-flamegraph.ts

@@ -1,7 +1,8 @@
 import * as d3 from 'd3';
 import * as flamegraph from 'd3-flame-graph';
 import 'd3-flame-graph/dist/d3-flamegraph.css';
-import {debounce, escape} from 'lodash';
+import debounce from 'lodash.debounce';
+import escape from 'lodash.escape';
 import {
   formatNodeTime,
   getThemeId,

src/devtools.ts

@@ -1,4 +1,4 @@
-import {escape} from 'lodash';
+import escape from 'lodash.escape';
 import {RenderBackend} from './env';
 import Toolbar from './components/toolbar';
 import LiquidFlamegraph from './components/liquid-flamegraph';

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Shopify Theme Inspector for Chrome",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Profile and debug Liquid template on your Shopify store",
   "devtools_page": "devtools.html",
   "permissions": ["storage", "identity", "activeTab"],

webpack.common.js

@@ -11,7 +11,7 @@ module.exports = {
     fallback: {
       "stream": require.resolve("stream-browserify"),
       "crypto": require.resolve('crypto-browserify'),
-      "buffer": require.resolve("buffer/")
+      "buffer": require.resolve("buffer")
     }
   },
   entry: {

webpack.prod.js

@@ -1,6 +1,12 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
+const ClosurePlugin = require('closure-webpack-plugin');
 
 module.exports = merge(common, {
   mode: 'production',
+  optimization: {
+    minimizer: [
+      new ClosurePlugin({mode: 'STANDARD'})
+    ]
+  }
 });