alphaTab can't work with vue3

[claroja]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I am trying to use vue3 to implement https://www.alphatab.net/docs/getting-started/installation-web#initializing-alphatab, but it doesn't work, here is my code:

<template>
<div id="alphaTab" data-tex="true">
  \title "Hello alphaTab"
  .
  :4 0.6 1.6 3.6 0.5 2.5 3.5 0.4 2.4 |
    3.4 0.3 2.3 0.2 1.2 3.2 0.1 1.1 |
    3.1.1
</div>
<button @click="test">test</button>
</template>

<script lang='js'>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import {AlphaTabApi} from "@coderline/alphatab"
export default defineComponent({
  name: 'HelloWorld',
  setup(){
    function test(){
      const element = document.getElementById('alphaTab');
      const api = new AlphaTabApi(element);
    }
    return{
      test
    }
  }

})
</script>

Expected Behavior

it can work with vue3 correctly.

Steps To Reproduce

1. download the project https://github.com/Claroja/testforalphaTab
2. npm install
3. npm run serve

Link to jsFiddle, CodePen, Project

https://github.com/Claroja/testforalphaTab/blob/main/src/components/HelloWorld.vue

Found in Version

1.2

Platform

Web

Environment

- **OS**: Windows 10
- **Browser**: 97.0.4692.71

Anything else?

I found some useful information in #662. Then I put the alphaTab.js into public/index.html. It works, but it's inelegant.

[Danielku15]

This topic is discussed already some other issues and also here in the documentation: https://alphatab.net/docs/getting-started/installation-web#bundling

You must take care of the correct bundling aspects in your project. This is nothing alphaTab can do for you. alphaTab needs to spawn WebWorkers with the file it is contained in (or manually specified). I couldn't see any appropriate WebPack configuration in the project to take care of this. I have it on my todo list to evaluate some solutions for the most common bundlers (WebPack and Rollup) but I haven't found the time yet to dive into this topic and prepare some recommendations. The WebPack/Vue community might be better able to help on this particular case where libraries require WebWorkers to work.

Additionally your example doesn't seem to be fully set up yet. In my test the actual setup code was not called and there wasn't even an attempt to initialize alphaTab.

[claroja]

Thanks. You could click on the test button, the setup function is a new feature in vue3.
As I mentioned in Anything else?, I have solved this problem. But it's a pity that I'm unable to use TypeScript hints.
Thank you, anyway.

[Danielku15]

Ah, I didn't realize that test is a button that can be clicked. Likely I gave up too quickly because the problem was already pointing clearly to the webpack issue.

I played a bit around today with webpack but could not yet find some good solution how alphaTab can improve the situation. I separated alphaTab into an own chunk to solve the issue of being bundled with Vue:

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  pluginOptions: {
    vuetify: {
      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
    }
  },
  configureWebpack: config => {
    config.optimization.splitChunks.cacheGroups.alphatab = {
      chunks: 'all',
      name: 'chunk-alphatab',
      priority: config.optimization.splitChunks.cacheGroups.defaultVendors.priority + 10,
      test: /.*node_modules.*alphatab.*/
    };
  }
});

But WebPack still causes some troubles with this approach. First of all I could not really find a good way to detect from within alphaTab in which chunk it is now contained. In the mentioned example I could not obtain chunk-alphatab or /js/chunk-alphatab.js to spawn workers with the correct file.

But secondly WebPack also prevents and global initialization routines to run unless somebody imports alphaTab (which doesn't really happen in this case).

There are various approaches outside of alphaTab that could help but it requires some heavy lifting on the integration side. You would wrap alphaTab into an own module where you need to take care that bundling and URL resolving works. I gave it a try according to what is discussed here. But it seems Vue.js has again some special configurations which spoil the built-in WebWorker features to work.

Instead of actually producing a web worker asset from TypeScript, the worker URL is actually resolved to a TypeScript files.

As you can see: there are so many aspects involved in these frameworks that make it hard for alphaTab to solve this within the library. The whole concept of bundling (no matter if WebPack or Rollup) does simply not integrate well with the API design they standarized for WebWorkers and AudioWorklets which require a particular file to be loaded as Worker. Examples are typically very minimalistic.

The biggest questionmark I have is: Why does WebPack rewrite import.meta.url to a file:// url? That makes absolutely no sense for web usage:

The only realistic solution I see for the future is to create an own WebPack and Rollup plugin which takes care of a proper handling of the chunks and related URLs. The minimalistic default features seem to fail to provide a solution to this setup where one bundle is used as worker and as dependency.

[Danielku15]

Closing this issue in favor of #759