Merge pull request #3 from terrestris/upgrade-svelte

chore: upgrade libs and imporve typings

Author: hblitza

bun.lockb

@@ -1,33 +1,36 @@
 {
   "name": "svelte-app",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@terrestris/ol-util": "^20.0",
+    "echarts": "^5.5.1",
+    "marked": "^14.1.3",
+    "ol": "^10",
+    "sass": "^1.80.3",
+    "sirv-cli": "^3.0.0",
+    "vite": "^5.4.9",
+    "yaml": "^2.6.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.5",
-    "@tsconfig/svelte": "^3.0.0",
-    "d3-array": "latest",
-    "d3-scale": "latest",
-    "svelte": "^3.55.0",
-    "svelte-check": "^3.0.0",
-    "svelte-preprocess": "^5.1.3",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.0"
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "svelte": "^5.0.3",
+    "svelte-check": "^4.0.5",
+    "svelte-preprocess": "^6.0.3",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3"
   },
-  "dependencies": {
-    "@terrestris/ol-util": "^12.0.1",
-    "echarts": "^5.5.0",
-    "marked": "^12.0.1",
-    "ol": "^7",
-    "sass": "^1.72.0",
-    "sirv-cli": "^2.0.0",
-    "vite": "^4.4.9",
-    "yaml": "^2.3.2"
-  }
+  "trustedDependencies": [
+    "svelte-preprocess"
+  ]
 }

package.json

@@ -1,14 +1,12 @@
 <script lang="ts">
-  import { parse as parseYaml } from "yaml";
-  import Scrolly from "./components/Scrolly.svelte";
-  import Map from "./components/Map.svelte";
   import Chart from "./components/Chart.svelte";
-  import { step } from "./store/step";
-  import { marked } from "marked";
   import Header from "./components/Header.svelte";
-
+  import Map from "./components/Map.svelte";
+  import Scrolly from "./components/Scrolly.svelte";
   import type { Config } from "./types";
-
+  import { marked } from "marked";
+  import { parse as parseYaml } from "yaml";
+  import { step } from "./store/step";
 
   /* By Connor Rothschild https://twitter.com/CL_Rothschild
 	Scrollytelling component from Russell Goldenberg https://twitter.com/codenberg/status/1432774653139984387
@@ -20,14 +18,18 @@
     const path = url.searchParams.get("config");
     if (!path) {
       console.error("No config path defined.");
+      return;
     }
     return path;
   };
   const path = getConfig();
-  const promise = fetch(path)
-    .then((response) => response.text())
-    .then((text) => parseYaml(text) as Config)
-  // TODO error handling
+  let promise: any;
+  if (path) {
+    promise = fetch(path)
+      .then((response) => response.text())
+      .then((text) => parseYaml(text) as Config)
+    // TODO error handling
+  }
 
   const basePath = location.origin + location.pathname;
 </script>
@@ -64,7 +66,7 @@
                     <span class="attribution">{@html s.attribution}</span>
                   {/if}
                 </div>
-                <p />
+                <p></p>
               </div>
               {/each}
               <!-- <div class="spacer" /> -->

src/App.svelte

@@ -21,11 +21,19 @@
         CanvasRenderer,
     ]);
 
-    export let config;
+    // Define type for the config prop
+    interface Config {
+        title: string;
+        xAxisData: Array<any>;  // Define a more specific type if you know the structure
+        series: Array<any>;     // Define a more specific type if you know the structure
+    }
+
+    export let config: Config;
 
-    let option;
+    // TODO use echart types here
+    let option: any = { ...echartOption }; // Use EChartsOption to type the option
 
-    let chartId: string;
+    let chartId: string = "";
 
     $: {
         if (config) {
@@ -36,29 +44,34 @@
     const setupChart = (node: HTMLElement) => {
         if (config) {
             // create chart config
-            option = echartOption;
-            option.title.text = config.title;
+            option = { ...echartOption };  // Ensure a new instance is created
+            option.title = { text: config.title }; // Ensure the title is typed correctly
+            option.xAxis = [];  // Ensure the xAxis is reset before pushing data
+
             config.xAxisData.forEach(data => {
-                option.xAxis.push(data);
+                option.xAxis?.push(data);
             });
+
+            option.series = [];  // Reset the series before adding data
             config.series.forEach((serie) => {
-                option.series.push({
+                option.series?.push({
                     ...serie,
                     type: "bar",
                     emphasis: {
                         focus: "series",
                     },
                 });
             });
+
             // init chart
             const echart = echarts.init(node);
             // apply chart option
             echart && option && echart.setOption(option);
         }
-    }
+    };
 </script>
 
-<div id={chartId} class="chart" use:setupChart >chart</div>
+<div id={chartId} class="chart" use:setupChart>chart</div>
 
 <style>
     .chart {

src/components/Chart.svelte

@@ -4,6 +4,7 @@
     // OpenLayers
     import Map from "ol/Map";
     import View from "ol/View";
+    import Layer from "ol/layer/Layer";
     // Utils
     import { initTopicLayer, updateTopicLayer } from "../util/topicLayer";
     import {
@@ -21,15 +22,15 @@
     export let steps: StepConfigList;
 
     // Local state
-    let map = null;
-    let baseLayer;
-    let topicLayer;
-    let highlightLayer;
-    let dataLayer;
+    let map: Map | null = null;
+    let baseLayer: Layer | undefined;
+    let topicLayer: Layer | undefined;
+    let highlightLayer: Layer | undefined;
+    let dataLayer: Layer | undefined;
 
     // Functions
     const setupMap = (node: HTMLElement) => {
-        baseLayer = getBaseLayerByName("osm");
+        baseLayer = getBaseLayerByName("osm") as Layer;
         map = new Map({
             controls: [
                 new Attribution({
@@ -47,7 +48,7 @@
         return {
             destroy() {
                 if (map) {
-                    map.setTarget(null);
+                    map.setTarget(undefined);
                     map = null;
                 }
             },
@@ -74,6 +75,7 @@
             }
         }
     }
+    
     // apply and render step config
     step.subscribe((stepValue) => {
         if (stepValue >= 0 && map && steps) {
@@ -84,33 +86,33 @@
             // apply baselayer
             if (
                 currentConfig.baseLayer &&
-                currentConfig.baseLayer !== baseLayer.get("name")
+                currentConfig.baseLayer !== baseLayer?.get("name")
             ) {
                 const newSource = getBaseLayerByName(
-                    currentConfig.baseLayer,
+                    currentConfig.baseLayer as string,
                 )?.getSource();
                 const mapLayer = map
                     .getAllLayers()
-                    .filter((l) => l.get("id") === "baseLayer")[0];
+                    .filter((l) => l.get("id") === "baseLayer")[0] as Layer;
                 mapLayer?.setSource(newSource);
                 mapLayer.set("name", currentConfig.baseLayer);
             }
             // apply topicLayer
-            if (currentConfig.topicLayer) {
+            if (currentConfig.topicLayer && topicLayer) {
                 updateTopicLayer(currentConfig.topicLayer, topicLayer);
                 topicLayer.setVisible(true);
-            } else {
+            } else if (topicLayer) {
                 topicLayer.setVisible(false);
             }
             // apply dataLayer
-            if (currentConfig.dataLayer) {
+            if (currentConfig.dataLayer && dataLayer) {
                 updateDataLayer(currentConfig, dataLayer);
                 dataLayer.setVisible(true);
             } else if (dataLayer) {
                 dataLayer.setVisible(false);
             }
             // apply highlighting
-            if (currentConfig.highlight) {
+            if (currentConfig.highlight && highlightLayer) {
                 updateHighlightLayer(currentConfig.highlight, highlightLayer);
                 highlightLayer.setVisible(true);
             } else if (highlightLayer) {
@@ -122,7 +124,7 @@
     });
 </script>
 
-<div id={mapId} class="map" use:setupMap />
+<div id={mapId} class="map" use:setupMap> </div>
 
 <style>
     .map {

src/components/Map.svelte

@@ -1,41 +1,31 @@
-<script>
-  /**
-	Scrollytelling component from Russell Goldenberg 
-  https://svelte.dev/repl/3d3736e634c9404ea8ec2ef7b87e2053?version=3.42.4
-	
-   * This component manages which item is most in view for scroll triggering
-   * example:
-   * <Scroll
-   * 	bind:value={scrollIndex}
-   * >
-   * **items here**
-   * </Scroll>
-   *
-   * optional params with defaults
-   * <Scroll root={null} top={0} bottom={0} increments={100}>
-   */
+<script lang="ts">
   import { onMount } from "svelte";
-  export let root = null;
-  export let top = 0;
-  export let bottom = 0;
-  export let increments = 100;
-  export let value = 0;
+  
+  // Define prop types
+  export let root: HTMLElement | null = null;
+  export let top: number = 0;
+  export let bottom: number = 0;
+  export let increments: number = 100;
+  export let value: number = 0;
 
-  const steps = [];
-  const threshold = [];
-
-  let nodes = [];
-  let intersectionObservers = [];
-  let container;
+  // Local variables with specific types
+  const steps: number[] = [];
+  const threshold: number[] = [];
+  let nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dummySelector'); // Initialize with an empty NodeList
+  let intersectionObservers: IntersectionObserver[] = [];
+  let container!: HTMLElement; // "!" asserts that container will be initialized later
 
+  // Watch for changes in 'top' or 'bottom' and trigger update
   $: top, bottom, update();
 
-  const update = () => {
+  // Update function to create observers for each node
+  const update = (): void => {
     if (!nodes.length) return;
-    nodes.forEach(createObserver);
+    nodes.forEach((node, index) => createObserver(node, index));
   };
 
-  const mostInView = () => {
+  // Function to determine which item is most in view
+  const mostInView = (): void => {
     let maxRatio = 0;
     let maxIndex = 0;
     for (let i = 0; i < steps.length; i++) {
@@ -45,22 +35,21 @@
       }
     }
 
-    if (maxRatio > 0) value = maxIndex;
-		else value = 0;
+    value = maxRatio > 0 ? maxIndex : 0;
   };
 
-  const createObserver = (node, index) => {
-    const handleIntersect = (e) => {
-      const intersecting = e[0].isIntersecting;
-      const ratio = e[0].intersectionRatio;
+  // Function to create an observer for a node
+  const createObserver = (node: HTMLElement, index: number): void => {
+    const handleIntersect = (entries: IntersectionObserverEntry[]): void => {
+      const ratio = entries[0].intersectionRatio;
       steps[index] = ratio;
       mostInView();
     };
 
     const marginTop = top ? top * -1 : 0;
     const marginBottom = bottom ? bottom * -1 : 0;
     const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
-    const options = { root, rootMargin, threshold };
+    const options: IntersectionObserverInit = { root, rootMargin, threshold };
 
     if (intersectionObservers[index]) intersectionObservers[index].disconnect();
 
@@ -69,11 +58,13 @@
     intersectionObservers[index] = io;
   };
 
-  onMount(() => {
+  // onMount to set up the component after it mounts
+  onMount((): void => {
     for (let i = 0; i < increments + 1; i++) {
       threshold.push(i / increments);
     }
-    nodes = container.querySelectorAll(":scope > *");
+    // Query all child elements
+    nodes = container.querySelectorAll(":scope > *") as NodeListOf<HTMLElement>;
     update();
   });
 </script>

src/components/Scrolly.svelte

@@ -1 +1 @@
-/// <reference types="svelte" />
+/// <reference types="svelte" />

src/global.d.ts

@@ -1,2 +1 @@
 declare module 'configParser';
-

src/index.d.ts

@@ -1,7 +1,7 @@
+import { mount } from 'svelte';
+
 import App from './App.svelte';
 
-var app = new App({
-	target: document.body
-});
+const app = mount(App, { target: document.body });
 
-export default app;
+export default app;