salesforce / lwc

⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
https://lwc.dev
Other
1.64k stars 392 forks source link

(template-compiler) Public property names that are a string literal or numeric literal causes exception #3219

Open ravijayaramappa opened 1 year ago

ravijayaramappa commented 1 year ago

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:

  1. The @lwc/lwc/valid-api eslint rule does not flag these fields and just skips them.
  2. 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.

  1. 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)
  2. 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;
}

https://stackblitz.com/edit/salesforce-lwc-qeojdm?file=src/modules/x/child/child.js

Expected Results

Actual Results

[!] (plugin rollup-plugin-lwc-compiler) Error: TypeError: LWC1007: /home/projects/salesforce-lwc-qeojdm/src/modules/x/child/child.js: Cannot read properties of undefined (reading 'startsWith')
src/modules/x/child/child.js
TypeError: /home/projects/salesforce-lwc-qeojdm/src/modules/x/child/child.js: Cannot read properties of undefined (reading 'startsWith')
    at validatePropertyName (file:///home/projects/salesforce-lwc-qeojdm/node_modules/@lwc/babel-plugin-component/src/decorators/api/validate.js:60:29)
    at eval (file:///home/projects/salesforce-lwc-qeojdm/node_modules/@lwc/babel-plugin-component/src/decorators/api/validate.js:153:13)

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

git2gus[bot] commented 1 year ago

This issue has been linked to a new work item: W-12206754