work in progress [might break]

app/example/helloworld-iframe.js

@@ -1,6 +1,6 @@
 AFRAME.registerComponent('helloworld-iframe', {
   schema: { 
-    foo: { type:"string"}
+    url: { type:"string"}
   },
 
   init: function(){},
@@ -36,16 +36,18 @@ AFRAME.registerComponent('helloworld-iframe', {
     // reactive events for this.data updates 
     myvalue: function(e){ /*this.el.dom.querySelector('b').innerText = this.data.myvalue*/ },
 
+    init: function(){
+      alert("ja")
+    },
+
     ready: function( ){ 
       this.el.dom.style.display = 'none'
       console.log("this.el.dom has been added to DOM")
-      this.data.myvalue = 1
-      setInterval( () => this.data.myvalue++, 100 )
     },
 
     launcher:  function(){
       console.log("this.el.dom iframe has been added to DOM")
-      let URL = prompt('enter URL to display','https://fabien.benetou.fr/Wiki/Wiki')
+      let URL = this.data.url || prompt('enter URL to display','https://fabien.benetou.fr/Wiki/Wiki')
       if( !URL ) return
       this.el.dom.querySelector('iframe').src = URL
       new WinBox("Hello World",{ 

app/load.js

@@ -0,0 +1,111 @@
+AFRAME.registerComponent('load', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {
+    this.el.object3D.visible = false
+
+    //this.el.innerHTML = ` `
+  },
+
+  requires:{
+    // somecomponent:        "https://unpkg.com/some-aframe-component/mycom.min.js"
+  },
+
+  events:{
+
+    // component events
+    somecomponent: function( ){ console.log("component requirement mounted") },
+    ready:         function(e){ console.log("requires are loaded") },
+
+    launcher:      function(e){ 
+      this.filedialog( (data) => {
+        if( data.match(/<html/) && confirm('reload new XR shell environment?') ){
+          return document.write(data)
+        }
+        if( data.match(/<a-/) ){
+          let el = document.createElement('a-entity')
+          el.innerHTML = data
+          AFRAME.scenes[0].appendChild(el)
+        }
+      })
+    },
+
+
+  },
+
+  filedialog: function(onDone){
+    if( !this.fileEl ){
+      let el = this.fileEl = document.createElement('input')
+      el.type = "file"
+      el.addEventListener('change', (e) =>{
+        var file = e.target.files[0];
+        if (!file) {
+          return;
+        }
+        var reader = new FileReader();
+        reader.onload = function(e) {
+          var contents = e.target.result;
+          onDone(contents)
+        };
+        reader.readAsText(file);
+      })
+      document.body.appendChild(el)
+    }
+    this.fileEl.click()
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Hello world",
+    "name": "Hello world",
+    "icons": [
+      {
+        "src": "https://css.gg/arrow-up-r.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+

app/save.js

@@ -0,0 +1,138 @@
+AFRAME.registerComponent('save', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {
+    this.el.object3D.visible = false
+
+    //this.el.innerHTML = ` `
+  },
+
+  requires:{
+    // somecomponent:        "https://unpkg.com/some-aframe-component/mycom.min.js"
+  },
+
+  events:{
+
+    // component events
+    somecomponent: function( ){ console.log("component requirement mounted") },
+    ready:         function(e){ console.log("requires are loaded") },
+
+    launcher:      function(e){ 
+      this.save()
+    },
+
+
+  },
+
+  save: function(){
+    let l = document.querySelector("#left-hand")
+    let r = document.querySelector("#right-hand")
+    l.remove()
+    r.remove()
+    // *TODO* dont crash on hands
+
+    this.inlineFiles()
+    .then( () => this.download(document.documentElement.innerHTML,"xrsh.html") )
+    .catch(console.error)
+  },
+
+  download: function(content, filename, contentType){
+    const a = document.createElement('a');
+    const file = new Blob([document.documentElement.innerHTML], {type: "text/html"});
+
+    a.href= URL.createObjectURL(file);
+    a.download = filename 
+    a.click();
+    URL.revokeObjectURL(a.href);
+  },
+
+  inlineFiles: function(){
+    let p    = []
+    let tags = [ ...document.querySelectorAll('script'), 
+                 ...document.querySelectorAll('link')   
+               ]
+    tags.map( (el) => {
+      let remoteFile = el.src || el.href
+      if( remoteFile ){
+        p.push( new Promise((resolve,reject) => {
+          fetch( remoteFile )
+          .then( (res) => res.text() )
+          .then( (text) => {
+            switch( el.tagName ){
+                case 'LINK':   el2 = document.createElement('style')
+                                el2.setAttribute("type","text/css")
+                                el2.setAttribute("_href", el.href )
+                                el2.innerHTML = text 
+                                el.parentNode.appendChild(el2)
+                                el.remove()
+                                break;
+
+                case 'SCRIPT':  el.innerHTML = text 
+                                el.setAttribute("_src", el.src)
+                                el.removeAttribute("src")
+                                break;
+            }
+            resolve()
+          })
+          .catch(reject)
+        }))
+      }
+    })
+    return Promise.all(p) 
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Hello world",
+    "name": "Hello world",
+    "icons": [
+      {
+        "src": "https://css.gg/arrow-down-r.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+

app/spatialize.js

@@ -24,7 +24,7 @@ AFRAME.registerComponent('spatialize', {
     this.el.sceneEl.addEventListener('launched',(e) => {
       console.dir(e)
       let appEl = e.detail.el.dom 
-      if( appEl.style.display != 'none' && appEl.innerHTML ){
+      if( appEl.style && appEl.style.display != 'none' && appEl.innerHTML ){
         this.btn.style.display = '' // show button
       }
     })
@@ -38,7 +38,7 @@ AFRAME.registerComponent('spatialize', {
 
     // component events
     ready:         function(e){
-      this.btn.style.display = 'none'
+      //this.btn.style.display = 'none'
       this.btn.style.background = 'var(--xrsh-primary)'
       this.btn.style.color      = '#FFF'
     },