#+EXPORT_FILE_NAME: docs/index.html #+HTML_HEAD: <link rel=stylesheet href="./colors.css" /> #+OPTIONS: ^:nil ** Sample babel transform to turn snake_case into camelCase First we write a simple function that takes a snake_case string and turns it into camel case: #+BEGIN_SRC js :tangle src/index.js :comments link function snakeToCamel(str) { const [first, ...rest] = str.split("_"); return `${first}${rest.map(capitalize).join("")}`; } function capitalize([v, ...vs]) { return `${v.toLocaleUpperCase()}${vs.join("")}`; } #+END_SRC Next, we define our babel plugin. We don't need any direct dependency on babel, since babel injects its functionality as an argument to the plugin. Here, we're accessing =@babel/types= from the argument passed to our function and then creating a =visitor= that handles each =Identifier= node. For each node, we rename it using babel's scope-handling functions, which handles most of the cases we care about, except for toplevel definitions like src_js{foo = bar}. To handle those, we replace the path with a camel-cased version of the node. #+BEGIN_SRC js :tangle src/index.js :comments link module.exports = function camelCasingVisitor({ types: t }) { return { visitor: { Identifier(path) { if (isSnakeCased(path.node)) { path.scope.rename(path.node.name, snakeToCamel(path.node.name)); path.replaceWith(t.identifier(snakeToCamel(path.node.name))); } }, }, }; }; function isSnakeCased(node) { return /_/.test(node.name) } #+END_SRC ** Sample results Given this plugin, if we create a new babel project that includes it (relative path here because it's in the same project): #+BEGIN_SRC json :tangle sample/babel.config.json { "compact": false, "retainLines": true, "plugins": ["../src/index"] } #+END_SRC Then, given some javascript with snake_case identifiers: #+BEGIN_SRC js :tangle sample/sample1.js :comments link import { a_thing } from "some_unconventional_package"; const my_constant = a_thing(4); function some_function_stuff() { let my_local_variable; return function inner_function() { const other_local_variable = 1; return my_local_variable + other_local_variable + "!"; }; } // Renaming this one is sort of dangerous 🤔 undeclared_variable = 234; #+END_SRC We get this output: #+BEGIN_SRC js :tangle no import { aThing } from "some_unconventional_package"; const myConstant = aThing(4); function someFunctionStuff() { let myLocalVariable; return function innerFunction() { const otherLocalVariable = 1; return myLocalVariable + otherLocalVariable + "!"; }; } // Renaming this one is sort of dangerous 🤔 undeclaredVariable = 234; #+END_SRC ** Limitations *** Renaming undeclared globals is problematic the js_src(undeclared_variable} example above is a bit problematic: with this transform, there's no way to access names you don't control that might exist in the global environment of your code. We could add some sort of comment directive for this, but it would mar the aesthetics of the demo. We could also just leave them alone, but that would mar the aesthetics too. *** Name clashes possible The names don't always manage to avoid collisions, if a matching camelCase identifier already exists. For example this code: #+BEGIN_SRC js :tangle sample/sample2.js :comments link const a_name = 'foo' function aName() {} // This will be renamed to aName and clash with the function a_name.toLower(); #+END_SRC Produces this result: #+BEGIN_SRC js :tangle no const aName = 'foo'; function aName() {} // This will be renamed to aName and clash with the function aName.toLower(); #+END_SRC