feat(ssr-compiler): validate api decorator usage #5071
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cardoso
commented
Dec 20, 2024
Comment on lines
188
to
203
| const field = state.publicFields.get(node.key.name); | ||
|
|
||
| if (field) { | ||
| if ( | ||
| (is.methodDefinition(field, { kind: (k) => k === 'get' || k === 'set' }) && | ||
| node.kind === 'get') || | ||
| node.kind === 'set' | ||
| ) { | ||
| throw generateError( | ||
| DecoratorErrors.SINGLE_DECORATOR_ON_SETTER_GETTER_PAIR, | ||
| node.key.name | ||
| ); | ||
| } else { | ||
| throw generateError(DecoratorErrors.DUPLICATE_API_PROPERTY, node.key.name); | ||
| } | ||
| } |
There was a problem hiding this comment.
Clean this up & move to its own function
cardoso
commented
Dec 20, 2024
…alidate-api-decorator
…alidate-api-decorator
…alidate-api-decorator
…alidate-api-decorator
|
I'm a bit unsure about the scope of this PR, so I'm opening it up for review. The main remaining TODO is to replicate the valid tests, but on second thought that might already be covered by the |
cardoso
commented
Jan 7, 2025
Comment on lines
+197
to
+219
|
|
||
| /** | ||
| * This set is for attributes that have a camel cased property name | ||
| * For example, div.tabIndex. | ||
| * We do not want users to define `@api` properties with these names | ||
| * Because the template will never call them. It'll always call the camel | ||
| * cased version. | ||
| */ | ||
| export const AMBIGUOUS_PROP_SET = /*@__PURE__@*/ new Map([ | ||
| ['bgcolor', 'bgColor'], | ||
| ['accesskey', 'accessKey'], | ||
| ['contenteditable', 'contentEditable'], | ||
| ['tabindex', 'tabIndex'], | ||
| ['maxlength', 'maxLength'], | ||
| ['maxvalue', 'maxValue'], | ||
| ]); | ||
|
|
||
| /** | ||
| * This set is for attributes that can never be defined | ||
| * by users on their components. | ||
| * We throw for these. | ||
| */ | ||
| export const DISALLOWED_PROP_SET = /*@__PURE__@*/ new Set(['is', 'class', 'slot', 'style']); |
There was a problem hiding this comment.
Maybe @lwc/errors would be a better place for this. Not sure.
Comment on lines
23
to
46
| function validateName(definition: ApiDefinition) { | ||
| if (definition.computed) { | ||
| throw generateError(DecoratorErrors.PROPERTY_CANNOT_BE_COMPUTED); | ||
| } | ||
|
|
||
| const propertyName = definition.key.name; | ||
|
|
||
| switch (true) { | ||
| case propertyName === 'part': | ||
| throw generateError(DecoratorErrors.PROPERTY_NAME_PART_IS_RESERVED, propertyName); | ||
| case propertyName.startsWith('on'): | ||
| throw generateError(DecoratorErrors.PROPERTY_NAME_CANNOT_START_WITH_ON, propertyName); | ||
| case propertyName.startsWith('data') && propertyName.length > 4: | ||
| throw generateError(DecoratorErrors.PROPERTY_NAME_CANNOT_START_WITH_DATA, propertyName); | ||
| case DISALLOWED_PROP_SET.has(propertyName): | ||
| throw generateError(DecoratorErrors.PROPERTY_NAME_IS_RESERVED, propertyName); | ||
| case AMBIGUOUS_PROP_SET.has(propertyName): | ||
| throw generateError( | ||
| DecoratorErrors.PROPERTY_NAME_IS_AMBIGUOUS, | ||
| propertyName, | ||
| AMBIGUOUS_PROP_SET.get(propertyName)! | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
This whole file mirrors the structure and logic from babel-plugin-component:
…alidate-api-decorator
…alidate-api-decorator
cardoso
commented
Jan 8, 2025
Comment on lines
20
to
35
| class CompilationError extends Error { | ||
| constructor( | ||
| message: string, | ||
| public code: number | ||
| ) { | ||
| super(message); | ||
| this.name = 'CompilationError'; | ||
| this.code = code; | ||
| } | ||
| } | ||
|
|
||
| export function generateError<const T extends LWCErrorInfo>( | ||
| error: T, | ||
| ...args: ExtractArguments<T['message']> | ||
| ): Error { | ||
| return new Error(generateErrorMessage(error, args)); | ||
| ): CompilationError { | ||
| return new CompilationError(generateErrorMessage(error, args), error.code); |
There was a problem hiding this comment.
Should use CompilerError from @lwc/errors instead.
…alidate-api-decorator
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
I'm a bit short on time today to finish polishing this up, so I'm sending this as a draft.
Follow up to #5062
Partially addresses #5032
This PR aims to replicate the api decorator validation done in
babel-plugin-componentand also related tests.Some of the validation done in
babel-plugin-componentseems to be done after everything is collected, while here it's currently all done during traversal. Maybe that's just for better error reporting, which I think can be considered in a separate issue, but need to make sure this is not introducing undesirable behavior here.TODOS:
generateCompilerErrorfrom@lwc/errors@lwc/sharedor@lwc/errorsDoes this pull request introduce a breaking change?
Does this pull request introduce an observable change?
GUS work item