save file

Author: javascript-2020

utils/misc/global-state-diff/v2.0/global-state-diff-v2.0.html

@@ -20,7 +20,7 @@
 
             <link rel=icon type='image/png' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAB41BMVEVHcExEPzkoWIEtobIxrLcud5M+cYQtfJUrjKIqe5grgZ0upLMmTHsmS3cpu8MvpbMqZ4o4ZXwzkaQveJMsn7Aob48nf50qhZ8qnLAlVYIppLUsma0mW4YspLUlN2coYIYxo7EqgJwohKEoSnciGVMjKWMyoK8kMmQumaoytLstj6Q1mqg0sLoyr7kuiqAzq7coOGUqNmAmOmc6oqwqWYE2lacwrbcqc5IoiKItjKMvlqgpobIsZoQrhJsqhZ8pcpIoiKIqgJkqSHElPG0vjqMnYYguqrcoYIcnS3cndZcsaYgpjKQmWoQpgZwuobImOm8ogp8qe5ktqbcnWIImVH4ro7QlOGwrmq0tq7glOW0odpUlS3omQnQpaowqpbYnUXwrpbUkJV4gFE8iG1wjHFskMWgiG1gvtsAru8Mus7wttL4rYIcqf50raIswlKgrkKcpf5wtlqsvl6otjKEpaYkplKopZYUuZIImQ3Aqk6k1iJ0mQXErqLYrYIMpi6I0qbYlX4gkQ3EspLQslKkojKYlOGsskacrmKsrYoUmWoQpeJcnY4spgZ0xh54ro7UocpUofp0lU34sa4glWYYmaJAnpbcnm7Amf54ngqAniKMnjacnhaEleJojJ2YniaQoobQlXogCX05qAAAAk3RSTlMAAc3TZSwJVLbC0sveOf44OQMoFte59sXm7PjG9t6ruK7C92lApmg6OUFpF3hSNTAZDmoOayCEZ+hkcvojisuw9Ycpe6TW08zI9YTd2dq63fTO4Oi939De3NvQ2NKe8cPZZUz668x5neuix2fjZJa7yZ5NQnD6j0xP6E9h1aXNsfqm4sz2xr23SODZ6NN97OXs1pCs7VkWAAABjElEQVQoz2NgoBdgMxZyMmTDISls2dvO7SHvZS6MRZJRQFExcJps9BQuTvFiTOmO/gnyc6YlRE+Z1W5RWYQuaxMbZT8RIh3K4e1iiiorGKskMimEU1qh0V3cz5FJrFAQRdqpe2Zf/GSlOO5WyQApacnpEvoo0tULZobHTJ49Nch/8oypNT7T57OgSDvLODSHyShJuYXJBEi5uYtZm6FIGzHZucgxcTErgIj62kARHVTdC+aFRwINj4gEGh7hOn0+qu6KhpkSYLtB0syd0611UaQNXGfGyQf7igAN7wnlkJwugubxEt82r/guCW6Pbm9uW1EuK/TIKvOM8pkzTZZnyiyRutI8jGizERUT9QRJt3A45AthiU9HccVpTTxTODlttbHFN6NQlZV0iEk5KyPO9MLOjlUjPmnDNFV1CIu1wE4PwtJP1zGGSiclz001UlY2yc61nzGPw1JLTY2FJYuPDxZwKilzVdV5eXkFBMxzLLT0NDT4+fkz+TI0YUlFJdEA6gZWmLO1WTQFaZ1vAIUhYF6nuTxlAAAAAElFTkSuQmCC'>
             <meta name=viewport content='width=device-width, initial-scale=1'>
-
+            
             <script type='application/ld+json'>
                   {
                         "@context"              : "https://schema.org",
@@ -36,13 +36,13 @@
                         "offers"                : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
                   }
             </script>
-
 
-            <script src='https://javascript-2020.github.io/stackoverflow/libs/stringify.js'></script>            
-
 
-            <script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
-
+            <script src='https://javascript-2020.github.io/stackoverflow/libs/stringify.js'></script>
+            
+            
+            <script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js'></script>
+            
             <script init>
                                                                                 console.clear();
                                                                                 console.log('global-state-diff.html');
@@ -58,26 +58,26 @@
         var keydown;
         var debug;
         var inspect;
-
+        
         var hdr;
 
 
 
         var detect;
-
-
-
+        
+        
+        
   //:
 
 
         async function init(){
                                                                                 debug('init',version);
-              
+                                                                                
               var menu    = menumod();
 
               mod.base.add({ext,$,datatype,keydown,menu,menumod});
 
-        
+              
               hdr   = mod['misc-hdr'];
 
               hdr.initmod({ext,$});
@@ -95,13 +95,13 @@
 
   //:
 
-            
+  
 (async()=>{
 
         mod.stack.add;
 
         ({ext}    = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
-          
+        
         var promise   = ext.load.libs(
               'js/dom/$.js',
               'js/core/datatype.js',
@@ -111,18 +111,18 @@
               'js/string/inspect/inspect.js'
         );
         [$,datatype,menumod,keydown,debug,inspect]   = await promise;
-  
+        
         mod.stack.complete;
-              
+        
 })();
-      
-      
+
+
             </script>
 
-                        
+            
             <style>
-
-
+            
+            
   html
     {height:100%;font-family:arial}
   body
@@ -131,7 +131,7 @@
     }
   body>*
     {max-width:1400px;width:100%;padding:0 20px;}
-
+    
 
   section
     {border:1px solid lightblue;padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:20px}
@@ -143,8 +143,8 @@
     {font-size:16px;padding:5px 10px;box-sizing:border-box}
   input[type=button]
     {cursor:pointer}
-
-
+    
+    
   .input
     {display:flex;align-items:center;gap:10px}
   .input > input
@@ -161,8 +161,8 @@
     {padding:2px;
       content:url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAABSlBMVEVHcEwnz/4C8P4g1P4L6P43wf5Mr/4a2v4Y3P4/uv5PrP4+vf5Auv4ozv5KsP4vyv45wP5Jsf5Auf49vP5Mrv4zxf44wf5Lr/46wP4h1P5Lr/46vv5Jsv4R5P5Hs/5Etv44wf5Hs/41w/4uyv47vv49vP5Ftf5GtP4c2f4rzP4tyv4m0f5Etv5Nrv4xxv4xxv4xx/4W3/5KsP5Mr/4/u/4uyv5Isv4K6f4l0f4qzv4W3/4V3/5Nrv5Mrv5Mrv5Mr/4W3v4e2P5BuP5Hsv4N5v4K6f4O5v42w/5Dt/4E7/4uyf4C8P4nz/4M5/4K6v4oz/4P5f4k0v4b2v5Gs/4E7v4I6/5Nrf4e1/4H7P4E7v5Auv5Dtv4sy/5Isv5GtP4wx/49vP4zxf47vv44wP42w/5LsP5Jsf4i1P4n0P4N5v4k0v4a2v4S4v4X3v6OfcqkAAAAVnRSTlMACo7CjQWN/VczjgIJMfIXJzHtjj5iVekR71Hvtz7CjelXjre2wiJj2PCFIWbR7+fEnXaodz3544/USfOC22Tm7CXOnqfUZ+/3VTV9bsTzqGDahpb2tyRB6bIAAAIDSURBVDjLrZVpV9pAFIYntdFiQkZsLCQECtJSlqAsFRBU3Kuta1sncYGuJEDt///aISkkkyHo6enzLTlP5s5758wNAC526pd3d1++/fzx/evNze1tp210wxURUMTWBz2v2EWtLc7jBTPmoJfNrqy8i0ajixgB00VISJIeW9JMKbcWDAYDNiFMQN1EqAAJcUfSBif0fsQWQjLxpjGnXUJa5CoIbTiP8KJ0OqfNMLQIZhGad/Ke3t///vWwGKv1+yPxfW55+TnmJWZW5ggxcqX3m6WSVTpSdPcxHCLExmf97AI8e1j8cK1f8X9Fq/Sotrf0k2v9KRiJ08L8mwhf2CQx8oK/yJyPw3Q67ULaV4Tr7tRCwFfkllLF4ushccwGPyUMzwzhMQz/X1Kz+QVMmh2LcjgsTxDZ3OpqIpFYfDu+KGwoxE5JvTtpF9NX9BEB792jn0gD4eNEsVAQHyXOO7fQFmNNLZOnPV5BqEyI+Yxm1qkluS0BCWRp8FEze6mTJQtVVd8MUfcEhBSGFOGMOWmaoc0AmRoXP5cmiHEReEXANOopzCsLRYlXjWolGXE2jK/r/ujEWAdOFIxWGrjO8ljXazG6MeynthEn2gAP9P7B4XCE2thzdG2v2jbK5LfHZ3hINbclSco6o/kIh1Einq4e1qxp5m2PkqZ/CPvbXvFot+xe7w/EpaiUrJ24NAAAAABJRU5ErkJggg==);
     }
-
-
+    
+    
   #output, #output2
     {white-space:pre;font-family:monospace;font-size:16px}
   #item, #item2
@@ -171,8 +171,8 @@
     {}
   #values
     {}
-
-
+    
+    
   iframe
     {display:none}
 
@@ -181,12 +181,12 @@
       </head>
 
       <body>
-
+      
             <misc-hdr component=grp style='position:relative'>
                   <img class=title src='images/global-state-diff.png' style='top:-5px;height:40px' alt=global-state-diff>
                   <time slot=date datetime=2025-10-18>18 Oct 2025</time>
             </misc-hdr>
-      
+            
             <section id=script>
 
                   <h3>
@@ -218,8 +218,8 @@ <h3>
                   </div>
 
             </section>
-
-              
+            
+            
             <section id=import>
 
                   <h3>
@@ -251,14 +251,14 @@ <h3>
                   </div>
 
             </section>
-
-              
+            
+            
       </body>
-
-              
+      
+      
       <script>
-
-
+      
+      
         var item;
         var item2;
 
@@ -267,23 +267,23 @@ <h3>
 
 
         function initdom(){
-
-
+        
+        
 
               $('#script .paste').onclick   = async e=>{var txt=await navigator.clipboard.readText();src.value=txt};
               $('#script .copy').onclick    = e=>navigator.clipboard.writeText(src.value);
-                                                                                      
+              
               item    = $('#item');
               item.remove();
 
               go.onclick    = function(){
 
                     process(src.value);
-              
+                    
               }//onclick
-
-
-
+              
+              
+              
               $('#import .paste').onclick   = async e=>{var txt=await navigator.clipboard.readText();src2.value=txt};
               $('#import .copy').onclick    = e=>navigator.clipboard.writeText(src2.value);
 
@@ -293,32 +293,32 @@ <h3>
               go2.onclick    = function(){
 
                     process2(src2.value);
-        
+                    
               }//onclick
-
-
+              
+              
 
         }//initdom
 
-
-  //:        
-        
 
+  //:
+  
+  
         function process(src){
 
-              
+        
               var iframe    = document.createElement('iframe');
               iframe.onload   = onload;
               document.body.append(iframe);
-        
+              
 
               function onload(){
 
                     var win   = iframe.contentWindow;
                     var doc   = iframe.contentDocument;
 
                     var beforeKeys    = new Set(Object.keys(win));
-                
+                    
 
                     var script    = document.createElement('script');
                     script.src    = src;
@@ -327,8 +327,8 @@ <h3>
 
                           var afterKeys   = new Set(Object.keys(win));
                           var added       = [...afterKeys].filter(k=>!beforeKeys.has(k));
-        
-                          var str   = '';                          
+                          
+                          var str   = '';
                           added.forEach(key=>{
 
                                 var s     = win[key].toString();
@@ -339,7 +339,7 @@ <h3>
                                 str  += `window.${key}   [ ${typeof win[key]} ]   :   ${s1}`+'\n';
 
                                                                                 console.log(`window.${key} =`,win[key]);
-                                
+                                                                                
                           });
 
                           var nitem   = item.cloneNode(true);
@@ -360,8 +360,8 @@ <h3>
               }//onload
 
         }//process
-                    
-              
+        
+        
 
 
         async function process2(src){
@@ -371,7 +371,7 @@ <h3>
 
               var str   = '';
               for(var key in mod){
-
+              
 
                     var s1    = '[ null ]';
 
@@ -382,8 +382,8 @@ <h3>
                                 s1    = tostring(mod[key]);
                                 str  += key+`   [ ${typeof mod[key]} ]      :   ${s1}`+'\n';
                                 for(var prop in mod[key]){
-                                      
-                                      var s2    = tostring(mod[key][prop]);                                  
+                                
+                                      var s2    = tostring(mod[key][prop]);
                                       str  += '      '+prop+`   [ ${typeof mod[key][prop]} ]      :   ${s2}`+'\n';
 
                                 }//for
@@ -403,10 +403,10 @@ <h3>
               $('#values').textContent    = str;
 
               output2.append(nitem);
-
-
+              
+              
               function tostring(v){
-                
+              
                     var s     = v.toString();
                     var s1    = s.slice(0,80);
                     if(s.length>s1.length){
@@ -417,51 +417,51 @@ <h3>
               }//tostring
 
         }//process
-                    
-
-
-
 
-
+        
+        
+        
+        
+        
 (async()=>{
 
         var {init,parse}    = await import('https://unpkg.com/es-module-lexer?module');
 
         detect    = async function(code){
 
               await init();
-          
+              
               var [imports,exports] = parse(code);
-          
+              
               var isESM         = imports.length>0 || exports.length>0;
               var isCommonJS    = /require\(|module\.exports|exports\./.test(code);
 
               var isNode        = /process\.|__dirname|require\(/.test(code);
               var isBrowser     = /window\.|document\.|navigator\./.test(code);
-          
+              
               var type      = 'Unknown';
               if (isESM){
                     type    = 'ESM';
               }else if(isCommonJS){
                     type    = 'CommonJS';
               }
-          
+              
               if(isNode){
                     type   += ' (Node.js)';
               }else if(isBrowser){
                     type   += ' (Browser)';
               }
-          
+              
               return type;
 
         }//detect
-
-})();              
+        
+})();
 
 
       </script>
-
-
+      
+      
 
 </html>