Eslint changes

.github/workflows/eslint.yml

@@ -0,0 +1,24 @@
+name: ESLint
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  eslint:
+    name: Run ESLint
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run ESLint
+      run: npx eslint . --max-warnings=0

DEVELOPING.md

@@ -36,6 +36,23 @@ ESBuild must also be used to compile the CSS supporting the MAPP and MAPP.UI ele
 
     npx esbuild --bundle public/css/_ui.css --outfile=public/css/ui.css --loader:.svg=dataurl
 
+## ESLint
+
+The codebase makes use of the [eslint](eslint.org) package to ensure that our code adhere to different rules and coding guidelines.
+To run `eslint` you will need to have the development packages installed. You can ensure they are installed by running `npm install` in the root of the xyz directory.
+
+To run the lint you can execute `npx eslint .` in the root of the application. This will show any issues there are with the codebase. You can also add the flag `--fix` to the command to allow eslint to fix any issues it may find.
+
+eslint command
+
+    npx esbuild .
+
+eslint command with fix
+
+    npx esbuild . --fix
+
+There are other extensions you can use in your editor to get on the fly error highlighting where any rules are broken. Please look into what eslint supports in your environment.
+
 ## version.js hash
 
 The mapp module object holds a hash of the latest release commit which can be generated by executing the version.js script in the root.

eslint.config.mjs

@@ -0,0 +1,22 @@
+export default [
+  {
+    ignores: ['public/js/lib/*', 'docs/**/*'],
+  },
+  {
+    files: ['**/*.js', '**/*.mjs'],
+    rules: {
+      quotes: ['error', 'single', { 'allowTemplateLiterals': true }],
+      'prefer-const': ['error', {
+        'destructuring': 'any',
+        'ignoreReadBeforeAssign': true
+      }],
+      'max-depth': ['error',
+        {
+          'max': 4
+        }
+      ],
+      // 'complexity': ['error', { 'max': 15 }],
+      'no-nested-ternary': 'error'
+    }
+  }
+];

lib/layer/decorate.mjs

@@ -236,7 +236,7 @@ async function zoomToExtent(params) {
   // Zooms to a specific extent.
 
   // XMLHttpRequest to layer extent endpoint
-  let response = await mapp.utils.xhr(`${this.mapview.host}/api/query/layer_extent?` +
+  const response = await mapp.utils.xhr(`${this.mapview.host}/api/query/layer_extent?` +
     mapp.utils.paramString({ // build query string for the url
       locale: this.mapview.locale.key,
       layer: this.key,

lib/layer/featureFields.mjs

@@ -84,9 +84,9 @@ The jenks distribution method requires the stats.jenks utility method to calcula
 @param {layer} layer A decorated mapp layer object.
 */
 function jenks(layer) {
-  let theme = layer.style.theme;
+  const theme = layer.style.theme;
 
-  let n = Math.min(layer.featureFields[theme.field].values.length, theme.categories.length);
+  const n = Math.min(layer.featureFields[theme.field].values.length, theme.categories.length);
 
   // Parse array values as float.
   layer.featureFields[theme.field].values = layer.featureFields[theme.field].values.map(parseFloat);
@@ -113,7 +113,7 @@ The count distribution method counts values in the `featureFields.values[]` arra
 @param {layer} layer A decorated mapp layer object.
 */
 function count(layer) {
-  let theme = layer.style.theme;
+  const theme = layer.style.theme;
 
   layer.featureFields[theme.field].values.forEach(val => {
 

lib/layer/featureStyle.mjs

@@ -144,7 +144,7 @@ export default function featureStyle(layer) {
 
     if (!layer.style.cluster) return;
 
-    let clusterScale = parseFloat(layer.style.cluster.clusterScale)
+    const clusterScale = parseFloat(layer.style.cluster.clusterScale)
 
     // Spread cluster style into feature.style.
     feature.style = {

lib/layer/format/mvt.mjs

@@ -265,10 +265,10 @@ function changeEndLoad(layer) {
   const bounds = layer.mapview.getBounds()
 
   // Assign current viewport if queryparam is truthy.
-  let viewport = [bounds.west, bounds.south, bounds.east, bounds.north, layer.mapview.srid];
+  const viewport = [bounds.west, bounds.south, bounds.east, bounds.north, layer.mapview.srid];
 
   // Assign current viewport if queryparam is truthy.
-  let z = layer.mapview.Map.getView().getZoom();
+  const z = layer.mapview.Map.getView().getZoom();
 
   layer.xhr = new XMLHttpRequest()
 

lib/layer/themes/distributed.mjs

@@ -25,7 +25,7 @@ export default function(theme, feature) {
     theme.index = 0
   }
 
-  let field = theme.field || 'id'
+  const field = theme.field || 'id'
 
   // Get feature identifier for theme.
   const val = feature.properties[field]

lib/layer/themes/graduated.mjs

@@ -20,7 +20,7 @@ export default function (theme, feature) {
   // The graduated theme requires feature.properties.
   if (!feature.properties) return;
 
-  let catValue = Array.isArray(feature.properties.features) ?
+  const catValue = Array.isArray(feature.properties.features) ?
 
     // Reduce array of features to sum catValue
     feature.properties.features.reduce((total, F) => total + Number(F.getProperties()[theme.field]), 0) :
@@ -35,9 +35,9 @@ export default function (theme, feature) {
       'greater_than': val => cat => val >= cat.value
     }
 
-    let index = theme.categories.findIndex(graduated_breaks[theme.graduated_breaks](catValue))
+    const index = theme.categories.findIndex(graduated_breaks[theme.graduated_breaks](catValue))
 
-    let cat = theme.categories.at(index)
+    const cat = theme.categories.at(index)
 
     // Spread cat style to retain scale property
     feature.style = {

lib/location/create.mjs

@@ -80,7 +80,7 @@ export default async function createLocation(feature, interaction, layer) {
     setTimeout(checkFeature, 1000);
 
     function checkFeature() {
-      let found = layer.features?.find(F => F.properties?.id === location.id);
+      const found = layer.features?.find(F => F.properties?.id === location.id);
       if (found) {
         layer.source.un('tileloadend', concatFeatures);
       } else {

lib/mapp.mjs

@@ -57,7 +57,7 @@ if (window.ol === undefined) {
 
 } else {
 
-  let olVersion = parseFloat(ol?.util.VERSION)
+  const olVersion = parseFloat(ol?.util.VERSION)
 
   console.log(`OpenLayers version ${olVersion}`)
 

lib/plugins/login.mjs

@@ -25,6 +25,6 @@ export function login(plugin, mapview) {
   btnColumn.appendChild(mapp.utils.html.node`
     <a
       title=${mapp.user ? mapp.dictionary.toolbar_logout : mapp.dictionary.toolbar_login}
-      href=${mapp.user ? "?logout=true" : "?login=true"}>
+      href=${mapp.user ? '?logout=true' : '?login=true'}>
       <div class=${iconClass}>`);
 }

lib/ui/Gazetteer.mjs

@@ -42,7 +42,7 @@ export default gazetteer => {
     if (!e.target.value.length) return;
 
     // Get possible coordinates from input.
-    let ll = e.target.value.split(',').map(parseFloat)
+    const ll = e.target.value.split(',').map(parseFloat)
 
     // Check whether coordinates are valid float values.
     if (ll.length === 2 && ll.every(n => typeof n === 'number' && !isNaN(n) && isFinite(n))) {

lib/ui/elements/legendIcon.mjs

@@ -72,7 +72,7 @@ function createIconFromArray(style) {
     });
   };
 
-  let legendScale = style.icon[0].legendScale || 1;
+  const legendScale = style.icon[0].legendScale || 1;
 
   style.icon.forEach((icon) => {
 

lib/ui/layers/filters.mjs

@@ -522,7 +522,7 @@ async function filter_in(layer, filter) {
 
         const pattern = e.target.value;
 
-        let filtered = filter[filter.type].filter(val =>
+        const filtered = filter[filter.type].filter(val =>
 
           // val may not be string.
           val.toString().toLowerCase().startsWith(pattern.toLowerCase()))

lib/ui/layers/legends/categorized.mjs

@@ -85,7 +85,7 @@ export default function categorizedTheme(layer) {
     const cat_label = cat.label + (cat.count? ` [${cat.count}]`:'')
 
     // Cat label with filter function.
-    let label = mapp.utils.html`<div
+    const label = mapp.utils.html`<div
       class=${classList}
       style="grid-column: 2;"
       onclick=${e => catToggle(e, layer, cat)}>${cat_label}`

lib/ui/locations/entries/cloudinary.mjs

@@ -186,10 +186,10 @@ function imageLoad(e, entry) {
 
   img.onload = async () => {
 
-    let
-      canvas = mapp.utils.html.node`<canvas>`,
-      max_size = 1024,
-      width = img.width,
+    const canvas = mapp.utils.html.node`<canvas>`
+    const max_size = 1024
+
+    let width = img.width,
       height = img.height
 
     // resize
@@ -276,7 +276,7 @@ async function docLoad(e, entry) {
 
 async function trash(e, entry) {
 
-  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.remove_item_confirm});
+  const confirm = await mapp.ui.elements.confirm({ text: mapp.dictionary.remove_item_confirm });
 
   if (!confirm) return;
 

lib/utils/copyToClipboard.mjs

@@ -7,7 +7,7 @@
 // Create temporary textarea to copy string to clipboard.
 export function copyToClipboard(str) {
 
-  let textArea = document.body.appendChild(mapp.utils.html.node`
+  const textArea = document.body.appendChild(mapp.utils.html.node`
     <textarea style="visibility=none;">`);
 
   textArea.value = str;

lib/utils/csvDownload.mjs

@@ -16,7 +16,7 @@ export default function csvDownload(data, params = {}) {
 
   const rows = data.map(record => {
 
-    let row = Array.isArray(params.fields)
+    const row = Array.isArray(params.fields)
      ? fieldsFunction(record, params.fields)
      : Object.values(record)
 
@@ -64,7 +64,7 @@ function fieldsFunction(record, fields) {
     // Format number toLocaleString
     if (field.formatter === 'toLocaleString') {
 
-      let val = parseFloat(record[field.field])
+      const val = parseFloat(record[field.field])
 
       if (isNaN(val)) return;
 

lib/utils/dataURLtoBlob.mjs

@@ -7,15 +7,15 @@
 export function dataURLtoBlob(dataURL) {
 
   if (dataURL.indexOf(';base64,') == -1) {
-    let
+    const
       parts = dataURL.split(','),
       contentType = parts[0].split(':')[1],
       raw = parts[1];
 
     return new Blob([raw], { type: contentType });
   }
 
-  let
+  const
     parts = dataURL.split(';base64,'),
     contentType = parts[0].split(':')[1],
     raw = window.atob(parts[1]),

lib/utils/merge.mjs

@@ -44,7 +44,7 @@ export default function mergeDeep(target, ...sources) {
 
     if (Object.getPrototypeOf(source) !== Object.getPrototypeOf({})) continue;
 
-    if (key === "__proto__" || key === "constructor") continue;
+    if (key === '__proto__' || key === 'constructor') continue;
 
     if (source[key] instanceof HTMLElement) {
       console.warn(source[key])

lib/utils/olStyle.mjs

@@ -89,12 +89,12 @@ export default function olStyle(style, feature) {
     if (style.fillColor || style.strokeColor) {
 
       // Create OL fill.
-      let fill = style.fillColor && new ol.style.Fill({
+      const fill = style.fillColor && new ol.style.Fill({
         color: mapp.utils.hexa(style.fillColor, style.fillOpacity)
       })
 
       // Create OL stroke.
-      let stroke = style.strokeColor && new ol.style.Stroke({
+      const stroke = style.strokeColor && new ol.style.Stroke({
         color: mapp.utils.hexa(style.strokeColor, style.strokeOpacity),
         width: parseFloat(style.strokeWidth || 1)
       })

lib/utils/polygonIntersectFeatures.mjs

@@ -23,7 +23,7 @@ export function polygonIntersectFeatures(params) {
   }
 
   // Config for mapview draw interaction.
-  let interaction = {
+  const interaction = {
 
     // Draw polygon.
     type: 'Polygon',

lib/utils/svgSymbols.mjs

@@ -14,7 +14,7 @@ const memoizedIcons = {
 
 export function dot(style) {
 
-  let lookup = Object.values({
+  const lookup = Object.values({
     fillColor: style.fillColor
   }).reduce((a, b) => a + b)
 
@@ -71,7 +71,7 @@ export function triangle(style) {
       return 16 + (val - 16) * scale
     }
 
-    let points = `${x(12, layer[0])},${y(4.68, layer[0])} ${x(2, layer[0])}, ${y(22, layer[0])} ${x(22, layer[0])}, ${y(22, layer[0])}`
+    const points = `${x(12, layer[0])},${y(4.68, layer[0])} ${x(2, layer[0])}, ${y(22, layer[0])} ${x(22, layer[0])}, ${y(22, layer[0])}`
 
     icon.appendChild(svg.node`
       <polygon
@@ -123,7 +123,7 @@ export function diamond(style) {
 
   style.layers && Object.entries(style.layers).forEach(layer => {
 
-    let points = `${s(12, layer[0])} ${s(0, layer[0])},${s(24, layer[0])} ${s(12, layer[0])},${s(12, layer[0])} ${s(24, layer[0])}, ${s(0, layer[0])} ${s(12, layer[0])}`
+    const points = `${s(12, layer[0])} ${s(0, layer[0])},${s(24, layer[0])} ${s(12, layer[0])},${s(12, layer[0])} ${s(24, layer[0])}, ${s(0, layer[0])} ${s(12, layer[0])}`
 
     icon.appendChild(svg.node`
       <polygon

lib/utils/verticeGeoms.mjs

@@ -12,7 +12,7 @@ export default feature => {
 
   let coords = geometry.getCoordinates()
 
-  let depth = getDepth(coords)
+  const depth = getDepth(coords)
 
   // Line string will have a depth of 2.
   if (depth === 2) {

mod/query.js

@@ -346,7 +346,7 @@ async function executeQuery(req, res, template, query) {
   }
 
   // Run the query
-  let rows = await dbs_connections[dbs](
+  const rows = await dbs_connections[dbs](
     query,
     req.params.SQL,
     req.params.statement_timeout || template.statement_timeout);