# Migration from Webpack to Vite

This document summarizes the migration of the `mgnify-sourmash-component` project from Webpack to Vite.

## Completed Steps

1. **Updated Dependencies**
   - Added Vite and related packages
   - Removed webpack-related packages
   - Added polyfill packages (buffer, stream-browserify)
   - Added plugins for WebAssembly support (vite-plugin-wasm, vite-plugin-top-level-await)
   - Added node polyfills (vite-plugin-node-polyfills)

2. **Created Vite Configuration**
   - Created vite.config.ts with appropriate settings
   - Configured TypeScript support
   - Configured web worker support
   - Set up polyfills for Buffer, process, util, and stream
   - Configured WebAssembly support
   - Added a custom plugin for sourmash WebAssembly imports

3. **Updated Project Files**
   - Updated custom.d.ts for Vite compatibility
   - Modified worker import syntax in index.ts
   - Fixed worker instantiation in index.ts
   - Created a Vite-compatible index.html

4. **Updated Scripts in package.json**
   - Replaced webpack scripts with Vite equivalents

5. **Documentation**
   - Added a Development section to README.md
   - Documented the WebAssembly issue and potential solutions

## Remaining Issues

The main issue that remains is the WebAssembly loading in web workers. When building the project with Vite, the following error occurs:

```
Could not load /path/to/node_modules/sourmash/sourmash_bg.wasm (imported by node_modules/sourmash/sourmash.js): "ESM integration proposal for Wasm" is not supported currently.
```

This is because the sourmash library imports WebAssembly modules using the ESM integration proposal, which is not currently supported by Vite in web workers.

## Next Steps

To fully resolve the WebAssembly issue, one of the following approaches could be taken:

1. **Create a More Advanced Custom Plugin**
   - Develop a more sophisticated Rollup plugin that can intercept and transform WebAssembly imports in web workers
   - This would require deeper knowledge of Vite's and Rollup's plugin systems

2. **Fork and Modify the sourmash Library**
   - Create a fork of the sourmash library that uses Vite-compatible WebAssembly imports
   - This would involve modifying how the library loads its WebAssembly modules

3. **Use a Different WebAssembly Approach**
   - Modify the project to use a different approach for WebAssembly loading
   - This might involve loading the WebAssembly module as a URL and instantiating it manually

4. **Use a Different Build Tool for WebAssembly**
   - Use webpack or another build tool specifically for the WebAssembly parts
   - Integrate the built WebAssembly modules into the Vite build

## Testing

Once the WebAssembly issue is resolved, the project should be thoroughly tested to ensure:

1. The web component loads correctly
2. File selection works as expected
3. Signatures are generated correctly
4. Events are dispatched properly

## Conclusion

The migration to Vite has been mostly completed, with the exception of the WebAssembly loading issue. The project structure, configuration, and most of the code have been updated to work with Vite. Resolving the WebAssembly issue will require additional work, but the potential solutions have been documented for future implementation.