Fix/webpack

.github/tasks.md

@@ -1,35 +1,48 @@
 ## Tasks
-- [x] Read the description in [#128](https://github.com/SenteraLLC/ulabel/issues/128)
-  - [x] Update this checklist with steps to take in order to implement the requested functionality
+- [x] Read the description in [#164](https://github.com/SenteraLLC/ulabel/issues/164)
+  - [x] Write a clear summary of the requested change
+  - [x] Propose some options of how to proceed. Wait for user input to decide which to try first.
 
-### Implementation Steps
-- [x] Design and implement UI for image filters
-  - [x] Create a collapsible/popup menu component for filter controls
-  - [x] Add sliders for each CSS filter property:
-    - [x] Brightness (0-200%, default 100%)
-    - [x] Contrast (0-200%, default 100%)
-    - [x] Hue-rotate (0-360deg, default 0)
-    - [x] Invert (0-100%, default 0%)
-    - [x] Saturate (0-200%, default 100%)
-  - [x] Add reset button to restore default values
-
-- [x] Implement filter state management
-  - [x] Add filter state to configuration/state management
-  - [x] Make default filter values configurable
-  - [x] Add getter/setter methods for filter values
+### Decision: Proceeding with Option 3 (Webpack modernization + dependency cleanup)
 
-- [x] Apply CSS filters to canvas/image
-  - [x] Apply CSS filter property to the image canvas element only (not whole screen)
-  - [x] Update filter values dynamically as sliders change
-  - [x] Ensure filters don't affect UI elements (text, buttons, etc.)
+#### Step 1: Move dependencies to devDependencies
+- [x] Move `@turf/turf` from dependencies to devDependencies
+- [x] Move `jquery` from dependencies to devDependencies
+- [x] Move `polygon-clipping` from dependencies to devDependencies
+- [x] Move `uuidv4` from dependencies to devDependencies
+- [x] Test: Run `npm install` and verify it works
+- [x] Test: Run `npm run build` and verify output is identical (both files 1039.6 KB)
 
-- [x] Testing
-  - [x] Test all filter controls work correctly
-  - [x] Verify filters only apply to image, not UI
-  - [x] Test filter combinations
-  - [x] Run linting: `npm run lint`
-  - [x] Run build: `npm run build`
-
-- [x] Documentation
-  - [x] Update API documentation with new filter methods
-  - [x] Tested on demo page (multi-class demo works great!)
+#### Step 2: Enable and modernize webpack minification ✅ COMPLETE
+- [x] Remove commented-out UglifyJsPlugin code (deprecated)
+- [x] Enable webpack 5's built-in TerserPlugin for minification  
+- [x] Configure it to only minify `ulabel.min.js`, not `ulabel.js`
+- [x] Test: Run `npm run build` and verify both files are created
+- [x] Test: Verify `ulabel.js` is NOT minified (readable) - 2.33 MB with webpack runtime and formatted code
+- [x] Test: Verify `ulabel.min.js` IS minified (smaller size) - 1.02 MB minified
+- [x] Test: Run `npm run lint` - No errors
+- [x] Note: File size difference (2.33 MB vs 1.02 MB) is expected - readable version includes webpack runtime overhead
+
+#### Step 3: Verify and document ✅ COMPLETE
+- [x] Compare file sizes before/after
+  - Before: Both files 1039 KB (both minified, minification was disabled)
+  - After: ulabel.js 2.33 MB (readable), ulabel.min.js 1.02 MB (minified)
+  - Result: Minification now working correctly, file size increase for non-min version is expected
+- [x] Update CHANGELOG.md with changes
+- [x] Document any findings or recommendations
+
+#### Step 4: Security and dependency updates ✅ COMPLETE
+- [x] Run `npm audit` to identify vulnerabilities
+- [x] Fix 12 vulnerabilities using `npm audit fix`
+- [x] Apply breaking changes for remaining issues with `npm audit fix --force`
+- [x] Update `typescript-eslint` packages to be compatible with ESLint 9.37.0
+- [x] Fix linting issues in `tests/e2e/fixtures.js`
+- [x] Verify all tests still pass (28 unit tests + 36 e2e tests)
+- [x] Final audit: 0 vulnerabilities
+
+#### Step 5: Configure package exports for minified by default ✅ COMPLETE
+- [x] Update `main` and `module` fields to point to `dist/ulabel.min.js`
+- [x] Add `exports` field with options: `.` (minified), `./min` (minified), `./debug` (unminified)
+- [x] Update `unpkg` field to serve minified version by default
+- [x] Update README.md with usage examples for both minified and unminified versions
+- [x] Document clear import patterns for users

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
     - name: Install dependencies
       run: npm install
 
-    - name: Run unit tests
+    - name: Build and run unit tests (both builds)
       run: npm run build-and-test
 
   e2e-tests:
@@ -50,7 +50,7 @@ jobs:
     - name: Build project
       run: npm run build
 
-    - name: Run E2E tests
+    - name: Run E2E tests (all browsers, both builds)
       run: npm run test:e2e
 
     - name: Upload Playwright report

CHANGELOG.md

@@ -2,9 +2,7 @@
 
 All notable changes to this project will be documented here.
 
-## [unreleased]
-
-Nothing yet.
+## [unreleased]https://github.com/SenteraLLC/ulabel/pull/233
 
 ## [0.20.0] - Oct 15th, 2025
 - Add `fly-to` functions, which sets the zoom and focus to a specific annotation
@@ -21,6 +19,11 @@ Nothing yet.
   - hue rotate
   - invert
   - saturate
+- Removed redundant dependencies that were being unnecessarily installed by users using npm to install ulabel
+- Updated webpack build process to properly provide both a minified (default) and unminified build (for better debugging)
+  - Added package `exports` field with options: `.` (minified), `./min` (minified), `./debug` (unminified)
+- Add test coverage for both minified and unminified builds
+- Update dependencies and fix 12 security vulnerabilities
 
 ## [0.19.1] - Oct 9th, 2025
 - Add automated testing to the repo

README.md

@@ -11,23 +11,35 @@ A browser-based tool for annotating images.
 ULabel is an entirely "frontend" tool. It can be incorporated into any HTML page using either the unpkg cdn
 
 ```html
+<!-- Use minified version (recommended for production) -->
+<script src="https://unpkg.com/ulabel"></script>
+
+<!-- Or use unminified version for debugging -->
 <script src="https://unpkg.com/ulabel/dist/ulabel.js"></script>
 ```
 
-ULabel is also published on [npm](https://www.npmjs.com/package/ulabel). You can use npm to install it and serve the `dist/ulabel.js` file from `node_modules` locally.
+ULabel is also published on [npm](https://www.npmjs.com/package/ulabel). You can use npm to install it and serve the files from `node_modules` locally.
 
 ```bash
 npm install ulabel
 ```
 
 ```html
+<!-- Use minified version (recommended for production) -->
+<script src="/node_modules/ulabel/dist/ulabel.min.js"></script>
+
+<!-- Or use unminified version for debugging -->
 <script src="/node_modules/ulabel/dist/ulabel.js"></script>
 ```
 
 Or you can import it directly in your JavaScript code:
 
 ```javascript
+// Use minified version (default, recommended for production)
 import ULabel from 'ulabel';
+
+// Or use unminified version for debugging
+import ULabel from 'ulabel/debug';
 ```
 
 An API spec can be found [here](https://github.com/SenteraLLC/ulabel/blob/main/api_spec.md), but as a brief overview: Once the script is included in your HTML doc, you can create a ULabel annotation session as follows.