frontend: migration to SvelteKit 2 + Sveltestrap 6

2024-01-09 10:39:08 +01:00 · 2024-01-09 10:39:08 +01:00 · 4dedcfc420
parent fe786e8b93
commit 4dedcfc420
43 changed files with 791 additions and 278 deletions
--- a/.gitlab-ci/build.yml
+++ b/.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:
--- a/1
+++ b/1
@ -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


--- a/1
+++ b/1
@ -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


--- a/frontend/fic/jsconfig.json
+++ b/frontend/fic/jsconfig.json
@ -1,11 +1,3 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+	"extends": "./.svelte-kit/tsconfig.json"
 }
--- a/frontend/fic/package-lock.json
+++ b/frontend/fic/package-lock.json
--- a/frontend/fic/package.json
+++ b/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/kit": "^1.0.0",
+    "@sveltejs/adapter-static": "^3.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",
-    "sveltestrap": "^5.9.0",
-    "vite": "^4.0.0"
+    "svelte": "^4.0.0",
+    "@sveltestrap/sveltestrap": "^6.2.1",
+    "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"
  }
 }
--- a/frontend/fic/src/lib/components/CardTheme.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/Clock.svelte
+++ b/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';

--- a/frontend/fic/src/lib/components/ExerciceDownloads.svelte
+++ b/frontend/fic/src/lib/components/ExerciceDownloads.svelte
@ -7,7 +7,7 @@
     Icon,
     ListGroup,
     ListGroupItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import FileSize from './FileSize.svelte';

--- a/frontend/fic/src/lib/components/ExerciceFlags.svelte
+++ b/frontend/fic/src/lib/components/ExerciceFlags.svelte
@ -11,7 +11,7 @@
     Progress,
     Spinner,
     Tooltip,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import { blake2b } from 'hash-wasm';

--- a/frontend/fic/src/lib/components/ExerciceHints.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/ExerciceSolved.svelte
+++ b/frontend/fic/src/lib/components/ExerciceSolved.svelte
@ -7,7 +7,7 @@
     Icon,
     ListGroup,
     ListGroupItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import DateFormat from './DateFormat.svelte';

--- a/frontend/fic/src/lib/components/ExerciceVideo.svelte
+++ b/frontend/fic/src/lib/components/ExerciceVideo.svelte
@ -4,7 +4,7 @@
 import {
     CardBody,
     Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 export let uri = "";
 </script>
--- a/frontend/fic/src/lib/components/FlagKey.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/FlagMCQ.svelte
+++ b/frontend/fic/src/lib/components/FlagMCQ.svelte
@ -2,7 +2,7 @@
 import {
     Button,
     Icon,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import FlagKey from './FlagKey.svelte';

--- a/frontend/fic/src/lib/components/FormIssue.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/Header.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/HeaderClock.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/HeaderIssues.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/HeaderPartners.svelte
+++ b/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';

--- a/frontend/fic/src/lib/components/NavTags.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/NavThemes.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/RegistrationFormCreateTeam.svelte
+++ b/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';

--- a/frontend/fic/src/lib/components/RegistrationFormJoinTeam.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/RegistrationRowMember.svelte
+++ b/frontend/fic/src/lib/components/RegistrationRowMember.svelte
@ -5,7 +5,7 @@
     Button,
     Icon,
     Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 const dispatch = createEventDispatcher();

--- a/frontend/fic/src/lib/components/ResolutionModal.svelte
+++ b/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;
--- a/frontend/fic/src/lib/components/ScoreGrid.svelte
+++ b/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';

--- a/frontend/fic/src/lib/components/TeamChangeName.svelte
+++ b/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';
--- a/frontend/fic/src/lib/components/TeamChangePassword.svelte
+++ b/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">
--- a/frontend/fic/src/lib/components/TeamMembers.svelte
+++ b/frontend/fic/src/lib/components/TeamMembers.svelte
@ -6,7 +6,7 @@
     Icon,
     ListGroup,
     ListGroupItem,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 export let members = [];
 </script>
--- a/frontend/fic/src/lib/components/ThemeNav.svelte
+++ b/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';

--- a/frontend/fic/src/routes/+layout.svelte
+++ b/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';

--- a/frontend/fic/src/routes/+page.svelte
+++ b/frontend/fic/src/routes/+page.svelte
@ -8,7 +8,7 @@
     Col,
     Icon,
     Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import { goto } from '$app/navigation';

--- a/frontend/fic/src/routes/[theme]/+layout.svelte
+++ b/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';
--- a/frontend/fic/src/routes/[theme]/+page.svelte
+++ b/frontend/fic/src/routes/[theme]/+page.svelte
@ -8,7 +8,7 @@
     Col,
     Icon,
     Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import { goto } from '$app/navigation';

--- a/frontend/fic/src/routes/[theme]/[exercice]/+layout.svelte
+++ b/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';

--- a/frontend/fic/src/routes/[theme]/[exercice]/+page.svelte
+++ b/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';
--- a/frontend/fic/src/routes/edit/+page.svelte
+++ b/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';
--- a/frontend/fic/src/routes/issues/+page.svelte
+++ b/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';

--- a/frontend/fic/src/routes/rank/+page.svelte
+++ b/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';
--- a/frontend/fic/src/routes/register/+page.svelte
+++ b/frontend/fic/src/routes/register/+page.svelte
@ -7,7 +7,7 @@
     Container,
     Icon,
     Row,
- } from 'sveltestrap';
+ } from '@sveltestrap/sveltestrap';

 import { goto } from '$app/navigation';

--- a/frontend/fic/src/routes/rules/+page.svelte
+++ b/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';
--- a/frontend/fic/src/routes/tags/[tag]/+page.svelte
+++ b/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';