title: Babel - decorator of decorated class properties is called before instantiating class
body: <p>Excuse me for creating a new question, I was not able to find a question addressing this matter. </p>
  
  <p>I am having difficulties testing my dependency injection using mocha and experimental es6+ decorators transpiled using babel. The class property decorator is being called before it should've been.</p>
  
  <p>injection.test.js (mocha test, using <code>--require babel-register</code>)</p>
  
  <pre><code>import * as DependencyInjection from '../build/decorators/DependencyInjection';
  
  @DependencyInjection.Injectable(service =&gt; service.injected = true)
  class SampleService {
  
      property = 'default';
  
      constructor(property, ...data) {
          this.property = property || this.property;
      }
  }
  
  class Dependant {
  
      /** @type {SampleService} */
      @DependencyInjection.Inject(SampleService)
      sampleService;
  }
  
  describe('dependency injection', () =&gt; {
  
      describe('is decoratored as injectable', () =&gt; {
          it('should be injectable', done =&gt; done(SampleService.injectable ? void 0 : new Error('Injectable is not set')));
  
          it('should contain a predicate', done =&gt; done(SampleService.predicate ? void 0 : new Error('Predicate is not set')));
      });
  
      describe('inject injectable', () =&gt; {
          it ('should inject the injectable provider', done =&gt; {
              const dependant = new Dependant();
  
              done(!!dependant.sampleService ? void 0 : new Error('Injectable provider was not injected'));
          })
      });
  });
  </code></pre>
  
  <p>When running the test, the decorated class is transformed as inteded. However, the <code>sampleService</code> property of the instance of <code>Dependant</code>, created in the second test, is undefined. </p>
  
  <p>The decorator in question should be called/invoked once an instance of the class is being created, but the decorator is called when the class is defined and the property is decorated. The expected behaviour is maintained when using <code>TypeScript</code>.</p>
  
  <p>Below I've listed the (simplified) decorators and my babel configuration.</p>
  
  <p>.babelrc</p>
  
  <pre><code>{
      "presets": [
          "env",
          "stage-0",
          "es2017"
      ],
      "plugins": [
          "syntax-decorators",
          "transform-decorators-legacy",
          ["transform-runtime", { 
              "polyfill": false,
              "regenerator": true
          }]
      ]
  }
  </code></pre>
  
  <p>exported decorator Inject (targeting <code>class property</code>):</p>
  
  <pre><code>exports.Inject = (typeFunction, ...data) =&gt; {
      return function (target, propertyName) {
          try {
              const injected = target[propertyName] = new typeFunction(data);
              if ('predicate' in typeFunction &amp;&amp; typeof typeFunction.predicate === 'function') {
                  typeFunction.predicate(injected);
              }
          }
          catch (err) {
              throw new Error(err.message || err);
          }
      };
  };
  </code></pre>
  
  <p>exported decorator Injectable (targeting <code>class</code>):</p>
  
  <pre><code>exports.Injectable = (predicate) =&gt; {
      return function (target) {
          const provider = target;
          provider.injectable = true;
          if (predicate &amp;&amp; typeof predicate === 'function') {
              provider.predicate = predicate;
          }
      };
  };
  </code></pre>