upgrade in progress to typescript 6.0.1

CHANGELOG.md

@@ -65,3 +65,9 @@
 1.0.15
   - fixed issue that caused links to be rendered multiple times while nodes,links,bundles, or groups were being dragged
   - animations now persist through dragging
+
+1.0.16
+  - all devDependencies upgraded.. 
+    -- This was a major undertaking.. TypeScript has been upgraded from 5.x to 6.x
+  - package.json exports have been modernized
+  - webpack builds have been upgraded, we are now no longer using deprecated features.

demo_app/package.json

@@ -19,25 +19,24 @@
   "description": "",
   "devDependencies": {
     "linked-bundle-node-map":"*",
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@babel/register": "^7.28.3",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "css-loader": "^7.1.2",
-    "express": "^5.1.0",
-    "mini-css-extract-plugin": "^2.9.4",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "@babel/register": "^7.28.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "css-loader": "^7.1.4",
+    "express": "^5.2.1",
+    "mini-css-extract-plugin": "^2.10.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.4",
-    "typescript": "^5.9.3",
-    "webpack": "^5.102.1",
+    "ts-loader": "^9.5.7",
+    "typescript": "^6.0.2",
+    "webpack": "^5.106.1",
     "nocache": "^4.0.0",
-    "webpack-cli": "^6.0.1"
+    "webpack-cli": "^7.0.2"
   },
   "dependencies": {
   }

demo_app/package.json.bk

@@ -0,0 +1,49 @@
+{
+  "name": "linked-bundle-node-map-demo-app",
+  "version": "0.0.5",
+  "main": "dist/bundle.js",
+  "types": "dist/LinkedBundleNodeMap.d.ts",
+  "homepage": "https://github.com/akalinux/linked-bundle-node-map",
+  "scripts": {
+    "watch": "webpack -w -c ./webpack-dev.ts",
+    "dev": "webpack -c ./webpack-dev.ts",
+    "build": "webpack -c ./webpack-prod.ts",
+    "server": "node ./src/server.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "AKALINUX<akalinux@cpan.org>",
+  "license": "MIT",
+  "description": "",
+  "devDependencies": {
+    "linked-bundle-node-map":"*",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/register": "^7.28.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "css-loader": "^7.1.2",
+    "express": "^5.1.0",
+    "mini-css-extract-plugin": "^2.9.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.4",
+    "typescript": "^6.0.2",
+    "webpack": "^5.102.1",
+    "nocache": "^4.0.0",
+    "webpack-cli": "^7.0.2"
+  },
+  "dependencies": {
+  },
+  "type": "module",
+  "exports": {
+    "types":"./dist/LinkedBundleNodeMap.d.ts",
+    "import":"./dist/bundle.js"
+  }
+}

demo_app/setup.sh

@@ -4,7 +4,6 @@
 target=$(cd $(pwd)/..;pwd)
 rm -rf ./node_modules
 mkdir ./node_modules
-ln -s $target node_modules/linked-bundle-node-map
 npm install
 rm -f node_modules/linked-bundle-node-map
 ln -s $target node_modules/linked-bundle-node-map

demo_app/src/env.d.ts

@@ -0,0 +1,4 @@
+// globals.d.ts
+declare module "*.css";
+declare module "*.scss";
+declare module "*.png";

demo_app/src/server.js

@@ -1,8 +1,9 @@
-const express = require('express');
-const nocache = require("nocache");
-const path = require('path');
+import express from 'express';
+import nocache from 'nocache';
+import path from 'path';
 const app = express();
 const PORT = process.env.PORT || 5000;
+const __dirname = import.meta.dirname;
 
 app.use(nocache());
 // Serve static files from the 'build' directory (or 'dist')

demo_app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler", 
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "rootDir":"./src",
+    "outDir":"./dist",
+    "declaration": false,
+    "declarationMap": false, 
+    "strict": false,
+    "types": ["node"],
+    "noUncheckedSideEffectImports": true
+  },
+   "include": ["src/**/*"], 
+ "exclude": [ "node_modules","dist/*"]
+}

package.json

@@ -1,7 +1,6 @@
 {
   "name": "linked-bundle-node-map",
-  "version": "1.0.15",
-  "main": "dist/bundle.js",
+  "version": "1.0.16",
   "types": "dist/LinkedBundleNodeMap.d.ts",
   "funding": "https://github.com/sponsors/akalinux",
   "homepage": "https://github.com/akalinux/linked-bundle-node-map",
@@ -13,7 +12,7 @@
     "testapp": "cd demo_app;npm run build",
     "tw": "cd demo_app;npm run watch",
     "clean": "rm -rf dist public/js||/bin/true",
-    "deploy": "npm run build && bash -c 'cd  demo_app;npm run build'; gh-pages -d public",
+    "deploy": "npm run clean && npm run build && bash -c 'cd  demo_app;npm run build'; gh-pages -d public",
     "test": "npx eslint src && jest",
     "push": "npm run clean && npm run test && npm run build && npm run publish && npm run deploy"
   },
@@ -31,27 +30,42 @@
   "license": "MIT",
   "description": "General diagram tool.  Create flow charts, network maps, UML diagrams etc..",
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@babel/register": "^7.28.3",
-    "@eslint/js": "^9.39.1",
+    "@babel/register": "^7.28.6",
+    "@eslint/js": "^10.0.1",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "eslint": "^9.39.1",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^10.2.0",
     "gh-pages": "^6.3.0",
-    "jest": "^30.0.5",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "jest": "^30.3.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.4.0",
-    "ts-loader": "^9.5.4",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "webpack": "^5.102.1",
-    "webpack-cli": "^6.0.1"
+    "ts-jest": "^29.4.9",
+    "ts-loader": "^9.5.7",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "webpack": "^5.106.1",
+    "webpack-cli": "^7.0.2"
   },
-  "dependencies": {}
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/bundle.js",
+      "default": "./dist/bundle.js",
+      "types": "./dist/LinkedBundleNodeMap.d.ts"
+    },
+    "./dist/CommonTypes": {
+      "import": "./dist/CommonTypes.d.ts"
+    },
+    "./dist/linked-bundle-node.css": {
+      "import": "./dist/linked-bundle-node.css",
+      "require": "./dist/linked-bundle-node.css"
+    }
+  }
 }

src/CalculateNodeXY.ts

@@ -60,7 +60,7 @@ export default class CalculateNodeXY extends CalculatorBase {
           nodes.push(node);
         }
       } else {
-        const x = minX = minX + pad;
+        const x = minX + pad;
         const y = minY + pad;
         const node = { ...list[0], x, y } as NodeEl;
         nodes.push(node);

src/Calculator.ts

@@ -569,7 +569,7 @@ export default class Calculator extends CalculatorBase {
             w: w * .75,
             o: i,
           }
-          this.animations[aid++] = animate;
+          this.animations[aid++] = animate; // eslint-disable-line no-useless-assignment
         } else if (a == 'b') {
           for (let i = 0; i < SD.length; ++i) {
             const a = SD[i];

src/MouseWatcher.ts

@@ -220,9 +220,9 @@ export default class MouseWatcher {
         event.name = 'NodeDrag';
         this.calc.moveNode(dt.node!.i, data.nodes[dt.node!.i]);
       } else {
-        let tag = '';
+        // eslint-disable-next-line no-useless-assignment
+        let tag ='',name = ''
         this.calc.moveLink(dt, {x:0,y:0});
-        let name='';
         if (dt.type == 'link') {
           tag = `link-${dt.link!.l.i}`
           name='OnLinkChange'

tsconfig.json

@@ -1,19 +1,19 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "module": "es6",
-    "moduleResolution": "node",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler", 
     "sourceMap": true,
     "jsx": "react-jsx",
+    "rootDir":"./src",
     "outDir":"./dist",
     "declaration": true,
     "declarationMap": true, 
-    "strict": true,
+    "strict": false,
     "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "types": ["node","jest"]
   },
-  "include": ["src"], 
-  "exclude": [ "node_modules","dist/*"
-  ]
+   "include": ["src"], 
+ "exclude": [ "node_modules","dist/*"]
 }

webpack-dev.config.ts

@@ -43,9 +43,12 @@ module.exports = {
   output: {
     path: dist,
     filename: 'bundle.js',
-    library: 'LinkedBundleNodeMap', // Global variable name for the UMD module
-    libraryTarget: 'umd',
     globalObject: 'this', // Ensures UMD works in various environments
+    //module:true,
+    library: {
+      name: 'LinkedBundleNodeMap',
+      type:'umd',
+    }
   },
   resolve: {
     extensions: ['.ts', '.tsx',],

webpack-prod.config.ts

@@ -7,6 +7,7 @@ const src=path.resolve(__dirname, 'src');
 try {
   fs.mkdirSync(dist);
 } catch (e) {
+  console.log(e)
   // don't care
 }
 
@@ -20,9 +21,11 @@ module.exports = {
   output: {
     path: dist,
     filename: 'bundle.js',
-    library: 'LinkedBundleNodeMap', // Global variable name for the UMD module
-    libraryTarget: 'umd',
     globalObject: 'this', // Ensures UMD works in various environments
+    library: {
+      name: 'LinkedBundleNodeMap',
+      type:'umd',
+    }
   },
   resolve: {
     extensions: ['.ts', '.tsx',],