frontend: migration to SvelteKit 2 + Sveltestrap 6

.gitlab-ci/build.yml

@@ -56,12 +56,11 @@ build-evdist:
 
 build-frontend-ui:
   stage: build
-  image: node:20-alpine3.18
+  image: node:21-alpine
   before_script:
   script:
     - cd frontend/fic
     - npm install --network-timeout=100000
-    - sed -i 's!@popperjs/core/dist/esm/popper!@popperjs/core!' node_modules/sveltestrap/src/*.js node_modules/sveltestrap/src/*.svelte
     - npm run build
 
 build-dashboard:

Dockerfile-frontend-ui

@@ -5,7 +5,6 @@ WORKDIR /ui
 COPY frontend/fic/ .
 
 RUN npm install --network-timeout=100000 && \
-    sed -i 's!@popperjs/core/dist/esm/popper!@popperjs/core!' node_modules/sveltestrap/src/*.js node_modules/sveltestrap/src/*.svelte && \
     npm run build
 
 

Dockerfile-nginx

@@ -5,7 +5,6 @@ WORKDIR /ui
 COPY frontend/fic/ .
 
 RUN npm install --network-timeout=100000 && \
-    sed -i 's!@popperjs/core/dist/esm/popper!@popperjs/core!' node_modules/sveltestrap/src/*.js node_modules/sveltestrap/src/*.svelte && \
     npm run build
 
 

frontend/fic/jsconfig.json

@@ -1,11 +1,3 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
+	"extends": "./.svelte-kit/tsconfig.json"
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 }

frontend/fic/package.json

@@ -9,18 +9,19 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.0",
+    "@sveltejs/adapter-static": "^3.0.0",
-    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "eslint": "^8.4.2",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.35.1",
     "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.0.0",
+    "prettier-plugin-svelte": "^3.1.2",
     "sass": "^1.51.0",
     "sass-loader": "^13.0.0",
-    "svelte": "^3.48.0",
+    "svelte": "^4.0.0",
-    "sveltestrap": "^5.9.0",
+    "@sveltestrap/sveltestrap": "^6.2.1",
-    "vite": "^4.0.0"
+    "vite": "^5.0.0"
   },
   "type": "module",
   "dependencies": {
@@ -30,6 +31,6 @@
     "bootswatch": "^5.1.3",
     "hash-wasm": "^4.9.0",
     "seedrandom": "^3.0.5",
-    "vite": "^4.0.0"
+    "vite": "^5.0.0"
   }
 }

frontend/fic/src/lib/components/CardTheme.svelte

@@ -8,7 +8,7 @@
      Col,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
  import { max_solved } from '$lib/stores/themes.js';

frontend/fic/src/lib/components/Clock.svelte

@@ -2,7 +2,7 @@
  import {
      ButtonGroup,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { time } from '$lib/stores/settings.js';
 

frontend/fic/src/lib/components/ExerciceDownloads.svelte

@@ -7,7 +7,7 @@
      Icon,
      ListGroup,
      ListGroupItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import FileSize from './FileSize.svelte';
 

frontend/fic/src/lib/components/ExerciceFlags.svelte

@@ -11,7 +11,7 @@
      Progress,
      Spinner,
      Tooltip,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { blake2b } from 'hash-wasm';
 

frontend/fic/src/lib/components/ExerciceHints.svelte

@@ -8,7 +8,7 @@
      ListGroup,
      ListGroupItem,
      Spinner,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
  import { settings } from '$lib/stores/settings.js';

frontend/fic/src/lib/components/ExerciceSolved.svelte

@@ -7,7 +7,7 @@
      Icon,
      ListGroup,
      ListGroupItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import DateFormat from './DateFormat.svelte';
 

frontend/fic/src/lib/components/ExerciceVideo.svelte

@@ -4,7 +4,7 @@
  import {
      CardBody,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  export let uri = "";
 </script>

frontend/fic/src/lib/components/FlagKey.svelte

@@ -4,7 +4,7 @@
      Button,
      Icon,
      Spinner,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
  import { tick } from 'svelte';
 
  import { my } from '$lib/stores/my.js';

frontend/fic/src/lib/components/FlagMCQ.svelte

@@ -2,7 +2,7 @@
  import {
      Button,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import FlagKey from './FlagKey.svelte';
 

frontend/fic/src/lib/components/FormIssue.svelte

@@ -2,7 +2,7 @@
  import {
      Button,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { issues, issues_idx } from '$lib/stores/issues.js';
  import { settings } from '$lib/stores/settings.js';

frontend/fic/src/lib/components/Header.svelte

@@ -17,7 +17,7 @@
      NavLink,
      Progress,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { challengeInfo } from '$lib/stores/challengeinfo.js';
  import { my } from '$lib/stores/my.js';

frontend/fic/src/lib/components/HeaderClock.svelte

@@ -2,7 +2,7 @@
  import {
      ButtonGroup,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import Clock from './Clock.svelte';
  import { challengeInfo } from '$lib/stores/challengeinfo.js';

frontend/fic/src/lib/components/HeaderIssues.svelte

@@ -4,7 +4,7 @@
      Icon,
      NavItem,
      NavLink,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { issues, issues_need_info, issues_nb_responses, issues_known_responses } from '$lib/stores/issues.js';
  import { settings } from '$lib/stores/settings.js';

frontend/fic/src/lib/components/HeaderPartners.svelte

@@ -4,7 +4,7 @@
  import {
      Carousel,
      CarouselItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { challengeInfo } from '$lib/stores/challengeinfo.js';
 

frontend/fic/src/lib/components/NavTags.svelte

@@ -6,7 +6,7 @@
      DropdownMenu,
      DropdownToggle,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
  import { tags } from '$lib/stores/mythemes.js';

frontend/fic/src/lib/components/NavThemes.svelte

@@ -6,7 +6,7 @@
      DropdownMenu,
      DropdownToggle,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
  import { max_solved } from '$lib/stores/themes.js';

frontend/fic/src/lib/components/RegistrationFormCreateTeam.svelte

@@ -10,7 +10,7 @@
      Container,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { settings } from '$lib/stores/settings.js';
 

frontend/fic/src/lib/components/RegistrationFormJoinTeam.svelte

@@ -10,7 +10,7 @@
      Container,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { settings } from '$lib/stores/settings.js';
  import { teams } from '$lib/stores/teams.js';

frontend/fic/src/lib/components/RegistrationRowMember.svelte

@@ -5,7 +5,7 @@
      Button,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  const dispatch = createEventDispatcher();
 

frontend/fic/src/lib/components/ResolutionModal.svelte

@@ -4,7 +4,7 @@
      Modal,
      ModalBody,
      ModalHeader
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
  const toggle = () => (open = !open);
 
  export let exercice = null;

frontend/fic/src/lib/components/ScoreGrid.svelte

@@ -5,7 +5,7 @@
      Column,
      Icon,
      Table,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import DateFormat from '$lib/components/DateFormat.svelte';
 

frontend/fic/src/lib/components/TeamChangeName.svelte

@@ -5,7 +5,7 @@
      CardHeader,
      CardBody,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
  import { settings } from '$lib/stores/settings.js';

frontend/fic/src/lib/components/TeamChangePassword.svelte

@@ -5,7 +5,7 @@
      CardHeader,
      CardBody,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 </script>
 
 <Card class="mb-3 border-warning">

frontend/fic/src/lib/components/TeamMembers.svelte

@@ -6,7 +6,7 @@
      Icon,
      ListGroup,
      ListGroupItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  export let members = [];
 </script>

frontend/fic/src/lib/components/ThemeNav.svelte

@@ -4,7 +4,7 @@
      BreadcrumbItem,
      Card,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
 

frontend/fic/src/routes/+layout.svelte

@@ -6,7 +6,7 @@
  import {
      Container,
      //Styles,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import Header from '$lib/components/Header.svelte';
 

frontend/fic/src/routes/+page.svelte

@@ -8,7 +8,7 @@
      Col,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { goto } from '$app/navigation';
 

frontend/fic/src/routes/[theme]/+layout.svelte

@@ -4,7 +4,7 @@
      Container,
      Icon,
      Spinner,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { challengeInfo } from '$lib/stores/challengeinfo';
  import { current_exercice } from '$lib/stores/exercices';

frontend/fic/src/routes/[theme]/+page.svelte

@@ -8,7 +8,7 @@
      Col,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { goto } from '$app/navigation';
 

frontend/fic/src/routes/[theme]/[exercice]/+layout.svelte

@@ -3,7 +3,7 @@
      Alert,
      Icon,
      Spinner,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import ThemeNav from '$lib/components/ThemeNav.svelte';
 

frontend/fic/src/routes/[theme]/[exercice]/+page.svelte

@@ -11,7 +11,7 @@
      Icon,
      Row,
      Spinner,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import ExerciceDownloads from '$lib/components/ExerciceDownloads.svelte';
  import ExerciceFlags from '$lib/components/ExerciceFlags.svelte';

frontend/fic/src/routes/edit/+page.svelte

@@ -8,7 +8,7 @@
      Container,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import ScoreGrid from '$lib/components/ScoreGrid.svelte';
  import TeamChangeName from '$lib/components/TeamChangeName.svelte';

frontend/fic/src/routes/issues/+page.svelte

@@ -8,7 +8,7 @@
      Container,
      Icon,
      Table,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import DateFormat from '$lib/components/DateFormat.svelte';
 

frontend/fic/src/routes/rank/+page.svelte

@@ -8,7 +8,7 @@
      Container,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { my } from '$lib/stores/my.js';
  import { rank } from '$lib/stores/teams.js';

frontend/fic/src/routes/register/+page.svelte

@@ -7,7 +7,7 @@
      Container,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { goto } from '$app/navigation';
 

frontend/fic/src/routes/rules/+page.svelte

@@ -4,7 +4,7 @@
      CardBody,
      Container,
      Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { challengeInfo } from '$lib/stores/challengeinfo.js';
  import { settings } from '$lib/stores/settings.js';

frontend/fic/src/routes/tags/[tag]/+page.svelte

@@ -8,7 +8,7 @@
      Container,
      Icon,
      Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';
 
  import { goto } from '$app/navigation';