feat: add slot name completions for block components - #99
Conversation
|
Thanks for PR @arashsheyda, /cc @adamdehaven Would love you have your review on this one :) |
| const MDC_COMPONENT_START_REGEX = /^\s*:{2,}([\w-]+)/ | ||
| /** Regex to match block component closing lines (2+ colons with no name) */ | ||
| const MDC_COMPONENT_END_REGEX = /^\s*:{2,}\s*$/ | ||
| const SLOT_PATTERN = /^\s*#([\w-]+)/ |
There was a problem hiding this comment.
Aren't these patterns already defined elsewhere in the repo?
There was a problem hiding this comment.
only MDC_COMPONENT_START_REGEX
| export function isInsideYAMLBlock (document: vscode.TextDocument, lineNumber: number): boolean { | ||
| let inside = false | ||
| for (let i = 0; i < lineNumber; i++) { | ||
| const line = document.lineAt(i).text.trim() | ||
| if (/^\s*---\s*$/.test(line)) { | ||
| inside = !inside | ||
| } | ||
| } | ||
| return inside | ||
| } | ||
|
|
||
| /** | ||
| * Determines if the current position is inside a fenced code block. | ||
| * | ||
| * @param {vscode.TextDocument} document - The VS Code text document | ||
| * @param {number} lineNumber - The 0-based line number of the current cursor position | ||
| * @returns {boolean} - True if inside a code block, false otherwise | ||
| */ | ||
| export function isInsideCodeBlock (document: vscode.TextDocument, lineNumber: number): boolean { |
There was a problem hiding this comment.
Don't these two functions already exist in the repo?
There was a problem hiding this comment.
if you check the code you can see that it's been moved to utils ?
There was a problem hiding this comment.
Pull request overview
This PR adds #slot-name completion support inside MDC block components by introducing a new slot completion provider that can source slot names from component metadata, in-document usage, open documents, and framework component source files (Vue/Svelte/React/Angular). It also refactors shared “inside YAML/code block” detection into a utility module and expands the Vitest include pattern so new src/**/*.test.ts tests are executed.
Changes:
- Add slot extraction utilities for Vue/Svelte/React/Angular and corresponding unit tests.
- Introduce a slot completion provider with caching and multi-source slot discovery, plus tests for core parsing helpers.
- Refactor YAML/code-block detection into
src/utils/document.ts, update docs, and ensure new tests are included in Vitest runs.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.config.ts | Expands test include globs to run new src/**/*.test.ts unit tests. |
| src/utils/slot-extractors.ts | Adds framework-specific slot name extraction helpers. |
| src/utils/slot-extractors.test.ts | Adds unit tests covering the new slot extraction helpers. |
| src/utils/document.ts | Adds reusable helpers to detect YAML frontmatter blocks and fenced code blocks. |
| src/utils/document.test.ts | Adds tests for the YAML/code-block detection helpers. |
| src/slot-completion-provider.ts | Implements slot completion with metadata + discovery + workspace file scanning and caching. |
| src/slot-completion-provider.test.ts | Adds tests for document-scoped slot parsing helpers used by the provider. |
| src/extension.ts | Registers the new slot completion provider and adds cache invalidation hooks. |
| src/completion-providers.ts | Switches to the new shared YAML/code-block helpers (removes duplicated logic). |
| README.md | Documents the new slot completion feature and its discovery sources. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Invalidate slot cache when component source files change | ||
| const componentWatcher = vscode.workspace.createFileSystemWatcher('**/*.{vue,svelte,tsx,jsx}') | ||
| componentWatcher.onDidChange(() => invalidateSlotCache()) | ||
| componentWatcher.onDidCreate(() => invalidateSlotCache()) | ||
| componentWatcher.onDidDelete(() => invalidateSlotCache()) |
◈ PR Lens
Architecture 
6 components touched across 4 lanes. Inside the changed components — 1 viewComponent view — Slot completion provider Internal decomposition of the slot completion engine into document syntax validation, framework-specific slot extractors, and metadata resolution. 
Data flow 
The other flows — 1 sequence
Drill down
|
Description
closes #95
this PR adds intelligent
#slot-namecompletions inside MDC block components (e.g. ::card), with support for multiple slot discovery sourcesSupported frameworks: Vue, Svelte, React/TSX, Angular
Screen.Recording.2026-06-18.at.5.23.49.PM.mov