ampproject / ampproject/worker-dom
How to use worker-dom with Vite+LitElement?
- 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
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