acorn-browser

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

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

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

test it out with this tool

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

For esm

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

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

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

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

test it out with this tool

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

Further Reading

https://github.com/acornjs/acorn

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

See also

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

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

examples

            
     <script type=module>
      
      
            import {acorn} from 'https://libs.ext-code.com/external/js/acorn/acorn.m.js';
            
            
            const code    = `
            
                  function greet(name) {
                    console.log("Hello " + name);
                  }
                  
                  const add = (a, b) => a + b;
                  
            `;
      
      
            const options   = {
                  ecmaVersion   : "latest",
                  sourceType    : "module",
                  locations     : true,
                  ranges        : true,
                                                                                // Collect tokens and comments
                  onToken       : [],
                  onComment     : [],
            
                                                                                // If using JSX:
                                                                                // when using acorn-jsx wrapper
                  // plugins: { jsx: true }  
            };

      
            const ast   = acorn.parse(code,options);
            
      
            console.log(ast);    
            console.log(JSON.stringify(ast,null,4));      
      
      
      </script>


      

      


<script type=module>

      
      var [{acorn},{estraverse}]    = await Promise.all([
                                            import('https://libs.ext-code.com/external/js/acorn/acorn.m.js'),
                                            import('https://libs.ext-code.com/external/js/estraverse/estraverse.m.js'),
                                      ]);
      
      const code    = `
      
            function greet(name) {
              console.log("Hello " + name);
            }
            
            const add = (a, b) => a + b;
            
      `;
      
      const ast   = acorn.parse(code,{
            ecmaVersion     : 'latest',
            sourceType      : 'module',
            locations       : true,
            ranges          : true,
      });
      
      
      console.log(ast);    
      //console.log(JSON.stringify(ast,null,4));


      estraverse.traverse(ast, {
            enter(node) {
                  if (node.type === 'FunctionDeclaration') {
                        console.log('FunctionDeclaration:', node.id.name);
                  }
      
                  if (
                        node.type === 'VariableDeclarator' &&
                        node.init &&
                        (node.init.type === 'ArrowFunctionExpression' ||
                              node.init.type === 'FunctionExpression')
                  ) {
                        console.log('Function assigned to variable:', node.id.name);
                  }
            }
      });



</script>
      
      

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

            const code    = `
            
                  function greet(name) {
                    console.log("Hello " + name);
                  }
                  
                  const add = (a, b) => a + b;
                  
            `;
      
            const ast   = acorn.parse(code,{ecmaVersion:'latest',sourceType:'module',});

            console.log(ast);    
            console.log(JSON.stringify(ast,null,4));      
      
      </script>