APP-2072 Migrate PRIME to Svelte 4. (#265)

.eslintrc.cjs

@@ -20,12 +20,8 @@ module.exports = {
     'plugin:storybook/recommended',
     '@viamrobotics/eslint-config',
   ],
-  plugins: ['svelte3', 'prefer-arrow'],
+  plugins: ['prefer-arrow'],
   settings: {
-    'svelte3/compiler-options': {
-      customElement: false,
-    },
-    'svelte3/typescript': true,
     'import/resolver': {
       typescript: {
         extensions: ['.js', '.ts', '.svelte'],
@@ -43,12 +39,15 @@ module.exports = {
   overrides: [
     {
       files: ['**/*.svelte'],
-      processor: 'svelte3/svelte3',
+      parser: 'svelte-eslint-parser',
       settings: {
-        'svelte3/compiler-options': {
+        'svelte/compiler-options': {
           customElement: true,
         },
       },
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
     },
     {
       files: ['.*.@(cjs|js)', '*.@(cjs|js)', 'scripts/**/*', 'tests/**/*'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime",
-  "version": "0.2.20",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -52,12 +52,12 @@
     "@storybook/addon-interactions": "^7.0.7",
     "@storybook/addon-links": "^7.0.7",
     "@storybook/addons": "^7.0.7",
-    "@storybook/blocks": "7.0.7",
+    "@storybook/blocks": "^7.0.7",
     "@storybook/html": "^7.0.7",
     "@storybook/html-vite": "^7.0.7",
     "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.7",
-    "@sveltejs/vite-plugin-svelte": "^2.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
@@ -76,22 +76,22 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-sonarjs": "^0.19.0",
     "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.31.0",
     "eslint-plugin-tailwindcss": "^3.11.0",
     "eslint-plugin-unicorn": "^46.0.0",
     "monaco-editor": "^0.37.1",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "remark-gfm": "^3.0.1",
     "storybook": "^7.0.7",
-    "svelte": "^3.58.0",
-    "svelte-check": "^3.2.0",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
     "svelte-preprocess": "^5.0.3",
     "tailwindcss": "^3.3.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.6",
     "vite": "4.3.1",
     "vue": "^3.2.45",
     "vue-tsc": "^1.2.0"

playground/src/slider-test.vue

@@ -7,6 +7,7 @@
   <main>
     <v-slider
       data-testid="slider-min-max"
+      range="range"
       min="-50"
       max="50"
       start="-20"