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.