chore(ci): style lint and validation

.github/workflows/pr-checks.yml

@@ -0,0 +1,23 @@
+name: PR Checks
+on:
+  pull_request:
+  merge_group:
+
+jobs:
+  pr-checks:
+    runs-on: ubuntu-20.04
+    name: Check and lint PR
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # needed so commitlint can lint the commits
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20
+      - run: npm ci
+      - name: Enforce code style
+        run: npm run validate
+      - name: Lint commits
+        if: github.event_name != 'merge_group'
+        run: npx commitlint --from=${{ github.event.pull_request.base.sha }}

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+build

commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

eslint.config.js

@@ -0,0 +1,26 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

example/react-app/src/App.js

@@ -1,5 +1,5 @@
-import React from "react";
-import Viewer from "./Viewer";
+import React from 'react';
+import Viewer from './Viewer';
 import { Page, PageSection } from '@patternfly/react-core';
 import '@patternfly/react-core/dist/styles/base.css';
 
@@ -11,10 +11,16 @@ export default class App extends React.Component {
   render() {
     return (
       <Page className="full-height">
-        <PageSection className="full-height" style={{ padding: "0px", width: "50%" }}>
+        <PageSection
+          className="full-height"
+          style={{ padding: '0px', width: '50%' }}
+        >
           <Viewer url="http://localhost:8080/" viewerId="viewer1" />
         </PageSection>
-        <PageSection className="full-height" style={{ padding: "0px", width: "50%" }}>
+        <PageSection
+          className="full-height"
+          style={{ padding: '0px', width: '50%' }}
+        >
           <Viewer url="http://localhost:8081/" viewerId="viewer2" />
         </PageSection>
       </Page>

example/react-app/src/Viewer.js

@@ -1,18 +1,20 @@
-import React, { useState, useEffect, useRef } from "react";
-import { TrameIframeApp } from "trame-react";
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect, useRef } from 'react';
+import { TrameIframeApp } from 'trame-react';
 import {
   Button,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
   Slider,
   Switch,
-} from "@patternfly/react-core";
+} from '@patternfly/react-core';
 
 function debounce(func, wait) {
   let timeout;
 
   return function (...args) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const context = this;
 
     clearTimeout(timeout); // Clears the previous timeout
@@ -23,9 +25,9 @@ function debounce(func, wait) {
 function deepEqual(obj1, obj2) {
   if (obj1 === obj2) return true;
   if (
-    typeof obj1 !== "object" ||
+    typeof obj1 !== 'object' ||
     obj1 === null ||
-    typeof obj2 !== "object" ||
+    typeof obj2 !== 'object' ||
     obj2 === null
   )
     return false;
@@ -49,7 +51,10 @@ function stateIsSync(localState, trameState) {
   const trameStatekeys = Object.keys(trameState);
 
   for (let localKey of localStateKeys) {
-    if (!trameStatekeys.includes(localKey) || !deepEqual(localState[localKey], trameState[localKey])) {
+    if (
+      !trameStatekeys.includes(localKey) ||
+      !deepEqual(localState[localKey], trameState[localKey])
+    ) {
       return false;
     }
   }
@@ -63,116 +68,124 @@ const Viewer = ({ viewerId, url }) => {
 
   const [viewerState, setViewerState] = useState({
     resolution: 20,
-    interaction_mode: "interact",
+    interaction_mode: 'interact',
   });
 
   useEffect(() => {
     synchronizeTrameState.current = debounce((viewerState) => {
       if (!trameCommunicator.current) {
         return;
       }
-  
+
       trameCommunicator.current.state.get().then((trame_state) => {
         if (!stateIsSync(viewerState, trame_state)) {
           trameCommunicator.current.state.update(viewerState);
         }
-      })
+      });
     }, 25);
   }, []);
 
   useEffect(() => {
     synchronizeTrameState.current(viewerState);
   }, [viewerState]);
 
-  const resetCamera = (comm) => {
-    console.debug("resetting camera");
-    trameCommunicator.current.trigger("raise_error").catch((err) => {
+  const resetCamera = () => {
+    console.debug('resetting camera');
+    trameCommunicator.current.trigger('raise_error').catch((err) => {
       throw err;
-    })
-    trameCommunicator.current.trigger("reset_camera");
+    });
+    trameCommunicator.current.trigger('reset_camera');
   };
 
-  const resetResolution = (comm) => {
-    console.debug("resetting resolution");
-    trameCommunicator.current.trigger("reset_resolution");
+  const resetResolution = () => {
+    console.debug('resetting resolution');
+    trameCommunicator.current.trigger('reset_resolution');
   };
 
   const onViewerReady = (comm) => {
     trameCommunicator.current = comm;
 
     trameCommunicator.current.state.onReady(() => {
       trameCommunicator.current.state.watch(
-        ["interactor_settings"],
+        ['interactor_settings'],
         (interactor_settings) => {
           console.log({ interactor_settings });
         }
       );
 
-      trameCommunicator.current.state.watch(["resolution", "interaction_mode"], (resolution, interaction_mode) => {
-        setViewerState((prevState) => ({
-          ...prevState,
-          resolution,
-          interaction_mode
-        }));
-      });
+      trameCommunicator.current.state.watch(
+        ['resolution', 'interaction_mode'],
+        (resolution, interaction_mode) => {
+          setViewerState((prevState) => ({
+            ...prevState,
+            resolution,
+            interaction_mode,
+          }));
+        }
+      );
     });
   };
 
   return (
-    <div className="viewer" style={{ height: "100%" }}>
-      <Toolbar style={{ height: "10%"}}>
+    <div className="viewer" style={{ height: '100%' }}>
+      <Toolbar style={{ height: '10%' }}>
         <ToolbarContent>
           <ToolbarItem>
-            <div style={{ "min-width": "200px" }}>
+            <div style={{ 'min-width': '200px' }}>
               <Slider
                 min={3}
                 max={60}
                 step={1}
                 inputLabel="resolution"
                 value={viewerState.resolution}
-                onChange={
-                  (e, res) => {
-                    setViewerState((prevViewerState) => ({
-                      ...prevViewerState,
-                      resolution: res,
-                    }));
-                  }
-                }
+                onChange={(e, res) => {
+                  setViewerState((prevViewerState) => ({
+                    ...prevViewerState,
+                    resolution: res,
+                  }));
+                }}
               />
             </div>
           </ToolbarItem>
           <ToolbarItem>
-            <Button variant="primary" onClick={(e) => resetCamera()}>
+            <Button variant="primary" onClick={resetCamera}>
               Reset Camera
             </Button>
           </ToolbarItem>
           <ToolbarItem>
-            <Button variant="primary" onClick={(e) => resetResolution()}>
+            <Button variant="primary" onClick={resetResolution}>
               Reset Resolution
             </Button>
           </ToolbarItem>
           <ToolbarItem>
-            <Button variant="primary" onClick={(e) => trameCommunicator.current.trigger("get_number_of_cells").then(console.log)}>
+            <Button
+              variant="primary"
+              onClick={() =>
+                trameCommunicator.current
+                  .trigger('get_number_of_cells')
+                  .then(console.log)
+              }
+            >
               Get Number Of Cells
             </Button>
           </ToolbarItem>
           <ToolbarItem>
             <Switch
               label={viewerState.interaction_mode}
-              isChecked={viewerState.interaction_mode === "select"}
+              isChecked={viewerState.interaction_mode === 'select'}
               onChange={(e, checked) => {
                 setViewerState((prevViewerState) => ({
                   ...prevViewerState,
-                  interaction_mode: checked ? "select" : "interact",
-                }))
+                  interaction_mode: checked ? 'select' : 'interact',
+                }));
               }}
             />
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
 
       <TrameIframeApp
-        style={{ height: "80%"}}
+        style={{ height: '80%' }}
         iframeId={viewerId}
         url={url}
         onCommunicatorReady={onViewerReady}

example/react-app/src/index.js

@@ -1,8 +1,8 @@
-import React, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById('root'));
 root.render(
   <StrictMode>
     <App />