Thursday, February 25, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Learn to Code

How to Add Native Keyword Aliases to Babel

April 16, 2020
in Learn to Code
How to Change the WordPress Admin Login Logo
586
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

Those of you who follow this blog know that not every blog post is an endorsement of a technique but simply a tutorial how to accomplish something. Sometimes the technique described is probably not something you should do. This is one of those blog posts.

The Babel parser is an essential tool in the web stack these days. Babel helps us to use JavaScript patterns before they hit the browser (optional chaining) as well as JSX for React. This got me to thinking: how easy would it be to write a Babel extension to allow us to use keyword alias, like fn instead of function? Let’s have a look!

You might also like

How to Install a NPM Module from GitHub Branch

How to Push to a Git Remote Branch of a Different Name

Fix “no such file or directory, scandir”

Creating a keyword alias with Babel is both easier and more difficult than you would probably think. On the simple side, it’s essentially just one line of code. On the negative side, you need to modify Babel’s core parser code.

As our example, let’s says we want to alias fn for JavaScript’s function keyword. An example code snippet would look like:

// Named function
fn myFunction() {
    return true;
}

// Function as variable
const myOtherFunction = fn() {

}

// Instantly executing function
(fn() {

})();

After parsing we’d want all instances of fn to be replaced with function. To create this alias, we’d need to modify the createKeyword following file in

// File: packages/babel-parser/src/tokenizer/types.js
// We'll be adding one line
// ...
function createKeyword(name: string, options: TokenOptions = {}): TokenType {
  options.keyword = name;
  const token = new TokenType(name, options);
  keywords.set(name, token);

  // ADD THIS LINE:
  if (name === "function") keywords.set("fn", token);

  return token;
}
// ...

To parse a sample file, I can run:

node packages/babel-parser/bin/babel-parser.js /path/to/sample-file.js

The parser will provide the following when it encounters an instance of fn:

{
        "type": "FunctionDeclaration",
        "start": 0,
        "end": 36,
        "loc": {
          "start": {
            "line": 1,
            "column": 0
          },
          "end": {
            "line": 3,
            "column": 1
          }
        },
        "id": {
          "type": "Identifier",
          "start": 3,
          "end": 13,
          "loc": {
            "start": {
              "line": 1,
              "column": 3
            },
            "end": {
              "line": 1,
              "column": 13
            },
            "identifierName": "myFunction"
          },
          "name": "myFunction"
        }
// ...

You’re probably asking yourself “why would I ever do that?!” Well, you probably wouldn’t — modifying a source library for your own use is a maintenance nightmare and using rogue keywords in your source….is also a maintenance nightmare.

All that being said, if you’re looking to experiment with adding your own keyword aliases, modifying the Babel source is your best bet. I’d love if there were a way to write an extension to accomplish this. A big thank you to Logan Smyth for helping me navigate the Babel source!

Credit: DavidWalsh By: David Walsh

Previous Post

Kernel vulnerabilities in Android devices using Qualcomm chips explored

Next Post

Deploying the machine learning model in Heroku using Flask

Related Posts

How to Change the WordPress Admin Login Logo
Learn to Code

How to Install a NPM Module from GitHub Branch

February 12, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

How to Push to a Git Remote Branch of a Different Name

February 9, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Fix “no such file or directory, scandir”

February 8, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Confessions of a Web Developer XVIII

February 3, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

JavaScript Wake Lock API

January 25, 2021
Next Post
Deploying the machine learning model in Heroku using Flask

Deploying the machine learning model in Heroku using Flask

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

Facebook bans Myanmar military-controlled accounts from its platforms
Internet Security

Facebook bans Myanmar military-controlled accounts from its platforms

February 25, 2021
The Top Free Tools for Sysadmins in 2021
Internet Privacy

The Top Free Tools for Sysadmins in 2021

February 25, 2021
RAND Corp. Finds DoD “Significantly Challenged” in AI Posture 
Artificial Intelligence

RAND Corp. Finds DoD “Significantly Challenged” in AI Posture 

February 25, 2021
Machine learning‐based analysis of alveolar and vascular injury in SARS‐CoV‐2 acute respiratory failure – Calabrese – – The Journal of Pathology
Machine Learning

Machine learning‐based analysis of alveolar and vascular injury in SARS‐CoV‐2 acute respiratory failure – Calabrese – – The Journal of Pathology

February 25, 2021
Cloud, data amongst APAC digital skills most needed
Internet Security

Cloud, data amongst APAC digital skills most needed

February 25, 2021
SolarWinds Hackers Targeted Cloud Services as a Key Objective 
Artificial Intelligence

SolarWinds Hackers Targeted Cloud Services as a Key Objective 

February 25, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • Facebook bans Myanmar military-controlled accounts from its platforms February 25, 2021
  • The Top Free Tools for Sysadmins in 2021 February 25, 2021
  • RAND Corp. Finds DoD “Significantly Challenged” in AI Posture  February 25, 2021
  • Machine learning‐based analysis of alveolar and vascular injury in SARS‐CoV‐2 acute respiratory failure – Calabrese – – The Journal of Pathology February 25, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates