Update: Use Yarn 2 with pnp (coscine/issues#1227)

.gitlab-ci.yml

+include:
+  - project: coscine/tools/gitlab-ci-templates
+    file: 
+      - /docker-runner.yml
+      - /nodejs.yml
+
 stages:
-  - test
+  - build
+# there are more stages in the imported file but we only want to import some
+#  - test
   - publish
-  - release
-  - pre_release
-
-before_script:
-    - npm install
-
-test:
-  stage: test
-  script:
-    - npm run build
-    - npm test
-  except:
-    refs:
-      - master
-      - tags
-    variables:
-      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
 
-publish:
-  stage: publish
-  script:
-    - npm run build
-    - npm test
-    - npx semantic-release
-  only:
-    - master
-  except:
-    variables:
-      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
+build-branch:
+  extends: .build-branch
 
-release:
-  stage: release
-  script:
-    - npm run build
-  artifacts:
-    paths:
-      - dist
-  only:
-    - tags
+build-npm-release:
+  extends: .build-npm-release
 
-pre_release:
-  stage: pre_release
-  script:
-    - npm run build
-  artifacts:
-    paths:
-      - dist
-  when: manual
-  except:
-    - tags
-    - master
+publish-gitlab:
+  extends: .publish-gitlab-release

.yarnrc.yml

+packageExtensions:
+  "@vue/cli-service@*":
+    peerDependencies:
+      "@vue/cli-plugin-babel": "*"
+      "@vue/cli-plugin-eslint": "*"
+      "@vue/cli-plugin-typescript": "*"
+  "@vue/cli-plugin-typescript@*":
+    peerDependencies:
+      "babel-loader": "*"
+  "fork-ts-checker-webpack-plugin@*":
+    dependencies:
+      "vue-template-compiler": "*"
+    peerDependencies:
+      "typescript": "*"
+  "vue-i18n@*":
+    dependencies:
+      "vue": "^2.6.12"
+  "vue-material-design-icons@*":
+    dependencies:
+      "vue": "^2.6.12"      
+  "vue-router@*":
+    dependencies:
+      "vue": "^2.6.12"
+  "vuex@*":
+    dependencies:
+      "vue": "^2.6.12"
+  "bootstrap-vue@*":
+    dependencies:
+      "vue": "^2.6.12"
+      "jquery": "*"

babel.config.js

-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

package.json

@@ -8,13 +8,12 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.23.1",
-    "@coscine/app-util": "^1.7.1",
-    "@coscine/component-library": "1.4.1",
+    "@coscine/api-connection": "^1.24.2",
+    "@coscine/app-util": "^1.8.1",
+    "@coscine/component-library": "1.5.0",
     "@types/jquery": "^3.5.2",
     "@types/vue-select": "^2.5.0",
     "bootstrap-vue": "^2.17.3",
@@ -31,14 +30,14 @@
     "@semantic-release/gitlab": "^6.0.5",
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@types/chai": "^4.2.13",
-    "@types/mocha": "^8.0.3",
-    "@vue/cli-plugin-babel": "^4.5.7",
+    "@types/node": "^14.14.20",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/parser": "^4.12.0",
     "@vue/cli-plugin-typescript": "^4.5.7",
-    "@vue/cli-plugin-unit-mocha": "^4.5.7",
     "@vue/cli-service": "^4.5.7",
-    "@vue/test-utils": "1.1.0",
-    "chai": "^4.2.0",
+    "conventional-changelog-eslint": "3.0.9",
+    "core-js": "^3.8.2",
+    "eslint": "^7.17.0",
     "semantic-release": "^17.3.1",
     "typescript": "^4.0.3",
     "vue-template-compiler": "^2.6.12"

postcss.config.js

-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}

src/UserManagementApp.vue

@@ -10,6 +10,7 @@ import Vue from 'vue';
 import UserManagement from './components/UserManagement.vue';
 import { GuidUtil } from '@coscine/app-util';
 import { CoscineHeadline } from '@coscine/component-library';
+import '@coscine/component-library/dist/index.css';
 
 export default Vue.extend({
   name: 'users',

src/components/MembersTable.vue

@@ -43,6 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { CoscineButtonDelete } from '@coscine/component-library';
+import '@coscine/component-library/dist/index.css';
 
 export default Vue.extend({
   name: 'MembersTable',

src/components/UserManagement.vue

@@ -303,7 +303,7 @@ export default Vue.extend({
         this.queriedUsers = [];
         return;
       }
-      this.queryTimer = setTimeout(() => (this.fetchUserOptions(search, loading)), 1000)
+      this.queryTimer = window.setTimeout(() => (this.fetchUserOptions(search, loading)), 1000)
       ;
     },
     fetchUserOptions(search: string, loading: (value: boolean) => {}) {

tsconfig.json

@@ -10,10 +10,13 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "declaration": true,
+    "declarationDir": "dist",
     "types": [
       "webpack-env",
-      "mocha",
-      "chai"
+      "node"
     ],
     "paths": {
       "@/*": [

tslint.json

-{
-  "defaultSeverity": "warning",
-  "extends": [
-    "tslint:recommended"
-  ],
-  "linterOptions": {
-    "exclude": [
-      "node_modules/**"
-    ]
-  },
-  "rules": {
-    "quotemark": [true, "single"],
-    "indent": [true, "spaces", 2],
-    "interface-name": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "no-consecutive-blank-lines": false
-  }
-}