Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)
})
);
}
}
}
};
};
@threepointone

This comment has been minimized.

Copy link
Owner Author

@threepointone threepointone commented Nov 28, 2019

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!

@threepointone

This comment has been minimized.

Copy link
Owner Author

@threepointone threepointone commented Dec 11, 2019

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'];
@discrete-javascript

This comment has been minimized.

Copy link

@discrete-javascript discrete-javascript commented Jun 12, 2020

  • 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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment