Merge pull request #29 from zazuko/26-suggestions

Upgrade Node to LTS, configure ESLint and format code

.github/workflows/node.js.yml → .github/workflows/node.js.yaml

@@ -9,11 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.Js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: lts/*
       - name: Install dependencies
         run: npm ci
       - name: Build the app

eslint.config.mjs

@@ -0,0 +1,34 @@
+import eslint from "@eslint/js";
+import prettierConfig from "eslint-config-prettier";
+import stylisticTs from "@stylistic/eslint-plugin-ts";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
+  {
+    plugins: {
+      "@stylistic/ts": stylisticTs
+    },
+    ignores: [
+      "node_modules",
+      "dist",
+      "webpack.config.js",
+    ],
+    rules: {
+      "@stylistic/ts/indent": ["error", 2],
+      "@stylistic/ts/semi": ["error", "always"],
+      "@typescript-eslint/no-unused-vars": ["error", {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+        destructuredArrayIgnorePattern: "^_",
+      }],
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/prefer-literal-enum-member": "off",
+    }
+  },
+  prettierConfig,
+);

examples/common.ts

@@ -1,12 +1,12 @@
 import {
   SerializedDiagram,
   convertToSerializedDiagram,
-} from '../src/graph-explorer/index';
+} from "../src/graph-explorer/index";
 
 export function onPageLoad(callback: (container: HTMLDivElement) => void) {
-  document.addEventListener('DOMContentLoaded', () => {
-    const container = document.createElement('div');
-    container.id = 'root';
+  document.addEventListener("DOMContentLoaded", () => {
+    const container = document.createElement("div");
+    container.id = "root";
     document.body.appendChild(container);
     callback(container);
   });
@@ -21,15 +21,15 @@ export function tryLoadLayoutFromLocalStorage(): SerializedDiagram | undefined {
 
       // backward compatibility test. If we encounder old diagram,
       // wrap it into Diagram interface, jsonld - pass through
-      if (entry['@context']) {
+      if (entry["@context"]) {
         return entry;
       } else {
         return convertToSerializedDiagram({
           layoutData: entry,
           linkTypeOptions: [],
         });
       }
-    } catch (e) {
+    } catch (_e) {
       /* ignore */
     }
   }

examples/dbpedia.ts

@@ -1,19 +1,19 @@
-import { createElement, ClassAttributes } from 'react';
-import * as ReactDOM from 'react-dom';
+import { createElement, ClassAttributes } from "react";
+import * as ReactDOM from "react-dom";
 
 import {
   Workspace,
   WorkspaceProps,
   SparqlDataProvider,
   SparqlQueryMethod,
   DBPediaSettings,
-} from '../src/graph-explorer/index';
+} from "../src/graph-explorer/index";
 
 import {
   onPageLoad,
   tryLoadLayoutFromLocalStorage,
   saveLayoutToLocalStorage,
-} from './common';
+} from "./common";
 
 function onWorkspaceMounted(workspace: Workspace) {
   if (!workspace) {
@@ -26,16 +26,17 @@ function onWorkspaceMounted(workspace: Workspace) {
     validateLinks: true,
     dataProvider: new SparqlDataProvider(
       {
-        endpointUrl: 'https://dbpedia.org/sparql',
+        endpointUrl: "https://dbpedia.org/sparql",
         imagePropertyUris: [
-          'http://xmlns.com/foaf/0.1/depiction',
-          'http://xmlns.com/foaf/0.1/img',
+          "http://xmlns.com/foaf/0.1/depiction",
+          "http://xmlns.com/foaf/0.1/img",
         ],
         queryMethod: SparqlQueryMethod.GET,
       },
-      {...DBPediaSettings,
-      ...{
-        classTreeQuery: `
+      {
+        ...DBPediaSettings,
+        ...{
+          classTreeQuery: `
           PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
           PREFIX rdf:  <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
           PREFIX owl:  <http://www.w3.org/2002/07/owl#>
@@ -44,8 +45,8 @@ function onWorkspaceMounted(workspace: Workspace) {
             ?class a owl:Class.
             ?class rdfs:label ?label.
             OPTIONAL {?class rdfs:subClassOf ?parent}
-          }`
-        }
+          }`,
+        },
       }
     ),
   });

examples/demo.ts

@@ -1,22 +1,24 @@
-import { createElement, ClassAttributes } from 'react';
-import * as ReactDOM from 'react-dom';
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+import { createElement, ClassAttributes } from "react";
+import * as ReactDOM from "react-dom";
 
 import {
   Workspace,
   WorkspaceProps,
   DemoDataProvider,
-} from '../src/graph-explorer/index';
+} from "../src/graph-explorer/index";
 
 import {
   onPageLoad,
   tryLoadLayoutFromLocalStorage,
   saveLayoutToLocalStorage,
-} from './common';
+} from "./common";
 
-const CLASSES = require('./resources/classes.json');
-const LINK_TYPES = require('./resources/linkTypes.json');
-const ELEMENTS = require('./resources/elements.json');
-const LINKS = require('./resources/links.json');
+const CLASSES = require("./resources/classes.json");
+const LINK_TYPES = require("./resources/linkTypes.json");
+const ELEMENTS = require("./resources/elements.json");
+const LINKS = require("./resources/links.json");
 
 function onWorkspaceMounted(workspace: Workspace) {
   if (!workspace) {