Remove vuetify-loader.

.github/workflows/frontendlint.yml

@@ -14,7 +14,7 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.vue", "**.js", "yarn.lock"]'
+          paths: '["**.vue", "**.js", "yarn.lock", ".github/workflows/frontendlint.yml"]'
   test:
     name: Frontend linting
     needs: pre_job
@@ -38,7 +38,7 @@ jobs:
         yarn --frozen-lockfile
         npm rebuild node-sass
     - name: Run tests
-      run: yarn run lint-all:fix
+      run: yarn run lint-frontend:format
     - name: Check for modified files
       if: github.event.pull_request && github.event.pull_request.head.repo.full_name == github.repository
       id: git-check

.pre-commit-config.yaml

@@ -20,6 +20,6 @@ repos:
       -   id: frontend-lint
           name: Linting of JS, Vue, SCSS and CSS files
           description: This hook handles all frontend linting for Kolibri Studio
-          entry: yarn run lint --write --pattern
+          entry: yarn run lint-frontend:format
           language: system
           files: \.(js|vue|scss|less|css)$

README.md

@@ -214,13 +214,13 @@ will open the browser with an interactive diagram with all the profiling informa
 Front-end linting is run using:
 
 ```bash
-yarn run lint-all
+yarn run lint-frontend
 ```
 
 Some linting errors can be fixed automatically by running:
 
 ```bash
-yarn run lint-all:fix
+yarn run lint-frontend:format
 ```
 
 Make sure you've set up pre-commit hooks as described above. This will ensure that linting is automatically run on staged changes before every commit.

contentcuration/contentcuration/frontend/shared/app.js

@@ -1,7 +1,106 @@
 import 'regenerator-runtime/runtime';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Vuetify from 'vuetify';
+import Vuetify, {
+  // To generate this list of Vuetify components used in the Studio code base,
+  // we can use some shell commands to look through all the components and extract
+  // ones that are prefixed with 'V' - due to our component naming conventions
+  // enforced by linting, this should capture all of them. The only possible issue might
+  // be if we have imported a component from somewhere other than vuetify that prefixes
+  // the component name with a V.
+  // Use this shell command to regenerate this list:
+  // egrep -o "<(V[A-Z][a-zA-Z]+)" -r -h --include "*.vue" . | egrep -o "V[a-zA-Z]+" | sort | uniq
+  // This first greps all files ending in .vue for text starting with <V then
+  // an uppercase letter and then any other letters.
+  // This is then passed onto another egrep invocation that just looks for
+  // the V and letters to give the component name.
+  // This is then piped to sort and then uniq to give us a unique list of components.
+  VAlert,
+  VApp,
+  VAutocomplete,
+  VBadge,
+  VBreadcrumbs,
+  VBreadcrumbsItem,
+  VBtn,
+  VCard,
+  VCardActions,
+  VCardText,
+  VCardTitle,
+  VCheckbox,
+  VChip,
+  VCombobox,
+  VContainer,
+  VContent,
+  VDataTable,
+  VDatePicker,
+  VDialog,
+  VDivider,
+  VEditDialog,
+  VExpandTransition,
+  VExpandXTransition,
+  VExpansionPanel,
+  VExpansionPanelContent,
+  VFadeTransition,
+  VFlex,
+  VFooter,
+  VForm,
+  VHover,
+  VImg,
+  VInput,
+  VLayout,
+  VList,
+  VListTile,
+  VListTileAction,
+  VListTileContent,
+  VListTileSubTitle,
+  VListTileTitle,
+  VMenu,
+  VNavigationDrawer,
+  VPagination,
+  VProgressCircular,
+  VProgressLinear,
+  VRadio,
+  VRadioGroup,
+  VScaleTransition,
+  VSelect,
+  VSheet,
+  VSlideXReverseTransition,
+  VSlideXTransition,
+  VSlideYTransition,
+  VSnackbar,
+  VSpacer,
+  VSpeedDial,
+  VSubheader,
+  VTab,
+  VTabItem,
+  VTabsItems,
+  VTextarea,
+  VTextField,
+  VToolbar,
+  VToolbarItems,
+  VToolbarSideIcon,
+  VToolbarTitle,
+  VTooltip,
+  VWindow,
+  VWindowItem,
+} from 'vuetify/lib';
+import {
+  // To generate a list of directives that are used, we use a similar bash command, but
+  // are instead looking for directives of the form v- followed by a word.
+  // We have to be a bit more intelligent to know which ones come from Vuetify, as it only has:
+  // ClickOutside
+  // Ripple
+  // Resize
+  // Scroll
+  // Touch
+  // so we are just looking for matches for any of these.
+  /* eslint-disable-next-line */
+  // egrep -o "(v-(resize|ripple|click-outside|scroll|touch))" -r -h --include "*.vue" . | sort | uniq
+  ClickOutside,
+  Ripple,
+  Resize,
+  Scroll,
+} from 'vuetify/lib/directives';
 import VueIntl from 'vue-intl';
 import Croppa from 'vue-croppa';
 import { Workbox, messageSW } from 'workbox-window';
@@ -29,6 +128,85 @@ Vue.use(Croppa);
 Vue.use(VueIntl);
 Vue.use(VueRouter);
 Vue.use(Vuetify, {
+  components: {
+    // Explicitly register used Vuetify components globally
+    // As it appears that the vuetify loader plugin causes memory leaks.
+    VAlert,
+    VApp,
+    VAutocomplete,
+    VBadge,
+    VBreadcrumbs,
+    VBreadcrumbsItem,
+    VBtn,
+    VCard,
+    VCardActions,
+    VCardText,
+    VCardTitle,
+    VCheckbox,
+    VChip,
+    VCombobox,
+    VContainer,
+    VContent,
+    VDataTable,
+    VDatePicker,
+    VDialog,
+    VDivider,
+    VEditDialog,
+    VExpandTransition,
+    VExpandXTransition,
+    VExpansionPanel,
+    VExpansionPanelContent,
+    VFadeTransition,
+    VFlex,
+    VFooter,
+    VForm,
+    VHover,
+    VImg,
+    VInput,
+    VLayout,
+    VList,
+    VListTile,
+    VListTileAction,
+    VListTileContent,
+    VListTileSubTitle,
+    VListTileTitle,
+    VMenu,
+    VNavigationDrawer,
+    VPagination,
+    VProgressCircular,
+    VProgressLinear,
+    VRadio,
+    VRadioGroup,
+    VScaleTransition,
+    VSelect,
+    VSheet,
+    VSlideXReverseTransition,
+    VSlideXTransition,
+    VSlideYTransition,
+    VSnackbar,
+    VSpacer,
+    VSpeedDial,
+    VSubheader,
+    VTab,
+    VTabItem,
+    VTabsItems,
+    VTextarea,
+    VTextField,
+    VToolbar,
+    VToolbarItems,
+    VToolbarSideIcon,
+    VToolbarTitle,
+    VTooltip,
+    VWindow,
+    VWindowItem,
+  },
+  directives: {
+    // Explicitly register used directives.
+    ClickOutside,
+    Ripple,
+    Resize,
+    Scroll,
+  },
   rtl: window.isRTL,
   // Enable css variables (e.g. `var(--v-grey-darken1)`)
   options: {

package.json

@@ -5,11 +5,10 @@
   "description": "Frontend build tools and development utilities for Kolibri Studio",
   "scripts": {
     "lint:py": "flake8 --exit-zero",
-    "lint": "kolibri-tools lint",
-    "lint-all": "yarn run lint -p 'contentcuration/contentcuration/frontend/**/*.{js,vue,scss,less,css}'",
-    "lint-all:fix": "yarn run lint-all -w",
-    "lint:fix": "yarn run lint -w",
-    "lint:watch": "yarn lint-all -w -m",
+    "lint-frontend": "kolibri-tools lint --pattern 'contentcuration/contentcuration/frontend/**/*.{js,vue,scss,less,css}' --ignore '**/dist/**,**/node_modules/**,**/static/**'",
+    "lint-frontend:format": "yarn run lint-frontend --write",
+    "lint-frontend:watch": "yarn run lint-frontend --monitor",
+    "lint-frontend:watch:format": "yarn run lint-frontend --monitor --write",
     "makemessages": "node ./node_modules/kolibri-tools/lib/i18n/ExtractMessages.js --project=studio",
     "combineprofiles": "node ./node_modules/kolibri-tools/lib/combineStringProfiles.js ./contentcuration/locale/en/LC_MESSAGES/profiles/",
     "transfercontext": "APP_NAME=contentcuration node ./node_modules/kolibri-tools/lib/i18n/SyncContext.js run && yarn lint-all:fix",
@@ -113,6 +112,7 @@
     "circular-dependency-plugin": "^5.2.0",
     "eslint-import-resolver-webpack": "0.13.2",
     "fake-indexeddb": "^3.0.0",
+    "file-loader": "^6.2.0",
     "flush-promises": "^1.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
@@ -126,7 +126,6 @@
     "npm-run-all": "^4.1.3",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "vuetify-loader": "^1.7.3",
     "workbox-webpack-plugin": "^6.5.3"
   },
   "false": {},

webpack.config.js

@@ -10,7 +10,6 @@ const BundleTracker = require('kolibri-tools/lib/webpackBundleTracker');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 const WebpackRTLPlugin = require('kolibri-tools/lib/webpackRtlPlugin');
-const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
 
 const { InjectManifest } = require('workbox-webpack-plugin');
 
@@ -89,7 +88,6 @@ module.exports = (env = {}) => {
       modules: [rootNodeModules],
     },
     plugins: [
-      new VuetifyLoaderPlugin(),
       new BundleTracker({
         filename: path.resolve(djangoProjectDir, 'build', 'webpack-stats.json'),
       }),

yarn.lock

@@ -3271,11 +3271,6 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
-callsite@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
-  integrity sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -4123,13 +4118,6 @@ debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
-decache@^4.6.0:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/decache/-/decache-4.6.1.tgz#5928bfab97a6fcf22a65047a3d07999af36efaf0"
-  integrity sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==
-  dependencies:
-    callsite "^1.0.0"
-
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -12265,15 +12253,6 @@ vue@^2.6.12:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
-vuetify-loader@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.7.3.tgz#404657f4925c828f400fe3269003421d586835c6"
-  integrity sha512-1Kt6Rfvuw3i9BBlxC9WTMnU3WEU7IBWQmDX+fYGAVGpzWCX7oHythUIwPCZGShHSYcPMKSDbXTPP8UvT5RNw8Q==
-  dependencies:
-    decache "^4.6.0"
-    file-loader "^6.2.0"
-    loader-utils "^2.0.0"
-
 vuetify@^1.5.24:
   version "1.5.24"
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.5.24.tgz#d5cf6e7289570d5d05f8832a097cd435d36d37df"