feat: Update Webpack and use Vue 2 SFC

package.json

@@ -61,7 +61,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.6.1",
     "eslint-plugin-react-hooks": "4.1.2",
-    "jest": "26.0.1",
+    "jest": "29.7.0",
     "npm-run-all": "^4.0.2",
     "prettier": "^1.19.1"
   },

packages/frontend/package.json

@@ -18,7 +18,7 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-date-fns": "1",
     "babel-plugin-lodash": "3.3.4",
-    "copy-webpack-plugin": "4.6.0",
+    "copy-webpack-plugin": "12.0.2",
     "cors": "^2.8.4",
     "css-loader": "1.0.1",
     "d3": "^3.5.6",
@@ -30,7 +30,7 @@
     "filesize": "^3.6.0",
     "fs-extra": "^5.0.0",
     "html-loader": "0.5.5",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.6.3",
     "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.17.19",
     "mini-css-extract-plugin": "^0.4.4",
@@ -46,10 +46,10 @@
     "vue-router": "2",
     "vue-template-compiler": "2.6.12",
     "vue-template-loader": "1.1.0",
-    "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "3.9.0",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.11.0"
+    "webpack": "^5.97.1",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
   },
   "devDependencies": {
     "@babel/core": "*",
@@ -60,11 +60,12 @@
     "babel-preset-vue": "^2.0.2",
     "browser-sync": "^2.7.2",
     "browserify": "^10.2.1",
+    "chromatic": "6.10.1",
     "connect-modrewrite": "^0.8.2",
     "debug": "^3.1.0",
     "npm-run-all": "^4.0.2",
     "regenerator-runtime": "^0.12.1",
-    "chromatic": "6.10.1"
+    "vue-loader": "15.11.1"
   },
   "prettier": {
     "trailingComma": "all",

packages/frontend/src/graph/graph.stories.js

@@ -4,7 +4,7 @@ import { processPackagesStats } from 'frontend/src/utils/processPackagesStats';
 import standardizeNpmPackageResponse from 'utils/stats/standardizeNpmPackageResponse';
 import dummyData from 'utils/dummyData';
 
-import graph from './graph.js';
+import graph from './graph.vue';
 
 const makeGraph = data => ({
   components: { graph },

packages/frontend/src/graph/graph.js → packages/frontend/src/graph/graph.vue

@@ -1,13 +1,32 @@
+<template>
+  <div ref="chart" id="chart" class="with-3d-shadow with-transitions">
+    <graphLegend
+      v-if="packageDownloadStats.length && legendData"
+      :modules="legendData.modules"
+      :interval="interval"
+      :date="legendData.date"
+      @package-focus="handlePackageFocus"
+      @package-blur="handlePackageBlur"
+      @legend-blur="handleLegendBlur"
+      @legend-focus="handleLegendFocus"
+    >
+    </graphLegend>
+    <svg></svg>
+  </div>
+</template>
+
+<script>
 import d3 from 'd3';
 import nv from 'nvd3';
 import _ from 'lodash';
 import { format as formatDate, startOfDay } from 'date-fns';
 import { line, curveCatmullRom } from 'd3-shape';
-import withRender from './graph.html';
 import { lineChart, xAccessor } from './chart/lineChart';
 
 const { palette } = require('configs');
 
+import GraphLegend from "./legend/legend.vue";
+
 // this can't go in the data of the component, observing it changes it.
 let svg;
 const formatLogTick = function(n) {
@@ -59,7 +78,7 @@ const processEntriesMemo = _.memoize(processEntries, (...args) => {
   return JSON.stringify(args);
 });
 
-export default withRender({
+export default {
   props: {
     isMinimalMode: {
       type: Boolean,
@@ -274,6 +293,7 @@ export default withRender({
     },
   },
   components: {
-    graphLegend: require('./legend/legend').default,
+    GraphLegend,
   },
-});
+};
+</script>

packages/frontend/src/graph/legend/legend.stories.js

@@ -3,7 +3,7 @@
 import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
 
-import legend from './legend.js';
+import legend from './legend.vue';
 
 const makeLegend = data => ({
   components: { graphLegend: legend },

packages/frontend/src/graph/legend/legend.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="legend">
+    <div class="date" v-if="interval > 1">
+      {{ formatInterval(date) }}
+    </div>
+    <div class="date" v-else>
+      {{ date | formatDate('dddd MMMM Do, YYYY') }}
+    </div>
+    <table class="modules">
+      <tbody
+        @mouseover="handleMouseEnterLegend()"
+        @mouseleave="handleMouseLeaveLegend()"
+      >
+        <tr
+          class="module"
+          v-for="module in sortedModules"
+          track-by="name"
+          :style="{ color: module.color }"
+          @mouseover="handleMouseEnterPackage(module.name)"
+          @mouseleave="handleMouseLeavePackage(module.name)"
+        >
+          <td class="actions">
+            <button
+              class="remove-entry-button"
+              @click="removePackageByName(module.name)"
+              :title="`remove '${module.name}' from comparison`"
+            >
+              <div
+                class="nub"
+                :style="{ '--module-color': module.color }"
+              ></div>
+            </button>
+          </td>
+          <td class="name-wrapper">
+            <div class="name">
+              {{ module.name }}
+            </div>
+          </td>
+          <td class="downloads" style="min-width: 4.5em;">
+            {{ module.downloads.toLocaleString() }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import {
+  isSameMonth,
+  format as formatDate,
+  addDays,
+  isSameYear,
+} from 'date-fns';
+
+export default {
+  props: {
+    modules: Array,
+    date: Date,
+    interval: Number,
+  },
+  computed: {
+    sortedModules() {
+      return _.orderBy(this.modules, module => module.entries, ['desc']);
+    },
+  },
+  inject: ['removePackage'],
+  methods: {
+    removePackageByName(packageName) {
+      ga('send', 'event', 'legend', 'remove', packageName);
+      this.removePackage(packageName);
+      this.$emit('legend-blur');
+    },
+    handleMouseEnterLegend() {
+      this.$emit('legend-focus');
+    },
+    handleMouseLeaveLegend() {
+      this.$emit('legend-blur');
+    },
+    handleMouseEnterPackage(packageName) {
+      this.$emit('package-focus', packageName);
+    },
+    handleMouseLeavePackage(packageName) {
+      this.$emit('package-blur', packageName);
+    },
+    formatInterval(startOfPeriod) {
+      const endOfPeriod = addDays(startOfPeriod, this.interval - 1);
+      if (isSameMonth(startOfPeriod, endOfPeriod)) {
+        return `${formatDate(startOfPeriod, 'MMMM Do')} - ${formatDate(
+          endOfPeriod,
+          'Do',
+        )}, ${formatDate(startOfPeriod, 'YYYY')}`;
+      } else if (isSameYear(startOfPeriod, endOfPeriod)) {
+        return `${formatDate(startOfPeriod, 'MMMM Do')} - ${formatDate(
+          endOfPeriod,
+          'MMMM Do',
+        )}, ${formatDate(startOfPeriod, 'YYYY')}`;
+      }
+      return `${formatDate(startOfPeriod, 'MMMM Do, YYYY')} - ${formatDate(
+        endOfPeriod,
+        'MMMM Do, YYYY',
+      )}`;
+    },
+  },
+};
+</script>