Refactor styles to CSS

declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const classes: Record<string, string>;
+  export default classes;
+}

dev/index.js

@@ -1,7 +1,7 @@
 import { sym } from 'rdflib'
-import pane from '../src/folderPane'
+import pane from '../src/folderPane.ts'
 import './dev-global.css' // Import after src to override component styles
-import { context, fetcher } from './context'
+import { context, fetcher } from './context.js'
 import { authn, authSession } from 'solid-logic'
 import * as UI from 'solid-ui'
 

package.json

@@ -2,10 +2,14 @@
   "name": "folder-pane",
   "version": "3.0.2",
   "description": "Solid-compatible Panes: File browser",
-  "main": "lib/folderPane.js",
+  "main": "lib/folder-pane.js",
+  "types": "lib/folderPane.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "clean": "rm -rf lib",
-    "build": "npm run clean && npm run typecheck && tsc",
+    "build": "npm run clean && npm run typecheck && webpack --config webpack.config.mjs && tsc --emitDeclarationOnly",
     "lint": "eslint",
     "lint-fix": "eslint --fix",
     "typecheck": "tsc --noEmit",
@@ -17,6 +21,7 @@
   },
   "files": [
     "lib/",
+    "declarations.d.ts",
     "README.md",
     "LICENSE"
   ],
@@ -55,12 +60,14 @@
     "@types/node": "^25.0.10",
     "@typescript-eslint/parser": "^8.53.1",
     "babel-loader": "^10.1.1",
+    "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
     "eslint": "^10.0.1",
     "globals": "^17.1.0",
     "html-webpack-plugin": "^5.6.6",
     "node-polyfill-webpack-plugin": "^4.1.0",
     "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.4.0",
     "typescript": "^5.9.3",
     "webpack": "^5.96.1",
     "webpack-cli": "^6.0.1",

src/folderPane.ts

@@ -5,6 +5,8 @@
 
 import { authn } from 'solid-logic'
 import * as UI from 'solid-ui'
+import './styles/folderPane.css'
+import './styles/utilities.css'
 
 export default {
   icon: UI.icons.iconBase + 'noun_973694_expanded.svg',
@@ -63,8 +65,9 @@ export default {
         const st = kb.statementsMatching(subject, UI.ns.ldp('contains'), obj)[0]
         const defaultpropview = outliner.VIEWAS_boring_default
         const tr = outliner.propertyTR(dom, st, false)
-        tr.firstChild.textContent = '' // Was initialized to 'Contains'
-        tr.firstChild.style.cssText += 'min-width: 3em;'
+        const predicateCell = tr.firstChild as HTMLElement
+        predicateCell.textContent = '' // Was initialized to 'Contains'
+        predicateCell.classList.add('folderPanePredicateCell')
         tr.appendChild(
           outliner.outlineObjectTD(obj, defaultpropview, undefined, st)
         )
@@ -78,9 +81,10 @@ export default {
     const kb = context.session.store
     let mainTable // This is a live synced table
     const div = dom.createElement('div')
-    div.setAttribute('class', 'instancePane')
-    const paneStyle = UI.style.folderPaneStyle || 'border-top: solid 1px #777; border-bottom: solid 1px #777; margin-top: 0.5em; margin-bottom: 0.5em;'
-    div.setAttribute('style', paneStyle)
+    div.classList.add('instancePane', 'folderPaneInstancePane')
+    if (UI.style.folderPaneStyle) {
+      div.setAttribute('style', UI.style.folderPaneStyle)
+    }
 
     const thisDir = subject.uri.endsWith('/') ? subject.uri : subject.uri + '/'
     const indexThing = kb.sym(thisDir + 'index.ttl#this')
@@ -89,7 +93,7 @@ export default {
         'View of folder will be view of indexThing. Loading ' + indexThing
       )
       const packageDiv = div.appendChild(dom.createElement('div'))
-      packageDiv.style.cssText = 'border-top: 0.2em solid #ccc;' // Separate folder views above from package views below
+      packageDiv.classList.add('folderPanePackageDiv')
       kb.fetcher.load(indexThing.doc()).then(function () {
         mainTable = packageDiv.appendChild(dom.createElement('table'))
         context
@@ -127,17 +131,15 @@ export default {
 
         UI.aclControl.preventBrowserDropEvents(dom)
 
-        const explictDropIcon = false
+        const explicitDropIcon = false
         let target
-        if (explictDropIcon) {
-          const iconStyleFound = creationDiv.firstChild.style.cssText
+        if (explicitDropIcon) {
           target = creationDiv.insertBefore(
             dom.createElement('img'),
             creationDiv.firstChild
           )
-          target.style.cssText = iconStyleFound
+          target.classList.add('folderPaneExplicitDropIcon')
           target.setAttribute('src', UI.icons.iconBase + 'noun_748003.svg')
-          target.setAttribute('style', 'width: 2em; height: 2em') // Safari says target.style is read-only
         } else {
           target = creationDiv.firstChild // Overload drop target semantics onto the plus sign
         }

src/styles/folderPane.css

@@ -0,0 +1,18 @@
+.folderPaneInstancePane {
+  border-top: solid 1px #777;
+  border-bottom: solid 1px #777;
+  margin-top: var(--spacing-xs, 0.5em);
+  margin-bottom: var(--spacing-xs, 0.5em);
+}
+.folderPanePackageDiv {
+  border-top: 0.2em solid #ccc;
+}
+
+.folderPanePredicateCell {
+  min-width: 3em;
+}
+
+.folderPaneExplicitDropIcon {
+  width: var(--icon-base, 2em);
+  height: var(--icon-base, 2em);
+}

src/styles/utilities.css

@@ -0,0 +1,4 @@
+:root {
+  /* Shared utility variables (e.g., base icon size) */
+  --icon-base: 2em;
+}

tsconfig.json

@@ -71,7 +71,8 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "declarations.d.ts"
   ],
   "exclude": ["node_modules", "lib"]
 }

webpack.config.mjs

@@ -0,0 +1,99 @@
+import path from 'path'
+import { moduleRules } from './webpack.module.rules.mjs'
+import { createRequire } from 'module'
+import TerserPlugin from 'terser-webpack-plugin'
+import CopyPlugin from 'copy-webpack-plugin'
+
+const require = createRequire(import.meta.url)
+
+const common = {
+  mode: 'production',
+  entry: './src/folderPane.ts',
+  module: {
+    rules: moduleRules,
+  },
+  externals: {
+    'solid-ui': 'UI',
+    'solid-logic': 'SolidLogic',
+    rdflib: '$rdf',
+  },
+  resolve: {
+    extensions: ['.js', '.ts'],
+    fallback: {
+      path: require.resolve('path-browserify')
+    },
+  },
+  devtool: 'source-map',
+}
+
+const normalConfig = {
+  ...common,
+  mode: 'production',
+  output: {
+    path: path.resolve(process.cwd(), 'lib'),
+    filename: 'folder-pane.js',
+    library: {
+      type: 'umd',
+      name: 'FolderPane',
+      export: 'default',
+    },
+    globalObject: 'this',
+    clean: true,
+  },
+  plugins: [
+    ...(common.plugins || []),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve('src/styles'),
+          to: path.resolve('lib/styles'),
+        },
+      ],
+    }),
+  ],
+  optimization: {
+    minimize: false,
+  }
+}
+
+const minConfig = {
+  ...common,
+  mode: 'production',
+  output: {
+    path: path.resolve(process.cwd(), 'lib'),
+    filename: 'folder-pane.min.js',
+    library: {
+      type: 'umd',
+      name: 'FolderPane',
+      export: 'default',
+    },
+    globalObject: 'this',
+    clean: false,
+  },
+  plugins: [
+    ...(common.plugins || []),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve('src/styles'),
+          to: path.resolve('lib/styles'),
+        },
+      ],
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      })
+    ],
+  }
+}
+
+export default [normalConfig, minConfig]