save file

Author: javascript-2020

blog/25-08-31/simple-browser-rollup-example/simple-browser-rollup-example.html

@@ -16,19 +16,16 @@
             <title>
                   simple browser rollup example
             </title>
+            
             <meta name=description content='Learn how to use Rollup directly in the browser with a live tool and example. Bundle JavaScript modules client-side without installing anything.'>
 
+            <base href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/'>
+            <link rel=canonical href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/simple-browser-rollup-example.html'>
 
             <link rel=icon type='image/png' href='/blog/image/blog-30.png'>
             <meta name=viewport content='width=device-width, initial-scale=1'>
 
-            
-            <base href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/'>
-            <link rel=canonical href='https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/simple-browser-rollup-example.html'>
-            
-
             <script type='application/ld+json'>
-            
                   {
                         "@context"            : "https://schema.org",
                         "@type"               : "TechArticle",
@@ -40,15 +37,9 @@
                         "mainEntityOfPage"    : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-08-31/simple-browser-rollup-example/simple-browser-rollup-example.html"},
                         "publisher"           : {"@type":"Organization","name":"ext-code.com","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
                   }
-            
             </script>
 
 
-<!--
-  //:
--->
-
-
             <script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
 
 
@@ -59,20 +50,25 @@
                                                                                 console.log('simple-browser-rollup-example.html');
                                                                                 console.log();
                                                                                 console.json=v=>console.log(JSON.stringify(v,null,4));
-        var version='v1.0',df=true
+        var df=true,version='v1.0'
         ;
 
+        var ace;
 
         var ext;
         var $;
         var datatype;
         var menumod;
-        var code;
+        var keydown;
         var debug;
 
 
         var rollup;
         var test;
+        
+        
+        var log;
+
 
   //:
 
@@ -84,17 +80,20 @@
 
               rollup    = mod.rollup;
               test      = mod.test;
+              log       = mod.log;
 
               rollup.initmod({ext,$,ace,menu});
               test.initmod({ext,$,ace,menu});
+              log.initmod({ext,$});
 
               await Promise.all([
                     rollup.init(),
                     test.init(),
+                    log.init(),
               ]);
 
 
-              await initdom(document.body);
+              initdom(document.body);
 
 
         }//init
@@ -114,13 +113,10 @@
               'js/core/datatype.js',
               'js/dom/menumod/menumod.js',
               'js/dom/keydown/keydown.js',
-              'js/dom/code/v2.0/code-v2.0.js.api',
               'js/debug/debug.js',
         );
         [$,datatype,menumod,keydown,code]   = await promise;
 
-        code.initmod({ext,$,datatype,menumod});
-        
         mod.stack.complete;
 
 })();
@@ -136,11 +132,47 @@
   html
     {height:100%;font-family:arial}
   body
-    {min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;align-items:center;
+    {min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:20px;margin:20px;align-items:center;
       padding-bottom:200px;
     }
   body>*
-    {max-width:1400px;width:100%;padding:0 20px;}
+    {max-width:1400px;width:100%}
+    
+  [component]
+    {display:none}
+    
+  .description 
+    {max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
+      background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
+  .description>p
+    {margin:0}
+  .description > p+p
+    {margin:10px 0}
+
+  code
+    {font-family:monospace;background:whitesmoke}
+  code.inline
+    {display:inline;padding:5px 10px}
+
+  a
+    {color:#4a90e2;text-decoration:none;font-weight:500}
+  a:hover 
+    {text-decoration:underline}
+  .link-domain
+    {font-size:0.85rem;color:#777;margin-left:0.25rem}
+  .link-domain::before 
+    {content:'['}
+  .link-domain::after
+    {content:']'}
+  .link-txt
+    {}
+
+  input
+    {font-size:16px;padding:5px 7px;box-sizing:border-box;}
+  input[type=button]
+    {cursor:pointer}
+
+
 
 
   #rollup
@@ -153,10 +185,10 @@
     {font-size:12px}
   .link-txt
     {}
+
 
             </style>
 
-
       </head>
 
 
@@ -174,46 +206,47 @@ <h1 class=title>
 
 
 
-            <div id=description>
-
-                  demonstrates how to use 
-                  <a href='https://rollupjs.org/'>
-                        <span class=link-domain>
-                              [ rollupjs.org ]
-                        </span>
-                        <span class=link-text>
-                              rollup
-                        </span>
-                  </a>
-                  in a browser to rollup nodejs libraries for client side use
+            <div class=description>
+
+                  <p>
+                        Learn how to use Rollup directly in the browser with a live tool and example.
+                        Bundle JavaScript modules client-side without installing anything.
+                        
+                        <a href='https://rollupjs.org/'>
+                              <span class=link-domain>
+                                    rollupjs.org
+                              </span>
+                              <span class=link-text>
+                                    rollup
+                              </span>
+                        </a>
+                        
+                        in a browser to rollup nodejs libraries for client side use
+                  </p>
 
             </div>
 
+
             <snippet-html-console id=rollup component v2.0 src='webcontainer-rollup.html'></snippet-html-console>
 
 
             <div>
-
                   if you download the espree.m.js code and host it on a local server, you can use the following the code to test it
-                  
-
             </div>
 
 
             <snippet-html-console id=test component v2.0 src='test.html'></snippet-html-console>
 
 
-
-
-            
       </body>
 
 
       <script>
 
 
-
-
+  //:
+  
+  
         async function initdom(rootnode){
 
               var root    = rootnode;
@@ -223,12 +256,13 @@ <h1 class=title>
               test.initdom();
 
 
+              log.initdom();
+
+              
         }//initdom      
 
 
       </script>
-
-
 
 </html>