ampproject / ampproject/worker-dom

How to use worker-dom with Vite+LitElement?

Open
#1,152 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.3k
Forks
154
PR merge metrics
No merged PRs in 30d

Description

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:

```js
// 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:

```js
// 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:
```js
// test.worker.js
console.log('hello world')
````

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

```js
'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**
> ```js
> }
> export function upgradeElement(e, t) {
> let n = e.getAttribute("src");
> ```
* WorkerThread is not defined when pointing to **/worker-dom/main.js**
> ```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?

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Vite and LitElement setup shown in my-component.js with test.worker.js, then compare the copied worker-dom/dist files, including main.mjs, main.js, and debug/worker/main.js. Document the supported entry point and integration steps so the example loads without the reported worker errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.