Upgrade packages, format & lint

.prettierrc

+{
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "semi": false,
+  "trailingComma": "all"
+}

packages/viewer/.eslintignore

-.DS_Store
-node_modules
-/.svelte-kit
-/build
-/package
-/*.env
-!/example.env
-
-# Ignore files for PNPM, NPM and YARN
-package-lock.json
-pnpm-lock.yaml
-yarn.lock

packages/viewer/.eslintrc.cjs

-/** @type { import("eslint").Linter.Config } */
-module.exports = {
-  env: {
-    browser: true,
-    es2017: true,
-    node: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:svelte/recommended",
-    "prettier",
-  ],
-  overrides: [
-    {
-      files: ["*.svelte"],
-      parser: "svelte-eslint-parser",
-      parserOptions: {
-        parser: "@typescript-eslint/parser",
-      },
-    },
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: 2020,
-    extraFileExtensions: [".svelte"],
-    sourceType: "module",
-  },
-  plugins: ["@typescript-eslint"],
-  root: true,
-  rules: {
-    "no-irregular-whitespace": "off",
-  },
-  settings: {
-    svelte: {
-      ignoreWarnings: ["svelte/no-at-html-tags"],
-    },
-  },
-}

packages/viewer/eslint.config.js

+import js from "@eslint/js"
+import ts from "typescript-eslint"
+import svelte from "eslint-plugin-svelte"
+import prettier from "eslint-config-prettier"
+import globals from "globals"
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs["flat/prettier"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser,
+      },
+    },
+    settings: {
+      svelte: {
+        ignoreWarnings: ["no-irregular-whitespace"],
+      },
+    },
+  },
+  {
+    files: ["src/scripts/*.ts"],
+    rules: {
+      "no-irregular-whitespace": "off",
+    },
+  },
+  {
+    ignores: ["build/", ".svelte-kit/", "dist/"],
+  },
+]

packages/viewer/package.json

@@ -29,50 +29,48 @@
     "@iconify-json/mdi": "^1.1.67",
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tax-benefit/openfisca-json-model": "^5.0.4",
     "@types/eslint": "^9.6.0",
     "@types/fs-extra": "^11.0.4",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/morgan": "^1.9.9",
-    "@types/papaparse": "^5.3.14",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
+    "@types/papaparse": "^5.3.15",
     "autoprefixer": "^10.4.16",
     "dotenv": "^16.4.5",
-    "eslint": "^9.8.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0-next.13",
+    "eslint-plugin-svelte": "^2.46.0",
     "exceljs": "^4.4.0",
     "fs-extra": "^11.2.0",
+    "globals": "^15.0.0",
     "js-yaml": "^4.1.0",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.1",
     "morgan": "^1.10.0",
     "papaparse": "^5.4.1",
-    "postcss": "^8.4.32",
-    "postcss-load-config": "^6.0.1",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "prettier-plugin-tailwindcss": "^0.6.1",
-    "svelte": "^5.0.0-next.174",
-    "svelte-check": "^3.6.0",
-    "svelte-i18n": "^4.0.0",
+    "svelte": "^5.0.3",
+    "svelte-check": "^4.0.5",
+    "svelte-i18n": "^4.0.1",
     "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
     "tsx": "^4.16.0",
     "typescript": "^5.0.0",
+    "typescript-eslint": "^8.6.0",
     "unplugin-icons": "^0.19.0",
     "vite": "^5.0.3",
     "vitest": "^2.0.3"
   },
   "overrides": {
     "svelte-hmr": {
-      "svelte": "^5.0.0-next"
+      "svelte": "^5"
     },
     "svelte-i18n": {
-      "svelte": "^5.0.0-next"
+      "svelte": "^5"
     }
   }
 }

packages/viewer/postcss.config.cjs

-const tailwindcss = require("tailwindcss")
-const autoprefixer = require("autoprefixer")
-
-const config = {
-  plugins: [
-    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-    tailwindcss(), //Some plugins, like tailwindcss/nesting, need to run before Tailwind, tailwindcss(), //But others, like autoprefixer, need to run after, //But others, like autoprefixer, need to run after,
-    autoprefixer,
-  ],
-}
-
-module.exports = config

packages/viewer/postcss.config.js

+export default {
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: {},
+  },
+}

packages/viewer/src/app.css

+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

packages/viewer/src/app.pcss

-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

packages/viewer/src/lib/parameters.ts

@@ -121,20 +121,20 @@ export function countParameterColumnsApproximation(
           if (!hasBase) {
             fields.splice(0, 1) // Remove "base" field.
           }
-
-          return fields.length
+          break
         }
 
         case ScaleType.MarginalAmount:
         case ScaleType.SingleAmount: {
           fields = ["threshold", "amount"]
-          return fields.length
+          break
         }
 
         default: {
           assertNever("ScaleParameter.type", parameter)
         }
       }
+      return fields.length
     }
 
     case ParameterClass.Value: {

packages/viewer/src/routes/+layout.svelte

 <script lang="ts">
-  import "../app.pcss"
+  import "../app.css"
 
   let { children, data } = $props()
   let { appTitle, customization } = $derived(data)

packages/viewer/svelte.config.js

@@ -29,7 +29,7 @@ const config = {
 
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
-  preprocess: [vitePreprocess()],
+  preprocess: vitePreprocess(),
 }
 
 export default config

packages/viewer/tailwind.config.cjs → packages/viewer/tailwind.config.ts

-/** @type {import('tailwindcss').Config}*/
-const config = {
+import type { Config } from "tailwindcss"
+
+const config: Config = {
   content: ["./src/**/*.{html,js,svelte,ts}"],
 
   theme: {
@@ -9,4 +10,4 @@ const config = {
   plugins: [],
 }
 
-module.exports = config
+export default config

packages/viewer/tsconfig.json

@@ -5,11 +5,11 @@
     "checkJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true,
-    "moduleResolution": "bundler"
+    "strict": true
   }
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
   // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files

prettier.config.cjs

-module.exports = {
-  overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
-  plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-  semi: false,
-  trailingComma: "all",
-}