Class fields(decorated with @api) whose name is a string literal or a numeric literal will cause an exception upon compilation.
This is a valid javascript syntax. However, the @lwc/babel-plugin-component throws on error while processing this usage.
Notes:
The @lwc/lwc/valid-apieslint rule does not flag these fields and just skips them.
The public documentation makes no mention about using string literals and numeric literals in property name. It is an implicit rule because the compiler fails.
The meta question here is whether LWC component class can only use identifiers as public property names or not.
If it should, then this bug is to enforce that rule by updating the valid-api eslint rule. (IMO, this is what we should do)
If any valid javascript class field name can be used, then the bug is to fix the compiler error.
Steps to Reproduce
Compile the following component class using @lwc/compiler.
import { api, LightningElement } from 'lwc';
export default class ValidChild extends LightningElement {
@api
foo;
@api
123;
}
Description
Class fields(decorated with
@api
) whose name is a string literal or a numeric literal will cause an exception upon compilation. This is a valid javascript syntax. However, the@lwc/babel-plugin-component
throws on error while processing this usage.Notes:
@lwc/lwc/valid-api
eslint rule does not flag these fields and just skips them.The meta question here is whether LWC component class can only use identifiers as public property names or not.
valid-api
eslint rule. (IMO, this is what we should do)Steps to Reproduce
Compile the following component class using
@lwc/compiler
.https://stackblitz.com/edit/salesforce-lwc-qeojdm?file=src/modules/x/child/child.js
Expected Results
Actual Results
Possible Solution
Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.