Update build config, bump up ramp to v4.10.0

package.json

@@ -4,14 +4,17 @@
     "version": "3.2.8",
     "private": false,
     "license": "MIT",
+    "type": "module",
     "repository": "https://github.com/ramp4-pcar4/story-ramp",
     "bugs": "https://github.com/ramp4-pcar4/story-ramp/issues",
     "scripts": {
         "dev": "vite",
-        "serve": "vite preview",
         "build": "vite build",
         "build-plugin": "vite build --mode plugin",
-        "lint": "vite lint"
+        "preview": "vite preview",
+        "type-check": "vue-tsc --build",
+        "lint": "eslint . --fix",
+        "format": "prettier --write src/"
     },
     "main": "./dist/storylines-viewer.umd.js",
     "module": "./dist/storylines-viewer.mjs",
@@ -29,7 +32,7 @@
         "jszip": "^3.10.1",
         "markdown-it": "^12.0.6",
         "nouislider": "^15.5.0",
-        "ramp-pcar": "^4.8.0",
+        "ramp-pcar": "^4.10.2",
         "scrollama": "^3.2.0",
         "vue": "^3.4.37",
         "vue-class-component": "^8.0.0-rc.1",
@@ -43,25 +46,23 @@
         "vue3-spinners": "^1.2.2"
     },
     "devDependencies": {
+        "@tsconfig/node22": "^22.0.0",
+        "@types/node": "^22.9.3",
         "@types/markdown-it": "^12.0.1",
-        "@typescript-eslint/eslint-plugin": "^4.18.0",
-        "@typescript-eslint/parser": "^4.18.0",
         "@vitejs/plugin-vue": "^5.1.2",
-        "@vue/compiler-sfc": "^3.3.4",
-        "@vue/eslint-config-prettier": "^6.0.0",
-        "@vue/eslint-config-typescript": "^7.0.0",
+        "@vue/eslint-config-prettier": "^10.1.0",
+        "@vue/eslint-config-typescript": "^14.1.3",
+        "@vue/tsconfig": "^0.7.0",
         "autoprefixer": "^9.8.6",
-        "eslint": "^6.8.0",
-        "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-vue": "^6.2.2",
+        "eslint": "^9.14.0",
+        "eslint-plugin-vue": "^9.30.0",
         "postcss": "^8.4.24",
-        "prettier": "^2.2.1",
+        "prettier": "^3.3.3",
         "sass": "1.77.6",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
-        "typescript": "~4.1.5",
-        "vite": "^5.4.0",
-        "vite-plugin-static-copy": "^1.0.5",
-        "vue-eslint-parser": "^9.3.1",
-        "vue-loader": "^17.2.2"
+        "typescript": "~5.6.3",
+        "vite": "^5.4.11",
+        "vite-plugin-static-copy": "^2.2.0",
+        "vue-tsc": "^2.1.10"
     }
 }

postcss.config.js → postcss.config.cjs

@@ -1,3 +1,4 @@
+/* eslint-env node */
 module.exports = {
     plugins: {
         tailwindcss: {},

src/components/panels/helpers/time-slider/index.ts

@@ -1,4 +1,4 @@
-import { TimeSliderConfig } from '@storylines/definitions';
+import type { TimeSliderConfig } from '@storylines/definitions';
 import TimeSlider from './time-slider.vue';
 import { createApp, h } from 'vue';
 import VueTippy from 'vue-tippy';

src/components/panels/helpers/time-slider/time-slider.vue

@@ -63,8 +63,8 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
 import { onMounted, ref } from 'vue';
-import { TimeSliderConfig } from '@storylines/definitions';
-import noUiSlider, { API, PipsMode } from 'nouislider';
+import type { TimeSliderConfig } from '@storylines/definitions';
+import noUiSlider, { type API, PipsMode } from 'nouislider';
 
 const props = defineProps({
     config: {
@@ -105,7 +105,7 @@ onMounted(() => {
                 return -1;
             }
         },
-        ...props.config.sliderConfig,
+        ...props.config.sliderConfig
     });
 
     slider.value.on('update', () => {

src/components/panels/map-panel.vue

@@ -40,7 +40,7 @@ import { onMounted, ref } from 'vue';
 import MarkdownIt from 'markdown-it';
 import { i18n } from '@storylines/lang';
 import { createInstance } from 'ramp-pcar';
-import { ConfigFileStructure, MapPanel, TimeSliderConfig } from '@storylines/definitions';
+import type { ConfigFileStructure, MapPanel, TimeSliderConfig } from '@storylines/definitions';
 import { TimeSliderFixture } from '@storylines/components/panels/helpers/time-slider/index';
 
 const props = defineProps({
@@ -275,7 +275,15 @@ const setupMap = (config: any) => {
     white-space: unset !important;
 }
 
-$font-list: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
+$font-list:
+    'Montserrat',
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
     Segoe UI Emoji;
 :deep(.ramp-app) {
     height: 100%;

src/components/story/story.vue

@@ -76,13 +76,13 @@
 
 <script setup lang="ts">
 import { getCurrentInstance, onMounted, ref } from 'vue';
-import { useRoute, RouteLocationNormalized } from 'vue-router';
+import { useRoute, type RouteLocationNormalized } from 'vue-router';
 
 import MobileMenu from './mobile-menu.vue';
 import StoryContent from '@storylines/components/story/story-content.vue';
 import Intro from '@storylines/components/story/introduction.vue';
 
-import { StoryRampConfig } from '@storylines/definitions';
+import type { StoryRampConfig } from '@storylines/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 
 const route = useRoute();

src/definitions.ts

@@ -1,5 +1,5 @@
 import JSZip from 'jszip';
-import { Options as nouiOptions } from 'nouislider';
+import type { Options as nouiOptions } from 'nouislider';
 
 export interface StoryRampConfig {
     title: string;

src/main.ts

@@ -6,7 +6,7 @@ import router from './router';
 import './style.css';
 import { i18n } from './lang';
 
-import 'ramp-pcar/dist/lib/ramp.css';
+import 'ramp-pcar/dist/ramp.css';
 import VueTippy from 'vue-tippy';
 import HighchartsVue from 'highcharts-vue';
 import VuePapaParse from 'vue-papa-parse';

src/router/index.ts

@@ -1,5 +1,5 @@
 //import StoryV from '@storylines/components/story/story.vue';
-import { createRouter, createWebHashHistory, RouteLocationNormalized } from 'vue-router';
+import { createRouter, createWebHashHistory, type RouteLocationNormalized } from 'vue-router';
 
 const routes = [
     {

tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+    "exclude": ["src/**/__tests__/*"],
+    "compilerOptions": {
+        "composite": true,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+        "paths": {
+            "@storylines/*": ["./src/*"]
+        }
+    }
+}

tsconfig.json

@@ -1,23 +1,11 @@
 {
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "strict": true,
-        "jsx": "preserve",
-        "importHelpers": true,
-        "moduleResolution": "node",
-        "experimentalDecorators": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "sourceMap": true,
-        "baseUrl": ".",
-        "types": ["webpack-env"],
-        "paths": {
-            "@storylines/*": ["src/*"]
-        },
-        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
-    "exclude": ["node_modules"]
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
 }

tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}