[Hackathon] Add ESM Support to `ui-toolkit` and Update Angular & React Wrappers

[rsdmike]

🔹 Overview

The ui-toolkit project is currently using Webpack but is not configured to output ESM (ECMAScript Modules). This can lead to optimization bailouts in modern frameworks like Angular and React.

To modernize the build system, improve tree-shaking, and enhance performance, we need to:

1. Add ESM support to ui-toolkit by configuring Webpack (or considering alternatives like Vite or Rollup).
2. Update ui-toolkit-angular and ui-toolkit-react to ensure compatibility with the new ESM output.

This will ensure that all three repositories are ESM-compatible and optimized for modern JavaScript bundlers.

---

🎯 Task Scope

1️⃣ Update ui-toolkit to Support ESM Output

• Step 1: Update Webpack configuration to support ESM output:
  • Set output.module to true.
  • Use type: 'module' in package.json.
  • Ensure correct exports field for both CJS and ESM:

    "exports": {
      ".": {
        "import": "./dist/esm/index.js",
        "require": "./dist/cjs/index.js"
      }
    }

• Step 2: Ensure tree-shaking is enabled for ESM builds.
• Step 3: Update TypeScript configuration (tsconfig.json) to:
  • Use "module": "ESNext".
  • Ensure type declarations are compatible with ESM.
• Step 4: Test and validate the ESM build output:
  • Confirm no optimization bailouts in Angular and React projects.

---

2️⃣ Update ui-toolkit-angular for ESM Compatibility

• Step 1: Update imports to support ESM:

  import { SomeComponent } from '@device-management-toolkit/ui-toolkit'

• Step 2: Test the updated package with:
  • Angular 19 (ensure compatibility with Ivy and ESM)
• Step 3: Verify no console warnings or errors related to ESM.

---

3️⃣ Update ui-toolkit-react for ESM Compatibility

• Step 1: Update imports to use ESM syntax.
• Step 2: Test with React 19+.
• Step 3: Verify compatibility with React's native tree-shaking.

---

4️⃣ Ensure Compatibility and Test Across Projects

• Ensure no breaking changes in:
  • ui-toolkit
  • ui-toolkit-angular
  • ui-toolkit-react
• Test integration in real-world projects to validate ESM support:
  • Confirm no optimization bailouts in Angular and React builds.
  • Ensure tree-shaking works effectively.

---

📂 Relevant Repositories

• ui-toolkit
• ui-toolkit-angular
• ui-toolkit-react

---

💻 Technical Details

• Webpack Configuration Changes:
  • Use "type": "module" in package.json.
  • Set output to:

    output: {
      filename: '[name].js',
      module: true,
      library: {
        type: 'module'
      }
    }

  • Ensure compatibility with both CommonJS (CJS) and ESM.
• Alternative Build Tools:
  • Consider using Rollup or Vite if Webpack config becomes too complex.
• TypeScript Adjustments:
  • Update tsconfig.json to use:

    "module": "ESNext",
    "target": "ES2022"

• Testing Compatibility:
  • Test with:
    • Angular 19 and React 19+.
    • Next.js or Vite for ESM compatibility validation.

---

✅ Acceptance Criteria

• ui-toolkit outputs ESM-compatible bundles.
• No optimization bailouts in Angular or React. This warning should not exist when running npm run build-enterprise:

• ui-toolkit-angular is fully compatible with the new ESM output.
• ui-toolkit-react is fully compatible with the new ESM output.
• All three repositories are tested for tree-shaking and performance improvements.
• A Pull Request (PR) is submitted for each repository with a summary of changes.

---

🚀 How to Get Started

1. Comment below to claim this issue.
2. Fork the repos and create branches (e.g., feature/esm-support).
3. Implement ESM support and update wrappers accordingly.
4. Submit Pull Requests (PRs) linking this issue.

---

📎 Additional Notes

• Backward compatibility with CJS should be maintained where possible.
• If you encounter issues with Angular or React compatibility, document them in the PR.
• Consider using module resolution strategies for smooth integration.