Migrate to ES6 modules and update dependencies

package.json

@@ -1,38 +1,34 @@
 {
   "name": "tamview",
   "version": "0.1.0",
-  "description": "",
-  "main": "index.js",
+  "type": "module",
   "scripts": {
     "back": "node src/back",
-    "front:dev": "parcel serve src/front/index.html",
-    "front:prod": "npx parcel build src/front/index.html --no-source-maps --no-autoinstall",
+    "front:dev": "vite",
+    "front:prod": "vite build",
     "lint": "eslint ."
   },
-  "engines": {
-    "node": ">=10.0.0"
-  },
-  "keywords": [],
-  "author": "Mattéo Delabre",
-  "license": "MIT",
   "dependencies": {
-    "@turf/along": "^6.0.1",
-    "@turf/helpers": "^6.1.4",
-    "@turf/length": "^6.0.2",
-    "@turf/projection": "^6.0.1",
-    "@turf/turf": "^5.1.6",
-    "axios": "^0.19.2",
-    "color": "^3.1.2",
-    "csv-parse": "^4.8.3",
+    "@turf/along": "^6.3.0",
+    "@turf/helpers": "^6.3.0",
+    "@turf/length": "^6.3.0",
+    "@turf/projection": "^6.3.0",
+    "@turf/turf": "^6.3.0",
+    "axios": "^0.21.1",
+    "color": "^3.1.3",
+    "csv-parse": "^4.15.4",
     "express": "^4.17.1",
-    "ol": "^6.1.1",
-    "unzip-stream": "^0.3.0"
+    "ol": "^6.5.0",
+    "unzip-stream": "^0.3.1",
+    "vue": "^3.0.5"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
-    "eslint-config-eslint": "^6.0.0",
-    "eslint-plugin-jsdoc": "^30.0.3",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.5",
+    "eslint": "^7.26.0",
+    "eslint-config-eslint": "^7.0.0",
+    "eslint-plugin-jsdoc": "^34.0.1",
     "eslint-plugin-node": "^11.1.0",
-    "parcel-bundler": "^1.12.4"
+    "vite": "^2.3.0"
   }
 }

script/show-courses.js

@@ -1,10 +1,14 @@
 #!/usr/bin/env node
 
-const courses = require('../src/tam/courses');
-const network = require('../src/tam/network.json');
-const {displayTime} = require('../src/util');
-const process = require('process');
-const path = require('path');
+import * as courses from '../src/tam/courses.js';
+import {displayTime} from '../src/util.js';
+import process from 'process';
+import path from 'path';
+import { readFile } from 'fs/promises';
+
+const network = JSON.parse(await readFile(
+    new URL('../src/tam/network.json', import.meta.url)
+));
 
 /**
  * Convert stop ID to human-readable stop name.

script/update-network

@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-
-const network = require('../src/tam/network');
-const path = require('path');
-const fs = require('fs');
-
-(async () =>
-{
-    const lines = ['1', '2', '3', '4'];
-    const data = await network.fetch(lines);
-
-    fs.writeFileSync(
-        path.join(__dirname, '../src/tam/network.json'),
-        JSON.stringify(
-            data,
-            (_, value) =>
-            {
-                if (value instanceof Set)
-                {
-                    // Convert sets to arrays for JSON representation
-                    return Array.from(value.values());
-                }
-
-                return value;
-            },
-            4
-        )
-    );
-})();

script/update-network.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+import * as network from '../src/tam/network.js';
+import fs from 'fs/promises';
+
+const lines = ['1', '2', '3', '4'];
+const data = await network.fetch(lines);
+
+await fs.writeFile(
+    new URL("../src/tam/network.json", import.meta.url),
+    JSON.stringify(
+        data,
+        (_, value) =>
+        {
+            if (value instanceof Set)
+            {
+                // Convert sets to arrays for JSON representation
+                return Array.from(value.values());
+            }
+
+            return value;
+        },
+        4
+    )
+);

src/back/index.js

@@ -1,10 +1,10 @@
-const express = require("express");
-const courses = require("../tam/courses");
+import express from "express";
+import * as courses from "../tam/courses.js";
 
 const app = express();
 const port = 4321;
 
-app.get("/courses", async(req, res) => {
+app.get("/courses", async (_, res) => {
     res.header("Access-Control-Allow-Origin", "*");
     return res.json(await courses.fetch("realtime"));
 });

src/front/Panel.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>Hello {{ name }}!</div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: "Vue",
+            };
+        }
+    };
+</script>

src/front/index.html

@@ -18,8 +18,8 @@
                 flex-direction: row;
             }
 
-            #informations {
-                flex: 0 0 600px;
+            #panel {
+                flex: 0 0 400px;
                 padding: 20px;
                 overflow-y: auto;
             }
@@ -31,8 +31,8 @@
         </style>
     </head>
     <body>
-        <div id="informations"></div>
+        <aside id="panel"></aside>
         <div id="map"></div>
-        <script src="index.js"></script>
+        <script type="module" src="index.js"></script>
     </body>
 </html>

src/front/index.js

@@ -1,15 +1,14 @@
-// eslint-disable-next-line node/no-extraneous-require
-require("regenerator-runtime/runtime");
-
-const network = require("../tam/network.json");
-const simulation = require("../tam/simulation");
-const map = require("./map/index.js");
+import network from "../tam/network.json";
+import * as simulation from "../tam/simulation";
+import * as map from "./map/index";
 
 // Run courses simulation
 const coursesSimulation = simulation.start();
-const informations = document.querySelector("#informations");
 let courseId = null;
 
+// Create display panel
+const panel = document.querySelector("#panel");
+
 const displayTime = date => [
     date.getHours(),
     date.getMinutes(),
@@ -80,7 +79,7 @@ setInterval(() => {
         `;
     }
 
-    informations.innerHTML = html;
+    panel.innerHTML = html;
 }, 1000);
 
 // Create the network and courses map

src/front/map/common.js

@@ -1,34 +1,24 @@
-const colorModule = require("color");
+import color from "color";
 
 /**
  * Turn the main color of a line into a color suitable for using as a border.
  * @param {string} mainColor Original color.
  * @returns {string} Hexadecimal representation of the border color.
  */
-const makeBorderColor = mainColor => {
-    const hsl = colorModule(mainColor).hsl();
-
-    hsl.color = Math.max(0, hsl.color[2] -= 20);
-    return hsl.hex();
+export const makeBorderColor = mainColor => {
+    return color(mainColor).darken(0.2).hex();
 };
 
-exports.makeBorderColor = makeBorderColor;
-
 /**
  * Turn the main color of a line into a color suitable for using as a border.
  * @param {string} mainColor Original color.
  * @returns {string} Hexadecimal representation of the border color.
  */
-const makeCourseColor = mainColor => {
-    const hsl = colorModule(mainColor).hsl();
-
-    hsl.color = Math.max(0, hsl.color[2] += 10);
-    return hsl.hex();
+export const makeCourseColor = mainColor => {
+    return color(mainColor).lighten(0.2).hex();
 };
 
-exports.makeCourseColor = makeCourseColor;
-
-const sizes = {
+export const sizes = {
     segmentOuter: 8,
     segmentInner: 6,
     stopRadius: 6,
@@ -38,5 +28,3 @@ const sizes = {
     courseBorder: 10,
     courseInnerBorder: 7
 };
-
-exports.sizes = sizes;

src/front/map/index.js

@@ -1,14 +1,14 @@
-require("ol/ol.css");
+import "ol/ol.css";
 
-const { Map, View } = require("ol");
-const { getVectorContext } = require("ol/render");
-const Point = require("ol/geom/Point").default;
-const proj = require("ol/proj");
-const { Style, Icon } = require("ol/style");
-const tilesLayers = require("./tiles");
-const networkLayers = require("./network");
-const { sizes, makeBorderColor, makeCourseColor } = require("./common");
-const network = require("../../tam/network.json");
+import { Map, View } from "ol";
+import { getVectorContext } from "ol/render";
+import Point from "ol/geom/Point";
+import * as proj from "ol/proj";
+import { Style, Icon } from "ol/style";
+import * as tilesLayers from "./tiles";
+import * as networkLayers from "./network";
+import { sizes, makeBorderColor, makeCourseColor } from "./common";
+import network from "../../tam/network.json";
 
 const courseStyles = {};
 
@@ -58,7 +58,7 @@ const getCourseStyle = lineColor => {
     return courseStyles[lineColor];
 };
 
-const create = (target, coursesSimulation, onClick) => {
+export const create = (target, coursesSimulation, onClick) => {
     const view = new View({
         center: proj.fromLonLat([3.88, 43.605]),
         zoom: 14,
@@ -138,5 +138,3 @@ const create = (target, coursesSimulation, onClick) => {
 
     return map;
 };
-
-exports.create = create;

src/front/map/network.js

@@ -1,11 +1,11 @@
-const network = require("../../tam/network.json");
-const { makeBorderColor, sizes } = require("./common");
+import network from "../../tam/network.json";
+import { makeBorderColor, sizes } from "./common";
 
-const GeoJSON = require("ol/format/GeoJSON").default;
-const VectorLayer = require("ol/layer/Vector").default;
-const VectorSource = require("ol/source/Vector").default;
+import GeoJSON from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
 
-const { Style, Fill, Stroke, Circle } = require("ol/style");
+import { Style, Fill, Stroke, Circle } from "ol/style";
 
 const geojsonReader = new GeoJSON({ featureProjection: "EPSG:3857" });
 
@@ -68,7 +68,7 @@ const lineFeaturesOrder = (feature1, feature2) => {
  * Create the list of layers for displaying the transit network.
  * @returns {Array.<Layer>} List of map layers.
  */
-const getLayers = () => {
+export const getLayers = () => {
     const segmentsSource = new VectorSource();
     const stopsSource = new VectorSource();
 
@@ -128,5 +128,3 @@ const getLayers = () => {
 
     return [segmentsBorderLayer, segmentsInnerLayer, stopsLayer];
 };
-
-exports.getLayers = getLayers;

src/front/map/tiles.js

@@ -1,5 +1,5 @@
-const TileLayer = require("ol/layer/Tile").default;
-const XYZSource = require("ol/source/XYZ").default;
+import TileLayer from "ol/layer/Tile";
+import XYZSource from "ol/source/XYZ";
 
 const mapboxToken = "pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
 h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw";
@@ -8,7 +8,7 @@ h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw";
  * Create the list of layers for displaying the background map.
  * @returns {Array.<Layer>} List of map layers.
  */
-const getLayers = () => {
+export const getLayers = () => {
     const backgroundSource = new XYZSource({
         url: `https://api.mapbox.com/${[
             "styles", "v1", "mapbox", "streets-v11",
@@ -21,5 +21,3 @@ const getLayers = () => {
         source: backgroundSource
     })];
 };
-
-exports.getLayers = getLayers;

src/front/vite.config.js

@@ -0,0 +1,14 @@
+import path from 'path';
+
+const root = path.join(
+    path.dirname(new URL(import.meta.url).pathname),
+    "..", ".."
+);
+
+export default {
+    server: {
+        fsServe: {
+            root
+        }
+    }
+};

src/tam/courses.js

@@ -5,8 +5,12 @@
  * from the official endpoints.
  */
 
-const tam = require("./sources/tam");
-const network = require("./network.json");
+import * as tam from "./sources/tam.js";
+import { readFile } from 'fs/promises';
+
+const network = JSON.parse(await readFile(
+    new URL('./network.json', import.meta.url)
+));
 
 /**
  * Information about the course of a vehicle.
@@ -40,12 +44,13 @@ const parseTime = (time, reference) =>
 /**
  * Fetch information about courses in the TaM network.
  *
+ * @async
  * @param {string} kind Pass 'realtime' to get real-time information,
  * or 'theoretical' to get planned courses for the day.
  * @returns {Object.<string,Course>} Mapping from active course IDs to
  * information about each course.
  */
-const fetch = async (kind = 'realtime') => {
+export const fetch = async (kind = 'realtime') => {
     const courses = {};
     const passings = (
         kind === 'realtime'
@@ -128,5 +133,3 @@ const fetch = async (kind = 'realtime') => {
 
     return courses;
 };
-
-exports.fetch = fetch;

src/tam/network.js

@@ -11,10 +11,10 @@
  * the `script/update-network` script.
  */
 
-const turfHelpers = require("@turf/helpers");
-const turfLength = require("@turf/length").default;
-const util = require("../util");
-const osm = require("./sources/osm");
+import * as turfHelpers from "@turf/helpers";
+import turfLength from "@turf/length";
+import * as util from "../util.js";
+import * as osm from "./sources/osm.js";
 
 /**
  * Fetch stops and lines of the network.
@@ -22,7 +22,7 @@ const osm = require("./sources/osm");
  * @returns {{stops: Object, lines: Object, segments: Object}} Set of stops,
  * segments and lines.
  */
-const fetch = async lineRefs => {
+export const fetch = async lineRefs => {
     // Retrieve routes, ways and stops from OpenStreetMap
     const rawData = await osm.runQuery(`[out:json];
 
@@ -250,5 +250,3 @@ different sequence of nodes in two or more lines.`);
 
     return { stops, lines, segments };
 };
-
-exports.fetch = fetch;

src/tam/simulation.js

@@ -1,7 +1,7 @@
-const axios = require("axios");
-const turfAlong = require("@turf/along").default;
-const turfProjection = require("@turf/projection");
-const network = require("./network.json");
+import axios from "axios";
+import turfAlong from "@turf/along";
+import * as turfProjection from "@turf/projection";
+import network from "./network.json";
 
 const server = "http://localhost:4321";
 
@@ -307,7 +307,7 @@ const tick = (courses, time) => {
     }
 };
 
-const start = () => {
+export const start = () => {
     const courses = {};
     let lastFrame = null;
     let lastUpdate = null;
@@ -328,5 +328,3 @@ const start = () => {
 
     return { courses, update };
 };
-
-exports.start = start;

src/tam/sources/osm.js

@@ -4,8 +4,8 @@
  * Interface with the OpenStreetMap collaborative mapping database.
  */
 
-const axios = require("axios");
-const { isObject } = require("../../util");
+import axios from "axios";
+import { isObject } from "../../util.js";
 
 /**
  * Submit a query to an Overpass endpoint.
@@ -19,7 +19,7 @@ const { isObject } = require("../../util");
  * is requested in the query, the result will automatically be parsed into
  * a JS object.
  */
-const runQuery = (
+export const runQuery = (
     query,
     endpoint = "https://lz4.overpass-api.de/api/interpreter"
 ) => (
@@ -27,16 +27,12 @@ const runQuery = (
         .then(res => res.data)
 );
 
-exports.runQuery = runQuery;
-
 /**
  * Create a link to view a node.
  * @param {string|number} id Identifier for the node to view.
  * @returns {string} Link to view this node on the OSM website.
  */
-const viewNode = id => `https://www.osm.org/node/${id}`;
-
-exports.viewNode = viewNode;
+export const viewNode = id => `https://www.osm.org/node/${id}`;
 
 /**
  * Determine if an OSM way is one-way or not.
@@ -45,15 +41,13 @@ exports.viewNode = viewNode;
  * @param {Object} obj OSM way object.
  * @returns {boolean} Whether the way is one-way.
  */
-const isOneWay = obj => (
+export const isOneWay = obj => (
     obj.type === "way" &&
     isObject(obj.tags) &&
     (obj.tags.oneway === "yes" || obj.tags.junction === "roundabout" ||
         obj.tags.highway === "motorway")
 );
 
-exports.isOneWay = isOneWay;
-
 /**
  * Determine if an OSM object is a public transport line (route master).
  *
@@ -62,10 +56,8 @@ exports.isOneWay = isOneWay;
  * @param {Object} obj OSM relation object.
  * @returns {boolean} Whether the relation is a public transport line.
  */
-const isTransportLine = obj => (
+export const isTransportLine = obj => (
     obj.type === "relation" &&
     isObject(obj.tags) &&
     obj.tags.type === "route_master"
 );
-
-exports.isTransportLine = isTransportLine;

src/tam/sources/tam.js

@@ -1,8 +1,8 @@
-const csv = require("csv-parse");
-const axios = require("axios");
-const path = require("path");
-const fs = require("fs").promises;
-const { snakeToCamelCase, unzipFile } = require("../../util");
+import csv from "csv-parse";
+import axios from "axios";
+import path from "path";
+import fs from "fs/promises";
+import { snakeToCamelCase, unzipFile } from "../../util.js";
 
 /**
  * Data available for each passing of a vehicle at a station.
@@ -70,14 +70,14 @@ const makeCached = (func, cachePath) => {
             yield passing;
         }
 
-        fs.writeFile(cachePath, JSON.stringify(newCache));
+        await fs.writeFile(cachePath, JSON.stringify(newCache));
     };
 };
 
-const cacheDir = path.join(__dirname, "..", "..", "..", "cache");
+const cacheDir = new URL("../../../cache/", import.meta.url);
 
 const realtimeEndpoint = "http://data.montpellier3m.fr/node/10732/download";
-const realtimeCachePath = path.join(cacheDir, "realtime.json");
+const realtimeCachePath = new URL("./realtime.json", cacheDir);
 
 /**
  * Fetch real time passings of vehicles across the network.
@@ -86,7 +86,7 @@ const realtimeCachePath = path.join(cacheDir, "realtime.json");
  * update of this information. Next values are informations about each vehicle
  * passing.
  */
-const fetchRealtime = async function *() {
+const fetchRealtimeRaw = async function *() {
     const res = await axios.get(realtimeEndpoint, {
         responseType: "stream"
     });
@@ -106,10 +106,10 @@ const fetchRealtime = async function *() {
     }
 };
 
-exports.fetchRealtime = makeCached(fetchRealtime, realtimeCachePath);
+export const fetchRealtime = makeCached(fetchRealtimeRaw, realtimeCachePath);
 
 const theoreticalEndpoint = "http://data.montpellier3m.fr/node/10731/download";
-const theoreticalCachePath = path.join(cacheDir, "theoretical.json");
+const theoreticalCachePath = new URL("./theoretical.json", cacheDir);
 
 /**
  * Fetch theoretical passings for the current day across the network.
@@ -118,7 +118,7 @@ const theoreticalCachePath = path.join(cacheDir, "theoretical.json");
  * update of this information. Next values are informations about each vehicle
  * passing.
  */
-const fetchTheoretical = async function *() {
+const fetchTheoreticalRaw = async function *() {
     const res = await axios.get(theoreticalEndpoint, {
         responseType: "stream"
     });
@@ -154,4 +154,5 @@ const fetchTheoretical = async function *() {
     }
 };
 
-exports.fetchTheoretical = makeCached(fetchTheoretical, theoreticalCachePath);
+export const fetchTheoretical = makeCached(
+    fetchTheoreticalRaw, theoreticalCachePath);

src/util.js

@@ -1,23 +1,19 @@
-const unzip = require("unzip-stream");
+import unzip from "unzip-stream";
 
 /**
  * Convert a snake-cased string to a camel-cased one.
  * @param {string} str Original string.
  * @returns {string} Transformed string.
  */
-const snakeToCamelCase = str => str.replace(/([-_][a-z])/gu, group =>
+export const snakeToCamelCase = str => str.replace(/([-_][a-z])/gu, group =>
     group.toUpperCase().replace("-", "").replace("_", ""));
 
-exports.snakeToCamelCase = snakeToCamelCase;
-
 /**
  * Check if a value is a JS object.
  * @param {*} value Value to check.
  * @returns {boolean} Whether `value` is a JS object.
  */
-const isObject = value => value !== null && typeof value === "object";
-
-exports.isObject = isObject;
+export const isObject = value => value !== null && typeof value === "object";
 
 /**
  * Check if two arrays are equal in a shallow manner.
@@ -25,20 +21,18 @@ exports.isObject = isObject;
  * @param {Array} array2 Second array.
  * @returns {boolean} Whether the two arrays are equal.
  */
-const arraysEqual = (array1, array2) => (
+export const arraysEqual = (array1, array2) => (
     array1.length === array2.length &&
     array1.every((elt1, index) => elt1 === array2[index])
 );
 
-exports.arraysEqual = arraysEqual;
-
 /**
  * Find a file in a zipped stream and unzip it.
  * @param {stream.Readable} data Input zipped stream.
  * @param {string} fileName Name of the file to find.
  * @returns {Promise.<stream.Readable>} Stream of the unzipped file.
  */
-const unzipFile = (data, fileName) => new Promise((res, rej) => {
+export const unzipFile = (data, fileName) => new Promise((res, rej) => {
     // eslint-disable-next-line new-cap
     const stream = data.pipe(unzip.Parse());
     let found = false;
@@ -62,12 +56,13 @@ const unzipFile = (data, fileName) => new Promise((res, rej) => {
     stream.on("error", err => rej(err));
 });
 
-exports.unzipFile = unzipFile;
-
-const displayTime = date => [
+/**
+ * Display the time component of a date.
+ * @param {Date} date Date to display.
+ * @returns {string} Formatted date as 'HH:MM:SS'.
+ */
+export const displayTime = date => [
     date.getHours(),
     date.getMinutes(),
     date.getSeconds()
 ].map(number => number.toString().padStart(2, "0")).join(":");
-
-exports.displayTime = displayTime;