Update packages to latest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-app",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "sh usecases-schema-to-ts.sh && rollup -c -w",
@@ -9,46 +9,53 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.16.7",
-    "@rollup/plugin-commonjs": "^18.1.0",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-typescript": "^7.17.12",
+    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@smui/button": "^4.2.0",
-    "@smui/circular-progress": "^4.2.0",
-    "@smui/dialog": "^4.2.0",
-    "@smui/list": "^4.2.0",
-    "@smui/snackbar": "^4.2.0",
-    "@smui/textfield": "^4.2.0",
-    "@tsconfig/svelte": "^1.0.13",
-    "@types/jest": "^26.0.24",
-    "axios": "^0.21.4",
-    "jest": "^26.6.3",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@smui/button": "^6.0.0-beta.16",
+    "@smui/circular-progress": "^6.0.0-beta.16",
+    "@smui/dialog": "^6.0.0-beta.16",
+    "@smui/list": "^6.0.0-beta.16",
+    "@smui/snackbar": "^6.0.0-beta.16",
+    "@smui/textfield": "^6.0.0-beta.16",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/jest": "^28.1.1",
+    "axios": "^0.27.2",
+    "jest": "^28.1.1",
+    "jest-localstorage-mock": "^2.4.21",
     "node-sass": "^7.0.1",
     "oidc-client": "^1.11.5",
-    "postcss": "^8.4.6",
-    "rollup": "^2.60.2",
+    "postcss": "^8.4.14",
+    "rollup": "^2.75.6",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.44.3",
-    "svelte-check": "^1.6.0",
-    "svelte-material-ui": "^4.2.0",
-    "svelte-preprocess": "^4.9.8",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
+    "svelte": "^3.48.0",
+    "svelte-check": "^2.7.2",
+    "svelte-material-ui": "^6.0.0-beta.16",
+    "svelte-preprocess": "^4.10.7",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.3"
   },
   "dependencies": {
-    "sirv-cli": "^1.0.14"
+    "sirv-cli": "^2.0.2"
   },
   "jest": {
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "setupFiles": [
+      "jest-localstorage-mock"
+    ],
+    "globals": {
+      "window": {}
     }
   }
 }

src/components/CollabSelection.svelte

@@ -127,7 +127,7 @@
             helperLine$style="width: 100%;"
             label="Collab Name"
             bind:value={searchText}
-            on:change={filterCollab}
+            on:input={filterCollab}
           >
             <Icon class="material-icons" slot="trailingIcon">search</Icon>
           </Textfield>
@@ -156,7 +156,7 @@
 
       <div class="last-used-collab">
         {#if lastUsedCollabName}
-          <Item on:click={collabSelected(lastUsedCollabName)}>
+          <Item on:click={() => collabSelected(lastUsedCollabName)}>
             <Text><strong>Last used: </strong>{lastUsedCollabName}</Text>
           </Item>
         {/if}
@@ -168,7 +168,7 @@
       <div class="collab-list-scroll">
         <List>
           {#each filteredCollabsNames as collabName}
-            <Item on:click={collabSelected(collabName)}>
+            <Item on:click={() => collabSelected(collabName)}>
               <Text>{collabName}</Text>
             </Item>
           {/each}

src/components/ModelCard.svelte

@@ -7,6 +7,7 @@
 
   import type { Model } from '@/types/models';
   import { modelsSelected, modelsSelectedLimit, errorMessage } from '@/store';
+  import { defaultElevationObj } from '@/constants';
 
   export let modelItem: Model;
   let modelIsSelected: boolean = false;
@@ -52,7 +53,7 @@
 <div class="models-card-container">
 
   <div class="card-container { modelIsSelected ? 'is-selected' : '' }">
-    <Paper elevation="5" on:click={() => ucClick(modelItem)}>
+    <Paper {...defaultElevationObj} on:click={() => ucClick(modelItem)}>
 
       <div class="grid-container">
         <div class="breadcrumbs">

src/components/ModelSelection.svelte

@@ -87,7 +87,7 @@
             helperLine$style="width: 100%;"
             label="Model Name"
             bind:value={searchText}
-            on:change={filterModel}
+            on:input={filterModel}
           >
             <Icon class="material-icons" slot="trailingIcon">search</Icon>
           </Textfield>
@@ -179,7 +179,7 @@
   .model-section-container .model-list {
     grid-area: list;
     max-height: 70vh;
-    overflow: scroll;
+    overflow-y: scroll;
     padding: 10px;
   }
   .model-section-container .models-selected-info {

src/components/ModelShowSelectedToggle.svelte

@@ -3,12 +3,14 @@
   import Paper from '@smui/paper';
 
   import { modelsSelected } from '@/store';
+
+  import { defaultElevationObj } from '@/constants';
 </script>
 
 
 
 <div class="models-selected-container {$modelsSelected.length ? '' : 'hidden-section'}">
-  <Paper elevation="5">
+  <Paper {...defaultElevationObj}>
     <span class="title">Model(s) selected ({$modelsSelected.length}):</span>
     {#each $modelsSelected as modelItem}
       <span class="model">{ modelItem.name }</span>

src/components/UsecaseCard.svelte

@@ -6,6 +6,7 @@
   import UsecasePills from './UsecasePills.svelte'
 
   import type { UsecaseItem } from '@/types/usecases';
+  import { defaultElevationObj } from '@/constants';
 
   export let usecases: Array<UsecaseItem>;
   export let categoryId: string;
@@ -23,7 +24,7 @@
   {#each usecases as usecaseItem}
     {#if !usecaseItem.disabled}
       <div class="card-container">
-        <Paper elevation="5" on:click={() => ucClick(usecaseItem)}>
+        <Paper {...defaultElevationObj} on:click={() => ucClick(usecaseItem)}>
           <div class="columns-container">
             <div class="image">
               <img src={ usecaseItem.picture.src } alt="">

src/constants.ts

@@ -46,11 +46,14 @@ export const model = {
 const usecaseInfoBaseUrl = 'https://raw.githubusercontent.com/ebrains-cls-interactive/usecases-info';
 declare const processEnvs: any; // comes from rollup.config.js
 declare const jest: any;
-const isProduction = (typeof jest !== 'undefined') ? false : processEnvs.isProduction;
+// using [''] notation instead of dot notation because of delimiter avoid replacement
+const isProduction = (typeof jest !== 'undefined') ? false : processEnvs['isProduction'];
 const usecaseInfoBranch = isProduction ? 'main' : 'develop';
 
 export const usecases = {
   INFO_FILE_URL: `${usecaseInfoBaseUrl}/${usecaseInfoBranch}/usecases-info.json`,
   JSON_SCHEMA_URL: `${usecaseInfoBaseUrl}/${usecaseInfoBranch}/usecases-info.schema.json`,
   STATISTIC_URL: 'https://docs.google.com/forms/u/1/d/e/1FAIpQLSeLKkgcY1yDb9gHjmFY-Ys8YH65wVhubdGfXUgudrRVIDtlqQ/formResponse',
 };
+
+export const defaultElevationObj = { elevation: 5 };

src/helpers/auth.ts

@@ -7,7 +7,7 @@ import { iam } from '@/constants';
 declare var processEnvs: any;
 
 function createAuthConfig() {
-  const redirectBase = `${window.location.origin}/${processEnvs.baseUrl}`;
+  const redirectBase = `${window.location.origin}/${processEnvs['baseUrl']}`;
   const oidcConfig = {
     authority: iam.LOGIN_URL,
     client_id: 'ebrains-wizard-2',

src/helpers/statistics.ts

@@ -47,7 +47,7 @@ export async function sendStatistics() {
   if (typeof jest !== 'undefined') return;
   // @ts-ignore // comes from rollup.config.js
   declare const processEnvs: any;
-  if (processEnvs?.baseUrl === '/' || !processEnvs?.baseUrl) return;
+  if (processEnvs['baseUrl'] === '/' || !processEnvs['baseUrl']) return;
 
   const formData = new URLSearchParams();
   const data: StatisticDataInterface = {

src/store.ts

@@ -26,7 +26,7 @@ export const collabIdSelected = writable('');
 // comes from rollup.config.js
 declare var processEnvs: any
 export const appVersion = readable(null, function start(set) {
-  set(processEnvs.appVersion);
+  set(processEnvs['appVersion']);
 	return function stop() {};
 });
 
@@ -37,6 +37,6 @@ export const errorMessage = writable('');
 export const generalMessage = writable('');
 
 export const scrollOffset = readable(null, function start(set) {
-  set(processEnvs.isProduction ? 90 : 14);
+  set(processEnvs['isProduction'] ? 90 : 14);
 	return function stop() {};
 });