https://github.com/imcuttle/babel-plugin-class-properties-default-value
babel-plugin-class-properties-default-value
https://github.com/imcuttle/babel-plugin-class-properties-default-value
Last synced: 8 months ago
JSON representation
babel-plugin-class-properties-default-value
- Host: GitHub
- URL: https://github.com/imcuttle/babel-plugin-class-properties-default-value
- Owner: imcuttle
- License: mit
- Created: 2018-02-09T12:32:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T14:25:40.000Z (over 4 years ago)
- Last Synced: 2025-03-23T02:33:59.088Z (about 1 year ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
- License: License
Awesome Lists containing this project
README
# babel-plugin-class-properties-default-value
The plugin for transform properties of class **which has parent class**.
## Why need this
When we use Babel to support [class properties](https://babeljs.io/docs/plugins/transform-class-properties/).
Let's see the follow case:
```javascript
class P {
value = 'value In P'
constructor(obj) {
Object.assign(this, obj)
}
}
class S extends P {
val = 'value in S'
}
console.log(new S({ val: 'cus' }).val) // what should be printed?
```
I think the printed val should be 'cus' at first.
But actually, It's 'value in S'.
the above code will transform to the follow code by [transform class properties](https://babeljs.io/docs/plugins/transform-class-properties/).
```javascript
class P {
constructor(obj) {
this.value = 'value In P'
Object.assign(this, obj)
}
}
class S extends P {
constructor(...args) {
// After called super() that We can use this expression
super(...args)
this.val = 'value in S'
}
}
console.log(new S({ val: 'cus' }).val)
```
`super(...args)` meaning call the constructor of P and after called it `val === 'cus'`.
Unfortunately, `this.val = 'value in S'` causes the shit happening.
And this is ES6 inheritance's standard.
So if I want to regard `'value in S'` as DEFAULT VALUE by this way.
```javascript
class S extends P {
constructor(...args) {
// After called super() that We can use this expression
super(...args)
this.val = this.hasOwnProperty('val') ? this.val : 'value in S'
}
}
```
## Options
- condType (default: 'typeofUndefined') 'typeofUndefined' | 'in' | 'hasOwnProperty'
- 'typeofUndefined'
this.val = typeof this.val !== 'undefined' ? this.val : 'value in S'
- 'in'
this.val = 'val' in this ? this.val : 'value in S'
- 'hasOwnProperty'
this.val = this.hasOwnProperty('val') ? this.val : 'value in S'
- effectThisExpr (default: false)
Whether effecting the work on this expression
`false` will ignore `this.val = this.abc`
- onlyEffectConst (default: false)
Whether effecting the constant only
`true` will ignore options.effectThisExpr, only effect constant expressions
- effectDecorator (default: false)
Whether effecting the work on decorator
`false` will ignore `@decorator this.val = 'val'`
## Note
```json5
{
"plugins": [
// NOTE: the order is important
"class-properties-default-value",
"transform-class-properties"
]
}
```