allow global app components

com/app.js

@@ -5,6 +5,8 @@ AFRAME.app         = new Proxy({
 
   order:0,
 
+  components: {},       // component-strings in this array are automatically
+                        // added to each app
   add(component, entity){
     // categorize by component to prevent similar apps loading duplicate dependencies simultaniously
     this[component] = this[component] || []
@@ -34,7 +36,7 @@ AFRAME.app         = new Proxy({
  * This is the abstract 'app' component
  */
 
-AFRAME.registerComponent('app', {
+appComponent = {
   schema:{
     "uri":{ type:"string"}
   },
@@ -43,7 +45,11 @@ AFRAME.registerComponent('app', {
     "app:ready": function(){
       let {id,component,type} = this.parseAppURI(this.data.uri)
       AFRAME.app[component].map( (app) => {
-        if( !app.el.getAttribute(component) ) app.el.setAttribute(component,app.data)
+        if( !app.el.getAttribute(component) ){
+          if( AFRAME.components[ component ] ){
+            app.el.setAttribute(component,app.data)
+          }else console.warn(`${component} was not fully downloaded yet (${app.data.uri})`)
+        }
       })
     },
     "requires:ready": function(){
@@ -115,7 +121,10 @@ AFRAME.registerComponent('app', {
     })
   }
 
-})
+}
+
+AFRAME.registerComponent('app', appComponent)
+AFRAME.registerComponent('com', appComponent)
 
 /*
  * Here are monkeypatched AFRAME component prototype functions
@@ -151,22 +160,16 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
       overlay.id = "overlay"
       document.body.appendChild(overlay)
       document.querySelector("a-scene").setAttribute("webxr","overlayElement:#overlay")
-//      let menu = document.createElement('div')
-//      menu.id = 'iconmenu'
-//      document.body.appendChild(menu)
     }
 
-//    // add menu button
+    const reactify = (el,aframe) => new Proxy(this.data,{
-//    if( this.manifest && this.manifest.icons ){
+      get(me,k,v)  { return me[k]
-//      let btn = document.createElement('button')
+      },
-//      btn.app = this
+      set(me,k,v){
-//      if( this.manifest.icons.length ){
+        me[k] = v
-//        btn.innerHTML = `<img src="${this.manifest.icons[0].src}"/>`
+        aframe.emit(k,{el,k,v})
-//      }else btn.innerText = this.manifest.short_name
+      }
-//      btn.setAttribute("alt", this.manifest.name )
+    })
-//      btn.addEventListener('click', (e) => this.el.emit('launcher',{}) )
-//      document.querySelector("#iconmenu").appendChild(btn)
-//    }
 
     // reactify components with dom-definition
     if( this.data.uri && this.dom && !this.el.dom ){
@@ -174,14 +177,6 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
       tasks = {
 
         createReactiveDOMElement: () => {
-          const reactify = (el,aframe) => new Proxy(this.data,{
-            get(me,k,v)  { return me[k] 
-            },
-            set(me,k,v){
-              me[k] = v
-              aframe.emit(k,{el,k,v})
-            }
-          })
           this.el.dom = document.createElement('div')
           this.el.dom.className = this.parseAppURI(this.data.uri).component
           this.el.dom.innerHTML = this.dom.html(this)
@@ -212,6 +207,13 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
           return tasks
         },
 
+        initAutoComponents: () => {
+          for ( let i in AFRAME.app.components ) {
+            this.el.setAttribute( i, AFRAME.app.components[i] )
+          }
+          return tasks
+        },
+
         triggerKeyboardForInputs: () => {
           // https://developer.oculus.com/documentation/web/webxr-keyboard ;
           [...this.el.dom.querySelectorAll('[type=text]')].map( (input) => {
@@ -232,16 +234,24 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
       .scaleDOMvsXR()
       .triggerKeyboardForInputs()
       .setupListeners()
+      .initAutoComponents()
 
       document.querySelector('#overlay').appendChild(this.el.dom)
       this.el.emit('DOMready',{el: this.el.dom})
 
-    } 
+    }else this.data = reactify( this.el, this.el )
+
     // assign unique app id
     if( !this.el.uid ) this.el.uid = '_'+String(Math.random()).substr(10)
 
-    if( this.requires ) this.require( this.requires, 'requires:ready' )
+    // require coms
-    else this.el.emit('requires:ready')
+    let requires = {}
+    for ( let i in AFRAME.app.components  ) {
+      if( !AFRAME.components[i] ) requires[i] = AFRAME.app.components[i]
+    }
+    if( this.requires ) requires = {...requires, ...this.requires }
+    if( Object.values(requires).length ) this.require( requires, 'requires:ready' )
+    else this.el.emit('requires:ready' )
 
     // mark app as being initialized
     this.isApp  = true