exokitxr / exokit

Native VR/AR/XR engine for JavaScript πŸ¦–
MIT License
997 stars 117 forks source link

CustomElements spec mismatch #615

Open trusktr opened 5 years ago

trusktr commented 5 years ago

I'm having fun, built it myself (no luck with the DMG) and trying out demos. Looking forward to getting my custom WebGL stuff running (https://github.com/trusktr/infamous)!

Here's the basic demo I am trying to run:

https://s.codepen.io/trusktr/debug/293963ee1c01075e831990e55a67b818

(Here's the editable version)

But it throws this error in the ExoKit console:

TypeError: el.setProtototypeOf is not a function
    at CustomElementRegistry.upgrade (/Users/trusktr/src/webmixedreality+exokit/src/core.js:250:8)
    at _window.document.traverse.el (/Users/trusktr/src/webmixedreality+exokit/src/core.js:212:14)
    at _recurse (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1116:22)
    at _recurse (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1122:28)
    at _recurse (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1122:28)
    at _recurse (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1122:28)
    at Document.traverse (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1133:12)
    at CustomElementRegistry.define (/Users/trusktr/src/webmixedreality+exokit/src/core.js:210:27)
    at Function.define (https://unpkg.com/infamous@19.0.4/global.js:56872:32)
    at Module.useDefaultNames (https://unpkg.com/infamous@19.0.4/global.js:59787:74)
    at https://s.codepen.io/trusktr/debug/293963ee1c01075e831990e55a67b818:60:21
    at Object._runJavascript (/Users/trusktr/src/webmixedreality+exokit/src/utils.js:67:15)
    at Resource.ownerDocument.resources.addResource [as getCb] (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1637:13)
    at Promise (/Users/trusktr/src/webmixedreality+exokit/src/core.js:101:12)
    at new Promise (<anonymous>)
    at Resource.get (/Users/trusktr/src/webmixedreality+exokit/src/core.js:100:12)
    at Resources.drain (/Users/trusktr/src/webmixedreality+exokit/src/core.js:179:16)
    at Promise (/Users/trusktr/src/webmixedreality+exokit/src/core.js:172:12)
    at new Promise (<anonymous>)
    at Resources.addResource (/Users/trusktr/src/webmixedreality+exokit/src/core.js:152:12)
    at HTMLScriptElement.runNow (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1636:41)
    at HTMLScriptElement.<anonymous> (/Users/trusktr/src/webmixedreality+exokit/src/DOM.js:1653:21)
    at /Users/trusktr/src/webmixedreality+exokit/src/Document.js:120:17
    at _addRun (/Users/trusktr/src/webmixedreality+exokit/src/Document.js:134:7)
    at /Users/trusktr/src/webmixedreality+exokit/src/Document.js:127:11
    at process._tickCallback (internal/process/next_tick.js:68:7)

The callsite of my code, global.js line 56872, is this:

                customElements.define(name, this)

which is being called inside of a static method of my class, so this refers to the class constructor itself, and name is the element name.

avaer commented 5 years ago

Oh bananana... should be Object.setPrototypeOf.

Thanks for the excellent bug report πŸ‘.

avaer commented 5 years ago

The merged fix gets us to:

WebComponent: Your custom element (DeclarativeBase) should specify observed attributes or attributeChangedCallback won't be called
WebComponent: Your custom element (ImperativeBase) should specify observed attributes or attributeChangedCallback won't be called
TypeError: Super(...)[_method] is not a function
    at Object.attachShadow (https://unpkg.com/infamous@19.0.4/global.js:56900:48)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:57412:34)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:10326:25)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:10070:25)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:55730:25)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:55979:25)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:57936:29)
    at Object.construct (https://unpkg.com/infamous@19.0.4/global.js:57590:25)
    at Object.constructor (https://unpkg.com/infamous@19.0.4/global.js:56565:18)
    at Object.WebComponent (https://unpkg.com/infamous@19.0.4/global.js:515:31)
trusktr commented 5 years ago

Hmmm, interesting, looks like something about lowclass isn't working in ExoKit (works in regular browsers).

I'll step through it soon to see what's going on.

avaer commented 5 years ago

I would possibly look into any usage of instanceof with primitive objects.

Exokit currently does a lot of multi-context species hacks there to make window isolation work. That is being factored out right now, but it’s been a source of bugs that smell like this in the past.

trusktr commented 5 years ago

By the way, thanks for making that quick fix. I'm looking forward to get make something awesome with this! πŸ˜ƒ