Upgrade Vue to 2.7. Nuxt JS to latest v2. Swap kolibri-tools for koli…

…bri-format.
learningequality · Dec 4, 2024 · 795da0c · 795da0c
1 parent dd31b54
commit 795da0c
Show file tree

Hide file tree

Showing 24 changed files with 3,283 additions and 4,272 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,4 +1,4 @@
-const esLintConfig = require('kolibri-tools/.eslintrc');
+const esLintConfig = require('kolibri-format/.eslintrc');
 
 // Vuetify's helper attributes use hyphens and they would
 // not be recognized if auto-formatted to camel case
@@ -7,7 +7,7 @@ esLintConfig.rules['vue/attribute-hyphenation'] = 0;
 // This rule conflicts with Nuxt page naming
 esLintConfig.rules['kolibri/vue-filename-and-component-name-match'] = 0;
 
-// This rule is currently disabled in kolibri-tools/.eslintrc
+// This rule is currently disabled in kolibri-format/.eslintrc
 esLintConfig.rules['vue/require-default-prop'] = 1;
 
 // max-len rules are unhelpful for documentation

diff --git a/docs/pages/usekliveregion.vue b/docs/pages/usekliveregion.vue
@@ -88,7 +88,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import useKLiveRegion from '../../lib/composables/useKLiveRegion';
 
   export default {

diff --git a/docs/pages/usekresponsivewindow.vue b/docs/pages/usekresponsivewindow.vue
@@ -115,7 +115,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import useKResponsiveWindow from '../../lib/composables/useKResponsiveWindow';
 
   export default {

diff --git a/docs/pages/usekshow.vue b/docs/pages/usekshow.vue
@@ -121,7 +121,7 @@
 
 <script>
 
-  import { ref } from '@vue/composition-api';
+  import { ref } from 'vue';
   import useKShow from '../../lib/composables/useKShow';
   import PropsTable from '../common/DocsPageTemplate/jsdocs/PropsTable';
 

diff --git a/docs/plugins/load-lib-components.js b/docs/plugins/load-lib-components.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
 import VueIntl from 'vue-intl';
 import KThemePlugin from '~~/lib/KThemePlugin';
 import trackInputModality from '~~/lib/styles/trackInputModality';
@@ -9,6 +8,5 @@ import trackInputModality from '~~/lib/styles/trackInputModality';
 // See `KThemePlugin` `$coreOutline` and `globalThemeState.inputModality`
 trackInputModality({ disableFocusRingByDefault: false });
 
-Vue.use(VueCompositionAPI);
 Vue.use(KThemePlugin);
 Vue.use(VueIntl);
diff --git a/jest.conf/setup.js b/jest.conf/setup.js
@@ -9,7 +9,6 @@ import 'mock-match-media/jest-setup';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VueIntl from 'vue-intl';
-import VueCompositionAPI from '@vue/composition-api';
 import KThemePlugin from '../lib/KThemePlugin';
 
 global.beforeEach(() => {
@@ -30,7 +29,6 @@ global.afterEach(() => {
 
 // Register Vue plugins and components
 Vue.use(VueRouter);
-Vue.use(VueCompositionAPI);
 Vue.use(KThemePlugin);
 Vue.use(VueIntl);
 

diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
@@ -31,7 +31,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
   import UiMenu from './keen/UiMenu';
   import UiPopover from './keen/UiPopover';
   import useKContextMenu from './composables/_useKContextMenu';

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
@@ -95,7 +95,7 @@
 
 <script>
 
-  import { ref, computed, watch } from '@vue/composition-api';
+  import { ref, computed, watch } from 'vue';
   import useSorting, {
     SORT_ORDER_ASC,
     SORT_ORDER_DESC,

diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import useSorting, {
   SORT_ORDER_ASC,
   SORT_ORDER_DESC,

diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
@@ -1,4 +1,4 @@
-import { ref, computed } from '@vue/composition-api';
+import { ref, computed } from 'vue';
 import _ from 'lodash';
 
 export const SORT_ORDER_ASC = 'asc';

diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
@@ -180,7 +180,7 @@
 
 <script>
 
-  import { inject } from '@vue/composition-api';
+  import { inject } from 'vue';
 
   const Orientations = {
     HORIZONTAL: 'horizontal',

diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
@@ -43,7 +43,7 @@
 
 <script>
 
-  import { watch, ref, provide } from '@vue/composition-api';
+  import { watch, ref, provide } from 'vue';
 
   import { LAYOUT_1_1_1, LAYOUT_1_2_2, LAYOUT_1_2_3 } from './gridBaseLayouts';
   import useGridLayout from './useGridLayout';

diff --git a/lib/cards/useGridLayout.js b/lib/cards/useGridLayout.js
@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
-import { watch, ref, toRefs } from '@vue/composition-api';
+import { watch, ref, toRefs } from 'vue';
 
 import useKResponsiveWindow from '../composables/useKResponsiveWindow';
 
@@ -60,7 +60,7 @@ export default function useGridLayout(props) {
     ([newBreakpoint]) => {
       currentBreakpointConfig.value = getLayoutConfigForBreakpoint(props, newBreakpoint);
     },
-    { immediate: true, deep: true }
+    { immediate: true, deep: true },
   );
 
   return { currentBreakpointConfig, windowBreakpoint };

diff --git a/lib/cards/useGridLoading.js b/lib/cards/useGridLoading.js
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import { ref, watch, onMounted, toRefs, computed } from '@vue/composition-api';
+import Vue, { ref, watch, onMounted, toRefs, computed } from 'vue';
 
 import useGridLayout from './useGridLayout';
 import { getBreakpointConfig } from './utils';
@@ -84,7 +83,7 @@ export default function useGridLoading(props) {
         }, remainingLoadingTime);
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 
   // Used by `KCardGrid` to prevent jarring UX:
@@ -126,7 +125,7 @@ export default function useGridLoading(props) {
         }
       }
     },
-    { immediate: true, deep: true }
+    { immediate: true, deep: true },
   );
 
   return {

diff --git a/lib/composables/_useKContextMenu.js b/lib/composables/_useKContextMenu.js
@@ -1,12 +1,4 @@
-import './composition-api.js'; //Due to @vue/composition-api shortcomings, add plugin prior to use in kolibri, studio and tests
-
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  getCurrentInstance,
-} from '@vue/composition-api';
+import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
 
 const activeMenu = ref(null);
 

diff --git a/lib/composables/_useKWindowDimensions/__tests__/index.spec.js b/lib/composables/_useKWindowDimensions/__tests__/index.spec.js
@@ -1,4 +1,4 @@
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 import { mount } from '@vue/test-utils';
 import useKWindowDimensions from '../';
 

diff --git a/lib/composables/_useKWindowDimensions/index.js b/lib/composables/_useKWindowDimensions/index.js
@@ -1,5 +1,4 @@
-import '../composition-api'; //Due to @vue/composition-api shortcomings, add plugin prior to use in kolibri, studio and tests
-import { onMounted, onUnmounted, ref } from '@vue/composition-api';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { throttle } from 'frame-throttle';
 import { isNuxtServerSideRendering } from '../../utils';
 

diff --git a/lib/composables/composition-api.js b/lib/composables/composition-api.js
diff --git a/lib/composables/useKResponsiveElement.js b/lib/composables/useKResponsiveElement.js
@@ -1,5 +1,5 @@
 import { throttle } from 'frame-throttle';
-import { onMounted, onBeforeUnmount, ref, getCurrentInstance } from '@vue/composition-api';
+import { onMounted, onBeforeUnmount, ref, getCurrentInstance } from 'vue';
 
 let _resizeObserver;
 

diff --git a/lib/composables/useKResponsiveWindow/__tests__/index.spec.js b/lib/composables/useKResponsiveWindow/__tests__/index.spec.js
@@ -1,5 +1,5 @@
 import { setMedia } from 'mock-match-media';
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 import { mount } from '@vue/test-utils';
 import useKResponsiveWindow from '../';
 import { resizeWindow, testAfterResize } from '../../../../jest.conf/testUtils';

diff --git a/lib/composables/useKResponsiveWindow/index.js b/lib/composables/useKResponsiveWindow/index.js
@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, onMounted, ref, watch } from '@vue/composition-api';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import useKWindowDimensions, { windowWidth, windowHeight } from '../_useKWindowDimensions';
 import { isNuxtServerSideRendering } from '../../utils';
 import MediaQuery from './MediaQuery';

diff --git a/lib/composables/useKShow/index.js b/lib/composables/useKShow/index.js
@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import has from 'lodash/has';
 
 /**

diff --git a/package.json b/package.json
@@ -10,24 +10,21 @@
   "license": "MIT",
   "author": "Learning Equality",
   "scripts": {
-    "dev": "npm-run-all --parallel dev-only _lint-watch-fix _api-watch pregenerate",
+    "dev": "concurrently yarn:dev-only yarn:_api-watch yarn:pregenerate",
     "generate": "yarn run pregenerate && nuxt generate",
-    "lint": "kolibri-tools lint --pattern '**/*.{js,vue,scss,less,css}' --ignore '**/node_modules/**,**/.nuxt/**,**/dist/**,**/lib/KIcon/precompiled-icons/**,**/lib/keen/**,**/docs/environment.js,**/docs/jsdocs.js'",
+    "lint": "kolibri-format --pattern '**/*.{js,vue,scss,less,css}' --ignore '**/node_modules/**' '**/.nuxt/**' '**/dist/**' '**/lib/KIcon/precompiled-icons/**' '**/lib/keen/**' '**/docs/environment.js' '**/docs/jsdocs.js'",
     "lint-fix": "yarn lint -w",
-    "lint-watch": "yarn lint -m",
     "pregenerate": "node utils/pregenerate.js",
     "dev-only": "nuxt --port 4000",
     "precompile-svgs": "node utils/precompileSvgs/index.js && yarn run pregenerate",
     "precompile-custom-svgs": "node utils/precompileSvgs/index.js --custom && yarn run pregenerate",
-    "_lint-watch-fix": "yarn lint -w -m",
     "test": "jest --config=jest.conf/index.js",
     "_api-watch": "chokidar \"**/lib/**\" -c \"node utils/extractApi.js\""
   },
   "files": [
     "lib"
   ],
   "dependencies": {
-    "@vue/composition-api": "1.7.2",
     "aphrodite": "https://github.com/learningequality/aphrodite/",
     "autosize": "3.0.21",
     "color": "3.2.1",
@@ -39,6 +36,7 @@
     "popper.js": "1.16.1",
     "purecss": "2.2.0",
     "tippy.js": "4.3.5",
+    "vue": "2",
     "vue-intl": "3.1.0",
     "vue2-teleport": "1.1.4",
     "xstate": "4.38.3"
@@ -51,19 +49,20 @@
     "babel-jest": "^29.7.0",
     "browserslist-config-kolibri": "0.16.0-dev.7",
     "chokidar-cli": "^3.0.0",
+    "concurrently": "^9.1.0",
     "consola": "^2.15.3",
     "eslint-import-resolver-nuxt": "^1.0.1",
     "globby": "^6.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-serializer-vue": "^3.1.0",
-    "kolibri-tools": "0.16.1-dev.1",
+    "kolibri-format": "^1.0.0",
     "lockr": "^0.8.4",
     "material-design-icons": "^3.0.1",
     "mock-match-media": "^0.4.3",
+    "node-sass": "^9.0.0",
     "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
-    "nuxt": "2.15.8",
+    "nuxt": "2.18.1",
     "prismjs": "^1.27.0",
     "raw-loader": "0.5.1",
     "sass-loader": "^10.5.2",
@@ -78,15 +77,6 @@
     "vue-template-compiler": "2.6.14",
     "xml-loader": "^1.2.1"
   },
-  "resolutions": {
-    "@babel/preset-env": "7.14.1",
-    "postcss": "8.4.38",
-    "postcss-loader": "3.0.0",
-    "css-loader": "4.3.0",
-    "vue": "2.6.14",
-    "vue-server-renderer": "2.6.14",
-    "vue-loader": "15.9.7"
-  },
   "browserslist": [
     "extends browserslist-config-kolibri"
   ]