updated build + integrated codemirror package at ~/opt/codemirror

buildroot-v86/board/v86/rootfs_overlay/root/.env

@@ -1 +1 @@
-echo "$(pwd): the project root-directory"
+echo "[$(pwd)] the project root-directory"

buildroot-v86/board/v86/rootfs_overlay/root/bin/.env

@@ -1 +1 @@
-echo "$(pwd): projectspecific cli utilities"
+echo "[$(pwd)] projectspecific cli utilities"

buildroot-v86/board/v86/rootfs_overlay/root/bin/annotate

@@ -1,3 +1,3 @@
 #!/bin/sh
 # simple directory annotator [via autoenv]
-echo "echo \"$(pwd): $*\"" >> .env
+echo "echo \"[$(pwd)] $*\"" >> .env

buildroot-v86/board/v86/rootfs_overlay/root/bin/codemirror

@@ -1,26 +0,0 @@
-#!/bin/js
-
-if( args[1] == undefined ) return "usage: codemirror <file>"
-
-AFRAME.utils.require({
-        codemirrorjs:  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.js",
-        codemirrorcss: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css",
-        cmtheme:       "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/theme/shadowfox.css"
-})
-.then( () => AFRAME.utils.require({
-    cmxml:         "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/xml/xml.js",
-    cmjavascript:  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/javascript/javascript.js",
-    cmcss:         "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/css/css.js",
-    highlight:     "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/htmlmixed/htmlmixed.js",
-    codemirrorAF:  "com/codemirror.js"
-  })
-)
-.then( () => {
-  let el = document.createElement("a-entity")
-  el.setAttribute("codemirror", `file: ${args[1]}`)
-  document.querySelector("a-scene").appendChild(el)
-})
-  
-return "" // empty stdout(put)
-
-// for shellscript-equivalent see bin/codemirror

buildroot-v86/board/v86/rootfs_overlay/root/bin/codemirror

@@ -0,0 +1 @@
+../opt/codemirror/codemirror

buildroot-v86/board/v86/rootfs_overlay/root/fs/.env

@@ -1 +1 @@
-echo "$(pwd): 'fusescript' filesystems https://codeberg.org/coderofsalvation/fusescript"
+echo "[$(pwd)] 'fusescript' filesystems https://codeberg.org/coderofsalvation/fusescript"

buildroot-v86/board/v86/rootfs_overlay/root/hook.d/.env

@@ -1,2 +1,2 @@
-echo "$(pwd): polyglot hooks https://xrsh.isvery.ninja/#Unixy%20event%20hooks"
+echo "[$(pwd)] polyglot hooks https://xrsh.isvery.ninja/#Unixy%20event%20hooks"
 

buildroot-v86/board/v86/rootfs_overlay/root/opt/codemirror/.env

@@ -0,0 +1,2 @@
+ln -fs $(pwd)/codemirror ~/bin/codemirror
+echo "enter 'codemirror <file>' to start codemirror"

buildroot-v86/board/v86/rootfs_overlay/root/opt/codemirror/codemirror

@@ -0,0 +1,5 @@
+#!/bin/sh
+me="$(dirname $(readlink -f $0))"
+file="$(readlink -f "$1")"
+
+$me/codemirror.js "$file"

buildroot-v86/board/v86/rootfs_overlay/root/opt/codemirror/codemirror.js

@@ -0,0 +1,214 @@
+#!/bin/js
+
+if( args[1] == undefined ) return "usage: codemirror <file>"
+
+if( AFRAME.components.codemirror ) delete AFRAME.components.codemirror 
+AFRAME.registerComponent('codemirror', {
+  schema: { 
+    file: { type:"string"},
+    term: { type:"selector", default: "[isoterminal]" },
+    width: { type:"number", default:700},
+    height: { type:"number", default:500},
+  },
+
+  init: function () {
+    this.el.object3D.visible = false
+    if( !this.data.term || !this.data.term.components ) throw 'codemirror cannot get isoterminal'
+    if( this.data.file && this.data.file[0] != '/'){
+      this.data.file = "root/"+this.data.file
+    }
+    this.isoterminal = this.data.term.components.isoterminal.term
+    //this.el.innerHTML = ` `
+    this.requireAll()
+  },
+
+  requireAll: async function(){
+    let s = await AFRAME.utils.require(this.requires)
+    setTimeout( () => this.el.setAttribute("dom",""), 300 )
+  },
+
+  requires:{
+    window:        "com/window.js"
+  },
+
+  dom: {
+    scale:   0.5,
+    events:  ['click','keydown'],
+    html:    (me) => `<div class="codemirror">
+                      </div>`,
+
+    css:     (me) => `.CodeMirror{
+                        width: ${me.com.data.width}px !important;
+                        height: ${me.com.data.height-30}px !important;
+                     }
+                     .codemirror *{
+                       font-size: 14px;
+                       font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
+                       font-weight:500 !important;
+                       letter-spacing: 0 !important;
+                       text-shadow: 0px 0px 10px #F075;
+                     }
+
+                    .wb-body:has(> .codemirror){ 
+                      overflow:hidden; 
+                    }
+
+                     .CodeMirror {
+                      margin-top:18px;
+                     }
+                     .cm-s-shadowfox.CodeMirror {
+                       background:transparent !important; 
+                     }
+                     `
+  },
+
+  createEditor: function(value){
+    this.el.setAttribute("window", `title: codemirror; uid: ${this.el.dom.id}; attach: #overlay; dom: #${this.el.dom.id}; width: ${this.data.width}px; height: ${this.data.height}px`)
+    this.editor = CodeMirror( this.el.dom, {
+      value,
+      mode: "htmlmixed",
+      lineNumbers: true,
+      styleActiveLine: true,
+      matchBrackets: true,
+      Tab: "indentMore",
+      defaultTab: function(cm) {
+        if (cm.somethingSelected()) cm.indentSelection("add");  
+        else cm.replaceSelection("  ", "end");
+      }           
+    })
+    this.editor.setOption("theme", "shadowfox")
+    this.editor.updateFile = AFRAME.utils.throttle( (file,str) => {
+      this.updateFile(file,str)
+    }, 1500)
+    this.editor.on('change', (instance,changeObj) => {
+      this.editor.updateFile( this.data.file, instance.getValue() )
+    })
+
+    this
+    .handleFocus()
+
+    setTimeout( () => {
+      this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.dom.id}`)  // only show aframe-html in xr 
+    },1500)
+  },
+
+  handleFocus: function(){
+    const focus = (showdom) => (e) => {
+      if( this.editor ){
+        this.editor.focus()
+      }
+      if( this.el.components.window && this.data.renderer == 'canvas'){
+        this.el.components.window.show( showdom )
+      }
+    }
+    this.el.addEventListener('obbcollisionstarted', focus(false) )
+    this.el.sceneEl.addEventListener('enter-vr', focus(false) )
+    this.el.sceneEl.addEventListener('enter-ar', focus(false) )
+    this.el.sceneEl.addEventListener('exit-vr', focus(true) )
+    this.el.sceneEl.addEventListener('exit-ar', focus(true) )
+  },
+
+  updateFile: async function(file,str){
+    // we don't do via shellcmd: isoterminal.exec(`echo '${str}' > ${file}`,1) 
+    // as it would require all kindof ugly stringescaping
+    console.log("updating "+file)
+    await this.isoterminal.worker.update_file(file, this.isoterminal.convert.toUint8Array(str) )
+    this.isoterminal.exec("touch "+file) // *FIXME* notify filesystem (why does inotifyd need this? v86's 9pfees is cached?)
+  },
+
+  events:{
+
+    // component events
+    DOMready: function(e){
+
+      this.isoterminal.worker.read_file(this.data.file)
+      .then( this.isoterminal.convert.Uint8ArrayToString )
+      .then( (str) => {
+        console.log("creating editor: "+this.data.file)
+        console.dir(str)
+        this.createEditor( str )
+      })
+      .catch( (e) => {
+        console.log("error opening "+this.data.file+", creating new one")
+        this.createEditor("")
+      })
+    },
+  },
+
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Paste",
+    "name": "Paste",
+    "icons": [
+      {
+        "src": "https://css.gg/clipboard.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": "Paste the clipboard",
+    "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.
+    `
+  }
+
+});
+
+
+AFRAME.utils.require({
+        codemirrorjs:  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.js",
+        codemirrorcss: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css",
+        cmtheme:       "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/theme/shadowfox.css"
+})
+.then( () => AFRAME.utils.require({
+    cmxml:         "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/xml/xml.js",
+    cmjavascript:  "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/javascript/javascript.js",
+    cmcss:         "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/css/css.js",
+    highlight:     "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/htmlmixed/htmlmixed.js",
+    codemirrorAF:  "com/codemirror.js"
+  })
+)
+.then( () => {
+  let el = document.createElement("a-entity")
+  el.setAttribute("codemirror", `file: ${args[1]}`)
+  document.querySelector("a-scene").appendChild(el)
+})
+  
+return "" // empty stdout(put)
+
+// for shellscript-equivalent see bin/codemirror