Stenciljs: Can't use custom decorator in StencilJs component

118 Views Asked by At

Because I need to make a validation and previous transformation (in some specific case) I need to create a decorator and use it in my Stenciljs component. I have the next function decorator's example:

function CustomDecorator() {
  return function(target: any, propertyKey: string) {
    const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey) || {};
    const originalSetter = descriptor.set;

    descriptor.set = function(value: any) {
      if (originalSetter) {
        originalSetter.call(this, value);
      }
    };

    Object.defineProperty(target, propertyKey, descriptor);
  };
}

When I try to use in my StencilJS component, the decorator doesn't run:

@Component({
  tag: 'my-component',
})
export class MyCustomComponent {
  @CustomDecorator
  fields = '';
}

But, if the same decorator is used in another common class, the decorator executes without problems. Example:

class MyClass {
  @CustomDecorator
  fields;
}

In this case, the decorator runs without problems. Do you Have any idea of what's going on here? should I set something to StencilJs configuration?

[Edit]

I can confirm that the problem is with the @Prop decorator, if I use a simple property (without any other decorator) and add my custom decorator, runs, but if before I add the @Prop decorator, my custom decorator doesn't works.

0

There are 0 best solutions below