Description:

Integrating h5p-standalone into modern front-end frameworks like React, SvelteKit, Vue.js, Ember.js, and others requires jumping through too many hoops, even in development mode. The current process is complicated and doesn’t follow the natural or standard way of working with libraries in these frameworks.

Example of the library working in react:

Problems:

The package expects a node_modules folder, which isn't available in production. So, one has to manually copy the contents of node_modules/h5p-standalone/dist/ into the public folder resulting in following output.

This step requires careful management of directory structure, adding more complexity to the process.

The Bigger Issue:

This workaround is not only tedious but also goes against the grain of how developers work with modern frameworks. The integration doesn’t follow the natural or expected way of handling static assets or integrating libraries. The process is overly complex, especially for a library that should be relatively simple to use.

Expected Behavior:

Integrating h5p-standalone should be just like integrating any other modern JavaScript library in a front-end framework. Here’s what’s needed:

• The library should automatically work with build tools in production, just like other typical dependencies.
• There should be no need for manually copying files or maintaining directory structure by hand. In worst cases, running a script or command is much better.
• Ideally, everything should be bundled and handled by the build process (e.g., using Webpack, Vite, etc.), such that there is little to no manual intervention required

This issue is evident based on existence of issues like #137, #140, #149.

I believe simplifying the process will significantly improve the developer experience.