bpc
babel-plugin-class-properties-default-value
npm i babel-plugin-class-properties-default-value
bpc

babel-plugin-class-properties-default-value

babel-plugin-danger-remove-unused-import

by Cong Yu

0.0.1 (see all)License:MITTypeScript:Not Found
npm i babel-plugin-class-properties-default-value
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. Let's see the follow case:

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.

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.

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

{
  "plugins": [
    // NOTE: the order is important
    "class-properties-default-value",
    "transform-class-properties"
  ]
}
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate