https://github.com/iminside/babel-bug
https://github.com/iminside/babel-bug
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/iminside/babel-bug
- Owner: iminside
- Created: 2020-09-25T10:25:22.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-28T10:19:00.000Z (over 5 years ago)
- Last Synced: 2024-12-26T00:40:42.148Z (over 1 year ago)
- Language: JavaScript
- Size: 37.1 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
This repo describes [Babel.js](https://github.com/babel/babel) bug for distinguishing between Arrow Functions, Classes and Regular Functions.
# Installation
```bash
git clone
npm i
```
And after installation, for dealing with **bug**:
```bash
npm run bug
```
for dealing with **original** JavaScript behaviour:
```bash
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:
```javascript
'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:
```javascript
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:
```javascript
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
```javascript
const workingArrow = () => {};
// right after arrow function definition
Object.defineProperty(workingArrow, 'prototype', {
value: undefined
});
```
### for Classes
```javascript
class WorkingClass {}
// right after class definition
Object.defineProperty(WorkingClass, 'prototype', {
writable: false
});
```