Implement PR suggestions and fix small bug

this mostly affects the build - followed solid-logic where possible
for tsc, eslint, esm and changed sourcePane to SourcePane.

Author: SharonStrats

config/babel.mjs

@@ -6,7 +6,7 @@ import path from 'path'
  * @see https://lit.dev/docs/components/decorators/#using-decorators-with-babel
  */
 
-const pathsUsingDecorators = ['src/design-system', 'src/primitives', 'src/storybook', 'src/components']
+const pathsUsingDecorators = ['src/primitives', 'src/components']
 
 export const litDecoratorsBabelOptions = {
   assumptions: {

declarations.d.ts

@@ -4,4 +4,4 @@ declare module '*.styles.css' {
   export default styles
 }
 
-declare module '*.css';
+declare module '*.css';

dev/index.js

@@ -1,5 +1,5 @@
 import * as logic from 'solid-logic'
-import pane from '../src/sourcePane'
+import pane from '../src/SourcePane'
 import './dev-global.css'
 import * as $rdf from 'rdflib'
 import * as UI from 'solid-ui'

eslint.config.mjs

@@ -5,7 +5,6 @@ export default [
   {
     ignores: [
       'dist/**',
-      'lib/**',
       'node_modules/**',
       'coverage/**'
     ],

package-lock.json

@@ -3,15 +3,8 @@
   "version": "3.1.0",
   "description": "Solid-compatible Panes: Source editor",
   "main": "dist/source-pane.js",
-  "module": "dist/source-pane.esm.js",
-  "types": "dist/SourcePane.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/source-pane.esm.js",
-      "require": "./dist/source-pane.js",
-      "types": "./dist/SourcePane.d.ts"
-    }
-  },
+  "module": "dist/esm/source-pane.esm.js",
+  "types": "dist/sourcePane.d.ts",
   "files": [
     "/dist",
     "README.md",
@@ -23,7 +16,7 @@
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "npm run clean && npm run typecheck && npm run build-js && npm run build-dist",
+    "build": "npm run clean && npm run typecheck && npm run build-dist && npm run build-js",
     "typecheck": "tsc --noEmit",
     "build-dist": "webpack --progress",
     "build-js": "tsc --emitDeclarationOnly",
@@ -32,7 +25,7 @@
     "watch": "sh -c 'npm run watch-js & npm run watch-dist & wait'",
     "lint": "eslint",
     "lint-fix": "eslint --fix",
-    "watch-workspace": "sh -c 'npm run watch-js & npm run watch-dist & wait'",
+    "watch:workspace": "sh -c 'npm run watch-js & npm run watch-dist & wait'",
     "watch-js": "tsc --watch --emitDeclarationOnly",
     "test": "jest --no-coverage",
     "typecheck-test": "tsc --noEmit -p tsconfig.test.json",
@@ -100,7 +93,7 @@
     "solid-ui": "^3.1.1",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.4.0",
-    "typescript": "^6.0.3",
+    "typescript": "^5.9.3",
     "webpack": "^5.97.1",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.3"

package.json

@@ -9,11 +9,15 @@ import { DataBrowserContext, NewPaneOptions } from 'pane-registry'
 import * as mime from 'mime-types'
 import { html, render as litRender } from 'lit'
 import { log } from './debug'
-import './components/sourceEditorCard/SourceEditorCard'
-import './components/source-provider/SourceProvider'
+import SourceEditorCard from './components/sourceEditorCard/SourceEditorCard'
+import SourceProvider from './components/source-provider/SourceProvider'
 import './sourcePane.css'
 import { SourcePaneState } from './types'
 
+// Keep custom-element modules in the bundle; they are registered for side effects.
+void SourceEditorCard
+void SourceProvider
+
 const pane = {
   icon: icons.iconBase + 'noun_109873.svg', // noun_109873_51A7F9.svg
 

src/sourcePane.ts

@@ -3,7 +3,7 @@
     /* Basic Options */
     "target": "ES2019" /* Specify ECMAScript target version - matches your browser support */,
     "module": "ESNext" /* Let bundlers handle module transformation for better tree-shaking */,
-    "moduleResolution": "bundler", /* Use bundler-aware module resolution for modern Webpack builds. */
+    "moduleResolution": "node", /* Use bundler-aware module resolution for modern Webpack builds. */
     /* Crucial for library compatibility: */
     "skipLibCheck": true, // Skip type checking of declaration files for faster builds
     "allowSyntheticDefaultImports": true, // Often helps with ESM interop
@@ -21,7 +21,7 @@
     "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
 
-    "outDir": "lib" /* Redirect output structure to the directory. */,
+    "outDir": "dist" /* Redirect output structure to the directory. */,
     "rootDir": "src/",
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
 

tsconfig.json

@@ -26,8 +26,8 @@ const externalsESM = {
 }
 
 const commonConfig = {
-  mode: 'production',
   entry: './src/sourcePane.ts',
+  mode: 'production',
   module: {
     rules: moduleRules,
   },
@@ -47,15 +47,16 @@ const umdConfig = {
     path: path.resolve(process.cwd(), 'dist'),
     filename: 'source-pane.js',
     chunkFilename: '[name].js',
+    publicPath: 'auto',
     library: {
       type: 'umd',
       name: 'SourcePane',
       export: 'default',
     },
     globalObject: 'this',
-    clean: false,
   },
   optimization: {
+    concatenateModules: false,
     minimize: false,
   },
 }
@@ -67,15 +68,16 @@ const minConfig = {
     path: path.resolve(process.cwd(), 'dist'),
     filename: 'source-pane.min.js',
     chunkFilename: '[name].min.js',
+    publicPath: 'auto',
     library: {
       type: 'umd',
       name: 'SourcePane',
       export: 'default',
     },
     globalObject: 'this',
-    clean: false,
   },
   optimization: {
+    concatenateModules: false,
     minimize: true,
     minimizer: [
       new TerserPlugin({
@@ -90,25 +92,29 @@ const minConfig = {
   },
 }
 
-const esmConfig = {
+const esmPaneConfig = {
   ...commonConfig,
+  devtool: false,
   externals: externalsESM,
   externalsType: 'module',
   experiments: {
     outputModule: true,
   },
   output: {
-    path: path.resolve(process.cwd(), 'dist'),
+    path: path.resolve(process.cwd(), 'dist/esm'),
     filename: 'source-pane.esm.js',
     chunkFilename: '[name].esm.js',
+    publicPath: 'auto',
     library: {
       type: 'module',
     },
-    clean: false,
   },
   optimization: {
+    concatenateModules: false,
+    runtimeChunk: false,
+    splitChunks: false,
     minimize: false,
   },
 }
 
-export default [umdConfig, minConfig, esmConfig]
+export default [umdConfig, minConfig, esmPaneConfig]

webpack.config.mjs

@@ -8,7 +8,7 @@ export default [
     mode: 'development',
     entry: ['./dev/index.js'],
     output: {
-      path: path.resolve(process.cwd(), 'lib'),
+      path: path.resolve(process.cwd(), 'dist'),
       filename: 'main.js',
       clean: false,
     },