feat: add configuration widget intellisense

apps/vscode-extension/src/extension.ts

@@ -1,4 +1,4 @@
-import { commands, ExtensionContext } from 'vscode';
+import { commands, ExtensionContext, languages } from 'vscode';
 import { generateComponentGenerateCommand } from './commands/generate/component.command';
 import { generateFixtureGenerateCommand } from './commands/generate/fixture.command';
 import { wrapCommandWhenExplorerContext } from './commands/helpers';
@@ -20,6 +20,7 @@ import {
   generateAddThemingToComponentCommand,
   generateConvertComponentCommand
 } from './commands/generate/enrich-component';
+import { configurationCompletionItemProvider } from './intellisense/configuration';
 
 
 /**
@@ -30,6 +31,7 @@ import {
  */
 export function activate(context: ExtensionContext) {
   context.subscriptions.push(
+    languages.registerCompletionItemProvider(['javascript','typescript'], configurationCompletionItemProvider, '@'),
     commands.registerCommand('otter.generate.component', generateComponentGenerateCommand(context)),
     commands.registerCommand('otter.generate.service', generateServiceGenerateCommand(context)),
     commands.registerCommand('otter.generate.store', generateStoreGenerateCommand(context)),

apps/vscode-extension/src/intellisense/configuration.ts

@@ -0,0 +1,64 @@
+import { CompletionItem, CompletionItemKind, CompletionItemProvider, SnippetString } from 'vscode';
+
+interface ConfigurationTags {
+  description: string;
+  detail: string;
+  snippet: string;
+}
+
+const configurationTags: Record<string, ConfigurationTags> = {
+  o3rWidget: {
+    description: 'Tag to use CMS widget for configuration',
+    detail: 'widgetName',
+    // TODO compute snippet thanks to eslint config to propose only valid widgetName
+    snippet: '${1:widgetName}'
+  },
+  o3rWidgetParam: {
+    description: 'Tag to use CMS widget parameter for configuration',
+    detail: 'paramName paramValue',
+    // TODO compute snippet thanks to eslint config to propose only valid paramName and paramValue
+    snippet: '${1:paramName} ${2:paramValue}'
+  }
+};
+
+const completions = Object.entries(configurationTags).map(([label, { detail, description, snippet }]) => {
+  const completion = new CompletionItem({ label: `${label} `, detail }, CompletionItemKind.Keyword);
+  completion.documentation = description;
+  completion.insertText = new SnippetString(`${label} ${snippet}`);
+
+  return completion;
+});
+
+export const configurationCompletionItemProvider: CompletionItemProvider<CompletionItem> = {
+  provideCompletionItems: (doc, pos) => {
+    const line = doc.lineAt(pos).text;
+    let prefix = line.slice(0, pos.character);
+    if (!prefix.includes('@')) {
+      return [];
+    }
+
+    const txt = doc.getText();
+    const jsDocCommentMatcher = /\/\*\*[^*](?:\r|\n|.)*?\*\//g;
+    let match = jsDocCommentMatcher.exec(txt);
+    let offset = doc.offsetAt(pos);
+    while (match) {
+      if (match.index > offset) {
+        match = null;
+        break;
+      }
+      if (match.index < offset && match.index + match[0].length > offset) {
+        break;
+      }
+      match = jsDocCommentMatcher.exec(txt);
+    }
+    if (!match) {
+      return [];
+    }
+    offset = prefix.lastIndexOf('@');
+    prefix = prefix.slice(offset + 1);
+    if (prefix.match(/\s/)) {
+      return [];
+    }
+    return completions;
+  }
+};