[pull] master from vuejs:master #137
Conversation
![pull[bot]](https://avatars.githubusercontent.com/in/12910?s=60&v=4){kind=small}
|
|
WalkthroughThis update introduces enhancements to Vue's language services, particularly focusing on inlay hints for destructured properties and improved handling of Vue single-file components (SFCs). Key modifications include a new configuration option for inlay hints, refactorings in TypeScript code generation functions, and various refinements to existing plugins. These changes aim to enhance developer experience by providing better contextual information and improving the overall functionality of the Vue development environment. Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant Editor
participant VuePlugin
Developer->>Editor: Writes Vue code
Editor->>VuePlugin: Requests inlay hints
VuePlugin-->>Editor: Returns inlay hints for destructured props
Editor->>Developer: Displays inlay hints
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Outside diff range, codebase verification and nitpick comments (5)
test-workspace/tsc/vue3/vuejs#4646/parent.vue (1)
2-2: Consider removing the@ts-nocheckdirective.The
@ts-nocheckdirective disables TypeScript checks for the entire file. If possible, remove it and address specific TypeScript issues to benefit from type checking.test-workspace/language-service/inlay-hint/destructured-props/entry.vue (1)
2-2: Consider removing the@ts-nocheckdirective.The
@ts-nocheckdirective disables TypeScript checks for the entire file. If possible, remove it and address specific TypeScript issues to benefit from type checking.packages/language-core/lib/codegen/template/objectProperty.ts (1)
18-18: Update function calls to include theshouldBeConstantparameter.The
generateObjectPropertyfunction has been updated with a new parametershouldBeConstant, but the current calls to this function do not include this parameter. To maintain backward compatibility, ensure that all calls togenerateObjectPropertyare updated to handle the new parameter.
- Files to update:
packages/language-core/lib/codegen/template/element.tspackages/language-core/lib/codegen/template/elementProps.tspackages/language-core/lib/codegen/template/index.tsAnalysis chain
Ensure backward compatibility with the new parameter.
The addition of the
shouldBeConstantparameter changes the function signature. Verify that all calls togenerateObjectPropertyare updated to handle this new parameter.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all calls to `generateObjectProperty` are updated to include the new parameter. # Test: Search for the function usage. Expect: Correct handling of the new parameter. rg --type ts -A 5 $'generateObjectProperty'Length of output: 4133
Script:
#!/bin/bash # Description: Verify if the `shouldBeConstant` parameter is included in all calls to `generateObjectProperty`. # Test: Search for the function usage and check if the new parameter is included. rg --type ts -A 5 $'generateObjectProperty' | grep 'shouldBeConstant'Length of output: 66
Script:
#!/bin/bash # Description: List all calls to `generateObjectProperty` to manually verify the inclusion of the `shouldBeConstant` parameter. # List all occurrences of `generateObjectProperty` and show surrounding lines for context. rg --type ts -A 5 $'generateObjectProperty'Length of output: 4133
packages/language-core/lib/virtualFile/vueFile.ts (1)
53-53: Consider lazy initialization forgetSnapshot.The
getSnapshotis initialized in the constructor. Consider lazy initialization if the initial snapshot is large or expensive to compute.- this.getSnapshot = signal(initSnapshot); + this.getSnapshot ||= signal(initSnapshot);packages/language-service/lib/plugins/vue-inlayhints.ts (1)
9-14: Define capabilities more explicitly.The
capabilitiesobject is currently empty. Consider defining specific capabilities that this plugin supports to enhance clarity and maintainability.- inlayHintProvider: {}, + inlayHintProvider: { + resolveProvider: false, + },
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (50)
- extensions/vscode/package.json (1 hunks)
- packages/language-core/lib/codegen/common.ts (1 hunks)
- packages/language-core/lib/codegen/script/context.ts (3 hunks)
- packages/language-core/lib/codegen/script/globalTypes.ts (1 hunks)
- packages/language-core/lib/codegen/script/index.ts (4 hunks)
- packages/language-core/lib/codegen/script/scriptSetup.ts (1 hunks)
- packages/language-core/lib/codegen/template/context.ts (3 hunks)
- packages/language-core/lib/codegen/template/element.ts (1 hunks)
- packages/language-core/lib/codegen/template/elementEvents.ts (1 hunks)
- packages/language-core/lib/codegen/template/elementProps.ts (2 hunks)
- packages/language-core/lib/codegen/template/interpolation.ts (2 hunks)
- packages/language-core/lib/codegen/template/objectProperty.ts (1 hunks)
- packages/language-core/lib/codegen/types.ts (1 hunks)
- packages/language-core/lib/parsers/scriptSetupRanges.ts (4 hunks)
- packages/language-core/lib/plugins.ts (2 hunks)
- packages/language-core/lib/plugins/vue-root-tags.ts (1 hunks)
- packages/language-core/lib/plugins/vue-tsx.ts (2 hunks)
- packages/language-core/lib/types.ts (2 hunks)
- packages/language-core/lib/virtualFile/computedEmbeddedCodes.ts (1 hunks)
- packages/language-core/lib/virtualFile/computedSfc.ts (2 hunks)
- packages/language-core/lib/virtualFile/vueFile.ts (2 hunks)
- packages/language-service/data/template/cs.json (3 hunks)
- packages/language-service/data/template/en.json (3 hunks)
- packages/language-service/data/template/fr.json (3 hunks)
- packages/language-service/data/template/it.json (3 hunks)
- packages/language-service/data/template/ja.json (3 hunks)
- packages/language-service/data/template/ko.json (3 hunks)
- packages/language-service/data/template/pt.json (3 hunks)
- packages/language-service/data/template/ru.json (3 hunks)
- packages/language-service/data/template/zh-cn.json (3 hunks)
- packages/language-service/data/template/zh-hk.json (3 hunks)
- packages/language-service/index.ts (2 hunks)
- packages/language-service/lib/plugins/data.ts (1 hunks)
- packages/language-service/lib/plugins/vue-inlayhints.ts (1 hunks)
- packages/language-service/lib/plugins/vue-sfc.ts (3 hunks)
- packages/language-service/lib/plugins/vue-template.ts (6 hunks)
- packages/language-service/scripts/update-html-data.js (1 hunks)
- packages/language-service/tests/complete.ts (5 hunks)
- packages/language-service/tests/utils/createTester.ts (1 hunks)
- test-workspace/language-service/complete/fix(language-service): reinstate the completion for modifiers vuejs/language-tools#4639/input/entry.vue (1 hunks)
- test-workspace/language-service/complete/fix(language-service): reinstate the completion for modifiers vuejs/language-tools#4639/output/entry.vue (1 hunks)
- test-workspace/language-service/complete/directives/input/entry.vue (1 hunks)
- test-workspace/language-service/complete/directives/output/entry.vue (1 hunks)
- test-workspace/language-service/inlay-hint/destructured-props/entry.vue (1 hunks)
- test-workspace/tsc/vue2/tsconfig.json (1 hunks)
- test-workspace/tsc/vue3/v-model with arguments and defineModel does not work for nullable types since 2.0.28 vuejs/language-tools#4646/child.vue (1 hunks)
- test-workspace/tsc/vue3/v-model with arguments and defineModel does not work for nullable types since 2.0.28 vuejs/language-tools#4646/child2.vue (1 hunks)
- test-workspace/tsc/vue3/v-model with arguments and defineModel does not work for nullable types since 2.0.28 vuejs/language-tools#4646/parent.vue (1 hunks)
- test-workspace/tsc/vue3/Dynamic slot name Template error: Type 'QTableSlots' has no matching index signature for type 'string'.ts-plugin(2537) vuejs/language-tools#4668/child.vue (1 hunks)
- test-workspace/tsc/vue3/Dynamic slot name Template error: Type 'QTableSlots' has no matching index signature for type 'string'.ts-plugin(2537) vuejs/language-tools#4668/main.vue (1 hunks)
Files skipped from review due to trivial changes (3)
- packages/language-service/data/template/fr.json
- packages/language-service/data/template/zh-cn.json
- test-workspace/tsc/vue2/tsconfig.json
Additional context used
Biome
packages/language-service/lib/plugins/vue-inlayhints.ts
[error] 116-116: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (76)
test-workspace/tsc/vue3/vuejs#4646/child2.vue (1)
3-4: Verify the usage ofdefineModel.The
defineModelfunction is used to create a reactive variableother. Ensure that this function is correctly defined and used elsewhere in the codebase.test-workspace/language-service/complete/vuejs#4639/input/entry.vue (1)
5-5: Confirm the purpose of the incomplete@clickdirective.The
@click.directive is incomplete, which seems intentional for testing purposes. Ensure that this aligns with the intended test case for completion functionality.Verification successful
Incomplete
@clickDirective is Intentional for TestingThe incomplete
@clickdirective inentry.vueis indeed intentional and aligns with the test case for completion functionality. It is used to test the completion of thecapturemodifier, as indicated by the comment^complete: capturefound in the same file.
test-workspace/language-service/complete/#4639/input/entry.vue: The incomplete directive is accompanied by a comment suggesting it tests the completion ofcapture.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Confirm the purpose of the incomplete `@click` directive. # Test: Search for related test cases or documentation. Expect: References explaining the test case. rg --type vue --type md $'@click.' -A 5Length of output: 66
Script:
#!/bin/bash # Description: Confirm the purpose of the incomplete `@click` directive. # Test: Search for related test cases or documentation. Expect: References explaining the test case. rg '@click\.' --glob '*.vue' --glob '*.md' -A 5Length of output: 926
test-workspace/language-service/complete/vuejs#4639/output/entry.vue (1)
5-5: Confirm the correctness of the@click.capturedirective.The
@click.capturedirective seems to be the expected result for the completion test case. Verify that this matches the intended functionality.test-workspace/tsc/vue3/vuejs#4668/child.vue (1)
3-7: Ensure correct usage ofdefineSlots.The
defineSlotsfunction is used to define slots with TypeScript types. Ensure that this function is supported in the current setup and that the types are correctly defined.packages/language-core/lib/codegen/types.ts (1)
1-9: InterfaceInlayHintInfois well-defined.The interface uses optional properties effectively and is consistent with TypeScript best practices.
test-workspace/tsc/vue3/vuejs#4646/child.vue (1)
4-12: Verify the usage ofdefineModelandexactType.Ensure that
defineModelandexactTypeare correctly implemented and supported in your setup. The type casting and usage appear correct, but verify their integration and functionality.test-workspace/language-service/complete/directives/input/entry.vue (1)
1-12: Test case for directive completion.This file is structured as a test case for verifying the autocompletion of Vue directives. Each directive is intentionally incomplete, with comments indicating the expected completion. Ensure that the language service correctly identifies and suggests these completions.
test-workspace/language-service/complete/directives/output/entry.vue (1)
1-12: Test case for verifying directive completion output.This file is structured as a test case for verifying the output of directive autocompletion in a language service. Each directive is complete, and the comments serve as a reference for expected behavior. Ensure that the language service correctly matches these completions.
test-workspace/tsc/vue3/vuejs#4668/main.vue (1)
1-16: Test case for dynamic slots and type checking.This file is structured as a test case for a specific issue or feature related to dynamic slot names and type checking in Vue 3. The use of
exactTypeindicates a focus on ensuring type correctness. Verify that the language service handles these scenarios as expected.test-workspace/tsc/vue3/vuejs#4646/parent.vue (1)
8-14: EnsureexactTypeis implemented correctly.The
exactTypefunction is imported but not defined in this file. Verify that it is correctly implemented and used elsewhere in the codebase.Verification successful
exactTypeis correctly declared as a TypeScript utility. TheexactTypefunction is declared intest-workspace/tsc/shared.d.tsas a type-checking utility, which is typical for TypeScript projects. It is used for compile-time type validation and does not require a runtime implementation.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of the `exactType` function. # Test: Search for the `exactType` function definition. Expect: A valid function definition. rg --type ts -A 5 $'function exactType'Length of output: 593
test-workspace/language-service/inlay-hint/destructured-props/entry.vue (1)
5-9: Verify the use ofdefinePropswith destructuring.Ensure that destructuring
definePropsworks as expected and that the destructured properties are used correctly throughout the script.Verification successful
Destructured Props Usage Verified
The destructured properties
foo,bar, andpropsfromdefinePropsare used throughout the Vue component. The usage appears consistent with expected patterns, indicating that destructuring is working as intended. Here are some key points of usage:
foo,bar, andpropsare used in various contexts, such as object properties and function parameters.- The inlay hints suggest that these properties are correctly recognized and utilized within the component logic.
No issues were found with the destructuring and usage of these properties.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of destructured props with `defineProps`. # Test: Search for destructured props usage in Vue components. Expect: Correct usage patterns. rg --type vue -A 5 $'const { foo, bar, ...props } = defineProps'Length of output: 198
Script:
#!/bin/bash # Description: Correct the search pattern for destructured props in Vue components. # Test: Search for destructured props usage in Vue components with a corrected pattern. rg --type vue -A 5 'const \{ foo, bar, \.\.\.props \} = defineProps'Length of output: 98
Script:
#!/bin/bash # Description: Search for destructured props in Vue components without specifying file type. # Find all .vue files and search for the destructuring pattern within them. fd --extension vue --exec rg -A 5 'const \{ foo, bar, \.\.\.props \} = defineProps' {}Length of output: 187
Script:
#!/bin/bash # Description: Find usage of destructured props in the Vue component where they are defined. # Locate the file containing the destructuring pattern and search for the usage of `foo`, `bar`, and `props`. fd --extension vue --exec rg -l 'const \{ foo, bar, \.\.\.props \} = defineProps' {} | xargs -I {} rg -A 5 -e 'foo' -e 'bar' -e 'props' {}Length of output: 1091
packages/language-core/lib/codegen/template/objectProperty.ts (1)
21-34: Review logic for handling constant expressions.The logic for handling constant expressions is conditionally applied. Ensure this logic is correctly implemented and tested, particularly when
shouldBeConstantis true.packages/language-core/lib/virtualFile/vueFile.ts (3)
20-21: Ensure correct usage of computed properties.The
getVueSfcandsfcproperties now usegetSnapshot(). Verify that this change does not affect the expected behavior of these computations.
22-30: Review the newgetMappingscomputation.The
getMappingsmethod now uses a computed function. Ensure thatallCodeFeaturesis correctly integrated and that the computation logic aligns with the intended functionality.Verification successful
Integration of
allCodeFeaturesingetMappingsis correct.The
allCodeFeaturesobject, defined inshared.ts, is consistently used across various modules to provide metadata or capabilities. Its integration into thegetMappingsmethod aligns with its intended functionality. No issues found with the current implementation.
allCodeFeaturesis imported fromshared.tsand used consistently across the codebase.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of `allCodeFeatures` in `getMappings`. # Test: Search for the definition and usage of `allCodeFeatures`. Expect: Correct integration in `getMappings`. rg --type typescript -A 5 $'allCodeFeatures'Length of output: 78
Script:
#!/bin/bash # Description: Search for the definition and usage of `allCodeFeatures` in TypeScript files. # Test: Find the definition of `allCodeFeatures`. rg 'allCodeFeatures' -t ts -A 5Length of output: 5794
31-31: Verify thecomputedEmbeddedCodesintegration.The
getEmbeddedCodesmethod now usescomputedEmbeddedCodes. Ensure that this integration aligns with the intended functionality.Verification successful
Integration of
computedEmbeddedCodesVerifiedThe integration of
computedEmbeddedCodesinto thegetEmbeddedCodesmethod is correct. The function is imported and used appropriately, with parameters matching its definition.
computedEmbeddedCodesis defined incomputedEmbeddedCodes.ts.- It is imported and used in
vueFile.tswith the expected parameters.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of `computedEmbeddedCodes` in `getEmbeddedCodes`. # Test: Search for the definition and usage of `computedEmbeddedCodes`. Expect: Correct integration in `getEmbeddedCodes`. rg --type typescript -A 5 $'computedEmbeddedCodes'Length of output: 84
Script:
#!/bin/bash # Corrected script: Verify the integration of `computedEmbeddedCodes` in `getEmbeddedCodes`. # Search for the definition of `computedEmbeddedCodes` in the codebase. rg --type ts -A 5 'computedEmbeddedCodes' # Search for the usage of `computedEmbeddedCodes` in the vueFile.ts file. rg --type ts 'computedEmbeddedCodes' packages/language-core/lib/virtualFile/vueFile.tsLength of output: 1788
packages/language-core/lib/plugins/vue-root-tags.ts (2)
11-16: EnsuregetEmbeddedCodesreturns correct structure.The
getEmbeddedCodesmethod returns an array with a single embedded code object. Verify that this structure aligns with the expected format for embedded codes.Verification successful
The
getEmbeddedCodesmethod is correctly implemented.The method in
vue-root-tags.tsreturns an array of objects withidandlangproperties, consistent with the structure used in other plugins. No changes are needed.
- File:
packages/language-core/lib/plugins/vue-root-tags.ts- Lines: 11-16
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the expected structure for embedded codes returned by `getEmbeddedCodes`. # Test: Search for the usage and structure of embedded codes. Expect: Correct format as used in other plugins. rg --type typescript -A 5 $'getEmbeddedCodes'Length of output: 79
Script:
#!/bin/bash # Description: Verify the expected structure for embedded codes returned by `getEmbeddedCodes`. # Test: Search for the usage and structure of embedded codes. Expect: Correct format as used in other plugins. rg --type ts -A 5 $'getEmbeddedCodes'Length of output: 5908
18-65: ReviewresolveEmbeddedCodelogic for correctness.The
resolveEmbeddedCodemethod processes embedded files. Ensure that the logic correctly handles all block types and that thereplaceSourceRangefunction is used appropriately.packages/language-core/lib/plugins.ts (1)
24-24: Verify the integration ofvueRootTagsPlugin.The
vueRootTagsPluginis added to the list of plugins. Ensure that its integration aligns with the intended functionality and does not conflict with other plugins.packages/language-core/lib/codegen/common.ts (2)
48-55: LGTM!The refactoring of
collectVarsto utilizecollectIdentifiersenhances the precision of identifier collection by working with node structures. This change is consistent with the intended improvements.
58-84: Efficient handling of identifiers.The
collectIdentifiersfunction is well-structured, efficiently handling various AST node types. The use of default parameters enhances flexibility.packages/language-service/tests/complete.ts (2)
11-11: Enhanced line retrieval functionality.The
getLineTextfunction effectively combines newline normalization with line retrieval, improving the precision of test assertions.
86-86: Improved test accuracy with line-by-line comparison.The use of
getLineTextfor line-by-line comparison in test assertions enhances the accuracy and focus of the tests.packages/language-service/lib/plugins/data.ts (1)
42-45: Enhanced attribute binding flexibility.The addition of
:andv-bind:prefixes to applicable attributes improves flexibility in attribute handling, aligning with Vue.js conventions.packages/language-service/tests/utils/createTester.ts (1)
42-42: Enable inlay hints for destructured properties.The addition of
'vue.inlayHints.destructuredProps': trueenhances developer experience by providing additional context in the code editor.packages/language-core/lib/codegen/script/context.ts (2)
6-6: ExportHelperTypeinterface.Exporting
HelperTypeincreases its accessibility and usability across other modules.
Line range hint
106-118:
IntroduceinlayHintsfor script code generation context.The addition of
inlayHintssuggests an enhancement in managing inlay hints within the script code generation context.packages/language-core/lib/types.ts (2)
Line range hint
21-21:
Remove__hintfromVueCodeInformation.The removal of
__hintsimplifies theVueCodeInformationinterface, potentially reducing complexity in related implementations.
95-95: AddcontenttoSfcinterface.The addition of
contentenhances the representation of single-file components (SFCs) by explicitly including the main content.packages/language-core/lib/plugins/vue-tsx.ts (1)
Line range hint
143-170:
Refactor to use generator pattern improves clarity and performance.The refactoring of the
createTsxfunction to use a generator pattern enhances the code's clarity and potentially improves performance by processing values as they are produced. The implementation is correct, and the final return statement ensures all necessary data is included.packages/language-core/lib/codegen/template/context.ts (1)
Line range hint
114-126:
Addition ofinlayHintsenhances template code generation.The inclusion of the
inlayHintsarray in thecreateTemplateCodegenContextfunction extends its capabilities, allowing for better management of inlay hint information. This enhancement is beneficial for editor features and tooling integration, aligning well with the function's purpose.packages/language-core/lib/codegen/template/elementEvents.ts (1)
154-168: Refactor inlay hint generation for clarity and maintainability.The refactoring of the
generateEventExpressionfunction to directly push inlay hints onto thectx.inlayHintsarray improves the code's clarity and maintainability. The logic remains consistent, ensuring that the functionality related to inlay hints is preserved.packages/language-core/lib/codegen/script/globalTypes.ts (1)
103-103: Addition of__VLS_tryAsConstantlooks good.The function
__VLS_tryAsConstantenhances the type system by providing a utility for treating values as constants. This addition appears to be a non-breaking enhancement.packages/language-core/lib/codegen/template/interpolation.ts (1)
15-15: EnhancedgenerateInterpolationfunction signature is approved.The modification to allow an offset parameter in the
datafunction enhances flexibility. Ensure that all calls togenerateInterpolationare updated accordingly to pass the offset.Also applies to: 56-56
Verification successful
All
generateInterpolationfunction calls are updated with the new signature.The function calls across the codebase have been verified to include the
offsetparameter, ensuring consistency with the enhanced function signature.
- Calls in
objectProperty.ts,elementEvents.ts,element.ts,vIf.ts,vFor.ts,templateChild.ts,slotOutlet.ts,propertyAccess.ts,elementDirectives.ts, andelementProps.tsare all updated as expected.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `generateInterpolation` match the new signature. # Test: Search for the function usage. Expect: Only occurrences of the new signature. rg --type typescript -A 5 $'generateInterpolation'Length of output: 84
Script:
#!/bin/bash # Description: Verify all function calls to `generateInterpolation` match the new signature. # Test: Search for the function usage. Expect: Only occurrences of the new signature. rg --glob '*.ts' -A 5 'generateInterpolation'Length of output: 15029
packages/language-core/lib/virtualFile/computedEmbeddedCodes.ts (1)
9-9: Renaming tocomputedEmbeddedCodesis approved.The function name change from
computedFilestocomputedEmbeddedCodesbetter reflects its purpose related to embedded codes in Vue components. This improves code clarity.packages/language-core/lib/codegen/script/index.ts (1)
Line range hint
52-148:
Update the return type and inlay hint logic.The return type of
generateScripthas been updated toGenerator<Code, ScriptCodegenContext>, which improves the utility by providing additional context. The new inlay hint logic, which directly appends toctx.inlayHints, simplifies the code and enhances clarity. Ensure that the changes align with the intended functionality and check for any potential impacts on the rest of the codebase.Verification successful
Verification Successful: Updated
generateScriptFunctionThe
generateScriptfunction is correctly utilized inpackages/language-core/lib/plugins/vue-tsx.ts, and the updated return typeGenerator<Code, ScriptCodegenContext>along with the new inlay hint logic are consistent with the intended functionality. No issues found regarding the integration of these changes.
- File:
packages/language-core/lib/plugins/vue-tsx.ts- Usage Context: The function is invoked with appropriate arguments, ensuring the updated logic is correctly applied.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage and impact of the updated `generateScript` function. # Test: Search for the `generateScript` function usage. Expect: Consistent usage with updated return type. rg --type typescript -A 5 $'generateScript'Length of output: 77
Script:
#!/bin/bash # Description: Verify the usage and impact of the updated `generateScript` function. # Test: Search for the `generateScript` function usage. Expect: Consistent usage with updated return type. rg --type ts -A 5 $'generateScript'Length of output: 9479
packages/language-service/lib/plugins/vue-sfc.ts (2)
Line range hint
46-227:
RemoveProvideinterface and updatecreatefunction.The
Provideinterface has been removed, and thecreatefunction's return type has been updated. This suggests a simplification of the plugin's API. Ensure that this change does not affect any dependent code and aligns with the overall design goals.
14-14: UpdatedocumentSelectorto targetvue-root-tags.The
documentSelectorhas been changed from['vue']to['vue-root-tags'], indicating a more specific targeting of Vue components. This change is likely intended to improve the plugin's focus and performance. Verify that this change aligns with the intended functionality and does not inadvertently exclude necessary documents.Verification successful
The
documentSelectorchange invue-sfc.tsis specific and isolated.The update to
['vue-root-tags']invue-sfc.tsis localized to this file and does not affect other parts of the codebase that use different selectors. This change appears to be intentional to focus on specific Vue components. Ensure that this aligns with the intended functionality of the plugin.
vue-sfc.tsuses['vue-root-tags'].vue-template.tsuses['html', 'markdown'].nodeClientMain.tsuses a variabledocumentSelector.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the impact of the updated `documentSelector` on the plugin's functionality. # Test: Search for the usage of `documentSelector` in the codebase. Expect: Consistent usage with updated selector. rg --type typescript -A 5 $'documentSelector'Length of output: 79
Script:
#!/bin/bash # Description: Verify the impact of the updated `documentSelector` on the plugin's functionality. # Test: Search for the usage of `documentSelector` in the codebase. Expect: Consistent usage with updated selector. rg --type ts -A 5 $'documentSelector'Length of output: 1720
packages/language-core/lib/virtualFile/computedSfc.ts (1)
13-26: Rename parameter togetSnapshotand addcontentgetter.The parameter
snapshothas been renamed togetSnapshot, enhancing clarity. The addition of thecontentgetter encapsulates snapshot retrieval logic, improving usability. Ensure that these changes are consistent throughout the codebase and align with the intended functionality.Verification successful
Rename parameter to
getSnapshotand addcontentgetter verified.The renaming of the
snapshotparameter togetSnapshotand the addition of thecontentgetter in thecomputedSfcfunction are consistent with its usage in the codebase. The changes align with the intended functionality, as seen in thevueFile.tsfile.
computedSfcis defined withgetSnapshotincomputedSfc.ts.computedSfcis used withgetSnapshotinvueFile.ts.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the renaming of `snapshot` to `getSnapshot` and the addition of the `content` getter. # Test: Search for the `computedSfc` function usage. Expect: Consistent usage with updated parameter and getter. rg --type typescript -A 5 $'computedSfc'Length of output: 74
Script:
#!/bin/bash # Description: Verify the renaming of `snapshot` to `getSnapshot` and the addition of the `content` getter. # Test: Search for the `computedSfc` function usage. Expect: Consistent usage with updated parameter and getter. rg --type ts -A 5 $'computedSfc'Length of output: 3739
packages/language-service/index.ts (3)
204-204: Verify the language mapping change.The language mapping for
'vue'to'vue-root-tags'has been updated. Ensure this change is consistent across the codebase and does not break existing functionality.Verification successful
Language Mapping Change Verified
The language mapping for
'vue-root-tags'appears to be consistently used across the codebase. The search results show that the mapping is present in several files, indicating that the change is integrated throughout the relevant parts of the code.
- Files with 'vue-root-tags' usage:
packages/language-service/index.tspackages/language-core/lib/plugins.tspackages/language-core/lib/plugins/vue-root-tags.tspackages/language-service/lib/plugins/vue-sfc.tsThese files demonstrate that the mapping change is consistently applied, and there is no indication of broken functionality related to this change.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency of language mapping change. # Test: Search for language mapping usage. Expect: Consistent usage across the codebase. rg --type typescript -A 5 $'vue-root-tags'Length of output: 76
Script:
#!/bin/bash # Description: Verify consistency of language mapping change. # Test: Search for language mapping usage across the codebase without specifying a file type. rg -A 5 'vue-root-tags'Length of output: 2477
28-28: EnsurecreateVueInlayHintsPluginis correctly implemented.The new plugin
createVueInlayHintsPluginis imported. Verify that it is correctly implemented and integrated within the codebase.
199-199: Review the integration ofcreateVueInlayHintsPlugin.Ensure that the integration of
createVueInlayHintsPlugin(ts)aligns with the intended functionality and does not introduce any conflicts.packages/language-service/scripts/update-html-data.js (1)
307-312: Confirm expandedvalueSetconditions are correct.The
valueSetnow includes additional directives. Ensure these changes are correct and align with Vue's directive handling.Verification successful
The expanded
valueSetconditions are correct. The conditions align with Vue.js directive handling by including valid directives likev-cloak,v-else,v-once, andv-pre. These are standard Vue.js directives used for rendering control.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify expanded `valueSet` conditions in templateWorker function. # Test: Check for correctness and alignment with Vue's directive handling. Expect: Correct handling of new directives. rg --type javascript -A 5 $'valueSet:'Length of output: 72
Script:
#!/bin/bash # Correcting the search command to find the valueSet conditions and gather context around it. fd -e js | xargs rg 'valueSet:' -A 5Length of output: 1974
packages/language-core/lib/codegen/template/elementProps.ts (1)
Line range hint
272-310:
Parameter Renaming and Logic UpdateThe parameter
inlayHintshas been renamed toenableCodeFeatures, and the logic has been updated to handle inlay hints whenenableCodeFeaturesis true. This change broadens the scope of the parameter, indicating a shift towards enabling multiple code features.Ensure that all usages of this function in the codebase are updated to reflect this change.
packages/language-core/lib/parsers/scriptSetupRanges.ts (1)
18-18: Enhancement: Handling Destructured VariablesThe
propsobject now includes adestructuredproperty to store destructured variable names. This enhancement improves the function's capability to parse script setup ranges with destructured variables.Ensure that any code relying on
parseScriptSetupRangesis updated to handle the newdestructuredproperty appropriately.Also applies to: 236-243
extensions/vscode/package.json (1)
386-390: New Configuration Option:vue.inlayHints.destructuredPropsA new configuration option
vue.inlayHints.destructuredPropshas been added to control the display of inlay hints for destructured props. This option, set tofalseby default, enhances code readability and developer experience.Ensure that this new configuration option is documented appropriately in the project's documentation.
packages/language-core/lib/codegen/script/scriptSetup.ts (1)
416-416: Review the impact of removingNonNullable.The removal of
NonNullablein thegenerateDefinePropTypefunction allowsnullorundefinedvalues for the inferred type. This change may affect type safety, especially if the rest of the codebase assumes non-nullable types.Ensure that the rest of the codebase correctly handles nullable types where this function is used. If necessary, update documentation or add checks to prevent runtime errors.
packages/language-core/lib/codegen/template/element.ts (1)
447-449: Clarify the purpose of new boolean parameters.The addition of
falseandtrueas parameters to thegenerateComponentSlotfunction suggests an enhancement in functionality. Ensure these parameters are documented, and their impact on the function's behavior is clear.Check if these parameters are used consistently across the codebase and if their purpose is documented in the function's comments or documentation.
packages/language-service/lib/plugins/vue-template.ts (5)
162-170: Enhance embedded template handling.The new logic for handling
sourceScript?.generatedimproves the processing of embedded templates. Ensure that this change does not introduce any regressions and that all edge cases are covered.Test the handling of various embedded template scenarios to confirm the robustness of this change.
428-435: Optimize tag processing logic.The new check for
isInternalItemId(tag.name)improves efficiency by skipping internal tags. Ensure this logic is consistent with the intended behavior across the codebase.Review other parts of the code that process tags to ensure consistency and correctness with this new logic.
667-669: Update parameter name for clarity.The
afterHtmlCompletionfunction now usesdocumentinstead ofsourceDocument, which improves clarity. Ensure this change is reflected in all related documentation and usage.
Line range hint
740-779: Manage completion items withoriginalsmap.The introduction of the
originalsmap for managing completion items enhances the handling of documentation. Verify that this logic correctly updates and retrieves documentation for completion items.Test various completion scenarios to ensure that documentation is correctly managed and displayed for all items.
892-894: New functionisInternalItemIdadded.The
isInternalItemIdfunction helps identify internal item IDs. Ensure this function is used appropriately throughout the codebase to maintain consistency.packages/language-service/data/template/zh-hk.json (3)
1176-1176: Addition ofvalueSettov-preis consistent.The
valueSet: "v"property enhances the categorization of thev-predirective. This is a consistent and straightforward addition.
1238-1238: Addition ofvalueSettov-onceis consistent.The
valueSet: "v"property is added to thev-oncedirective, aligning with the categorization strategy. This change is consistent and well-implemented.
1361-1361: Addition ofvalueSettov-cloakis consistent.The
valueSet: "v"property is added to thev-cloakdirective, following the same pattern as other directives. This change is consistent and appropriate.packages/language-service/data/template/ja.json (3)
1176-1176: Addition ofvalueSettov-preis appropriate.The addition of
"valueSet": "v"enhances the metadata for better categorization without affecting functionality.
1238-1238: Addition ofvalueSettov-onceis appropriate.The addition of
"valueSet": "v"enhances the metadata for better categorization without affecting functionality.
1361-1361: Addition ofvalueSettov-cloakis appropriate.The addition of
"valueSet": "v"enhances the metadata for better categorization without affecting functionality.packages/language-service/data/template/ko.json (3)
1176-1176: LGTM: Addition of"valueSet": "v"tov-pre.The addition of
"valueSet": "v"to thev-predirective helps categorize it under a common set, enhancing organization.
1238-1238: LGTM: Addition of"valueSet": "v"tov-once.The inclusion of
"valueSet": "v"forv-oncealigns with the categorization strategy, enhancing consistency.
1361-1361: LGTM: Addition of"valueSet": "v"tov-cloak.The addition of
"valueSet": "v"tov-cloakis consistent with the categorization of other directives.packages/language-service/data/template/it.json (3)
1176-1176: Addition ofvalueSetproperty tov-pre.The addition of the
valueSetproperty with the value"v"enhances the metadata for thev-predirective. This change does not affect the existing functionality but provides a clearer structure for potential future enhancements.
1238-1238: Addition ofvalueSetproperty tov-once.The addition of the
valueSetproperty with the value"v"enhances the metadata for thev-oncedirective. This change does not affect the existing functionality but provides a clearer structure for potential future enhancements.
1361-1361: Addition ofvalueSetproperty tov-cloak.The addition of the
valueSetproperty with the value"v"enhances the metadata for thev-cloakdirective. This change does not affect the existing functionality but provides a clearer structure for potential future enhancements.packages/language-service/data/template/en.json (3)
1176-1176: Addition ofvalueSettov-preis appropriate.The addition of
"valueSet": "v"enhances the categorization of thev-predirective, aligning with the overall structure for Vue.js directives.
1238-1238: Addition ofvalueSettov-onceis appropriate.The inclusion of
"valueSet": "v"helps in categorizing thev-oncedirective, which can improve the handling and organization of directives.
1361-1361: Addition ofvalueSettov-cloakis appropriate.Adding
"valueSet": "v"to thev-cloakdirective ensures consistency across directives and enhances their metadata for better categorization.packages/language-service/data/template/cs.json (3)
1176-1176: Addition ofvalueSettov-prelooks good.The
valueSetproperty categorizes this directive, which can help in organizing and processing directives. Ensure that this change is reflected in any relevant processing logic.
1238-1238: Addition ofvalueSettov-oncelooks good.The
valueSetproperty provides a standardized categorization for this directive. Verify that any logic relying on this categorization is updated accordingly.
1361-1361: Addition ofvalueSettov-cloaklooks good.The inclusion of the
valueSetproperty helps in organizing directives under a common category. Ensure that this change is incorporated into any related processing logic.packages/language-service/data/template/ru.json (3)
1176-1176: Addition ofvalueSetforv-prelooks good.The addition of
"valueSet": "v"tov-prehelps categorize it, possibly for enhanced processing or organization. Ensure this aligns with the intended use in the language service.
1238-1238: Addition ofvalueSetforv-oncelooks good.The
"valueSet": "v"addition tov-oncecategorizes it similarly tov-pre. Ensure this categorization aligns with the intended functionality in the language service.
1361-1361: Addition ofvalueSetforv-cloaklooks good.The
"valueSet": "v"addition tov-cloakcategorizes it with other directives. Ensure this categorization is consistent with the intended use in the language service.packages/language-service/data/template/pt.json (3)
1176-1176: Addition ofvalueSettov-preis appropriate.The addition of
valueSet: "v"to thev-predirective enhances metadata without affecting existing functionality.
1238-1238: Addition ofvalueSettov-onceis appropriate.The addition of
valueSet: "v"to thev-oncedirective enhances metadata without affecting existing functionality.
1361-1361: Addition ofvalueSettov-cloakis appropriate.The addition of
valueSet: "v"to thev-cloakdirective enhances metadata without affecting existing functionality.
|
|
||
| export class VueVirtualCode implements VirtualCode { | ||
|
|
||
| // sources | ||
|
|
||
| id = 'main'; | ||
|
|
||
| _snapshot: Signal<ts.IScriptSnapshot>; | ||
| getSnapshot: Signal<ts.IScriptSnapshot>; |
There was a problem hiding this comment.
Enhance encapsulation with a private modifier.
The getSnapshot property is public but could be made private to encapsulate internal state management better.
- getSnapshot: Signal<ts.IScriptSnapshot>;
+ private getSnapshot: Signal<ts.IScriptSnapshot>;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| getSnapshot: Signal<ts.IScriptSnapshot>; | |
| private getSnapshot: Signal<ts.IScriptSnapshot>; |
| type foo = foo[string] & typeof foo; | ||
| // ^inlayHint: "props." | ||
|
|
||
| interface foo extends (typeof foo) { | ||
| // ^inlayHint: "props." | ||
| foo: string; | ||
| foo(foo: string): void; | ||
| foo: (foo: string) => void; | ||
| } |
There was a problem hiding this comment.
Avoid using duplicate type names.
The type foo is defined multiple times with different meanings, which can lead to confusion. Consider using more descriptive and unique names for each type.
- type foo = foo[string] & typeof foo;
- interface foo extends (typeof foo) {
+ type FooType = foo[string] & typeof foo;
+ interface FooInterface extends (typeof foo) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| type foo = foo[string] & typeof foo; | |
| // ^inlayHint: "props." | |
| interface foo extends (typeof foo) { | |
| // ^inlayHint: "props." | |
| foo: string; | |
| foo(foo: string): void; | |
| foo: (foo: string) => void; | |
| } | |
| type FooType = foo[string] & typeof foo; | |
| // ^inlayHint: "props." | |
| interface FooInterface extends (typeof foo) { | |
| // ^inlayHint: "props." | |
| foo: string; | |
| foo(foo: string): void; | |
| foo: (foo: string) => void; | |
| } |
| // TODO: more conditions | ||
| function isReferencedIdentifier( | ||
| id: ts.Identifier, | ||
| parent: ts.Node | null | ||
| ) { |
There was a problem hiding this comment.
Expand conditions in isReferencedIdentifier.
The TODO comment suggests more conditions are needed. Ensure all necessary conditions are covered to avoid false positives in identifier referencing.
Would you like assistance in identifying additional conditions for isReferencedIdentifier?
| const settings: Record<string, boolean> = {}; | ||
| const result: vscode.InlayHint[] = []; | ||
| const decoded = context.decodeEmbeddedDocumentUri(URI.parse(document.uri)); | ||
| const sourceScript = decoded && context.language.scripts.get(decoded[0]); | ||
| const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]); |
There was a problem hiding this comment.
Check for undefined decoded or sourceScript.
The code assumes decoded and sourceScript are defined without checks. Add checks to handle cases where they might be undefined.
- const decoded = context.decodeEmbeddedDocumentUri(URI.parse(document.uri));
- const sourceScript = decoded && context.language.scripts.get(decoded[0]);
- const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+ const decoded = context.decodeEmbeddedDocumentUri(URI.parse(document.uri));
+ if (!decoded) return [];
+ const sourceScript = context.language.scripts.get(decoded[0]);
+ if (!sourceScript) return [];
+ const virtualCode = sourceScript.generated?.embeddedCodes.get(decoded[1]);
+ if (!virtualCode) return [];Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const settings: Record<string, boolean> = {}; | |
| const result: vscode.InlayHint[] = []; | |
| const decoded = context.decodeEmbeddedDocumentUri(URI.parse(document.uri)); | |
| const sourceScript = decoded && context.language.scripts.get(decoded[0]); | |
| const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]); | |
| const settings: Record<string, boolean> = {}; | |
| const result: vscode.InlayHint[] = []; | |
| const decoded = context.decodeEmbeddedDocumentUri(URI.parse(document.uri)); | |
| if (!decoded) return []; | |
| const sourceScript = context.language.scripts.get(decoded[0]); | |
| if (!sourceScript) return []; | |
| const virtualCode = sourceScript.generated?.embeddedCodes.get(decoded[1]); | |
| if (!virtualCode) return []; |
| settings[hint.setting] ??= await context.env.getConfiguration?.<boolean>(hint.setting) ?? false; | ||
|
|
||
| if (!settings[hint.setting]) { | ||
| continue; | ||
| } |
There was a problem hiding this comment.
Avoid using optional chaining with non-null assertions.
The use of optional chaining with non-null assertions can lead to confusing code. Consider restructuring to avoid this pattern.
- settings[hint.setting] ??= await context.env.getConfiguration?.<boolean>(hint.setting) ?? false;
+ if (!(hint.setting in settings)) {
+ settings[hint.setting] = await context.env.getConfiguration?.<boolean>(hint.setting) ?? false;
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| settings[hint.setting] ??= await context.env.getConfiguration?.<boolean>(hint.setting) ?? false; | |
| if (!settings[hint.setting]) { | |
| continue; | |
| } | |
| if (!(hint.setting in settings)) { | |
| settings[hint.setting] = await context.env.getConfiguration?.<boolean>(hint.setting) ?? false; | |
| } | |
| if (!settings[hint.setting]) { | |
| continue; | |
| } |
| if (virtualCode instanceof VueVirtualCode) { | ||
|
|
||
| const codegen = tsCodegen.get(virtualCode.sfc); | ||
| const inlayHints = [ | ||
| ...codegen?.generatedTemplate()?.inlayHints ?? [], | ||
| ...codegen?.generatedScript()?.inlayHints ?? [], | ||
| ]; | ||
| const scriptSetupRanges = codegen?.scriptSetupRanges(); | ||
|
|
||
| if (scriptSetupRanges?.props.destructured && virtualCode.sfc.scriptSetup?.ast) { | ||
| for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode.sfc.scriptSetup.ast, scriptSetupRanges.props.destructured)) { | ||
| const name = prop.text; | ||
| const end = prop.getEnd(); | ||
| const pos = isShorthand ? end : end - name.length; | ||
| const label = isShorthand ? `: props.${name}` : 'props.'; | ||
| inlayHints.push({ | ||
| blockName: 'scriptSetup', | ||
| offset: pos, | ||
| setting: 'vue.inlayHints.destructuredProps', | ||
| label, | ||
| }); | ||
| } | ||
| } |
There was a problem hiding this comment.
Simplify destructured props handling.
The logic for handling destructured props could be simplified by checking for virtualCode earlier and avoiding nested if statements.
- if (virtualCode instanceof VueVirtualCode) {
+ if (!(virtualCode instanceof VueVirtualCode)) return result;
- if (scriptSetupRanges?.props.destructured && virtualCode.sfc.scriptSetup?.ast) {
+ if (!scriptSetupRanges?.props.destructured || !virtualCode.sfc.scriptSetup?.ast) return result;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (virtualCode instanceof VueVirtualCode) { | |
| const codegen = tsCodegen.get(virtualCode.sfc); | |
| const inlayHints = [ | |
| ...codegen?.generatedTemplate()?.inlayHints ?? [], | |
| ...codegen?.generatedScript()?.inlayHints ?? [], | |
| ]; | |
| const scriptSetupRanges = codegen?.scriptSetupRanges(); | |
| if (scriptSetupRanges?.props.destructured && virtualCode.sfc.scriptSetup?.ast) { | |
| for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode.sfc.scriptSetup.ast, scriptSetupRanges.props.destructured)) { | |
| const name = prop.text; | |
| const end = prop.getEnd(); | |
| const pos = isShorthand ? end : end - name.length; | |
| const label = isShorthand ? `: props.${name}` : 'props.'; | |
| inlayHints.push({ | |
| blockName: 'scriptSetup', | |
| offset: pos, | |
| setting: 'vue.inlayHints.destructuredProps', | |
| label, | |
| }); | |
| } | |
| } | |
| if (!(virtualCode instanceof VueVirtualCode)) return result; | |
| const codegen = tsCodegen.get(virtualCode.sfc); | |
| const inlayHints = [ | |
| ...codegen?.generatedTemplate()?.inlayHints ?? [], | |
| ...codegen?.generatedScript()?.inlayHints ?? [], | |
| ]; | |
| const scriptSetupRanges = codegen?.scriptSetupRanges(); | |
| if (!scriptSetupRanges?.props.destructured || !virtualCode.sfc.scriptSetup?.ast) return result; | |
| for (const [prop, isShorthand] of findDestructuredProps(ts, virtualCode.sfc.scriptSetup.ast, scriptSetupRanges.props.destructured)) { | |
| const name = prop.text; | |
| const end = prop.getEnd(); | |
| const pos = isShorthand ? end : end - name.length; | |
| const label = isShorthand ? `: props.${name}` : 'props.'; | |
| inlayHints.push({ | |
| blockName: 'scriptSetup', | |
| offset: pos, | |
| setting: 'vue.inlayHints.destructuredProps', | |
| label, | |
| }); | |
| } |
See Commits and Changes for more details.
Created by
pull[bot]
Can you help keep this open source service alive? 💖 Please sponsor : )
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
valueSetproperties across multiple language localizations.Refactor
Tests