Add type:"module" to package.json's to complete ESM conversion

.github/workflows/push.yml

@@ -106,7 +106,34 @@ jobs:
       - name: Typecheck code
         run: pnpm typecheck
       - name: Run tests
+        id: tests
         run: pnpm test-ci
+        continue-on-error: true
+      - name: Upload jest image snapshot diffs to S3
+        if: steps.tests.outcome == 'failure'
+        run: |
+          SNAPSHOTS_DIR="products/jbrowse-web/src/tests/__image_snapshots__/__diff_output__"
+          S3_PATH="s3://jbrowse.org/demos/imagediff/${{ github.run_id }}"
+
+          if ls ${SNAPSHOTS_DIR}/*.png 1> /dev/null 2>&1; then
+            echo "Uploading jest image snapshot diffs to S3..."
+            aws s3 cp ${SNAPSHOTS_DIR}/ ${S3_PATH}/ --recursive --exclude "*" --include "*.png"
+
+            echo ""
+            echo "============================================"
+            echo "JEST SNAPSHOT DIFF IMAGES UPLOADED TO S3"
+            echo "============================================"
+            for file in ${SNAPSHOTS_DIR}/*.png; do
+              filename=$(basename "$file")
+              echo "https://jbrowse.org/demos/imagediff/${{ github.run_id }}/${filename}"
+            done
+            echo "============================================"
+          else
+            echo "No jest snapshot diff files found"
+          fi
+      - name: Fail if tests failed
+        if: steps.tests.outcome == 'failure'
+        run: exit 1
       - name: Pack artifacts for component tests
         run: node --experimental-strip-types scripts/pack.ts
       - name: Test build

component_tests/app-vite/cypress/plugins/index.js → component_tests/app-vite/cypress/plugins/index.mjs

@@ -16,7 +16,7 @@
  * @type {Cypress.PluginConfig}
  */
 
-module.exports = (on, config) => {
+export default (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }

component_tests/app-vite/src/main.tsx

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

component_tests/app-vite/tsconfig.node.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",

component_tests/cgv-vite/cypress/plugins/index.js → component_tests/cgv-vite/cypress/plugins/index.mjs

@@ -16,7 +16,7 @@
  * @type {Cypress.PluginConfig}
  */
 
-module.exports = (on, config) => {
+export default (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }

component_tests/cgv-vite/src/main.tsx

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

component_tests/cgv-vite/tsconfig.node.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",

component_tests/lgv-vite/cypress/plugins/index.js → component_tests/lgv-vite/cypress/plugins/index.mjs

@@ -16,7 +16,7 @@
  * @type {Cypress.PluginConfig}
  */
 
-module.exports = (on, config) => {
+export default (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }

component_tests/lgv-vite/src/main.tsx

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

component_tests/lgv-vite/tsconfig.node.json

@@ -6,7 +6,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",

eslint.config.mjs

@@ -26,6 +26,7 @@ export default defineConfig(
       'babel.config.cjs',
       'eslint.config.mjs',
       'products/**/webpack.config.js',
+      'products/**/webpack.config.mjs',
       '**/.storybook',
       '**/output-version.js',
       '**/umd_plugin.js',

package.json

@@ -106,7 +106,6 @@
     "dotenv": "^17.2.3",
     "electron": "40.0.0",
     "electron-builder": "^25.1.8",
-    "electron-mock-ipc": "^0.3.14",
     "eslint": "^9.39.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-node": "^11.1.0",

packages/app-core/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jbrowse/app-core",
   "version": "4.0.4",
+  "type": "module",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",

packages/core/.storybook/main.js → packages/core/.storybook/main.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   framework: {
@@ -14,7 +14,7 @@ module.exports = {
       test: /\.(ts|tsx|js|jsx)$/,
       use: [
         {
-          loader: require.resolve('babel-loader'),
+          loader: 'babel-loader',
           options: {
             rootMode: 'upward',
             presets: ['@babel/preset-react'],

packages/core/DEVELOPERS.md

@@ -0,0 +1,88 @@
+# @jbrowse/core Developer Guide
+
+## Package Design
+
+This package has **no main entry point**. It is designed exclusively for subpath
+imports:
+
+```typescript
+// Correct usage
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+// This will error - no default export
+import '@jbrowse/core' // ERR_PACKAGE_PATH_NOT_EXPORTED
+```
+
+## package.json Structure
+
+This package uses a dual-mode configuration to support both monorepo development
+and external consumers.
+
+### Exports Field
+
+The `exports` field defines subpath imports like `@jbrowse/core/PluginManager`.
+During development, these point to source TypeScript files:
+
+```json
+"exports": {
+  ".": "./src/index.ts",
+  "./PluginManager": "./src/PluginManager.ts"
+}
+```
+
+### publishConfig
+
+When the package is published to npm, the `publishConfig` section overrides the
+exports to point to compiled output:
+
+```json
+"publishConfig": {
+  "exports": {
+    "./PluginManager": {
+      "types": "./esm/PluginManager.d.ts",
+      "import": "./esm/PluginManager.js"
+    }
+  }
+}
+```
+
+### typesVersions (for moduleResolution "node" consumers)
+
+The `exports` field is only supported by TypeScript with `moduleResolution` set
+to `bundler`, `node16`, or `nodenext`. For consumers using the legacy
+`moduleResolution: "node"`, we include a `typesVersions` field in
+`publishConfig`:
+
+```json
+"publishConfig": {
+  "typesVersions": {
+    "*": {
+      "PluginManager": ["esm/PluginManager.d.ts"]
+    }
+  }
+}
+```
+
+This tells TypeScript where to find type declarations for subpath imports even
+when the `exports` field is not being read.
+
+## Generating Exports
+
+The exports, publishConfig.exports, and publishConfig.typesVersions are all
+auto-generated by scanning the codebase for `@jbrowse/core/*` imports:
+
+```bash
+pnpm generate:exports
+```
+
+This script (`scripts/generateExports.mjs`) finds all imports of
+`@jbrowse/core/*` across the monorepo and generates the appropriate mappings.
+
+## Module Resolution Summary
+
+| Consumer Environment               | How it resolves `@jbrowse/core/PluginManager`         |
+| ---------------------------------- | ----------------------------------------------------- |
+| Monorepo (bundler mode)            | Uses `exports` field pointing to `src/*.ts`           |
+| External (bundler/node16/nodenext) | Uses `publishConfig.exports` pointing to `esm/*.js`   |
+| External (node mode)               | Uses `typesVersions` for types, `exports` for runtime |