Node.js 18, pnpm 8, jest 29, linting/formatting updates, and webpack fixes

.docker/README.md

@@ -4,7 +4,7 @@ This directory is a space for mounting directories to docker containers, allowin
 ### postgres
 The `postgres` directory is mounted to `/docker-entrypoint-initdb.d`. Any `.sh` or `.sql` files will be executed when the container is first started with a new data volume. You may read more regarding this functionality on the [Docker Hub page](https://hub.docker.com/_/postgres), under _Initialization scripts_.
 
-When running docker services through the Makefile commands, it specifies a docker-compose project name that depends on the name of the current git branch. This causes the volumes to change when the branch changes, which is helpful when switching between many branches that might have incompatible database schema changes. The downside is that whenever you start a new branch, you'll have to re-initialize the database again, like with `yarn run devsetup`. Creating a SQL dump from an existing, initialized database and placing it in this directory will allow you to skip this step.
+When running docker services through the Makefile commands, it specifies a docker-compose project name that depends on the name of the current git branch. This causes the volumes to change when the branch changes, which is helpful when switching between many branches that might have incompatible database schema changes. The downside is that whenever you start a new branch, you'll have to re-initialize the database again, like with `pnpm run devsetup`. Creating a SQL dump from an existing, initialized database and placing it in this directory will allow you to skip this step.
 
 To create a SQL dump of your preferred database data useful for local testing, run `make .docker/postgres/init.sql` while the docker postgres container is running.
 

.eslintrc.js

@@ -1,4 +1,4 @@
-const esLintConfig = require('kolibri-tools/.eslintrc');
+const esLintConfig = require('kolibri-format/.eslintrc');
 
 esLintConfig.globals = {
   $: false,
@@ -8,7 +8,13 @@ esLintConfig.globals = {
   MathJax: false,
   jest: false,
 };
-esLintConfig.settings['import/resolver']['webpack'] = { config: 'webpack.config.js'};
+esLintConfig.settings['import/resolver']['webpack'] = { config: require.resolve('./webpack.config.js')};
+
+// Remove once Vuetify is gone-- Vuetify uses too many unacceptable class names
+esLintConfig.rules['kolibri/vue-component-class-name-casing'] = 0;
+
+// Dumb
+esLintConfig.rules['vue/no-v-text-v-html-on-component'] = 0;
 
 // Vuetify's helper attributes use hyphens and they would
 // not be recognized if auto-formatted to camel case

.git-blame-ignore-revs

@@ -0,0 +1,5 @@
+# Run this command to always ignore formatting commits in `git blame`
+# git config blame.ignoreRevsFile .git-blame-ignore-revs
+
+# Linting updates and fixes
+a52e08e5c2031cecb97a03fbed49997756ebe01b

.github/dependabot.yml

@@ -12,7 +12,7 @@ updates:
       time: "00:00"
 
   # Maintain dependencies for Javascript
-  - package-ecosystem: "npm"
+  - package-ecosystem: "pnpm"
     directory: "/"
     schedule:
       interval: "weekly"

.github/workflows/deploytest.yml

@@ -20,31 +20,27 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.py", "requirements.txt", ".github/workflows/deploytest.yml", "**.vue", "**.js", "yarn.lock", "package.json"]'
+          paths: '["**.py", "requirements.txt", ".github/workflows/deploytest.yml", "**.vue", "**.js", "pnpm-lock.yaml", "package.json"]'
   build_assets:
     name: Build frontend assets
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v4
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install dependencies
       run: |
-        yarn --frozen-lockfile
-        npm rebuild node-sass
+        pnpm install --frozen-lockfile
+        pnpm rebuild node-sass
     - name: Build frontend
-      run: yarn run build
+      run: pnpm run build
   make_messages:
     name: Build all message files
     needs: pre_job
@@ -68,21 +64,17 @@ jobs:
         python -m pip install --upgrade pip
         pip install pip-tools
         pip-sync requirements.txt
+    - name: Use pnpm
+      uses: pnpm/action-setup@v4
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install node dependencies
       run: |
-        yarn --frozen-lockfile
-        npm rebuild node-sass
+        pnpm install --frozen-lockfile
+        pnpm rebuild node-sass
     - name: Install gettext
       run: |
         sudo apt-get update -y

.github/workflows/frontendlint.yml

@@ -20,31 +20,27 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.vue", "**.js", "yarn.lock", ".github/workflows/frontendlint.yml"]'
+          paths: '["**.vue", "**.js", "pnpm-lock.yaml", ".github/workflows/frontendlint.yml"]'
   test:
     name: Frontend linting
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v4
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install dependencies
       run: |
-        yarn --frozen-lockfile
-        npm rebuild node-sass
+        pnpm install --frozen-lockfile
+        pnpm rebuild node-sass
     - name: Run tests
-      run: yarn run lint-frontend:format
+      run: pnpm run lint-frontend:format
     - name: Run pre-commit-ci-lite
       uses: pre-commit-ci/lite-action@v1.1.0
       if: always()

.github/workflows/frontendtest.yml

@@ -20,28 +20,24 @@ jobs:
         uses: fkirc/skip-duplicate-actions@master
         with:
           github_token: ${{ github.token }}
-          paths: '["**.vue", "**.js", "yarn.lock"]'
+          paths: '["**.vue", "**.js", "pnpm-lock.yaml"]'
   test:
     name: Frontend tests
     needs: pre_job
     if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
+    - name: Use pnpm
+      uses: pnpm/action-setup@v4
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '16.x'
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
+        node-version: '18.x'
+        cache: 'pnpm'
     - name: Install dependencies
       run: |
-        yarn --frozen-lockfile
-        npm rebuild node-sass
+        pnpm install --frozen-lockfile
+        pnpm rebuild node-sass
     - name: Run tests
-      run: yarn run test
+      run: pnpm run test

.pre-commit-config.yaml

@@ -22,6 +22,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-frontend:format
+          entry: pnpm run lint-frontend:format
           language: system
           files: \.(js|vue|scss|css)$

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('kolibri-format/.prettierrc');

.stylelintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   extends: [
-    'kolibri-tools/.stylelintrc',
+    'kolibri-format/.stylelintrc',
   ],
   rules: {
     /*
@@ -9,10 +9,10 @@ module.exports = {
      */
     'selector-max-id': null, // This would require a major refactor
     'csstree/validator': null, // this triggers issues with unknown at rules too.
-    'selector-pseudo-element-no-unknown': [ 
+    'selector-pseudo-element-no-unknown': [
      true,
      {
-         // In Vue 2.6 and later, `::v-deep` is used for deep selectors.  
+         // In Vue 2.6 and later, `::v-deep` is used for deep selectors.
          // This rule allows `::v-deep` to prevent linting errors.
          ignorePseudoElements: ['v-deep'],
      }

Makefile

@@ -66,7 +66,7 @@ reconcile:
 ###############################################################
 i18n-extract-frontend:
 	# generate frontend messages
-	yarn makemessages
+	pnpm makemessages
 
 i18n-extract-backend:
 	# generate backend messages
@@ -75,7 +75,7 @@ i18n-extract-backend:
 i18n-extract: i18n-extract-frontend i18n-extract-backend
 
 i18n-transfer-context:
-	yarn transfercontext
+	pnpm transfercontext
 
 i18n-django-compilemessages:
 	# Change working directory to contentcuration/ such that compilemessages
@@ -94,9 +94,9 @@ i18n-pretranslate-approve-all:
 i18n-download-translations:
 	python node_modules/kolibri-tools/lib/i18n/crowdin.py rebuild-translations ${branch}
 	python node_modules/kolibri-tools/lib/i18n/crowdin.py download-translations ${branch}
-	yarn exec kolibri-tools i18n-code-gen -- --output-dir ./contentcuration/contentcuration/frontend/shared/i18n
+	pnpm exec kolibri-tools i18n-code-gen -- --output-dir ./contentcuration/contentcuration/frontend/shared/i18n
 	$(MAKE) i18n-django-compilemessages
-	yarn exec kolibri-tools i18n-create-message-files -- --namespace contentcuration --searchPath ./contentcuration/contentcuration/frontend
+	pnpm exec kolibri-tools i18n-create-message-files -- --namespace contentcuration --searchPath ./contentcuration/contentcuration/frontend
 
 i18n-download: i18n-download-translations
 

contentcuration/contentcuration/frontend/RecommendedResourceCard/components/RecommendedResourceCard.vue

@@ -91,7 +91,7 @@
         };
       },
       isSelected() {
-        return function(node) {
+        return function (node) {
           return Boolean(find(this.selected, { id: node.id }));
         };
       },
@@ -127,6 +127,7 @@
 
 
 <style>
+
   .visuallyhidden {
     position: absolute;
     width: 1px;
@@ -137,4 +138,5 @@
     clip: rect(0 0 0 0);
     border: 0;
   }
+
 </style>

contentcuration/contentcuration/frontend/accounts/components/MessageLayout.vue

@@ -1,15 +1,19 @@
 <template>
 
-  <VApp style="overflow: auto;height: 100vh;">
-    <VLayout justify-center fill-height class="mt-5 pt-5">
-      <VFlex style="max-width: 900px;">
+  <VApp style="height: 100vh; overflow: auto">
+    <VLayout
+      justify-center
+      fill-height
+      class="mt-5 pt-5"
+    >
+      <VFlex style="max-width: 900px">
         <h1 class="font-weight-bold headline text-xs-center">
           {{ header }}
         </h1>
         <p class="mb-5 mt-1 subheading text-xs-center">
           {{ text }}
         </p>
-        <div style="max-width: 400px; margin: 0 auto; text-align: center;">
+        <div style="max-width: 400px; margin: 0 auto; text-align: center">
           <slot></slot>
           <p class="mt-4">
             <slot name="back">
@@ -26,6 +30,7 @@
 
 </template>
 
+
 <script>
 
   export default {

contentcuration/contentcuration/frontend/accounts/pages/Main.vue → contentcuration/contentcuration/frontend/accounts/pages/AccountsMain.vue

@@ -10,7 +10,7 @@
         <!-- Sign in -->
         <VCard
           class="pa-4"
-          style="width: 300px;margin: 0 auto;"
+          style="width: 300px; margin: 0 auto"
         >
           <div class="k-logo-container">
             <KLogo
@@ -125,7 +125,7 @@
   import LanguageSwitcherList from 'shared/languageSwitcher/LanguageSwitcherList';
 
   export default {
-    name: 'Main',
+    name: 'AccountsMain',
     components: {
       Banner,
       EmailField,