Refactor separate the styles for the FileExplorer panes

dev/loader.ts

@@ -3,7 +3,7 @@ import * as paneRegistry from 'pane-registry'
 import * as $rdf from 'rdflib'
 import { solidLogicSingleton, store, authSession } from 'solid-logic'
 import { getOutliner } from '../src'
-import Pane from 'profile-pane'
+import Pane from '../src/humanReadablePane.js'
 import './dev-mash.css'
 
 // Add custom properties to the Window interface for TypeScript
@@ -23,10 +23,22 @@ async function renderPane (uri: string) {
   }
   const subject = $rdf.sym(uri)
   const doc = subject.doc()
+  const paneSubject = Pane.name === 'dataContents' ? doc : subject
+
+  const target = document.getElementById('render')
+
+  try {
+    await new Promise((resolve, reject) => {
+      store.fetcher.load(doc).then(resolve, reject)
+    })
+  } catch (error) {
+    console.error('Failed to load document for pane rendering', error)
+    if (target) {
+      target.innerHTML = `<pre>Failed to load ${doc.uri}\n${String(error)}</pre>`
+    }
+    return
+  }
 
-  await new Promise((resolve, reject) => {
-    store.fetcher.load(doc).then(resolve, reject)
-  })
   const context = {
     // see https://github.com/solidos/solid-panes/blob/005f90295d83e499fd626bd84aeb3df10135d5c1/src/index.ts#L30-L34
     dom: document,
@@ -39,16 +51,21 @@ async function renderPane (uri: string) {
   }
 
   console.log(subject, context)
-  const icon = createIconElement(Pane)
-  const paneDiv = Pane.render(subject, context)
-
-  const target = document.getElementById('render')
-  if (target) {
-    target.innerHTML = ''
-    target.appendChild(icon)
-    target.appendChild(paneDiv)
-  } else {
-    console.error("Element with id 'render' not found.")
+  try {
+    const icon = createIconElement(Pane)
+    const paneDiv = Pane.render(paneSubject, context)
+    if (target) {
+      target.innerHTML = ''
+      target.appendChild(icon)
+      target.appendChild(paneDiv)
+    } else {
+      console.error("Element with id 'render' not found.")
+    }
+  } catch (error) {
+    console.error('Pane render failed', error)
+    if (target) {
+      target.innerHTML = `<pre>Pane render failed\n${String(error)}</pre>`
+    }
   }
 }
 
@@ -63,6 +80,7 @@ function createIconElement (Pane: { icon: string }) {
 window.onload = async () => {
   console.log('document ready')
   // registerPanes((cjsOrEsModule: any) => paneRegistry.register(cjsOrEsModule.default || cjsOrEsModule))
+  paneRegistry.register(Pane)
   paneRegistry.register(require('contacts-pane'))
   await authSession.handleIncomingRedirect({
     restorePreviousSession: true
@@ -82,7 +100,7 @@ window.onload = async () => {
       loginBanner.innerHTML = `Logged in as ${session.info.webId} <button onclick="logout()">Log out</button>`;
     }
   }
-  renderPane('https://testingsolidos.solidcommunity.net/profile/card#me')
+  renderPane('https://testingsolidos.solidcommunity.net/profile/card')
 }
 window.logout = () => {
   authSession.logout()

jest.config.mjs

@@ -11,6 +11,12 @@ export default {
     '^.+\\.[tj]sx?$': ['babel-jest', { configFile: './babel.config.mjs' }],
   },
   transformIgnorePatterns: ['/node_modules/(?!lit-html).+\\.js'],
+  moduleNameMapper: {
+    '^SolidLogic$': 'solid-logic',
+    '^UI$': 'solid-ui',
+    '^\\$rdf$': 'rdflib',
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.js'
+  },
   setupFilesAfterEnv: ['./test/helpers/setup.ts'],
   testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
   roots: ['<rootDir>/src', '<rootDir>/test'],