recast-browser

This package provides recast 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/recast/recast.js'></script>
      

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

• https://cdn.jsdelivr.net/npm/recast-browser/recast.js

test it out with this tool

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

For esm

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

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

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

• https://cdn.jsdelivr.net/npm/recast-browser/recast.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 recast-browser
      

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

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

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

Further Reading

https://github.com/estools/recast

https://www.npmjs.com/package/recast

See also

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

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

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

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

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

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

examples

            
<script type=module>

        import {recast} from 'https://libs.ext-code.com/external/js/recast/recast.m.js';
        
        var code    = `
        
              function greet(){
              
                    console.log('hello');
                
              }//greet
              
        `;
        
        var ast   = recast.parse(code);
        
                                                                                // Find the console.log and change the string
        recast.types.visit(ast,{
              visitLiteral(path) {
                
                    if(path.value.value==='hello'){
                          path.value.value    = 'hi there';
                    }
                    return false;
                    
              }
        });
        
        console.log(recast.print(ast).code);
        
              
              
              
</script>

      
<script type=module>

        import {recast} from 'https://libs.ext-code.com/external/js/recast/recast.m.js';
        
        const code = `
        
              function greet(){
              
                    console.log('hello');
                
              }//greet
              
        `;
        
        const ast   = recast.parse(code);
        
                                                                                // Find the console.log and change the string
        recast.types.visit(ast,{
              visitLiteral(path) {
                
                    if(path.value.value==='hello'){
                          path.value.value    = 'hi there';
                    }
                    return false;
                    
              }
        });
        
        console.log(recast.print(ast).code);
        
              
              
              
</script>
      

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

<script>

        
        var code    = `
        
              function greet(){
              
                    console.log('hello');
                
              }//greet
              
        `;
        
        var ast   = recast.parse(code);
        
                                                                                // Find the console.log and change the string
        recast.types.visit(ast,{
              visitLiteral(path) {
                
                    if(path.value.value==='hello'){
                          path.value.value    = 'hi there';
                    }
                    return false;
                    
              }
        });
        
        console.log(recast.print(ast).code);
        
              
              
              
</script>