save file

Author: javascript-2020

utils/misc/nodejs-terminal/nodejs-terminal.html

@@ -167,6 +167,10 @@
     {cursor:pointer;
       content:url(data:image/png;base64,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);
     }
+  #snippet-console
+    {cursor:pointer;
+      content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAA0lBMVEVHcEwaHzgSFSsKDSQXHDQWGzIXHDIKDyMaHzcBAhEXHDMTFy0WHDMeJj8RFSoQFCcPEyYTGC0RFSkTGC0aHzcmLkcaIDgWGjIWHDIUGC8LDiInMEcXHDQWGzEZHjYZIDYbITkUGzMlLkYrMkoaIjkRFSscITgmMEcbITkpMEgjLEMUGzIlLUUoL0gVGC0VGy4mL0YbITktNUwlLEMXHjYeJDtnanjj4+QhKD9MUGOLjZi7vMJfY3Lt7e04PVBITGDS09ZOU2Xr6+tzdoQ9QlVKTmGtyqSqAAAAMXRSTlMA/FIPzrNWCfcF0ZzLnSJ8cpKMqP3Z8KPEuoGO2L7lNuIWzusfQWSM+/JxLMS3ahq7XSnkAwAAAVBJREFUKM+t0tdywjAQBVBjW7gJ907vooUIFxxKSP3/Xwo2dmZYQvKS+6JyRiPNahnmP8Jd0i9H7loFReYxxrzMF5EV4YolRC/JojwJkq6PewXGdFMkU8DdRq6b9w+n2ZxOHzMTsJaffdqmjXwxT3TADxUL8+Z0mUwA1+2SucH5bsICHosVL4fOTBwD7rolSwt1tHQXgNVOxf01N+iogNetLIs/t6mzchprp9WHNcev+91um0bDVX3U80HNGSE4vbwdjyka5e+ANWUYK3k+7PYHrztpOJl386MGjWMaRbNhXnLjhrXiT5IzRhHVbljVUY/QJMpID+nqDw0jqayBfZNVpbs9JQhgg/01TK2MbVezGvme1Ziyx1wLiSIVbZEQ0u6QcpdW3LawZXimZVqKYiqaDNj3gtDQlTDUQlPTdQxYRG0e8S0c+H4gy8gFfCd/8BdhCEKPCPsRBQAAAABJRU5ErkJggg==);
+    }
 
   #hldr
     {padding:10px;border:2px solid lightgray;box-sizing:border-box;flex:1;background:hsl(45,86%,98%)}
@@ -175,6 +179,8 @@
     {height:100%}
 
 
+  #icons
+    {display:flex;align-items:center;gap:5px}
 
   .icon
     {width:32px;height:32px;border:1px solid gray;border-radius:3px;box-sizing:border-box;cursor:pointer}
@@ -193,7 +199,7 @@
 
 
             <misc-hdr component=grp>
-                  <img slot=title class=title src='images/nodejs-terminal.png' style='top:-15px;height:80px' alt='Node.js Terminal'>
+                  <img slot=title class=title src='images/nodejs-terminal.png' style='top:-25px;height:80px' alt='Node.js Terminal'>
                   <time slot=date datetime=2026-04-22>
                         22 Apr 2026
                   </time>
@@ -214,8 +220,12 @@
                         <div id=size></div>
                   </div>
 
-                  <img id=niframe title=iframe>
-                  <img id=snippet-editor title=editor>
+                  <div id=icons>
+                        <img id=niframe title=iframe class=icon>
+                        <img id=snippet-editor title=editor class=icon>
+                        <img id=snippet-console title=snippet-console class=icon>
+                  </div>
+                  
             </div>
 
             <div id=hldr>
@@ -264,6 +274,7 @@
 
               $('#niframe').onclick             = btn.niframe;
               $('#snippet-editor').onclick      = btn['snippet-editor'];
+              $('#snippet-console').onclick     = btn['snippet-console'];
 
               $('#hldr').style.background       = theme.light.background;
 
@@ -301,13 +312,13 @@
         btn['snippet-editor']   = async function(){
 
               var viewport    = await vm.new();
-              viewport.pos({x:200,y:200});
+              viewport.pos({x:225,y:200});
 
               var node    = document.createElement('snippet-editor');
               node.toggleAttribute('component',true);
               node.setAttribute('web-editor','height=100%');
               viewport.body.append(node);
-              var mod2    = mod.create({mod,name:'snippet-editor'});
+              var mod2      = mod.create({mod,name:'snippet-editor'});
               var result    = await mod.build({root:node,mod:mod2});
               var snippet   = mod2['snippet-editor'];
               await mod2.auto();
@@ -316,9 +327,9 @@
               var node    = document.createElement('webcontainer-fs');
               node.setAttribute('component','page');
               viewport.body.append(node);
-              var mod2    = mod.create({mod,name:'webcontainer-fs'});
+              var mod2      = mod.create({mod,name:'webcontainer-fs'});
               var result    = await mod.build({root:node,mod:mod2});
-              var wcfs    = mod2['webcontainer-fs'];
+              var wcfs      = mod2['webcontainer-fs'];
               wcfs.initmod({filemod:snippet.filemod,ext,$,menu,log,debug,
                               webcontainer,
                               source:snippet.source,complete:snippet.complete});
@@ -329,6 +340,33 @@
         }//snippet-editor
 
 
+        btn['snippet-console']    = async function(){
+        
+              var viewport    = await vm.new();
+              viewport.pos({x:250,y:200,w:850,h:1100});
+              
+              var attrs     = {component:true,'v2.0':true,'web-editor':'fullsize=false',exportparts:"root: inner-label"};
+              var opts      = {par:viewport.body};
+              var snippet   = await mod.component('snippet-console',attrs,opts);
+              
+              snippet.css.insert_rule([':host {height:100%;}','#root {height:100%}']);
+              snippet.editor.css.insert_rule([':host {flex:1}','#root {height:100%}']);
+              
+              snippet.ctx     = {snippet,webcontainer,viewport,vm};
+              
+              
+              var attrs   = {component:'page'};
+              var opts    = {par:viewport.body,auto:false};
+              var wcfs    = await mod.component('webcontainer-fs',attrs,opts);
+              wcfs.initmod({filemod:snippet.filemod,ext,$,menu,log,debug,
+                              webcontainer,
+                              source:snippet.source,complete:snippet.complete});
+              await wcfs.init();
+              wcfs.initdom();
+              
+        }//snippet-console
+        
+        
         btn.test    = async function(){console.log('test');
 
               var list    = await webcontainer.fs.readdir('/',{withFileTypes:true});
@@ -562,7 +600,18 @@
 
               mod.stack.complete;
 
-              webcontainer.on('server-ready',(port,url)=>term.write('server-ready :'+url+'-'+port));
+              
+              webcontainer.on('server-ready',(port,url)=>{
+                                                                                console.log('server-ready',url,port);
+                    term.write('server-ready :'+url+' --- '+port);
+                    
+              });
+              webcontainer.on('port',(port,type,url)=>{
+                                                                                console.log(port,type,url)
+                    term.write('port :'type+' --- '+url+' --- '+port);
+                    
+              });
+              
 
               await webcontainer.mount(files);
                                                                                       term.write('spawn jsh ...\r\n')