main: work in progress [might break]

com/example/helloworld-window.js

@@ -5,8 +5,9 @@ AFRAME.registerComponent('helloworld-window', {
 
   dependencies: ['dom'],
 
-  init: function(){
+  init: async function(){
     this.el.object3D.visible = false
+
   },
 
   dom: {
@@ -29,16 +30,20 @@ AFRAME.registerComponent('helloworld-window', {
     myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
 
     launcher: async function(){
-      this.el.dom.style.display = 'none'
+      let s = await AFRAME.utils.require({
-      await AFRAME.utils.require({
         dom:         "./com/dom.js",                                                  // interpret .dom object
         html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
         winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
         winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
       })
+      console.dir(s)
+      this.el.setAttribute("dom","")
+      this.el.setAttribute("data2event","")
+      this.el.setAttribute("html","")
+      this.el.dom.style.display = 'none'
       this.data.myvalue = 1
+      return
       setInterval( () => this.data.myvalue++, 100 )
-      console.log("this.el.dom has been added to DOM")
       new WinBox("Hello World",{ 
         width: 250,
         height: 150,

com/launcher.js

@@ -45,7 +45,7 @@ AFRAME.registerComponent('launcher', {
     await AFRAME.utils.require({
       html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
       dom:         "./com/dom.js",
-      data_events: "./com/data2event.js"
+      data2events: "./com/data2event.js"
     })
 
     this.el.setAttribute("dom","")

com/paste.js

@@ -19,17 +19,28 @@ AFRAME.registerComponent('paste', {
     ready:         function(e){ console.log("requires are loaded") },
 
     launcher:      function(e){ 
-      navigator.clipboard.readText()
+      const paste = () => {
-      .then( (base64) => {
+        navigator.clipboard.readText()
-        let mimetype  = base64.replace(/;base64,.*/,'')
+        .then( (base64) => {
-        let data = base64.replace(/.*;base64,/,'')
+          let mimetype  = base64.replace(/;base64,.*/,'')
-        let type = this.textHeuristic(data)
+          let data = base64.replace(/.*;base64,/,'')
-        console.log("type="+type)
+          let type = this.textHeuristic(data)
-        switch( this.textHeuristic(data) ){
+          console.log("type="+type)
-          case "aframe":    this.insertAFRAME(data); break;
+          switch( this.textHeuristic(data) ){
-          default:          this.insertText(data); break;
+            case "aframe":    this.insertAFRAME(data); break;
-        }
+            default:          this.insertText(data); break;
-        this.count += 1
+          }
+          this.count += 1
+        })
+      }
+
+      navigator.permissions.query({ name: 'clipboard-read' })
+      .then( (permission) => {
+        if( permission.state != 'granted' ){
+          this.el.sceneEl.exitVR()
+          setTimeout( () => paste(), 500 )
+          return
+        }else paste()
       })
     },
 
@@ -144,7 +155,7 @@ AFRAME.registerComponent('paste', {
         "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
       }
     ],
-    "description": "Hello world information",
+    "description": "Paste the clipboard",
     "screenshots": [
       {
         "src": "/images/screenshot1.png",

com/require.js

@@ -0,0 +1,65 @@
+// usage: 
+//
+// await AFRAME.utils.require( this.dependencies )               (*) autoload missing components
+// await AFRAME.utils.require( this.el.getAttributeNames() )     (*) autoload missing components
+// await AFRAME.utils.require({foo: "https://foo.com/aframe/components/foo.js"},this)
+// await AFRAME.utils.require(["./app/foo.js","foo.css"],this)
+// 
+// (*) = prefixes baseURL AFRAME.utils.require.baseURL ('./com/' e.g.)
+//
+AFRAME.utils.require = function(arr_or_obj,opts){
+  opts            = opts || {}
+  let i           = 0
+  let deps        = []
+  AFRAME.required = AFRAME.required || {}
+  let packagesArr = arr_or_obj.map ? arr_or_obj : Object.values(arr_or_obj)
+
+  const parseURI = function(uri){
+    return {
+      id:        String(uri).split("/").pop(),                      // 'a/b/c/mycom.js' => 'mycom.js'
+      component: String(uri).split("/").pop().replace(/\..*/,''),   // 'mycom.js' => 'mycom'
+      type:      String(uri).split(".").pop()                       // 'mycom.js' => 'js'
+    }
+  }
+
+  packagesArr.map( (package) => {
+    try{
+      package = package.match(/\./) ? package : AFRAME.utils.require.baseURL+package+".js"
+      let id = Object.keys(arr_or_obj)[i]
+      if( id == i ) id = parseURI(package).component 
+      // prevent duplicate requests
+      if( AFRAME.required[id] ) return // already loaded before
+      AFRAME.required[id] = true
+
+      if( !document.head.querySelector(`script#${id}`) ){
+        let {type} = parseURI(package)
+        let p = new Promise( (resolve,reject) => {
+          switch(type){
+            case "js":  let script = document.createElement("script")
+                        script.id  = id
+                        script.onload  = () => setTimeout( () => resolve(id), 50 )
+                        script.onerror = (e) => reject(e)
+                        script.src = package
+                        document.head.appendChild(script)
+                        break;
+            case "css": let link = document.createElement("link")
+                        link.id  = id
+                        link.href = package
+                        link.rel = 'stylesheet'
+                        document.head.appendChild(link)
+                        resolve(id)
+                        break;
+          }
+        })
+        deps.push(p)
+      }
+    }catch(e){ 
+      console.error(`package ${package} could not be retrieved..aborting :(`); 
+      if( opts.halt ) throw e; 
+    }
+    i++
+  })
+  return Promise.all(deps)
+}
+
+AFRAME.utils.require.baseURL = './com/'

com/save.js

@@ -75,8 +75,8 @@ AFRAME.registerComponent('save', {
   },
 
   manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "Hello world",
+    "short_name": "Save",
-    "name": "Hello world",
+    "name": "Save",
     "icons": [
       {
         "src": "https://css.gg/arrow-down-r.svg",
@@ -106,7 +106,7 @@ AFRAME.registerComponent('save', {
         "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
       }
     ],
-    "description": "Hello world information",
+    "description": "Export the current XRSH(ell) as a standalone HTML file",
     "screenshots": [
       {
         "src": "/images/screenshot1.png",