Migrate to custom elements v1 API #4167

dmarcos · 2019-05-13T19:08:45Z

Migrate all A-Frame elements to custom elements V1 API. Both Firefox and Chrome ship implementations today. Chrome is soon deprecating the old document.registerElement. This PR will make A-Frame less reliant on the polyfill, behavior more consistent across browsers (#4164) and likely will come with perf improvements as well.

These changes touch most of the lines in a bunch of files. It would be good to merge at the beginning of the release cycle to have time to work out the kinks before 1.0. Examples work fine in both desktop Chrome (m74) and Firefox (66) as is.

The main drawback is that Custom Elements v1 enforces JS classes that are not available in older browsers.

Pending work:

Better test polyfill path.
Test in mobile browsers (Chrome Pixel 3 m74 and Safari iOS 12.2)
Port all unit tests.
Test with production complex apps (https://github.com/supermedium/beatsaver-viewer)

arpu · 2019-05-15T20:33:45Z

nice! testing on my vrland.io project and it works without any problem
testing on linux chrome 74 fedora 30

dmarcos · 2019-05-16T22:01:44Z

I think this is ready to go. Tested on Edge (42), Firefox Desktop (66), Chrome Desktop (m74), Safari and Chrome for iOS 12.2, Chrome for Android (m74), Oculus Browser, Supermedium and Exokit.

Only known compatibility issue is with old IE due to the lack of JS classes enforced by custom Elements V1.

dmarcos · 2019-05-16T22:10:22Z

There's a travis failing test that I don't understand. Not sure what mocha --ui tdd tests/node tests and why it's failing on the polyfill or how to fix it.

justinfagnani

Hope you don't mind the drive-by review. Just commenting on WC v1 and ES6 things.

This is awesome to see :)

src/core/a-assets.js

src/core/a-entity.js

src/core/scene/a-scene.js

src/core/a-mixin.js

src/core/a-assets.js

src/core/a-cubemap.js

src/core/a-mixin.js

src/extras/primitives/primitives.js

src/index.js

dmarcos · 2019-05-17T18:16:05Z

@WebReflection @justinfagnani I incorporated your feedback. Thanks a lot. That's very generous of your time, it's a big PR 👍

Co-Authored-By: Justin Fagnani <justin@fagnani.com>

WebReflection · 2019-05-17T22:20:39Z

src/core/a-mixin.js

-    },
+class AMixin extends ANode {
+  constructor () {
+    super();


is ANode is extending HTMLElement, same self = super(self) dance might apply

Yeah, I think you're commenting in an outdated snippet:

https://github.com/aframevr/aframe/pull/4167/files#diff-631b4510fca3a68661ae2833c57e1e3dR18

Thanks

I did, apologies for the confusion

edsilv · 2019-06-01T17:47:38Z

This is awesome! I'd started an experimental project to try porting A-Frame to Typescript + webpack, but soon realised that upgrading to custom elements v1 was necessary first.

I was thinking to use esmodule imports instead of require too.

The main drawback is that Custom Elements v1 enforces JS classes that are not available in older browsers.

Could we make multiple UMD dist targets for es3, es5 etc with webpack?

Not sure how keen the community would be on Typescript, but happy to have a go if the consensus is that it would increase robustness. My setup generates the TS definitions too, so you don't need to maintain them separately.

edsilv · 2019-06-02T21:05:33Z

It was a bit more complicated than I thought, but I've got a cross-browser ts + webpack + custom elements setup working here: https://github.com/edsilv/aframe-ts-webpack

arpu · 2019-06-28T12:03:20Z

@dmarcos i have this branch running since some time without any problems, but now some trouble with exokit
same problem accourse if in chrome if aframe load script is set to the end of the html

the exoKit dev means this is a problem with this branch
testing on this build url https://vrland.io/exo_customElementsV1.html

(node:19816) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(node:19816) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
THREE.WebGLRenderer 103dev
ErrorEvent {
  type: 'error',
  target: <script src="aframe_customElementsV1.js"></script>,
  bubbles: false,
  cancelable: false,
  defaultPrevented: false,
  propagationStopped: false,
  currentTarget: <script src="aframe_customElementsV1.js"></script>,
  message: 'systems[name] is not a constructor',
  stack: 'https://vrland.io/aframe_customElementsV1.js:76834\n    ' +
    'this.systems[name] = new systems[name](this);\n                        ' +
    ' ^\n\nTypeError: systems[name] is not a constructor\n    at ' +
    'AScene.initSystem ' +
    '(https://vrland.io/aframe_customElementsV1.js:76834:26)\n    at ' +
    'AScene.initSystems ' +
    '(https://vrland.io/aframe_customElementsV1.js:76821:10)\n    at ' +
    'AScene.connectedCallback ' +
    '(https://vrland.io/aframe_customElementsV1.js:76787:10)\n    at ' +
    'CustomElementRegistry.upgrade ' +
    '(/home/arpu/Work/githubsources/exokit/src/Window.js:285:38)\n    at ' +
    '/home/arpu/Work/githubsources/exokit/src/Window.js:210:14\n    at ' +
    '_recurse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1305:22)\n   ' +
    ' at _recurse ' +
    '(/home/arpu/Work/githubsources/exokit/src/DOM.js:1311:28)\n    at ' +
    '_recurse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1311:28)\n   ' +
    ' at _recurse ' +
    '(/home/arpu/Work/githubsources/exokit/src/DOM.js:1311:28)\n    at ' +
    'Document.traverse ' +
    '(/home/arpu/Work/githubsources/exokit/src/DOM.js:1322:12)'
}
https://vrland.io/aframe_customElementsV1.js:76834
    this.systems[name] = new systems[name](this);
                         ^

TypeError: systems[name] is not a constructor
    at AScene.initSystem (https://vrland.io/aframe_customElementsV1.js:76834:26)
    at AScene.initSystems (https://vrland.io/aframe_customElementsV1.js:76821:10)
    at AScene.connectedCallback (https://vrland.io/aframe_customElementsV1.js:76787:10)
    at CustomElementRegistry.upgrade (/home/arpu/Work/githubsources/exokit/src/Window.js:285:38)
    at /home/arpu/Work/githubsources/exokit/src/Window.js:210:14
    at _recurse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1305:22)
    at _recurse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1311:28)
    at _recurse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1311:28)
    at _recurse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1311:28)
    at Document.traverse (/home/arpu/Work/githubsources/exokit/src/DOM.js:1322:12)

avaer · 2019-06-28T12:09:45Z

☝️ I found the above crash occurs anytime <a-scene> is seen by the aframe.js initial tick -- e.g. if the script is at the end of the </body>. That behavior is not specific to Exokit.

arpu · 2020-09-04T12:36:56Z

can this be updated to latest master?

WebReflection · 2020-09-04T13:49:47Z

can this be updated to latest master?

FYI the latest, better, improved, polyfill, targeting IE11 and every other browser, is this one:
https://github.com/WebReflection/custom-elements#readme

P.S. worth mentioning this polyfill has no constructor caveats, like the previous one had 👋

dmarcos · 2020-09-04T15:24:30Z

@arpu Not a top priority at the moment. Any particular needs?

arpu · 2020-09-06T13:01:04Z

@dmarcos nothing special want to look how i can convert to jsm threejs

vincentfretin · 2022-10-13T07:55:28Z

replaced by #5136

dmarcos · 2022-10-25T23:46:11Z

close in favor of #5136

dmarcos added the work in progress label May 13, 2019

dmarcos added needs review and removed work in progress labels May 16, 2019

justinfagnani reviewed May 17, 2019

View reviewed changes

WebReflection reviewed May 17, 2019

View reviewed changes

src/core/a-assets.js Outdated Show resolved Hide resolved

WebReflection reviewed May 17, 2019

View reviewed changes

src/core/a-assets.js Outdated Show resolved Hide resolved

WebReflection reviewed May 17, 2019

View reviewed changes

src/core/a-cubemap.js Show resolved Hide resolved

WebReflection reviewed May 17, 2019

View reviewed changes

src/core/a-mixin.js Outdated Show resolved Hide resolved

WebReflection reviewed May 17, 2019

View reviewed changes

src/core/a-mixin.js Show resolved Hide resolved

WebReflection reviewed May 17, 2019

View reviewed changes

src/extras/primitives/primitives.js Outdated Show resolved Hide resolved

WebReflection reviewed May 17, 2019

View reviewed changes

src/index.js Show resolved Hide resolved

dmarcos and others added 9 commits May 17, 2019 11:17

Migrate a-node, a-entity, a-scene to custom elements v1

b324374

Primitives support

6086133

Migrate rest of the elements

9f4f1f8

Remove old wrappers and update polyfill

3ba1ef3

Fix tests

2679f7a

Address polyfill quirks

de252fb

Apply suggestions from code review

a570232

Co-Authored-By: Justin Fagnani <justin@fagnani.com>

Incorporate review feedback to handle self in class constructors

7fc0b29

Address more review comments

8931049

dmarcos force-pushed the customElementsV1 branch from 299cd35 to 8931049 Compare May 17, 2019 18:17

Stub HTMLElement and customElements for node tests

1e0a25d

dmarcos force-pushed the customElementsV1 branch from c47b2c5 to 1e0a25d Compare May 17, 2019 18:47

Bump travis node version

8e3e35b

WebReflection reviewed May 17, 2019

View reviewed changes

avaer mentioned this pull request May 30, 2019

Custom Elements API in A-Frame exokitxr/exokit#1149

Open

dmarcos mentioned this pull request Jul 12, 2019

Update a-register-element.js #4221

Closed

This was referenced Jul 23, 2019

The gif shader is not showing on iOS mobile and Safari Desktop. mayognaise/aframe-gif-shader#12

Closed

Unknown shader gif mayognaise/aframe-gif-shader#10

Closed

dmarcos mentioned this pull request Dec 31, 2019

/refactor - Rewrite using WebComponents #4382

Closed

arpu mentioned this pull request Feb 18, 2020

Implementing A-Frame via NPM on NextJS generates a error. #4183

Open

arpu mentioned this pull request May 8, 2020

draco compressed glb files not loaded ( not using the assets system) #4346

Open

edsilv mentioned this pull request May 27, 2020

Create simple hello world demo when 4167 lands with a link to 2706 edsilv/aframe-ts-webpack#1

Open

dmarcos closed this Oct 25, 2022

Uh oh!

Migrate to custom elements v1 API #4167

Migrate to custom elements v1 API #4167

Uh oh!

Conversation

dmarcos commented May 13, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arpu commented May 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dmarcos commented May 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dmarcos commented May 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dmarcos commented May 17, 2019

Uh oh!

WebReflection May 17, 2019

Choose a reason for hiding this comment

Uh oh!

dmarcos May 17, 2019

Choose a reason for hiding this comment

Uh oh!

WebReflection May 17, 2019

Choose a reason for hiding this comment

Uh oh!

edsilv commented Jun 1, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edsilv commented Jun 2, 2019

Uh oh!

arpu commented Jun 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avaer commented Jun 28, 2019

Uh oh!

arpu commented Sep 4, 2020

Uh oh!

WebReflection commented Sep 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dmarcos commented Sep 4, 2020

Uh oh!

arpu commented Sep 6, 2020

Uh oh!

vincentfretin commented Oct 13, 2022

Uh oh!

dmarcos commented Oct 25, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

dmarcos commented May 13, 2019 •

edited

Loading

arpu commented May 15, 2019 •

edited

Loading

dmarcos commented May 16, 2019 •

edited

Loading

dmarcos commented May 16, 2019 •

edited

Loading

edsilv commented Jun 1, 2019 •

edited

Loading

arpu commented Jun 28, 2019 •

edited

Loading

WebReflection commented Sep 4, 2020 •

edited

Loading