estree-walker-browser

This package provides estree-walker bundled for use in the browser without the need to npm install anything

you can use this tool to see what is exposed in both the script src and esm modules

global state diff -- https://ext-code.com/utils/misc/global-state-diff/global-state-diff.html

this tool can be used to experiment with the package

nodejs terminal -- https://ext-code.com/utils/misc/nodejs-terminal/nodejs-terminal.html

For script

      <script src='https://libs.ext-code.com/external/js/estree-walker/estree-walker.js'></script>
      

• https://libs.ext-code.com/external/js/estree-walker/estree-walker.js

• https://cdn.jsdelivr.net/npm/acorn-browser/estree-walker.js

test it out with this tool

html editor -- https://ext-code.com/utils/editors/html-editor/html-editor.html

For esm

      import {walker} from 'https://libs.ext-code.com/external/js/estree-walker/estree-walker.m.js';

      //
      
      var {walker}    = await import('https://libs.ext-code.com/external/js/estree-walker/estree-walker.m.js');

• https://libs.ext-code.com/external/js/estree-walker/estree-walker.m.js

• https://cdn.jsdelivr.net/npm/espree-browser/estree-walker.m.js

test it out with this tool

js console -- https://ext-code.com/utils/editors/js-console/js-console.html

locally hosted

the scripts can be hosted locally, by doing

      npm i estree-walker-browser
      

the scripts can then either be copied to a prefered location or reference via

      import {walker} from '/node_modules/estree-walker-browser/estree-walker.m.js';
      
      //
      
      var {walker}    = await import('/node_modules/estree-walker-browser/estree-walker.m.js');
      

      <script src='/node_modules/estree-walker-browser/estree-walker.js'></script>
      

Further Reading

https://github.com/Rich-Harris/estree-walker

https://www.npmjs.com/package/estree-walker

See also

https://www.npmjs.com/package/estraverse-browser

https://www.npmjs.com/package/espree-browser

https://www.npmjs.com/package/acorn-browser

examples

            
<script type=module>

        import {walker} from 'https://libs.ext-code.com/external/js/estree-walker/estree-walker.m.js';
        import {acorn} from 'https://libs.ext-code.com/external/js/acorn/acorn.m.js';


        const code = `
        
              const x     = 1;
              let y,z     = 3;
              var w       = 10;

            
              function foo(a,b){
              
                    let c   = a+b;
                    
              }//foo
            
              try{
              
                    throw new Error();
                    
              }//try
              
              catch(err){
              
                    let handled   = true;
                    
              }//catch
              
        `;
        
        var ast   = acorn.parse(code,{ecmaVersion:'latest',sourceType:'module'}); // https://github.com/acornjs/acorn



        walker.walk(ast, {
              enter(node, parent, prop, index) {
                    console.log('enter:', node.type);
              },
              leave(node, parent, prop, index) {
                    console.log('leave:', node.type);
              }
        });

        
        walker.walk(ast,{
              enter(node) {
                
                    if (node.type === 'Identifier' && node.name === 'x') {
                      node.name = 'xx';
                    }
                    
              }//enter
        });
        


</script>
      
            

      


<script type=module>

        var [{walker},{acorn}]    = await Promise.all([
                                          import('https://libs.ext-code.com/external/js/estree-walker/estree-walker.m.js'),
                                          import('https://libs.ext-code.com/external/js/acorn/acorn.m.js'),
                                    ]);


        const code = `
        
              const x     = 1;
              let y,z     = 3;
              var w       = 10;

            
              function foo(a,b){
              
                    let c   = a+b;
                    
              }//foo
            
              try{
              
                    throw new Error();
                    
              }//try
              
              catch(err){
              
                    let handled   = true;
                    
              }//catch
              
        `;
        
        var ast   = acorn.parse(code,{ecmaVersion:'latest',sourceType:'module'}); // https://github.com/acornjs/acorn



        walker.walk(ast, {
              enter(node, parent, prop, index) {
                    console.log('enter:', node.type);
              },
              leave(node, parent, prop, index) {
                    console.log('leave:', node.type);
              }
        });

        
        walker.walk(ast,{
              enter(node) {
                
                    if (node.type === 'Identifier' && node.name === 'x') {
                      node.name = 'xx';
                    }
                    
              }//enter
        });
        


</script>
      
      

<script src='https://libs.ext-code.com/external/js/estree-walker/estree-walker.js'></script>
<script src='https://libs.ext-code.com/external/js/acorn/acorn.js'></script>

<script>

        const code = `
        
              const x     = 1;
              let y,z     = 3;
              var w       = 10;

            
              function foo(a,b){
              
                    let c   = a+b;
                    
              }//foo
            
              try{
              
                    throw new Error();
                    
              }//try
              
              catch(err){
              
                    let handled   = true;
                    
              }//catch
              
        `;
        
        var ast   = acorn.parse(code,{ecmaVersion:'latest',sourceType:'module'}); // https://github.com/acornjs/acorn



        walker.walk(ast, {
              enter(node, parent, prop, index) {
                    console.log('enter:', node.type);
              },
              leave(node, parent, prop, index) {
                    console.log('leave:', node.type);
              }
        });

        
        walker.walk(ast,{
              enter(node) {
                
                    if (node.type === 'Identifier' && node.name === 'x') {
                      node.name = 'xx';
                    }
                    
              }//enter
        });
        


</script>