blade component autocomplete

Author: joetannenbaum

generatable.json

@@ -48,7 +48,8 @@
         "type": "bladeComponent",
         "label": "Blade components",
         "features": [
-            "link"
+            "link",
+            "completion"
         ]
     },
     {

package.json

@@ -188,6 +188,12 @@
                     "generated": true,
                     "description": "Enable linking for Blade components."
                 },
+                "Laravel.bladeComponent.completion": {
+                    "type": "boolean",
+                    "default": true,
+                    "generated": true,
+                    "description": "Enable completion for Blade components."
+                },
                 "Laravel.config.diagnostics": {
                     "type": "boolean",
                     "default": true,

src/extension.ts

@@ -13,6 +13,8 @@ import EloquentCompletion from "./completion/Eloquent";
 import Registry from "./completion/Registry";
 import ValidationCompletion from "./completion/Validation";
 import { updateDiagnostics } from "./diagnostic/diagnostic";
+import { completionProvider as bladeComponentCompletion } from "./features/bladeComponent";
+import { completionProvider as livewireComponentCompletion } from "./features/livewireComponent";
 import { hoverProviders } from "./hover/HoverProvider";
 import { linkProviders } from "./link/LinkProvider";
 import { configAffected } from "./support/config";
@@ -113,7 +115,11 @@ export function activate(context: vscode.ExtensionContext) {
             ...TRIGGER_CHARACTERS.concat(["|"]),
         ),
         vscode.languages.registerCompletionItemProvider(
-            LANGUAGES,
+            BLADE_LANGUAGES,
+            bladeComponentCompletion,
+            "x",
+            "-",
+        ),
         vscode.languages.registerCompletionItemProvider(
             BLADE_LANGUAGES,
             livewireComponentCompletion,

src/features/bladeComponent.ts

@@ -1,4 +1,5 @@
 import { getViews } from "@src/repositories/views";
+import { config } from "@src/support/config";
 import { projectPath } from "@src/support/project";
 import * as vscode from "vscode";
 import { LinkProvider } from "..";
@@ -39,3 +40,40 @@ export const linkProvider: LinkProvider = (doc: vscode.TextDocument) => {
 
     return Promise.resolve(links);
 };
+
+export const completionProvider: vscode.CompletionItemProvider = {
+    provideCompletionItems(
+        doc: vscode.TextDocument,
+        pos: vscode.Position,
+    ): vscode.ProviderResult<vscode.CompletionItem[]> {
+        if (!config("bladeComponent.completion", true)) {
+            return undefined;
+        }
+
+        const componentPrefixes = ["x", "x-"];
+        const pathPrefix = "components.";
+        const line = doc.lineAt(pos.line).text;
+
+        const match = componentPrefixes.find((prefix) => {
+            const linePrefix = line.substring(
+                pos.character - prefix.length,
+                pos.character,
+            );
+
+            return linePrefix !== prefix;
+        });
+
+        if (!match) {
+            return undefined;
+        }
+
+        return getViews()
+            .items.filter((view) => view.key.startsWith(pathPrefix))
+            .map(
+                (view) =>
+                    new vscode.CompletionItem(
+                        "x-" + view.key.replace(pathPrefix, ""),
+                    ),
+            );
+    },
+};

src/support/generated-config.ts

@@ -1 +1 @@
-export type GeneratedConfigKey = 'appBinding.diagnostics' | 'appBinding.hover' | 'appBinding.link' | 'appBinding.completion' | 'asset.diagnostics' | 'asset.hover' | 'asset.link' | 'asset.completion' | 'auth.diagnostics' | 'auth.hover' | 'auth.link' | 'auth.completion' | 'bladeComponent.link' | 'config.diagnostics' | 'config.hover' | 'config.link' | 'config.completion' | 'controllerAction.diagnostics' | 'controllerAction.hover' | 'controllerAction.link' | 'controllerAction.completion' | 'env.diagnostics' | 'env.hover' | 'env.link' | 'env.completion' | 'inertia.diagnostics' | 'inertia.hover' | 'inertia.link' | 'inertia.completion' | 'livewireComponent.link' | 'livewireComponent.completion' | 'middleware.diagnostics' | 'middleware.hover' | 'middleware.link' | 'middleware.completion' | 'mix.diagnostics' | 'mix.hover' | 'mix.link' | 'mix.completion' | 'paths.link' | 'route.diagnostics' | 'route.hover' | 'route.link' | 'route.completion' | 'translation.diagnostics' | 'translation.hover' | 'translation.link' | 'translation.completion' | 'view.diagnostics' | 'view.hover' | 'view.link' | 'view.completion';
+export type GeneratedConfigKey = 'appBinding.diagnostics' | 'appBinding.hover' | 'appBinding.link' | 'appBinding.completion' | 'asset.diagnostics' | 'asset.hover' | 'asset.link' | 'asset.completion' | 'auth.diagnostics' | 'auth.hover' | 'auth.link' | 'auth.completion' | 'bladeComponent.link' | 'bladeComponent.completion' | 'config.diagnostics' | 'config.hover' | 'config.link' | 'config.completion' | 'controllerAction.diagnostics' | 'controllerAction.hover' | 'controllerAction.link' | 'controllerAction.completion' | 'env.diagnostics' | 'env.hover' | 'env.link' | 'env.completion' | 'inertia.diagnostics' | 'inertia.hover' | 'inertia.link' | 'inertia.completion' | 'livewireComponent.link' | 'livewireComponent.completion' | 'middleware.diagnostics' | 'middleware.hover' | 'middleware.link' | 'middleware.completion' | 'mix.diagnostics' | 'mix.hover' | 'mix.link' | 'mix.completion' | 'paths.link' | 'route.diagnostics' | 'route.hover' | 'route.link' | 'route.completion' | 'translation.diagnostics' | 'translation.hover' | 'translation.link' | 'translation.completion' | 'view.diagnostics' | 'view.hover' | 'view.link' | 'view.completion';