Merge pull request #76 from krasch/imports

Using ES6 imports everywhere
krasch · Jan 26, 2025 · b364ccd · b364ccd
2 parents d5bf75b + 01e0a2b
commit b364ccd
Show file tree

Hide file tree

Showing 40 changed files with 300 additions and 328 deletions.
diff --git a/data/cities.js b/data/cities.js
@@ -1,4 +1,4 @@
-const CITIES = {
+export const CITIES = {
   6698: {
     name: "Aachen",
     latitude: 50.77607,

diff --git a/data/connections.js b/data/connections.js
@@ -1,4 +1,4 @@
-const CONNECTIONS = [
+export const CONNECTIONS = [
   {
     id: "R1067",
     name: "R1067",

diff --git a/data/routes.js b/data/routes.js
@@ -1,4 +1,4 @@
-const ROUTES = {
+export const ROUTES = {
   "Berlin->Amsterdam": [
     "//Berlin (05:54) -> Amsterdam (12:03, IC240-0)",
     "//Berlin (07:53) -> Amsterdam (14:03, IC148-0)",

diff --git a/data/stations.js b/data/stations.js
@@ -1,4 +1,4 @@
-const STATIONS = {
+export const STATIONS = {
   8000001: {
     name: "Aachen Hbf",
     latitude: 50.767802,

diff --git a/external/luxon@3.5.0/luxon.min.js b/external/luxon@3.5.0/luxon.min.js
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
     <!-- external -->
     <link rel="stylesheet" href="external/maplibre-gl@4.6.0/maplibre-gl.css"/>
     <script src="external/maplibre-gl@4.6.0/maplibre-gl.js"></script>
-    <script src="external/luxon@3.5.0/luxon.min.js"></script>
+    <!--script src="external/luxon@3.5.0/luxon.min.js"></script-->
 
     <script defer data-domain="trans-europe-planner.eu" src="https://plausible.io/js/script.js"></script>
 
@@ -23,41 +23,34 @@
     <script src="style/map/layers.js"></script> <!-- only contains css styles for map in js -->
 
     <!-- input data -->
-    <script src="data/cities.js"></script>
+    <!--script src="data/cities.js"></script>
     <script src="data/stations.js"></script>
     <script src="data/connections.js"></script>
     <script src="data/routes.js"></script>
-    <script src="data/text.js"></script>
-
-    <!-- custom elements -->
-    <script src="script/customElements/travelCalendar/travelCalendar.js"></script>
+    <script src="data/text.js"></script-->
 
     <!-- types -->
-    <script src="script/data/types/connection.js"></script>
-    <script src="script/data/types/journey.js"></script>
+    <!--script src="script/data/types/connection.js"></script>
+    <script src="script/data/types/journey.js"></script-->
 
     <!-- data-handling -->
-    <script src="script/data/routing.js"></script>
+    <!--script src="script/data/routing.js"></script>
     <script src="script/data/database.js"></script>
-    <script src="script/data/componentData.js"></script>
-
-    <!-- components -->
-    <script src="script/components/layout.js"></script>
-    <script src="script/components/datepicker.js"></script>
-    <script src="script/components/perlschnur.js"></script>
-    <script src="script/components/calendar.js"></script>
-    <script src="script/components/map/map.js"></script>
-    <script src="script/components/map/cities.js"></script>
-    <script src="script/components/map/edges.js"></script>
-    <script src="script/components/map/util.js"></script>
+    <script src="script/data/componentData.js"></script-->
 
     <!-- other -->
-    <script src="script/util.js"></script>
-    <script src="script/main.js"></script>
+    <!--script src="script/util.js"></script-->
+    <!--script src="script/main.js"></script-->
 
     <title>Trans-Europe-Planner</title>
     <link rel="stylesheet" href="style/map/map.css">
 
+    <script type="module">
+        // this needs to get done before the HTML, otherwise TravelCalendar element is unknown
+        import {TravelCalendar} from "./script/customElements/travelCalendar/travelCalendar.js"
+        customElements.define("travel-calendar", TravelCalendar);
+    </script>
+
 </head>
 
 <body>
@@ -259,9 +252,17 @@ <h3>Reiseverlauf:</h3>
 
 <div id="map"></div>
 
-<script>
-
-    "use strict";
+<script type="module">
+    import {Layout} from "./script/components/layout.js";
+    import {Perlschnur} from "./script/components/perlschnur.js";
+    import {Datepicker} from "./script/components/datepicker.js";
+    import {MapWrapper} from "./script/components/map/map.js";
+    import {CalendarWrapper} from "./script/components/calendar.js";
+
+    import {main} from "./script/main.js";
+    import {initColors} from "./script/util.js";
+    import {initCityNameToId} from "./script/util.js";
+    import {CITIES} from "./data/cities.js";
 
     function getHome() {
         const params = new URLSearchParams(window.location.search);

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "start": "serve -p 8000",
-    "test": "node node_modules/.bin/jest tests",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest tests",
     "check-pretty": "node node_modules/.bin/prettier data/ script/ style/map/layers.js --check",
     "make-pretty": "node node_modules/.bin/prettier data/ script/ style/map/layers.js --write"
   },
@@ -20,14 +20,11 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "./travelCalendar":  "<rootDir>/script/customElements/travelCalendar/travelCalendar.js",
-      "./componentData": "<rootDir>/script/data/componentData.js",
-      "./database": "<rootDir>/script/data/database.js",
-      "./routing": "<rootDir>/script/data/routing.js",
-      "./connection": "<rootDir>/script/data/types/connection.js",
-      "./journey": "<rootDir>/script/data/types/journey.js",
-      "./testData": "<rootDir>/tests/testData.js",
-      "./calendarTestUtils": "<rootDir>/tests/calendarTestUtils.js"
+      "/external/(.*)": "<rootDir>/external/$1",
+      "luxon": "<rootDir>/external/luxon@3.5.0/luxon.min.js",
+
+      "/script/(.*)": "<rootDir>/script/$1",
+      "tests/(.*)": "<rootDir>/tests/$1"
     }
   }
 }
diff --git a/script/components/calendar.js b/script/components/calendar.js
@@ -3,7 +3,7 @@ const ICONS = {
   ferry: "images/icons/ferry.svg",
 };
 
-class CalendarWrapper {
+export class CalendarWrapper {
   #callbacks = {
     legChanged: () => {},
     legHoverStart: () => {},
@@ -112,8 +112,3 @@ class CalendarWrapper {
     // lead to a lot of date formatting overhead so let's just not do it
   }
 }
-
-// exports for testing only (NODE_ENV='test' is automatically set by jest)
-if (typeof process === "object" && process.env.NODE_ENV === "test") {
-  module.exports.CalendarWrapper = CalendarWrapper;
-}
diff --git a/script/components/datepicker.js b/script/components/datepicker.js
@@ -1,4 +1,6 @@
-class Datepicker {
+import { DateTime } from "/external/luxon@3.5.0/luxon.min.js";
+
+export class Datepicker {
   #container;
 
   #inputElement;
@@ -20,7 +22,7 @@ class Datepicker {
     this.#decreaseDateElement = this.#container.querySelector("#decrease-date");
     this.#increaseDateElement = this.#container.querySelector("#increase-date");
 
-    const today = luxon.DateTime.now().startOf("day");
+    const today = DateTime.now().startOf("day");
     this.#start = today.plus({ days: 1 });
     this.#end = today.plus({ days: 3 * 30 });
 
@@ -69,7 +71,7 @@ class Datepicker {
 
   get #currentDate() {
     if (this.#inputElement.value.length === 0) return null;
-    return luxon.DateTime.fromISO(this.#inputElement.value);
+    return DateTime.fromISO(this.#inputElement.value);
   }
 
   set #currentDate(value) {

diff --git a/script/components/layout.js b/script/components/layout.js
@@ -1,4 +1,4 @@
-class Layout {
+export class Layout {
   #initialUpdate = true;
 
   #borderRadius;

diff --git a/script/components/map/cities.js b/script/components/map/cities.js
@@ -1,3 +1,21 @@
+import {
+  StateDict,
+  MouseEventHelper,
+  animateDropWithBounce,
+  filterChanges,
+  groupChangesById,
+  updateSourceData,
+  updateVisibility,
+} from "./util.js";
+import { createElementFromTemplate } from "../../util.js";
+
+// todo should be in template
+function getNumTransfersText(numTransfers) {
+  if (numTransfers === 0) return "Direkt erreichbar";
+  if (numTransfers === 1) return "Mit 1 Umstieg erreichbar";
+  else return `Mit ${numTransfers} Umstiegen erreichbar`;
+}
+
 function initHomeMarker(id, lngLat) {
   const element = createElementFromTemplate("template-city-marker-home", {
     $root$: { "data-city-id": id },
@@ -82,9 +100,9 @@ function showStartAnimation(map, geo, initialState, animationDoneCallback) {
   );
 }
 
-ANIMATION = true;
+const ANIMATION = true;
 
-class Cities {
+export class Cities {
   #callbacks = {
     mouseOver: () => {},
     mouseLeave: () => {},

diff --git a/script/components/map/edges.js b/script/components/map/edges.js
@@ -1,3 +1,10 @@
+import {
+  StateDict,
+  MouseEventHelper,
+  filterChanges,
+  groupChangesById,
+} from "./util.js";
+
 function initJourneyMenu(id, journey, lngLat) {
   const element = createElementFromTemplate("template-edge-menu", {
     $root$: { "data-journey-id": id },
@@ -18,7 +25,7 @@ function initJourneyMenu(id, journey, lngLat) {
   return popup;
 }
 
-class Edges {
+export class Edges {
   #callbacks = {
     mouseOver: () => {},
     mouseLeave: () => {},

diff --git a/script/components/map/map.js b/script/components/map/map.js
@@ -1,3 +1,6 @@
+import { Cities } from "./cities.js";
+import { Edges } from "./edges.js";
+
 function cityToGeojson(data) {
   const [id, city] = data;
 
@@ -36,7 +39,7 @@ function asGeojsonFeatureCollection(features) {
   };
 }
 
-class MapWrapper {
+export class MapWrapper {
   #callbacks = {
     selectJourney: () => {},
     showCityRoutes: () => {},

diff --git a/script/components/map/util.js b/script/components/map/util.js
@@ -1,9 +1,9 @@
-function updateVisibility(element, isVisible) {
+export function updateVisibility(element, isVisible) {
   if (isVisible) element.classList.remove("hidden");
   else element.classList.add("hidden");
 }
 
-function updateSourceData(map, sourceName, groupedChanges) {
+export function updateSourceData(map, sourceName, groupedChanges) {
   const updates = [];
 
   for (let id in groupedChanges) {
@@ -20,11 +20,11 @@ function updateSourceData(map, sourceName, groupedChanges) {
     map.getSource(sourceName).updateData({ update: updates });
 }
 
-function filterChanges(changes, keys) {
+export function filterChanges(changes, keys) {
   return changes.filter((c) => keys.includes(c.key));
 }
 
-function groupChangesById(changes) {
+export function groupChangesById(changes) {
   const grouped = {};
   for (let change of changes) {
     if (!grouped[change.id]) grouped[change.id] = [];
@@ -41,7 +41,7 @@ function isSet(stateDict, id, key) {
   );
 }
 
-class StateDict {
+export class StateDict {
   #state = {};
   #resetKeys;
 
@@ -97,7 +97,7 @@ class StateDict {
   }
 }
 
-function animateDropWithBounce(
+export function animateDropWithBounce(
   map,
   markers,
   initialHeightPixels,
@@ -140,7 +140,7 @@ function animateDropWithBounce(
 // 1. We want to react on multiple layers (e.g. all city layers) with the same event handlers
 // 2. The maplibre mouseLeave event does not contain the feature that was left -> need to keep state
 // 3. We want to prefer city events to edge events
-class MouseEventHelper {
+export class MouseEventHelper {
   #callbacks = {
     mouseOver: () => {},
     mouseLeave: () => {},

diff --git a/script/components/perlschnur.js b/script/components/perlschnur.js
@@ -1,4 +1,6 @@
-class Perlschnur {
+import { createElementFromTemplate, updateElement } from "../util.js";
+
+export class Perlschnur {
   #container;
 
   constructor(container) {

diff --git a/script/customElements/travelCalendar/travelCalendar.js b/script/customElements/travelCalendar/travelCalendar.js
@@ -97,7 +97,7 @@ const gridStyle = `<style>
  *   with the earliest data-departure-datetime to be added first. Otherwise, during drag&drop, later entries can overlap
  *   earlier ones, making them unavailable for dropping.
  * */
-class TravelCalendar extends HTMLElement {
+export class TravelCalendar extends HTMLElement {
   #lookup;
   static observedAttributes = ["start-date"];
 
@@ -394,7 +394,7 @@ class TravelCalendar extends HTMLElement {
   }
 }
 
-class MultipartCalendarEntry {
+export class MultipartCalendarEntry {
   #group;
 
   constructor(parts) {
@@ -438,7 +438,7 @@ class MultipartCalendarEntry {
   }
 }
 
-class LookupUtil {
+export class LookupUtil {
   // using map because can use complex keys (e.g. HTML elements)
 
   // maps from external HTML element to internal MultipartCalendarEntry and vice versa
@@ -654,12 +654,3 @@ function firefoxMobileDragAndDropPolyfill(calendar) {
   // but chrome mobile android sends it
   //calendar.addEntryEventListener("touchcancel", (e, data) => {});
 }
-
-customElements.define("travel-calendar", TravelCalendar); // todo move to main?
-
-// exports for testing only (NODE_ENV='test' is automatically set by jest)
-if (typeof process === "object" && process.env.NODE_ENV === "test") {
-  module.exports.TravelCalendar = TravelCalendar;
-  module.exports.LookupUtil = LookupUtil;
-  module.exports.MultipartCalendarEntry = MultipartCalendarEntry;
-}