Skip to content

wentout/babel-bug

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This repo describes Babel.js bug for distinguishing between Arrow Functions, Classes and Regular Functions.

Installation

git clone
npm i

And after installation, for dealing with bug:

npm run bug

for dealing with original JavaScript behaviour:

npm run original

Description

Accordingly with the following gis: https://gist.github.com/wentout/ea3afe9c822a6b6ef32f9e4f3e98b1ba

We might have difference between Functions, Regular Functions or Arrow Functions:

'use strict';

const myArrow = () => {};
const myFn = function () {};

class MyClass {};

And if we might be willing to check what sort of function we are dealing with, we have the ability to check the difference with the following steps:

const isArrowFunction = (fn) => {
	if (typeof fn !== 'function') {
		return false;
	}
	if (fn.prototype !== undefined) {
		return false;
	}
	return true;
};

const isRegularFunction = (fn) => {
	if (typeof fn !== 'function') {
		return false;
	}
	if (typeof fn.prototype !== 'object') {
		return false;
	}
	if (fn.prototype.constructor !== fn) {
		return false;
	}
	return Object.getOwnPropertyDescriptor(fn, 'prototype').writable === true;
};

const isClass = (fn) => {
	if (typeof fn !== 'function') {
		return false;
	}
	if (typeof fn.prototype !== 'object') {
		return false;
	}
	if (fn.prototype.constructor !== fn) {
		return false;
	}
	return Object.getOwnPropertyDescriptor(fn, 'prototype').writable === false;
};

And that is how babel transforms functions:

var myArrow = function myArrow() {};

var myFn = function myFn() {};

var MyClass = function MyClass() {
  _classCallCheck(this, MyClass);
};

Therefore regular checking via JavaScript runtime wouldn't work anymore, because everything becomes functions.

Screenshots

Before babel transforms

After

How to implement correct behaviour?

for Arrow Functions

const workingArrow = () => {};
// right after arrow function definition
Object.defineProperty(workingArrow, 'prototype', {
    value: undefined
});

for Classes

class WorkingClass {}
// right after class definition
Object.defineProperty(WorkingClass, 'prototype', {
    writable: false
});

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%