feat(bundle): reduce bundle size (#73)

.browserslistrc

@@ -0,0 +1,4 @@
+Last 2 Chrome versions
+Last 2 Safari versions
+Last 2 ios versions
+Last 2 Firefox versions

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name @sanofi-iadc/glisten ./src/exports.ts",
+    "report": "vue-cli-service build --target lib --report",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e --headless",
     "lint": "vue-cli-service lint",
@@ -42,16 +43,18 @@
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.1",
     "subscriptions-transport-ws": "^0.9.18",
-    "vue": "^2.6.12",
     "vue-apexcharts": "^1.6.0",
     "vue-apollo": "^3.0.7",
     "vue-apollo-decorators": "^2.0.0",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.0.0",
-    "vuetify": "^2.4.6",
     "wink-sentiment": "^5.0.2",
     "zod": "^2.0.0-beta.30"
   },
+  "peerDependencies": {
+    "vuetify": "^2.4.6",
+    "vue": "^2.6.12"
+  },
   "devDependencies": {
     "@mdi/font": "5.9.55",
     "@semantic-release/changelog": "^5.0.1",
@@ -94,21 +97,19 @@
     "semantic-release": "^17.4.2",
     "ts-jest": "23.10.5",
     "typescript": "3.9.9",
+    "vue": "^2.6.12",
     "vue-cli-plugin-apollo": "0.22.2",
     "vue-cli-plugin-vuetify": "0.6.3",
     "vue-template-compiler": "2.6.12",
     "vuepress": "1.8.2",
-    "vuetify-loader": "1.7.2"
+    "vuetify": "^2.4.6",
+    "webpack-node-externals": "^3.0.0"
   },
   "postcss": {
     "plugins": {
       "autoprefixer": {}
     }
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

src/App.vue

@@ -1,10 +1,6 @@
 <template>
   <v-app>
-    <v-btn
-      color="green"
-      dark
-      @click="sheet = !sheet"
-    >
+    <v-btn color="green" dark @click="sheet = !sheet">
       Add feedback
     </v-btn>
     <dashboard />
@@ -25,12 +21,68 @@ import { Component } from 'vue-property-decorator';
 import Dashboard from './components/GlistenDashboard.vue';
 import GlistenClient from './components/GlistenClient.vue';
 import GlistenCsat from '@/components/GlistenCsat.vue';
+import {
+  VApp,
+  VDataTable,
+  VIcon,
+  VSnackbar,
+  VTooltip,
+  VListItem,
+  VListItemContent,
+  VListItemTitle,
+  VListItemSubtitle,
+  VMenu,
+  VTextarea,
+  VCheckbox,
+  VChip,
+  VBtn,
+  VDatePicker,
+  VBottomSheet,
+  VSheet,
+  VRating,
+  VSelect,
+  VRow,
+  VCol,
+  VContainer,
+  VSwitch,
+  VTextField,
+  VCard,
+} from 'vuetify/lib';
 
 /**
  * App component entry default
  */
 @Component({
-  components: { Dashboard, GlistenClient, GlistenCsat },
+  components: {
+    Dashboard,
+    GlistenClient,
+    GlistenCsat,
+    VApp,
+    VDataTable,
+    VIcon,
+    VSnackbar,
+    VTooltip,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VMenu,
+    VTextarea,
+    VCheckbox,
+    VChip,
+    VBtn,
+    VDatePicker,
+    VBottomSheet,
+    VSheet,
+    VRating,
+    VSelect,
+    VRow,
+    VCol,
+    VContainer,
+    VSwitch,
+    VTextField,
+    VCard,
+  },
 })
 export default class App extends Vue {
   public applicationID = 'GLISTEN';

src/components/CsatScoreCard.vue

@@ -13,8 +13,13 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { mean } from 'lodash';
+import { VIcon } from 'vuetify/lib';
 
-@Component
+@Component({
+  components: {
+    VIcon,
+  },
+})
 export default class CsatScoreCard extends Vue {
   @Prop({ required: true }) public ratings!: number[];
 

src/components/FeedbackList.vue

@@ -127,8 +127,37 @@ import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
 import { IFeedback, FeedbackStatus } from '@/types/whisps';
 import { DataTableHeader } from 'vuetify';
 import { isPromoter, isNeutral, isDetractor } from '@/services/nps.service';
+import {
+  VDataTable,
+  VIcon,
+  VSnackbar,
+  VTooltip,
+  VListItem,
+  VListItemContent,
+  VListItemTitle,
+  VListItemSubtitle,
+  VMenu,
+  VTextarea,
+  VCheckbox,
+  VChip,
+} from 'vuetify/lib';
 
-@Component
+@Component({
+  components: {
+    VDataTable,
+    VIcon,
+    VSnackbar,
+    VTooltip,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VMenu,
+    VTextarea,
+    VCheckbox,
+    VChip,
+  },
+})
 export default class FeedbackList extends Vue {
   @Prop({ required: true }) public feedbacks!: IFeedback[];
   @Prop({ required: true }) public loading!: boolean;

src/components/Filters.vue

@@ -28,8 +28,16 @@
 <script lang="ts">
 import { Component, Prop, Vue, PropSync } from 'vue-property-decorator';
 import dayjs from 'dayjs';
+import { VMenu, VCheckbox, VBtn, VDatePicker } from 'vuetify/lib';
 
-@Component({})
+@Component({
+  components: {
+    VMenu,
+    VCheckbox,
+    VBtn,
+    VDatePicker,
+  },
+})
 export default class Filters extends Vue {
   @PropSync('startDate', { required: true }) public syncedStartDate!: Date;
   @PropSync('endDate', { required: true }) public syncedEndDate!: Date;

src/components/GlistenClient.vue

@@ -88,11 +88,40 @@ import {
   CreateWhispVariables,
   CreateWhispResult,
 } from '@/graphql/queries/whispQueries';
+import {
+  VIcon,
+  VSnackbar,
+  VTextarea,
+  VBtn,
+  VBottomSheet,
+  VSheet,
+  VRating,
+  VSelect,
+  VRow,
+  VCol,
+  VContainer,
+  VSwitch,
+} from 'vuetify/lib';
 
 /**
  * @description Modal component to submit a feeback to glisten
  */
-@Component
+@Component({
+  components: {
+    VIcon,
+    VSnackbar,
+    VTextarea,
+    VBtn,
+    VBottomSheet,
+    VSheet,
+    VRating,
+    VSelect,
+    VRow,
+    VCol,
+    VContainer,
+    VSwitch,
+  },
+})
 export default class GlistenClient extends Vue {
   // Modal is showed whenever true
   @Prop({ required: true })

src/components/GlistenDashboard.vue

@@ -73,12 +73,22 @@ import dayjs from 'dayjs';
 import { SmartQuery, SubscribeToMore } from 'vue-apollo-decorators';
 import { FeedbackSchema } from '@/types/whisps';
 import * as z from 'zod';
+import { VCard } from 'vuetify/lib';
 
 /**
  * @description All in one dashboard to display and filter feedbacks from glisten
  */
 @Component({
-  components: { FeedbackList, NpsScoreGauge, NpsLineChart, NpsBarChart, NpsDetailsCard, CsatScoreCard, Filters },
+  components: {
+    FeedbackList,
+    NpsScoreGauge,
+    NpsLineChart,
+    NpsBarChart,
+    NpsDetailsCard,
+    CsatScoreCard,
+    Filters,
+    VCard,
+  },
 })
 export default class GlistenDashboard extends Vue {
   private get ratings(): number[] {
@@ -90,14 +100,24 @@ export default class GlistenDashboard extends Vue {
   }
 
   private endDate: Date = new Date();
-  private startDate: Date = dayjs(this.endDate).subtract(2, 'month').toDate();
+  private startDate: Date = dayjs(this.endDate)
+    .subtract(2, 'month')
+    .toDate();
+
   private filteredApplications: string[] = [];
 
   private _availableApplications: string[] = [];
+
+  private hasMounted: boolean = false;
+
+  mounted() {
+    this.hasMounted = true;
+  }
+
   private get availableApplications(): string[] {
     const newAvailableApplications = chain(this.feedbacks)
       .map((x) => x.applicationID)
-      .filter((x) : x is string => !!x)
+      .filter((x): x is string => !!x)
       .concat(this._availableApplications ?? [])
       .uniq()
       .sort()
@@ -108,17 +128,29 @@ export default class GlistenDashboard extends Vue {
     return newAvailableApplications;
   }
 
-  private get loading(): boolean {
-    return this.$apollo.loading;
+  get loading(): boolean {
+    if (this.hasMounted) {
+      return this.$apollo.loading;
+    }
+    return true;
   }
 
   private get queryFilter(): Partial<IFeedback> {
     let filter: any = { type: WHISP_FEEDBACK_TYPE };
 
     if (this.startDate && this.endDate) {
-      const startOfDay = (date: Date) => dayjs(date).startOf('day').toDate();
-      const endOfDay = (date: Date) => dayjs(date).endOf('day').toDate();
-      filter = { ...filter, timestamp: { $gte: startOfDay(this.startDate), $lte: endOfDay(this.endDate) } };
+      const startOfDay = (date: Date) =>
+        dayjs(date)
+          .startOf('day')
+          .toDate();
+      const endOfDay = (date: Date) =>
+        dayjs(date)
+          .endOf('day')
+          .toDate();
+      filter = {
+        ...filter,
+        timestamp: { $gte: startOfDay(this.startDate), $lte: endOfDay(this.endDate) },
+      };
     }
 
     if (this.filteredApplications.length > 0) {
@@ -134,7 +166,9 @@ export default class GlistenDashboard extends Vue {
 
   @SmartQuery<GlistenDashboard, IFeedback[], FeedbackQueryVariables, FeedbackQueryResult>({
     query: GET_FEEDBACKS,
-    update(data) { return z.array(FeedbackSchema).parse(data.feedbacks); }, // validates data and trim extra properties
+    update(data) {
+      return z.array(FeedbackSchema).parse(data.feedbacks);
+    }, // validates data and trim extra properties
     variables() {
       return {
         filter: this.queryFilter,
@@ -144,7 +178,12 @@ export default class GlistenDashboard extends Vue {
     },
     client: WHISP_GQL_CLIENT,
   })
-  @SubscribeToMore<GlistenDashboard, FeedbackQueryResult, FeedbackSubscriptionVariables, FeedbackSubcriptionResult>({
+  @SubscribeToMore<
+    GlistenDashboard,
+    FeedbackQueryResult,
+    FeedbackSubscriptionVariables,
+    FeedbackSubcriptionResult
+  >({
     document: SUBCRIPTION_FEEDBACKS,
     variables() {
       return {

src/components/NpsBarChart.vue

@@ -27,7 +27,11 @@ export interface TimedRating {
   timestamp: string;
 }
 
-@Component({ components: { apexchart: VueApexCharts } })
+@Component({
+  components: {
+    apexchart: VueApexCharts,
+  },
+})
 export default class NpsBarChart extends Vue {
   @Prop({ required: true }) public timedRatings!: TimedRating[];
   @Prop({ required: true }) public timePeriod!: UnitTypeShort;

src/components/NpsDetailsCard.vue

@@ -16,7 +16,11 @@ import { isPromoter, isDetractor, isNeutral } from '@/services/nps.service';
 import VueApexCharts from 'vue-apexcharts';
 import { ApexOptions } from 'apexcharts';
 
-@Component({ components: { apexchart: VueApexCharts } })
+@Component({
+  components: {
+    apexchart: VueApexCharts,
+  },
+})
 export default class NpsDetailsCard extends Vue {
   @Prop({ required: true }) public ratings!: number[];