refactor(language-server): add support for style binding completion.#66986
refactor(language-server): add support for style binding completion.#66986JeanMeche wants to merge 1 commit intoangular:mainfrom
Conversation
91b19cc to
f6030aa
Compare
Inline style bindings `<div [style]="{}">` will now suggest css properties, their value and components props.
fixes angular#58127
f6030aa to
35b587f
Compare
atscott
left a comment
There was a problem hiding this comment.
This is pretty complicated for what I would consider a relatively low impact change. Can we maybe re-evaluate at a later time?
| if (!ts.isStringLiteralLike(node)) { | ||
| return false; | ||
| } | ||
| return isAssignmentToPropertyWithName(node, 'template'); |
There was a problem hiding this comment.
Did you mean to make this better? This is currently returning true for any inline template at any cursor position
| return content; | ||
| } | ||
|
|
||
| function extractComponentStyleBindings(templateContent: string): string { |
There was a problem hiding this comment.
An expression like [style]="{ content: '}' }" will prematurely hit braceCount === 0, truncating the virtual document and failing silently.
| let objContent = templateContent.substring(startObj, endObj); | ||
|
|
||
| // Transform content to be more CSS-like: | ||
| // 1. Replace quotes with spaces (so keys become identifiers) |
There was a problem hiding this comment.
The parser replaces all ' and " with spaces. While this turns 'background-color' into an identifier, it destroys values that actually require strings (e.g., font-family: 'Open Sans' or content: '...')
| // 1. Replace quotes with spaces (so keys become identifiers) | ||
| // 2. Replace top-level commas with semicolons (so key-values become declarations) | ||
| let transformedContent = ''; | ||
| let parenDepth = 0; |
There was a problem hiding this comment.
This replaces , with ; when parenDepth === 0 to fake CSS declarations. However, it doesn't track object depth. If the user calls a macro/function foo({ a: 1, b: 2 }), the comma becomes a semicolon, feeding syntax errors to the CSS LS.
| position: lsp.Position, | ||
| completions: ts.WithMetadata<ts.CompletionInfo> | undefined, | ||
| ): lsp.CompletionItem[] | null { | ||
| const virtualCssDocContents = getCSSVirtualContent(sf); |
There was a problem hiding this comment.
Re-building the virtual CSS document using character-by-character string concatenation (transformedContent += char) for every inline template in the file on every single completion request (every keypress) is an unnecessary performance hit (I know we do this with inline styles already...).
|
hi @JeanMeche and @atscott I already have more complex version of features on this pr coming also with many other features - coming soon (will post draft pr today - but they are still in work) - please have a look at demo with some of those features please! I would much appreaciate it !! https://kbrilla.github.io/nativeoptional_chaning_and_template_features_upgrade/ as for LSP - I will post VSIX with all of those features combined and some tarballs of anngular that those features work with. Demo app was quickly prepared so it's not showing all features and can sometimes have some bug - didnt have time to fully review it yet as I focused now on adding all features tabs to it (there should be more tabs in and hour or two hopefully). Sorry for bothering You! bdw. |
Inline style bindings
<div [style]="{}">will now suggest css properties, their value and components props.fixes #58127