Improvements

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 18.x , 20.x , 22.x ]
+        node-version: [ 20.x , 22.x ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
       - uses: actions/checkout@v5

.gitignore

@@ -1,5 +1,6 @@
 lib
 node_modules
+coverage
 .DS_Store
 .history
 .vscode

README.md

@@ -1,8 +1,6 @@
 # profile-pane
 SolidOS pane that displays a personal profile page
 
-This is a re-write that is going to replace the current profile pane
-
 ![CI](https://github.com/solid/profile-pane/workflows/CI/badge.svg)
 
 ## Contribute
@@ -29,10 +27,6 @@ If this is the case, simply run "npm audit fix" and upgrade the repository. It s
 
 Unit tests use `jest` and are placed next to the tested file as `*.spec.ts` files.
 
-#### Integration tests
-
-Integration tests verify the rendering of the whole pane (with mocked HTTP requests) and are placed under `./src/integration-tests`.
-
 ### Dev Server
 
 Start a webpack dev server:
@@ -41,8 +35,7 @@ Start a webpack dev server:
 npm start
 ```
 
-Visit `http://localhost:8080/` to render the pane. Adjust `const webIdToShow` in `./dev/index.ts` to show a
- different profile.
+Visit `http://localhost:8080/` to render the pane. Adjust `const webIdToShow` in `./dev/index.ts` to show a different profile.
 
 ### Build
 
@@ -52,16 +45,3 @@ npm run build
 
 The build is done by `tsc`, webpack is only used as dev server and not for production build.
 
-### Check before committing
-
-```
-npm run check
-```
-
-This does lint, build and test.
-
-### Notes
-
-If suddenly many tests fail, it may be that the installation has ended up with 
-two different instances of solid-logic.  Run `npm list solid-logic` and make sure there is only one. 
-Otherwise `rm -rf node_modules package-lock.json && npm install` should fix it.

babel.config.mjs

@@ -0,0 +1,15 @@
+export default {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    [
+      'babel-plugin-inline-import', {
+        extensions: [
+          '.ttl'
+        ]
+      }
+    ]
+  ]
+}

dev/context.ts

@@ -1,12 +1,13 @@
-import { longChatPane } from "chat-pane";
-import { DataBrowserContext, PaneRegistry } from "pane-registry";
-import { LiveStore, solidLogicSingleton, store } from "solid-logic";
+import { longChatPane } from 'chat-pane'
+import { DataBrowserContext, PaneRegistry } from 'pane-registry'
+import { solidLogicSingleton, store } from 'solid-logic'
+import { LiveStore } from 'rdflib'
 
 export const context: DataBrowserContext = {
   session: {
     store: store as LiveStore,
     paneRegistry: {
       byName: (name: string) => {
         return longChatPane
       }
     } as PaneRegistry,
@@ -14,6 +15,6 @@
   },
   dom: document,
   getOutliner: () => null,
-};
+}
 
-export const fetcher = store.fetcher;
+export const fetcher = store.fetcher

dev/index.ts

@@ -1,30 +1,30 @@
-import { sym } from "rdflib";
-import { default as pane } from "../src";
-import { context, fetcher } from "./context";
-import { authn, authSession } from "solid-logic";
-import * as UI from "solid-ui";
+import { sym } from 'rdflib'
+import { default as pane } from '../src'
+import { context, fetcher } from './context'
+import { authn, authSession } from 'solid-logic'
+import * as UI from 'solid-ui'
 
-const loginBanner = document.getElementById("loginBanner");
-const webId = document.getElementById("webId");
+const loginBanner = document.getElementById('loginBanner')
+const webId = document.getElementById('webId')
 
-loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}));
+loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}))
 
 async function finishLogin() {
-  await authSession.handleIncomingRedirect();
-  const session = authSession;
+  await authSession.handleIncomingRedirect()
+  const session = authSession
   if (session.info.isLoggedIn) {
     // Update the page with the status.
-    webId.innerHTML = "Logged in as: " + authn.currentUser().uri;
+    webId.innerHTML = 'Logged in as: ' + authn.currentUser().uri
   } else {
-    webId.innerHTML = "";
+    webId.innerHTML = ''
   }
 }
 
-finishLogin();
+finishLogin()
 
-const webIdToShow = "https://testingsolidos.solidcommunity.net/profile/card#me";
+const webIdToShow = 'https://testingsolidos.solidcommunity.net/profile/card#me'
 
 fetcher.load(webIdToShow).then(() => {
-  const app = pane.render(sym(webIdToShow), context);
-  document.getElementById("app").replaceWith(app);
-});
+  const app = pane.render(sym(webIdToShow), context)
+  document.getElementById('app').replaceWith(app)
+})

eslint.config.mjs

@@ -0,0 +1,73 @@
+import tsParser from "@typescript-eslint/parser"
+import tseslintPlugin from "@typescript-eslint/eslint-plugin"
+
+export default [
+    {
+        ignores: [
+            'lib/**',
+            'node_modules/**',
+            'coverage/**'
+        ],
+    },
+    {
+        files: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.cjs', 'src/**/*.mjs'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ['./tsconfig.json'],
+                sourceType: 'module',
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tseslintPlugin,
+        },
+        rules: {
+            semi: ['error', 'never'],
+            quotes: ['error', 'single'],
+            'no-unused-vars': 'off', // handled by TS
+            '@typescript-eslint/no-unused-vars': ['warn'],
+            '@typescript-eslint/no-explicit-any': 'warn',
+        },
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+    },
+    {
+        files: ['dev/**/*.ts'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ['./tsconfig.eslint.json'],
+                sourceType: 'module',
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tseslintPlugin,
+        },
+        rules: {
+            semi: ['error', 'never'],
+            quotes: ['error', 'single'],
+            'no-unused-vars': 'off', // handled by TS
+            '@typescript-eslint/no-unused-vars': ['warn'],
+            '@typescript-eslint/no-explicit-any': 'warn',
+        },
+    },
+    {
+        files: ['test/**/*.js', 'test/**/*.ts'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ['./tsconfig.test.json'],
+            },
+        },
+        rules: {
+            semi: ['error', 'never'],
+            quotes: ['error', 'single'],
+            'no-console': 'off', // Allow console in tests
+            'no-undef': 'off', // Tests may define globals
+        }
+    }
+]
+

jest.config.mjs

@@ -0,0 +1,17 @@
+export default {
+  // verbose: true, // Uncomment for detailed test output
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  testEnvironment: 'jsdom',
+   testEnvironmentOptions: {
+    customExportConditions: ['node'],
+  },
+  setupFilesAfterEnv: ["./test/helpers/jest.setup.ts"],
+  transformIgnorePatterns: ["/node_modules/(?!lit-html).+\\.js"],
+  testPathIgnorePatterns: ['/node_modules/', '/lib/'],
+  moduleNameMapper: {
+    '^[./a-zA-Z0-9$_-]+\\.ttl$': '<rootDir>/__mocks__/fileMock.js',    // '\\.ttl$'
+  },
+  roots: ['<rootDir>/src', '<rootDir>/test', '<rootDir>/__mocks__'],
+}
+