Build: support Node 16, upgrade dependencies

.github/workflows/CI.yml

@@ -10,7 +10,7 @@ jobs:
     strategy:
       matrix:
         platform: [ubuntu-latest, windows-2019, macos-latest]
-        node-version: [14]
+        node-version: [16]
     runs-on: ${{ matrix.platform }}
     steps:
       - name: Checkout
@@ -23,8 +23,6 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install
         run: npm ci
-      - name: Bootstrap
-        run: npm run bootstrap
       - name: Lint
         run: npm run lint
       - name: Test

.nvmrc

@@ -1 +1 @@
-10.18.1
+16.17.0

@uportal/notification-banner/babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
     presets: [['@babel/preset-env', { modules: 'commonjs' }]],
-    plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]]
+    plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]],
 };

@uportal/notification-banner/package.json

@@ -15,31 +15,31 @@
     "main": "dist/notification-banner.js",
     "source": "src/components/NotificationBanner.vue",
     "scripts": {
-        "serve": "vue-cli-service serve",
-        "prebuild": "babel node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js -o node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js",
+        "start": "vue-cli-service serve",
+        "prebuild": "babel ../../node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js -o ../../node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js",
         "build": "vue-cli-service build --target wc --name notification-banner 'src/components/NotificationBanner.vue'",
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.6",
-        "@fortawesome/free-solid-svg-icons": "^5.4.1",
-        "@fortawesome/vue-fontawesome": "^0.1.1",
-        "@uportal/open-id-connect": "^1.14.1",
-        "axios": "^0.19.0",
-        "bootstrap-vue": "^2.0.0-rc.11",
-        "vue": "2.6.11"
+        "@fortawesome/fontawesome-svg-core": "^6.0.0",
+        "@fortawesome/free-solid-svg-icons": "^6.0.0",
+        "@fortawesome/vue-fontawesome": "^2.0.0",
+        "@uportal/open-id-connect": "^1.37.0",
+        "axios": "^0.27.0",
+        "bootstrap-vue": "^2.0.0",
+        "vue": "^2.7.10"
     },
     "devDependencies": {
-        "@babel/cli": "^7.2.0",
-        "@babel/core": "^7.2.0",
-        "@babel/plugin-transform-runtime": "^7.2.0",
-        "@babel/preset-env": "^7.2.0",
-        "@vue/cli-plugin-babel": "^3.2.0",
-        "@vue/cli-plugin-eslint": "^3.2.0",
-        "@vue/cli-service": "^3.2.0",
-        "node-sass": "4.13.0",
-        "sass-loader": "^8.0.0",
-        "vue-template-compiler": "2.6.11"
+        "@babel/cli": "^7.0.0",
+        "@babel/core": "^7.0.0",
+        "@babel/plugin-transform-runtime": "^7.0.0",
+        "@babel/preset-env": "^7.0.0",
+        "@vue/cli-plugin-babel": "^5.0.0",
+        "@vue/cli-plugin-eslint": "^5.0.0",
+        "@vue/cli-service": "^5.0.0",
+        "node-sass": "^7.0.0",
+        "sass-loader": "^13.0.0",
+        "vue-template-compiler": "^2.7.10"
     },
     "eslintConfig": {
         "root": true,
@@ -52,7 +52,8 @@
         ],
         "rules": {},
         "parserOptions": {
-            "parser": "babel-eslint"
+            "parser": "@babel/eslint-parser",
+            "requireConfigFile": false
         }
     },
     "postcss": {

@uportal/notification-banner/src/App.vue

@@ -1,11 +1,13 @@
 <template>
     <div id="app">
         <img alt="Vue logo" src="./assets/logo.png" />
-        <NotificationBanner debug="true"
+        <NotificationBanner
+            debug="true"
             notificationVariant="success"
             notificationApiUrl="sample-notifications.json"
             filter="user=foobar"
-            notificationIcon="info" />
+            notificationIcon="info"
+        />
     </div>
 </template>
 
@@ -15,19 +17,18 @@ import NotificationBanner from './components/NotificationBanner.vue';
 export default {
     name: 'app',
     components: {
-        NotificationBanner
-    }
+        NotificationBanner,
+    },
 };
 </script>
 
 <style>
 #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
 }
-
 </style>

@uportal/notification-banner/src/components/NotificationBanner.vue

@@ -1,6 +1,12 @@
 <template>
     <div class="notification-banner">
-        <b-alert v-for="(notification, index) in notifications" :key="index" :varient="notificationVariant" :class="{'alert-custom': customVariant}" show>
+        <b-alert
+            v-for="(notification, index) in notifications"
+            :key="index"
+            :varient="notificationVariant"
+            :class="{ 'alert-custom': customVariant }"
+            show
+        >
             <h4>
                 <font-awesome-icon :icon="notificationIcon" :size="notificationIconSize" />
                 {{ notification.title }}
@@ -14,68 +20,68 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faInfo, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import bAlert from 'bootstrap-vue/es/components/alert/alert';
+import { bAlert } from 'bootstrap-vue';
 import oidc from '@uportal/open-id-connect';
 import { get } from 'axios';
 
 library.add(faInfo, faExclamationTriangle);
 
 const variants = ['info', 'primary', 'success', 'danger', 'warning', 'secondary', 'light', 'dark'];
 const icons = ['info', 'exclamation-triangle'];
-const sizes = ['xs', 'sm', 'lg', ...[...Array(10).keys()].map(k => `${k + 1}x`)];
+const sizes = ['xs', 'sm', 'lg', ...[...Array(10).keys()].map((k) => `${k + 1}x`)];
 
-const validator = (list) => (value) => list.indexOf(value) !== -1
+const validator = (list) => (value) => list.indexOf(value) !== -1;
 
 export default {
     name: 'NotificationBanner',
 
     props: {
         debug: {
             type: String,
-            default: 'false'
+            default: 'false',
         },
         userInfoApiUrl: {
             type: String,
-            default: '/uPortal/api/v5-1/userinfo'
+            default: '/uPortal/api/v5-1/userinfo',
         },
         notificationApiUrl: {
             type: String,
-            default: '/NotificationPortlet/api/v2/notifications'
+            default: '/NotificationPortlet/api/v2/notifications',
         },
         notificationVariant: {
             type: String,
             default: 'info',
-            validator: validator(variants)
+            validator: validator(variants),
         },
         notificationIcon: {
             type: String,
             default: 'info',
-            validator: validator(icons)
+            validator: validator(icons),
         },
         notificationIconSize: {
             type: String,
             default: '1x',
-            validator: validator(sizes)
+            validator: validator(sizes),
         },
         filter: {
             type: String,
             default: '',
         },
         refresh: {
             type: String,
-            default: '0'
-        }
+            default: '0',
+        },
     },
 
     components: {
         'b-alert': bAlert,
-        'font-awesome-icon': FontAwesomeIcon
+        'font-awesome-icon': FontAwesomeIcon,
     },
 
     data() {
         return {
             // list of notifications to display
-            notifications: []
+            notifications: [],
         };
     },
 
@@ -86,7 +92,7 @@ export default {
         customVariant: function () {
             const { notificationVariant } = this;
             return variants.indexOf(notificationVariant) === -1;
-        }
+        },
     },
 
     methods: {
@@ -106,8 +112,8 @@ export default {
                     withCredentials: true,
                     headers: {
                         Authorization: `Bearer ${token}`,
-                        'content-type': 'application/jwt'
-                    }
+                        'content-type': 'application/jwt',
+                    },
                 });
 
                 // store notifications to state
@@ -123,26 +129,26 @@ export default {
 
                 setTimeout(() => this.fetchNotifications(), time);
             }
-
-        }
+        },
     },
 
     // entrypoint
     created() {
         return this.fetchNotifications();
-    }
+    },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 .notification-banner {
     // core bootstrap framework
-    @import '../../node_modules/bootstrap/scss/functions.scss';
-    @import '../../node_modules/bootstrap/scss/variables.scss';
-    @import '../../node_modules/bootstrap/scss/mixins.scss';
+    @import '../../node_modules/bootstrap/scss/functions';
+    @import '../../node_modules/bootstrap/scss/variables';
+    @import '../../node_modules/bootstrap/scss/mixins';
+
     // bootstrap styles needed by page
-    @import '../../node_modules/bootstrap/scss/alert.scss';
+    @import '../../node_modules/bootstrap/scss/alert';
 
     // custom styles
     margin: 1rem;

@uportal/notification-banner/src/main.js

@@ -4,5 +4,5 @@ import App from './App.vue';
 Vue.config.productionTip = false;
 
 new Vue({
-    render: h => h(App)
+    render: (h) => h(App),
 }).$mount('#app');

@uportal/notification-banner/vue.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    transpileDependencies: ['bootstrap-vue']
+    transpileDependencies: ['bootstrap-vue'],
 };

@uportal/notification-icon/babel.config.js

@@ -2,6 +2,6 @@ module.exports = {
     presets: [['@babel/preset-env', { modules: 'commonjs' }]],
     plugins: [
         '@babel/plugin-proposal-optional-chaining',
-        ['@babel/plugin-transform-runtime', { useESModules: true }]
-    ]
+        ['@babel/plugin-transform-runtime', { useESModules: true }],
+    ],
 };