research: explore using pyodide and supernote-tool

[philips]

One idea to avoid porting all of @jya-dev 's work on https://github.com/jya-dev/supernote-tool is to use pyodide to pull the python libraries into WASM. It seems most of the dependencies work out of the box: https://github.com/philips/obsidian-plugin-supernote/compare/main...pyodide

[philips]

Hrm, two hurdles looking into this more:

• some issue with pyodide assuming it is running on node if it detects electron https://github.com/pyodide/pyodide/discussions/2248
• pyodide seems to not have a solution for bundling everything together so I would need to figure out how to make supernote-tool a separate library and package all pyodide and the wheels together into a static assets in the plugin build.

[philips]

Some breadcrumbs from gemini and research:

While esbuild doesn't directly support Pyodide, here's a workaround approach to package your project:

1. Structure Your Project:

• Organize your project files as follows:

project_root/
├── package.json
├── pyodide-lock.json
├── pyodide/
│   ├── pyodide.asm.js
│   ├── pyodide.asm.wasm
│   ├── pyodide.js
│   ├── pyodide.mjs
│   └── python_stdlib.zip
├── src/   (JavaScript source files)
│   └── ...
└── build/ (Destination for bundled files)

2. Install esbuild:

• Use npm or yarn to install esbuild:

npm install --save-dev esbuild

3. Create a Build Script:

• Create a JavaScript file (e.g., build.js) to configure the bundling process:

import { build } from 'esbuild';

build({
  entryPoints: ['src/index.js'],  // Adjust based on your entry file
  bundle: true,
  outfile: 'build/bundle.js',
  format: 'esm',
  define: {
    // Define any necessary Pyodide-related globals
    PYODIDE: 'pyodide',  // Example if you're using Pyodide globally
  },
  external: [
    'pyodide/pyodide.asm.js',
    'pyodide/pyodide.asm.wasm',
    'pyodide/pyodide.js',
    'pyodide/pyodide.mjs',
    'pyodide/python_stdlib.zip',
  ],
});

4. Run the Build:

• Execute the build script:

node build.js

5. Serve Bundled Files:

• Distribute the build folder, ensuring the Pyodide files are accessible from the same relative path:

bundle.js
pyodide/
  └── ... (Pyodide files)

Key Considerations:

• Manual Adjustments: You may need to manually handle Pyodide-specific initialization and loading in your JavaScript code.
• Future Updates: Stay informed about potential esbuild integration with Pyodide, as this workaround might evolve with future updates.
• Pre-built Wheels: If possible, consider using pre-built Pyodide wheels for a smoother integration experience.

Esbuild currently doesn't have direct support for integrating Python wheels, including Pyodide wheels. Wheels are designed for installation within a Python environment, not directly in a JavaScript bundler like esbuild.

Here are some alternative approaches to consider:

1. Serve Wheels Separately:

• Maintain your Pyodide wheels alongside your bundled JavaScript code.
• Use a server-side solution or a CDN to serve these wheels to your application.
• In your JavaScript code, you'll need to handle loading the wheels using techniques like dynamic imports or fetching them from the server.

2. Explore Alternative Bundlers:

• Some bundlers like Webpack offer more flexibility in handling non-JavaScript assets through loaders and plugins. You might find tools like the file-loader or a custom loader suitable for Pyodide wheels in Webpack.

3. Future Developments:

• The Pyodide project is exploring ways to potentially leverage esbuild for its build process. While not yet available, future advancements might offer better integration options for Pyodide with esbuild.

Remember:

• Serving wheels separately adds an extra layer of complexity to your deployment process.
• Webpack introduces a steeper learning curve compared to esbuild, but it might be more suitable for handling wheels at this time.

It's best to choose the approach that aligns best with your project's needs and your comfort level with different tools.

[philips]

This is probably not worthwhile now. Closing