vue and import

[abulka]

I'm trying to wrap these webaudio controls in a vue component, so that they play nice in vue. E.g. set a value on a data model and have a knob magically turn in reactive response.

Is there a way to use modern import syntax? The webaudio official docs don't mention import usage.

Can anyone provide suggestions on how to wrap these webaudio controls in vue? Here is a snippet of code I tried in this issue but it didn't work, as I'm not an expert in web components nor using them within vue.

[micbuffa]

Hi, here you can find a very simple vueJS project with webaudiocontrols imported in the HelloWorld.vue component. The trick is to understand that in <webaudio-knob src="./LittlePhatty.png", . corresponds to the public folder. The VueJS compiler resolves . in <img src="./image.png" so you can have image.png under the src folder, but this does not work with custom elements from the webaudiocontrols lib. See this github project : https://github.com/micbuffa/vueJSWithWebAudioControls.git

[abulka]

Thanks for this!

I've forked and added more features https://github.com/abulka/vueJSWithWebAudioControls like a mounted handler and watchers so that webaudio controls affect vue state and vice versa.

I think the next step is to wrap each webaudio component properly so that each is in its own .vue file and has its own set of properties - never created a proper vue component before...

[abulka]

I've noticed a disconcerting error message that appears repeatedly in the browser console when you "two finger scroll" on the knobs (via Mac trackpad)

 Unable to preventDefault inside passive event listener invocation.
 wheel @ webaudio-controls.js?f930:473

Presumably a mouse wheel rotation over the knobs, on a PC, would emit the same stream of error messages. The error message emits multiple times filling the console with errors. The vue wrapping seems to cause it, as it doesn't happen when the <webaudio-knob> is used in a plain, non-vue page.

[micbuffa]

Be careful, did you try with the official webaudiocontrols.js disqtrib or with the file included in my vue project? I use a slightly older version that we patched (see issue about object properties and DOM). Maybe g200kg patched this error. Please double check and tell us if the error is still present.

[abulka]

Turns out that I'm using your slightly older version - and it is generating the console error message described above. Also, I can confirm that it happens on Mac trackpad two finger scroll and also scrolling the mouse wheel over a knob in Windows and Linux .

Whilst switching between these webaudiocontrols.js versions, I noticed that your demo crashes using the latest webaudiocontrols.js:

webaudio-controls.js?f930:425 
        
Uncaught ReferenceError: webAudioControlsWidgetManager is not defined
    at HTMLElement.connectedCallback (webaudio-controls.js?f930:425)
    at Object.insertBefore (vue.runtime.esm.js?2b0e:5753)
    at insert (vue.runtime.esm.js?2b0e:6083)
    at createComponent (vue.runtime.esm.js?2b0e:6030)
    at createElm (vue.runtime.esm.js?2b0e:5969)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6560)
    at Vue._update (vue.runtime.esm.js?2b0e:3960)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4081)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at new Watcher (vue.runtime.esm.js?2b0e:4484)

[micbuffa]

Hmmm did you manage to have a vuejs project work with the latest official release of webaudiocontrols ? We had to patch the lib in our projects. As explained in issue #43, when used inside WebComponents, the lib raises errors when these WebComponents were added or removed into the DOM. As VueJS uses WebComponents (HelloWorld.vue is a WebComponent), this is certainly why our version works and not the official one. The modification is described in issue #43. Can you try to patch the latest official release with the (easy) fix described in #43 and tell if it works? Then it will be easier for g200kg to merge the forked version as a PR will be light.

[abulka]

I forked the official repo and made the this.hasOwnProperty changes you recommended (44 of them) - see https://github.com/abulka/webaudio-controls/tree/definepropfix. I haven't actually submitted the pull request because I am confused, as it doesn't actually fix the crash I described above when using the official version Uncaught ReferenceError: webAudioControlsWidgetManager is not defined.

Your 'patched' version from your vue demo repo that works OK in vue (except for the mousewheel scroll error) doesn't even have any code containing Object.defineProperty, so I don't understand how you patched it, or how to get the official version to work inside vue.

[micbuffa]

Ok, I’ll give this a look today or tomorrow. Issue #43 points to a project with the patched version. Maybe I did not use this one in my vue project… This means that the Object.defineProperty is not the cause (but this patch is really needed if you use webaudio controls in web components, that can be mounted / unmounted in the DOM, trust me).

[micbuffa]

If you comment line 1998 in the official webaudio-controls.js file, my project compiles and works. You need to run twice npm run serve. First one will raise errors, then after that it will work:

1998 // if(window.UseWebAudioControlsMidi||opt.useMidi)

[abulka]

@micbuffa brilliant, I can confirm that works. I can now use the latest official version of webaudio-controls.js in Vue. It would be nice if this fix was addressed by the official version somehow...

As an aside, I have now officially submitted #46 with the if (!this.hasOwnProperty("src")) as requested in #43.

Using the version from my #46 pull request, plus commenting out line 1998, also means I have no errors in the console - the mousewheel scroll error has gone away, so all good.