console-function-names.js

const bypass = [
  // function names to avoid logging
];
const collapsed = [
  // function names to groupCollapsed
];

module.exports = function(babel) {
  const { types: t } = babel;
  const wrapFunctionBody = babel.template(`{
    try{  
      console.group(NAME)
      BODY    
    }
    finally {
      console.groupEnd();
    }
  }`);

  const wrapFunctionBodyCollapsed = babel.template(`{
    try{  
      console.groupCollapsed(NAME)
      BODY    
    }
    finally {
      console.groupEnd();
    }
  }`);

  return {
    visitor: {
      FunctionDeclaration(path) {
        if (path.node.id && path.node.id.name) {
          if (bypass.includes(path.node.id.name)) {
            return;
          }
          if (collapsed.includes(path.node.id.name)) {
            path.get("body").replaceWith(
              wrapFunctionBodyCollapsed({
                BODY: path.node.body.body,
                NAME: t.stringLiteral(path.node.id.name)
              })
            );
            return;
          }

          path.get("body").replaceWith(
            wrapFunctionBody({
              BODY: path.node.body.body,
              NAME: t.stringLiteral(path.node.id.name)
            })
          );
        }
      }
    }
  };
};

ref: https://twitter.com/threepointone/status/1200032119805947905

This is how I use it with the React codebase

• save this to a file somewhere (I put it in ./scripts/babel)
• add the path to babel.config.js ('./scripts/babel/console-function-names')
• run yarn build

This will generate a ./build folder with assets (npm, umd, etc). Use them in your app!

My lists of bypass/collapsed for React.

const bypass = [
  // scheduler
  'peek',
  // "advanceTimers",
  'markTaskYield',
  'markSchedulerSuspended',
  // "workLoop",
  'markTaskRun',
  'markSchedulerUnsuspended',
  'markTaskStart',
  'pop',
  'push',
  'siftUp',
  'siftDown',
  // "flushWork",
  'markTaskCompleted',
  // "unstable_shouldYield",
  // "unstable_getCurrentPriorityLevel",
  // "unstable_scheduleCallback",
  // "unstable_runWithPriority",
  'compare',
  // others
  'PropertyInfoRecord',
  'unsafeCastStringToDOMTopLevelType',
  'addEventPoolingTo',
  'prefixKey',
  'makePrefixMap',
  'getVendorPrefixedEventName',
];
const collapsed = ['injectEventPluginsByName', 'dispatchEvent'];

• add the path to babel.config.js ('./scripts/babel/console-function-names')

Hi Sunil, Glad you made it to Facebook. You're really an inspiration for me.

Instead of functions, I'm trying to print the component names!

Can you help?