ampproject / worker-dom

The same DOM API and Frameworks you know, but in a Web Worker.
Apache License 2.0
3.21k stars 151 forks source link

APIs needed by Aurelia (vNext) #167

Open fkleuver opened 5 years ago

fkleuver commented 5 years ago

First of all I would like to say excellent work on what has been accomplished so far. This looks really promising!

We would love to get Aurelia vNext working in worker-dom. The initial attempt to do so can be found here.

So far it seems the cloneNode API is missing. Is there any plan or work-in-progress to add this API?

kristoferbaxter commented 5 years ago

Looks like we missed this functionality, will address.

EisenbergEffect commented 5 years ago

@kristoferbaxter Great to hear! We'll keep providing you all feedback as we work to get Aurelia up and running. Let us know if you need anything from us.

kristoferbaxter commented 5 years ago

169 Adds Node.cloneNode by making Node have an abstract method cloneNode(boolean) and is implemented by all non-abstract classes extending Node.

fkleuver commented 5 years ago

Nice, thanks for the prompt follow-up! I've tested against your clone branch and cloneNode is working so far.

The next thing our compiler ran into is Text#wholeText missing. We use this to get the textContent of a Text node and all its sibling Text nodes.

Also, .innerHTML doesn't appear to have a setter yet but that's already addressed in other issues and it's not a hard blocker for us, so we'll wait for that to settle. Is there any other DOM parsing API exposed or is manually constructing the DOM the only flavor for now?

davismj commented 5 years ago

@fkleuver probably should open a new issue

fkleuver commented 5 years ago

Maybe you're right. I just noticed some other aggregate issues and followed that pattern. What's easier for you guys? @kristoferbaxter

kristoferbaxter commented 5 years ago

I'm fine with either approach, perhaps let's convert this issue over to a list of the features required to gain support for Aurelia.

fkleuver commented 5 years ago

Alright. I'll let this comment be a live checklist.

Required APIs for running a pre-compiled app

Required APIs for compiling + running an app

kristoferbaxter commented 5 years ago

Started work on DocumentFragment. #178.

fkleuver commented 5 years ago

Superb, thanks for the update. Let us know if you need something tested or any other help/feedback :)

EisenbergEffect commented 5 years ago

Woohoo! @kristoferbaxter Thanks for being so engaged with us and considering our use cases. We're excited about getting Aurelia vNext up and running in a worker and will continue to test and provide feedback along the way.

fkleuver commented 5 years ago

@kristoferbaxter Some early feedback: I just tried your document-fragment branch and it got things a little further. createDocumentFragment works, appending children to it seems to work as well. However it breaks when it tries to materialize the nodes:

nodes.js:69 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('#document-fragment') is not a valid name.
    at createNode (http://localhost:3001/dist/index.mjs:114:85)
    at nodes.forEach.node (http://localhost:3001/dist/index.mjs:700:25)
    at Array.forEach (<anonymous>)
    at mutate (http://localhost:3001/dist/index.mjs:700:9)
    at Worker.worker.onmessage.message (http://localhost:3001/dist/index.mjs:767:7)
createNode @ nodes.js:69
nodes.forEach.node @ mutator.js:120
mutate @ mutator.js:120
worker.onmessage.message @ install.js:50
01:25:33.589 

The offending line, where it calls createElement instead of createDocumentFragment:

const node = namespace ? document.createElementNS(namespace, nodeName) : document.createElement(nodeName); // TODO(KB): Restore Properties

I also got an error 'HTMLElement' is not defined at some point (this is inside vNext framework code, not 100% sure about the execution context). At that same spot, Element and SVGElement are defined however. I'm not sure if this tells you anything, so let me know if you need me to dig a little further :)

kristoferbaxter commented 5 years ago

Thanks for taking a look. We'll need to filter the document fragments from transmitting to the main thread.

I'll add a note to the PR.

kristoferbaxter commented 5 years ago

Updated the document-fragment branch with changes to support the creation of fragments on the main thread.

I'll be working on tests for a little bit on the branch if you'd like to try it.

fkleuver commented 5 years ago

@kristoferbaxter Nice! I just tested it, the DocumentFragment is created and populated with cloned nodes. From that perspective things appear to be working.

The querySelectorAll API seems to be missing on DocumentFragment. We use a marker class "au" to indicate which elements have framework behavior on them, which the runtime then uses to retrieve them from the fragment via .querySelectorAll(".au"). I updated the checklist accordingly.

Let us know if we can do anything to help :)

kristoferbaxter commented 5 years ago

We just merged DocumentFragement support into master, complete with ParentNode mixin methods like querySelectorAll.

Give it a go, and let me know if it's working for you.

fkleuver commented 5 years ago

@kristoferbaxter Yep, basic interpolation binding is working! Awesome :) I'll do some more extensive testing later this week.

By the way, could it be that addEventListener et al aren't working / implemented yet?

kristoferbaxter commented 5 years ago

addEventListener and ilk should be working, but if you have a sample repo with it failing let's create an issue for it and fix things up.

fkleuver commented 5 years ago

That sounds like a plan. The main issue at the moment (which is why I haven't done that yet) is HTMLElement not being defined in the global scope. We use this class as an alternative DI registration key that users can inject the element instance with in their custom elements. Right now I need to remove that particular line every time after bundling. For our purposes it really doesn't matter if it's just an alias to Element, it just needs to exist.