@acepad/browser 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,14 @@
+NOTE: This package is supporsed to work in [acepad](https://github.com/hoge1e3/acepad-dev), not a regular node envronment.
+
+# @acepad/browser
+
+Render Webpage(HTML file) using filesystems in [acepad](https://github.com/hoge1e3/acepad-dev/blob/main/README.md)/[petit-node](https://github.com/hoge1e3/petit-node). Link/Images/Javascript from HTML files are also referred within file systems.
+
+## functions
+
+- `open`(file, options)
+   - `file`  HTML [File object](https://github.com/hoge1e3/sfile?tab=readme-ov-file#quick-reference-of-file-object) to be rendered. 
+   - `options` 
+      - `doc` target document object to be rendered,default, `globalThis.document` 
+      - `pNode` Set true to use [petit-node](https://github.com/hoge1e3/petit-node) module loading features that enables import/require other local file in the Javascript files referred from the HTML file.
+

package/acepad-browser.js

@@ -1,114 +1,169 @@
-import {appendNode} from "./dom.js";
-import {createModuleURL} from "petit-node";
-import {createURL} from "./url.js";
-export async function open(f,_opt={}){
-    let p=new DOMParser();
-    let html=f.text();
-    const colon=":";
-    let d=p.parseFromString(html,"text/html");
-    let opt={
-        doc:_opt.document||document,
-        resolve(p){
-            return f.sibling(p);
-        },
-        async toURL(p,n){
-            let t=n.getAttribute("type");
-            if(t=="module"){
-                return await createModuleURL(opt.resolve(p));
-            }
-            return await createURL(opt.resolve(p));
-        },
-        protocol(href,n){
-            
-        },
-        open
-    };
-    //const s=programmableReadyState();
-    //s.value="loading";
-    //let h=hack();
-    for(let t of ["head","body"]){
-        let hd=opt.doc.querySelector(t);
-        hd.innerHTML="";
-        let hs=d.querySelector(t);
-        await appendNode(hs, hd, opt);
-    }
-    /*h.setReadyState("interactive");
-    h.setReadyState("complete");
-    
-    s.value="complete";
-    document.dispatchEvent(new Event("readystatechange"));
-    const le=new Event("load");
-    window.dispatchEvent(le);*/
-}
-function hack(){
-    let h=document.addEventListener.hacked;
-    h.readyState=document.readyState;
-    if(!h){
-        document.addEventListener.hacked=h={};
-        Object.defineProperty(document,"readyState",{
-            get(){
-                return h.readyState;
-            }
-        });
-        h.readystatechange=hackEventListener(
-            document,"readystatechange");
-        h.load=hackEventListener(
-            window,"load");
-        h.domcontentloaded=hackEventListener(
-            document,"domcontentloaded");
-        h.setReadyState=(s)=>{
-            h.readyState=s;
-            if(h.readyState==="interactive"){
-                const e=new Event("DOMContentLoaded");
-                for(let f of h.domcontentloaded){
-                    f.call(document,e);
-                }
-            }
-            if(h.readyState==="complete"){
-                const e=new Event("load");
-                for(let f of h.load){
-                    f.call(window,e);
-                }
-            }
-            const e=new Event("readystatechange");
-            for(let f of h.readystatechange){
-                f.call(document,e);
-            }
-        };
-    }
-    h.readystatechange.length=0;
-    h.readystatechange.push((e)=>{
-        if(typeof 
-        document.onreadystatechange==="function"){
-            document.onreadystatechange(e);
-        }
-    });
-    delete document.onreadystatechange;
-    h.domcontentloaded.length=0;
-    h.load.length=0;
-    h.load.push((e)=>{
-        if(typeof 
-        window.onload==="function"){
-            window.onload(e);
-        }
-    });
-    delete window.onload;
-    h.readyState="loading";
-    return h;
-}
-function hackEventListener(o,type){
-    const old=o.addEventListener;
-    const listeners=[];
-    o.addEventListener=function (t,...a){
-        if(type.toLowerCase()!==t.toLowerCase()){
-            return old.apply(this,[t,...a]);
-        }        
-        alert(t+a);
-        listeners.push(a[0]);
-    };
-    return listeners;
-}
-
-
-
-//
+import {appendNode} from "./dom.js";
+import {createModuleURL, getCore} from "petit-node";
+import {createURL} from "./url.js";
+import {sibling,file} from "@acepad/here";
+export async function open(f,_opt={}){
+    let p=new DOMParser();
+    let html=f.text();
+    const colon=":";
+    let d=p.parseFromString(html,"text/html");
+    let _g=_opt.globalThis||globalThis;
+    let opt={
+      globalThis:_g,
+        doc:_opt.doc||_opt.document||_g.document,
+        resolve(p){
+            return f.sibling(p);
+        },
+        async toURL(p,n){
+            let t=n.getAttribute("type");
+            if(t=="module"){
+                return await createModuleURL(opt.resolve(p));
+            }
+            return await createURL(opt.resolve(p));
+        },
+        protocol(href,n){
+            
+        },
+        open:(f)=>{
+            return open(f,_opt);
+        }
+    };
+    if(_opt.pNode){
+      const g=opt.globalThis;
+      const pn=await loadPNode(g, getCore());
+      const {open}=await pn.importModule(file(import.meta.url));
+      await open(f);
+      return ;
+    }
+    //const s=programmableReadyState();
+    //s.value="loading";
+    //let h=hack();
+    for(let t of ["head","body"]){
+        let hd=opt.doc.querySelector(t);
+        if(!_opt.keep)hd.innerHTML="";
+        let hs=d.querySelector(t);
+        await appendNode(hs, hd, opt);
+    }
+    /*h.setReadyState("interactive");
+    h.setReadyState("complete");
+    
+    s.value="complete";
+    document.dispatchEvent(new Event("readystatechange"));
+    const le=new Event("load");
+    window.dispatchEvent(le);*/
+}
+
+function loadPNode(g, core){
+  if(g.pNode)return g.pNode;
+  //console.log("loadPNode",g,core);
+  const f=new g.Function ("core", `
+    async function main(){
+      ${pNodeHeader()};
+      globalThis.pNode=pNode;
+      globalThis.FS=pNode.FS;
+      return pNode;
+    }
+    return main();
+  `);
+  //console.log(f+"");
+  return f(core);
+}
+const cdn="https://cdn.jsdelivr.net/npm/";
+function pNodeHeader(){
+  return `${header()}
+  globalThis.pNode=pNode;
+  (${hackTimeouts})();
+  await pNode.boot({core});
+  `;
+  //const FS=pNode.getFS();
+  //await FS.mountAsync("/idb/","idb");`;
+
+  function header(){
+    let purl=process.env.PNODE_URL;
+    // static import does not reports error
+    // using relative path for import does not work in BlobURL?
+    if (!purl ||
+        ( !purl.match(/^https:\/\//) &&
+          !purl.includes("127.0.0.1")  )
+    ) purl=cdn+"petit-node@latest/dist/index.js";
+    return `
+const pNode=await import(${JSON.stringify(purl)});`;
+  }
+
+  function hackTimeouts(){
+      for(let k of ["setTimeout","setInterval",
+      "clearTimeout","clearInterval",]){
+          globalThis[k]=globalThis[k].bind(globalThis);
+      }
+  }
+}
+//
+
+function hack(){
+    let h=document.addEventListener.hacked;
+    h.readyState=document.readyState;
+    if(!h){
+        document.addEventListener.hacked=h={};
+        Object.defineProperty(document,"readyState",{
+            get(){
+                return h.readyState;
+            }
+        });
+        h.readystatechange=hackEventListener(
+            document,"readystatechange");
+        h.load=hackEventListener(
+            window,"load");
+        h.domcontentloaded=hackEventListener(
+            document,"domcontentloaded");
+        h.setReadyState=(s)=>{
+            h.readyState=s;
+            if(h.readyState==="interactive"){
+                const e=new Event("DOMContentLoaded");
+                for(let f of h.domcontentloaded){
+                    f.call(document,e);
+                }
+            }
+            if(h.readyState==="complete"){
+                const e=new Event("load");
+                for(let f of h.load){
+                    f.call(window,e);
+                }
+            }
+            const e=new Event("readystatechange");
+            for(let f of h.readystatechange){
+                f.call(document,e);
+            }
+        };
+    }
+    h.readystatechange.length=0;
+    h.readystatechange.push((e)=>{
+        if(typeof 
+        document.onreadystatechange==="function"){
+            document.onreadystatechange(e);
+        }
+    });
+    delete document.onreadystatechange;
+    h.domcontentloaded.length=0;
+    h.load.length=0;
+    h.load.push((e)=>{
+        if(typeof 
+        window.onload==="function"){
+            window.onload(e);
+        }
+    });
+    delete window.onload;
+    h.readyState="loading";
+    return h;
+}
+function hackEventListener(o,type){
+    const old=o.addEventListener;
+    const listeners=[];
+    o.addEventListener=function (t,...a){
+        if(type.toLowerCase()!==t.toLowerCase()){
+            return old.apply(this,[t,...a]);
+        }        
+        alert(t+a);
+        listeners.push(a[0]);
+    };
+    return listeners;
+}

package/dom.js

@@ -1,64 +1,70 @@
-function loadPromise(n){
-    return new Promise((s,e)=>{ 
-		n.onload=s;
-		n.onerror=e;
-    });
-}
-export async function appendNode(src,dst,opt) {
-    opt.doc=opt.doc||document;
-    let {doc,open,resolve,toURL}=opt;
-    const colon=":";
-	const c=src.childNodes;
-	const loadings=[];
-	//console.log("apn",src.innerHTML,dst);
-	for(let n of c){
-	    switch (n.nodeType) {
-		case Node.ELEMENT_NODE:
-			let nn=doc.createElement(n.tagName);
-			let at=Array.from(n.attributes);
-			// should charset must be set first than src
-			const names=at.map(a=>a.name);
-			var idx=names.indexOf("charset");
-			if (idx>=0) {
-				names.splice(idx,1);
-				names.unshift("charset");
-			}
-			let w;
-			for(let name of names) {
-				let value=n.getAttribute(name);
-				let isrel=FS.PathUtil.isRelativePath(value);
-				let tag=n.tagName.toLowerCase();
-				if (name=="href" && isrel) {
-				    if(tag=="a"){
-				        let f=resolve(value);
-
-				        nn.addEventListener(
-				            "click",
-				        ()=>{
-				            open(f);
-				        });
-				        value="javascript"+colon+";";
-				    }else{
-						value=await toURL(value,n);
-						
-				    }
-				}
-				if (name=="src") {
-					if(isrel)value=await toURL(value,n);
-					if (tag=="script") {
-					    //alert(value);
-					    w=loadPromise(nn);
-					}
-				}
-				nn.setAttribute(name, value);
-			}
-			dst.appendChild(nn);
-			await w;
-			await appendNode(n ,nn,opt);
-			break;
-		case Node.TEXT_NODE:
-			dst.appendChild(doc.createTextNode(n.textContent));
-			break;
-		}
-	}
+function loadPromise(n){
+    return new Promise((s,e)=>{ 
+		n.onload=s;
+		n.onerror=e;
+    });
+}
+function hasProtocol(url) {
+  return url.match(/^\w+:/);
+}
+function isRelativePath(p) {
+	return !p.startsWith("/");
+}
+export async function appendNode(src,dst,opt) {
+    opt.doc=opt.doc||document;
+    let {doc,open,resolve,toURL}=opt;
+    const colon=":";
+	const c=src.childNodes;
+	const loadings=[];
+	//console.log("apn",src.innerHTML,dst);
+	for(let n of c){
+	    switch (n.nodeType) {
+		case Node.ELEMENT_NODE:
+			let nn=doc.createElement(n.tagName);
+			let at=Array.from(n.attributes);
+			// should charset must be set first than src
+			const names=at.map(a=>a.name);
+			var idx=names.indexOf("charset");
+			if (idx>=0) {
+				names.splice(idx,1);
+				names.unshift("charset");
+			}
+			let w;
+			for(let name of names) {
+				let value=n.getAttribute(name);
+				let isrel=!hasProtocol(value) && isRelativePath(value);
+				let tag=n.tagName.toLowerCase();
+				if (name=="href" && isrel) {
+				    if(tag=="a"){
+				        let f=resolve(value);
+
+				        nn.addEventListener(
+				            "click",
+				        ()=>{
+				            open(f);
+				        });
+				        value="javascript"+colon+";";
+				    }else{
+						value=await toURL(value,n);
+						
+				    }
+				}
+				if (name=="src") {
+					if(isrel)value=await toURL(value,n);
+					if (tag=="script") {
+					    //alert(value);
+					    w=loadPromise(nn);
+					}
+				}
+				nn.setAttribute(name, value);
+			}
+			dst.appendChild(nn);
+			await w;
+			await appendNode(n ,nn,opt);
+			break;
+		case Node.TEXT_NODE:
+			dst.appendChild(doc.createTextNode(n.textContent));
+			break;
+		}
+	}
 }

package/package.json

@@ -1,10 +1,13 @@
-{
-    "main": "acepad-browser.js",
-    "name": "@acepad/browser",
-    "type": "module",
-    "version": "1.0.0",
-    "description": "Show browser in acepad",
-    "dependencies": {
-        "petit-node": "^1.3.6"
-    }
+{
+    "main": "acepad-browser.js",
+    "name": "@acepad/browser",
+    "type": "module",
+    "scripts": {
+        "test": "run test/test-browser.js"
+    },
+    "version": "1.0.1",
+    "description": "Show Webpage in acepad",
+    "dependencies": {
+        "petit-node": "^1.0.0"
+    }
 }

package/test/index.html

@@ -0,0 +1,4 @@
+
+<h1>hello</h1>
+test
+<script type="module" src="index.js"></script>

package/test/index.js

@@ -0,0 +1,3 @@
+import {f} from "./sub.js";
+
+document.querySelector("h1").innerHTML=f("bar");

package/test/sub.js

@@ -0,0 +1,4 @@
+
+export function f(s){
+  return s+s;
+}

package/test/test-browser.js

@@ -0,0 +1,20 @@
+import {t} from "@hoge1e3/dom";
+import {show} from "@acepad/widget";
+import {open} from "@acepad/browser";
+import {sibling} from "@acepad/here";
+
+export async function main(){
+  const element=(t.iframe());
+  await new Promise(s=>{
+    element.addEventListener("load",s);
+    show(t.div(element));
+  });
+  const document=element.contentWindow.document;
+  await open(sibling(import.meta.url,"index.html"),{
+    globalThis: element.contentWindow,
+    document,
+    pNode:true,
+    
+  });
+  console.log(document.body.innerHTML);
+}

package/url.js

@@ -1,33 +1,33 @@
-
-class Entry{
-    constructor(f,url){
-        this.f=f;
-        this.url=url;
-        this.time=f.lastUpdate();
-    }
-    upToDate(){
-        return this.f.exists()&&
-        this.f.lastUpdate()==this.time;
-    }
-    dispose(){
-        URL.revokeObjectURL(this.url);
-    }
-}
-const cache=new Map();
-export function createURL(f){
-    const k=f.path();
-    let e=cache.get(k);
-    if(e) {
-        if(e.upToDate()) return e.url;
-        e.dispose();
-        cache.delete(k);
-    }
-    if(!f.exists()){
-        throw new Error(`Cannot createURL ${f}: not exists`);
-    }
-    const blob=f.getBlob();
-    const blobUrl = URL.createObjectURL(blob);
-    e=new Entry(f,blobUrl);
-    cache.set(k,e);
-    return blobUrl;
+
+class Entry{
+    constructor(f,url){
+        this.f=f;
+        this.url=url;
+        this.time=f.lastUpdate();
+    }
+    upToDate(){
+        return this.f.exists()&&
+        this.f.lastUpdate()==this.time;
+    }
+    dispose(){
+        URL.revokeObjectURL(this.url);
+    }
+}
+const cache=new Map();
+export function createURL(f){
+    const k=f.path();
+    let e=cache.get(k);
+    if(e) {
+        if(e.upToDate()) return e.url;
+        e.dispose();
+        cache.delete(k);
+    }
+    if(!f.exists()){
+        throw new Error(`Cannot createURL ${f}: not exists`);
+    }
+    const blob=f.getBlob();
+    const blobUrl = URL.createObjectURL(blob);
+    e=new Entry(f,blobUrl);
+    cache.set(k,e);
+    return blobUrl;
 }