Migrate to ES6 modules and update dependencies

This commit is contained in:
Mattéo Delabre 2021-05-11 21:39:24 +02:00
parent 888845f9d7
commit 9d163f257d
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
20 changed files with 1935 additions and 9445 deletions

11007
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -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.

View File

@ -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
)
);
})();

25
script/update-network.js Executable file
View File

@ -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
)
);

View File

@ -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"));
});

13
src/front/Panel.vue Normal file
View File

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

View File

@ -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>

View File

@ -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

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

14
src/front/vite.config.js Normal file
View File

@ -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
}
}
};

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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);

View File

@ -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;