ampproject / ampproject/worker-dom

APIs needed by Vue

Open
#282 3 comments 2 reactions 0 assignees View on GitHub
API
Dominant language
TypeScript
Stars
3.3k
Forks
154
PR merge metrics
No merged PRs in 30d

Description

Not a comprehensive list. As of writing, just the ones I encountered when trying to get "hello world" example to work on Vue 2.6.5 (dev).

### window.navigator.userAgent

```
Uncaught TypeError: Cannot read property 'userAgent' of undefined
```

```js
var UA = inBrowser && window.navigator.userAgent.toLowerCase();
```

### document.createEvent()

```
Uncaught TypeError: document.createEvent is not a function
```

```js
// Determine what event timestamp the browser is using. Annoyingly, the
// timestamp can either be hi-res (relative to page load) or low-res
// (relative to UNIX epoch), so in order to compare time we have to use the
// same timestamp type when saving the flush timestamp.
if (inBrowser && getNow() > document.createEvent('Event').timeStamp) {
```

### Set innerHTML

```
Uncaught TypeError: Cannot set property innerHTML of # which has only a getter
```

```js
function getShouldDecode(href) {
div = div || document.createElement('div');
div.innerHTML = href ? "" : "

";
return div.innerHTML.indexOf('
') > 0
}
```
```js
var he = {
decode: function decode (html) {
decoder = decoder || document.createElement('div');
decoder.innerHTML = html;
return decoder.textContent
}
};
```

### new Vue()

```
Uncaught ReferenceError: Vue is not defined
```

Not really an API. Vue's global wrapper sets a property on workerDOM's custom `this` scope. Similar issue to our need to set `var document = this.document;` etc.

One workaround is to insert `const Vue = this.Vue;` between framework code and author code.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Vue 2.6.5 development hello-world example and review the workerDOM APIs involved in window.navigator.userAgent, document.createEvent(), innerHTML, and the Vue global. Done means the reported TypeErrors and ReferenceError no longer occur for this example, without relying on the suggested workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
api, frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.