How to use worker-dom with Vite+LitElement?

[isorna]

Hi there, I've been reading the documentation and the examples, but I'm not able to understand how could I integrate worker-dom with my Vite + LitElement project.

I installed the library, then imported it as a module:

// my-component.js
import { upgradeElement } from '@ampproject/worker-dom'
// or
import { upgradeElement } from '/src/static/worker-dom/main.mjs'

And upgraded my component, after copying the worker-dom/dist folder to my project's static folder:

// my-component.js
@customElement('my-component')
export class MyComponent extends LitElement {
constructor() {
    super()
    this.setAttribute('src', '/src/workers/test.worker.js')
}
async firstUpdated () {
    upgradeElement(this, '/src/static/worker-dom/main.mjs')
    // or
    upgradeElement(this, '/worker-dom/main.mjs')
}
}

Using a simple worker file, just to test it works:

// test.worker.js
console.log('hello world')

I can see that worler-dom code is added to the file:

'use strict';(function(){let e=(e,t,n,r,s)...
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIj...

// test.worker.js
console.log('hello world')
//# sourceURL=/src/workers/test.worker.js

It seems to work, but finally returns an error when executing test.worker.js:

• Unexpected token 'export' when pointing to /worker-dom/main.mjs

    }
    export function upgradeElement(e, t) {
        let n = e.getAttribute("src");

• WorkerThread is not defined when pointing to /worker-dom/main.js

//# sourceMappingURL=main.js.map
    self['window'] = self;
    var workerDOM = WorkerThread.workerDOM;

• Unexpected end of input when using /worker-dom/debug/worker/main.js

Could anyone please help me?