Defer initialization until end of aframe script or manual ready signal

Co-authored-by: Chris Chua <chris.sirhc@gmail.com>

Author: mrxz

src/core/a-assets.js

@@ -17,16 +17,6 @@ class AAssets extends ANode {
     this.timeout = null;
   }
 
-  connectedCallback () {
-    // Defer if DOM is not ready.
-    if (document.readyState !== 'complete') {
-      document.addEventListener('readystatechange', this.onReadyStateChange.bind(this));
-      return;
-    }
-
-    this.doConnectedCallback();
-  }
-
   doConnectedCallback () {
     var self = this;
     var i;
@@ -37,7 +27,7 @@ class AAssets extends ANode {
     var imgEls;
     var timeout;
 
-    super.connectedCallback();
+    super.doConnectedCallback();
 
     if (!this.parentNode.isScene) {
       throw new Error('<a-assets> must be a child of a <a-scene>.');

src/core/a-entity.js

@@ -57,26 +57,13 @@ class AEntity extends ANode {
     this.setEntityAttribute(attr, oldVal, newVal);
   }
 
-  /**
-  * Add to parent, load, play.
-  */
-  connectedCallback () {
-    // Defer if DOM is not ready.
-    if (document.readyState !== 'complete') {
-      document.addEventListener('readystatechange', this.onReadyStateChange.bind(this));
-      return;
-    }
-
-    AEntity.prototype.doConnectedCallback.call(this);
-  }
-
   doConnectedCallback () {
     var self = this;  // Component.
     var assetsEl;  // Asset management system element.
     var sceneEl;
 
     // ANode method.
-    super.connectedCallback();
+    super.doConnectedCallback();
 
     sceneEl = this.sceneEl;
 

src/core/a-mixin.js

@@ -16,18 +16,8 @@ class AMixin extends ANode {
     this.isMixin = true;
   }
 
-  connectedCallback () {
-    // Defer if DOM is not ready.
-    if (document.readyState !== 'complete') {
-      document.addEventListener('readystatechange', this.onReadyStateChange.bind(this));
-      return;
-    }
-
-    this.doConnectedCallback();
-  }
-
   doConnectedCallback () {
-    super.connectedCallback();
+    super.doConnectedCallback();
 
     this.sceneEl = this.closestScene();
     this.id = this.getAttribute('id');

src/core/a-node.js

@@ -1,5 +1,6 @@
 /* global customElements, CustomEvent, HTMLElement, MutationObserver */
 var utils = require('../utils/');
+var ready = require('./ready');
 
 var warn = utils.debug('core:a-node:warn');
 
@@ -32,19 +33,13 @@ class ANode extends HTMLElement {
     this.mixinEls = [];
   }
 
-  onReadyStateChange () {
-    if (document.readyState === 'complete') {
-      this.doConnectedCallback();
-    }
-  }
-
   connectedCallback () {
     // Defer if DOM is not ready.
-    if (document.readyState !== 'complete') {
-      document.addEventListener('readystatechange', this.onReadyStateChange.bind(this));
+    if (!ready.isReady) {
+      document.addEventListener('aframeready', this.connectedCallback.bind(this));
       return;
     }
-    ANode.prototype.doConnectedCallback.call(this);
+    this.doConnectedCallback();
   }
 
   doConnectedCallback () {

src/core/ready.js

@@ -0,0 +1,35 @@
+/* global CustomEvent */
+
+/**
+ * Flag indicating if A-Frame can initialize the scene or should wait.
+ */
+module.exports.isReady = false;
+
+/**
+ * Waits for the document to be ready and switches the isReady flag once it is.
+ */
+function waitForDocumentReadyState () {
+  if (document.readyState === 'complete') {
+    ready();
+    return;
+  }
+
+  document.addEventListener('readystatechange', function onReadyStateChange () {
+    if (document.readyState !== 'complete') { return; }
+    document.removeEventListener('readystatechange', onReadyStateChange);
+    ready();
+  });
+}
+module.exports.waitForDocumentReadyState = waitForDocumentReadyState;
+
+/**
+ * Signals A-Frame that everything is ready to initialize.
+ */
+function ready () {
+  if (module.exports.isReady) { return; }
+  module.exports.isReady = true;
+  setTimeout(function () {
+    document.dispatchEvent(new CustomEvent('aframeready'));
+  });
+}
+module.exports.ready = ready;

src/core/scene/a-scene.js

@@ -70,16 +70,6 @@ class AScene extends AEntity {
     document.documentElement.classList.remove('a-fullscreen');
   }
 
-  connectedCallback () {
-    // Defer if DOM is not ready.
-    if (document.readyState !== 'complete') {
-      document.addEventListener('readystatechange', this.onReadyStateChange.bind(this));
-      return;
-    }
-
-    this.doConnectedCallback();
-  }
-
   doConnectedCallback () {
     var self = this;
     var embedded = this.hasAttribute('embedded');
@@ -90,7 +80,7 @@ class AScene extends AEntity {
     this.setAttribute('screenshot', '');
     this.setAttribute('xr-mode-ui', '');
     this.setAttribute('device-orientation-permission-ui', '');
-    super.connectedCallback();
+    super.doConnectedCallback();
 
     // Renderer initialization
     setupCanvas(this);

src/core/system.js

@@ -1,6 +1,7 @@
 var components = require('./component');
 var schema = require('./schema');
 var utils = require('../utils/');
+var ready = require('./ready');
 
 var parseProperties = schema.parseProperties;
 var parseProperty = schema.parseProperty;
@@ -152,5 +153,7 @@ module.exports.registerSystem = function (name, definition) {
   systems[name] = NewSystem;
 
   // Initialize systems for existing scenes
-  for (i = 0; i < scenes.length; i++) { scenes[i].initSystem(name); }
+  if (ready.isReady) {
+    for (i = 0; i < scenes.length; i++) { scenes[i].initSystem(name); }
+  }
 };

src/index.js

@@ -59,6 +59,7 @@ var shaders = require('./core/shader').shaders;
 var systems = require('./core/system').systems;
 // Exports THREE to window so three.js can be used without alteration.
 var THREE = window.THREE = require('./lib/three');
+var ready = require('./core/ready');
 
 var pkg = require('../package');
 
@@ -82,6 +83,11 @@ console.log('THREE Version (https://github.com/supermedium/three.js):',
             pkg.dependencies['super-three']);
 console.log('WebVR Polyfill Version:', pkg.dependencies['webvr-polyfill']);
 
+// Wait for ready state, unless user asynchronously initializes A-Frame.
+if (!window.AFRAME_ASYNC) {
+  ready.waitForDocumentReadyState();
+}
+
 module.exports = window.AFRAME = {
   AComponent: require('./core/component').Component,
   AEntity: AEntity,
@@ -104,6 +110,7 @@ module.exports = window.AFRAME = {
   schema: require('./core/schema'),
   shaders: shaders,
   systems: systems,
+  ready: ready.ready,
   THREE: THREE,
   utils: utils,
   version: pkg.version