Skip to content

feat: 支持自定义组件props类型提示支持 - #108

Merged
wangshunnn merged 13 commits into
mpx-ecology:mainfrom
Triumph-light:feat-reference-type-props
Jul 23, 2026
Merged

wangshunnn merged 13 commits into
mpx-ecology:mainfrom
Triumph-light:feat-reference-type-props

Conversation

@Triumph-light

@Triumph-light Triumph-light commented May 12, 2026 •

Copy link
Copy Markdown
Collaborator

closes #86

@coderabbitai

coderabbitai Bot commented May 12, 2026 •

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds runtime prop type utilities, richer component self-typing, runtime usingComponents mappings with stable import names, and updated template and language-service integration. Inspection fixtures cover options-style, script-setup, no-property, and multiple-candidate components with expected type checks.

Changes

Runtime Prop Types and JSON usingComponents Support

Layer / File(s) Summary
Global runtime prop type utilities and component self typing
packages/language-core/src/codegen/globalTypes/*, packages/language-core/src/codegen/script/componentSelf.ts
Generated global types include runtime prop resolution utilities, while __VLS_self gains expose-aware props and constructor typings.
Runtime JSON component mappings and stable imports
packages/language-core/src/codegen/script/{jsonUsingComponents.ts,index.ts}, packages/language-core/src/codegen/script/template.ts
JSON components use runtime mappings and stable virtual import names, with updated completion metadata and local component typing.
Template component resolution and prop checking
packages/language-core/src/codegen/template/*
Template routing, component generation, self-component handling, interpolation mappings, and candidate-aware prop checking are updated.
Plugin and language-service prop integration
packages/language-core/src/plugins/mpx-tsx.ts, packages/language-service/src/**/*, packages/typescript-plugin/src/requests/*
Component names and TypeScript clients are wired into code generation; prop types are resolved, merged, and exposed to completion and hover.
Prop typing inspection fixtures and tooling
inspect-extension/components/reference-type-props/*, inspect-extension/components/script-json/*, inspect-extension/ts-features/*, inspect-extension/package.json, inspect-extension/tsconfig.json, .vscode/launch.json
Inspection components exercise typed, invalid, custom-reference, no-property, and multiple-candidate props, with supporting configuration updates.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant MPXPlugin
  participant ScriptCodegen
  participant JSONUsingComponents
  participant TypeScriptPlugin
  participant TemplateLanguageService
  MPXPlugin->>ScriptCodegen: pass component names and self component name
  ScriptCodegen->>JSONUsingComponents: generate imports and runtime mappings
  JSONUsingComponents-->>ScriptCodegen: emit __MPX_jsonComponents
  TemplateLanguageService->>TypeScriptPlugin: request component prop metadata
  TypeScriptPlugin-->>TemplateLanguageService: return merged prop types
  TemplateLanguageService-->>MPXPlugin: provide typed template completion and hover
Loading

Possibly related PRs

Suggested reviewers: wangshunnn

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 6.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed 实现了自定义组件 props 的类型提示、补全、悬停和多候选合并等核心要求,符合 #86。
Out of Scope Changes check ✅ Passed 未见明显与自定义组件 props 类型提示无关的改动,新增配置和 fixture 都服务于该功能。
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题与变更主题一致,准确概括了自定义组件 props 类型提示能力的增强。
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (2)
packages/language-core/src/codegen/script/index.ts (1)

35-35: ⚡ Quick win

Add JSDoc for the new required field.

The scriptSetupImportComponentNames field is added without documentation. Consider adding a JSDoc comment explaining what component names are included (e.g., "Set of component names imported via default import from .mpx files in script setup").

📝 Proposed documentation
   scriptSetupRanges: ScriptSetupRanges | undefined
+  /**
+   * Set of component names imported via default import from .mpx files in <script setup>.
+   * Used for resolving component types in template code generation.
+   */
   scriptSetupImportComponentNames: Set<string>
   templateCodegen: (TemplateCodegenContext & { codes: Code[] }) | undefined
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/language-core/src/codegen/script/index.ts` at line 35, Add a JSDoc
comment above the scriptSetupImportComponentNames field describing its purpose
and contents: state that it is a Set<string> containing component names that are
imported via default import from .mpx files inside a script setup block (i.e.,
components brought into scope by `import X from "Y.mpx"` in script setup), note
that it is required and used to track which components should be treated as
locally registered in generated code, and include a short example usage to
clarify semantics.
packages/language-core/src/codegen/script/jsonUsingComponents.ts (1)

112-122: ⚡ Quick win

Consider adding index suffix for consistency.

The function returns just ${baseName} without any index suffix (line 121). When multiple paths resolve to the same component name, they'll have different indices, but the first one (index 0) won't have a distinguishing suffix. Consider returning ${baseName}_${index} or ${baseName}${index === 0 ? '' : _${index}} for consistency and to avoid potential name collisions if the same component name appears multiple times.

🔧 Proposed refinement for consistency
 export function getUsingComponentImportName(
   componentName: string,
   index: number,
 ) {
   const camelizedName = capitalize(camelize(componentName))
   const baseName =
     camelizedName && identifierRegex.test(camelizedName)
       ? camelizedName
       : `component_${index}`
-  return `${baseName}`
+  return index > 0 && camelizedName && identifierRegex.test(camelizedName)
+    ? `${baseName}_${index}`
+    : baseName
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/language-core/src/codegen/script/jsonUsingComponents.ts` around
lines 112 - 122, getUsingComponentImportName currently returns baseName without
an index suffix which can collide when the same componentName appears multiple
times; update the function (referencing getUsingComponentImportName,
camelizedName, identifierRegex, baseName) to append a deterministic index suffix
such as `${baseName}_${index}` (or `${baseName}${index === 0 ? '' :
`_${index}`}` if you want to keep the original for index 0) so each generated
import name is unique and consistent across duplicates.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@inspect-extension/components/reference-type-props/component-options.mpx`:
- Around line 17-21: The JSON script block uses the incorrect symbol
"module.export"; update it to the standard Node.js export symbol
"module.exports" in the JSON script (the object assigned to module.exports) so
the export matches the rest of the codebase and other JSON blocks—locate the
script named "json" in component-options.mpx and replace module.export with
module.exports.

In `@inspect-extension/components/reference-type-props/index.mpx`:
- Line 3: This line intentionally uses a numeric literal for the msg prop of the
component-js-setup component to trigger type-checking; add an inline comment
next to the component invocation (component-js-setup msg="{{ 123 }}") stating
that this is test code in reference-type-props and that the number is an
intentional type mismatch for verification of the string-typed msg prop defined
in component-js-setup.mpx.
- Line 2: The parentText prop on the component-options component is receiving a
number ({{ 123 }}) while component-options.mpx defines parentText as type
String; either change the value to a string literal to match the declared type
(e.g., provide a string expression) or add an inline comment near the component
usage (or above the file) stating that the numeric value is intentionally used
to test type-checking; reference the component-options component and its
parentText prop declared in component-options.mpx when making the change so the
mismatch is resolved or explicitly documented.

---

Nitpick comments:
In `@packages/language-core/src/codegen/script/index.ts`:
- Line 35: Add a JSDoc comment above the scriptSetupImportComponentNames field
describing its purpose and contents: state that it is a Set<string> containing
component names that are imported via default import from .mpx files inside a
script setup block (i.e., components brought into scope by `import X from
"Y.mpx"` in script setup), note that it is required and used to track which
components should be treated as locally registered in generated code, and
include a short example usage to clarify semantics.

In `@packages/language-core/src/codegen/script/jsonUsingComponents.ts`:
- Around line 112-122: getUsingComponentImportName currently returns baseName
without an index suffix which can collide when the same componentName appears
multiple times; update the function (referencing getUsingComponentImportName,
camelizedName, identifierRegex, baseName) to append a deterministic index suffix
such as `${baseName}_${index}` (or `${baseName}${index === 0 ? '' :
`_${index}`}` if you want to keep the original for index 0) so each generated
import name is unique and consistent across duplicates.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 121ec58c-f129-469c-bdde-f34c59d885f7

📥 Commits

Reviewing files that changed from the base of the PR and between 4ba7a6a and d35a9dc.

📒 Files selected for processing (14)
  • inspect-extension/components/reference-type-props/component-js-setup.mpx
  • inspect-extension/components/reference-type-props/component-options.mpx
  • inspect-extension/components/reference-type-props/index.mpx
  • inspect-extension/components/script-json/components/list.mpx
  • packages/language-core/src/codegen/globalTypes/defineComponentTypes.ts
  • packages/language-core/src/codegen/globalTypes/index.ts
  • packages/language-core/src/codegen/script/componentSelf.ts
  • packages/language-core/src/codegen/script/index.ts
  • packages/language-core/src/codegen/script/jsonUsingComponents.ts
  • packages/language-core/src/codegen/script/template.ts
  • packages/language-core/src/codegen/template/element.ts
  • packages/language-core/src/codegen/template/elementProps.ts
  • packages/language-core/src/codegen/template/templateChild.ts
  • packages/language-core/src/plugins/mpx-tsx.ts
💤 Files with no reviewable changes (1)
  • packages/language-core/src/codegen/template/templateChild.ts

Comment thread inspect-extension/components/reference-type-props/component-options.mpx Outdated
Comment thread inspect-extension/components/reference-type-props/index.mpx
Comment thread inspect-extension/components/reference-type-props/index.mpx Outdated
@Triumph-light
Triumph-light requested a review from wangshunnn May 12, 2026 11:18
@wangshunnn wangshunnn changed the title feat: 支持自定义组件props类型提示支持, close: https://github.com/mpx-ecology/langu… feat: 支持自定义组件props类型提示支持 May 14, 2026
@wangshunnn wangshunnn self-assigned this Jul 20, 2026

@wangshunnn wangshunnn left a comment •

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 还缺少自定义组件 props 自动补全提示,let me cook 🧑‍🍳

- infer and merge props from multiple component candidates
- add prop completion, JSDoc hover, and nested object completion
- avoid duplicate TypeScript and HTML completion/hover entries
- prevent template codegen hangs while editing unmatched component tags
@wangshunnn
wangshunnn merged commit 327e263 into mpx-ecology:main Jul 23, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

支持自定义组件的属性提示

2 participants