feat: add support for js ts files and use textEdit for completions (#481)

* feat: add support for js ts files and use textEdit for completions

* chpre: update plugin readme

Author: rohanchkrabrty

.vscode/tasks.json

@@ -27,15 +27,30 @@
       "label": "plugin-vscode: stop-dev",
       "command": "echo ${input:terminate}",
       "type": "shell",
-      "problemMatcher": []
+      "problemMatcher": [],
+      "options": {
+        "shell": {
+          "executable": "bash",
+          "args": ["-c"]
+        }
+      },
+      "presentation": {
+        "echo": false,
+        "reveal": "never",
+        "focus": false,
+        "panel": "new",
+        "showReuseMessage": false,
+        "clear": false,
+        "close": true
+      }
     }
   ],
   "inputs": [
     {
       "id": "terminate",
       "type": "command",
       "command": "workbench.action.tasks.terminate",
-      "args": "terminateAll"
+      "args": "plugin-vscode: start-dev"
     }
   ]
 }

packages/plugin-vscode/README.md

@@ -35,10 +35,14 @@ Instantly see the exact values of Apsara Design Tokens with rich visual previews
 5. Browse through the intelligent suggestions
 6. Select a token to insert it with proper `var()` syntax
 
-### Supported File Types
+### Supported Languages
 
-- CSS (`.css`)
-- SCSS (`.scss`)
+- css (`.css`)
+- scss (`.scss`)
+- javascript (`.js`)
+- typescript (`.ts`)
+- javascriptreact (`.jsx`)
+- typescriptreact (`.tsx`)
 
 ## Configuration
 
@@ -58,4 +62,4 @@ The trigger characters that activate autocomplete for Apsara Design Tokens. You
 ## Support
 
 - 📖 [Documentation](https://apsara.raystack.org)
-- 🐛 [Report Issues](https://github.com/raystack/apsara/issues)
+- 🐛 [Report Issues](https://github.com/raystack/apsara/issues)

packages/plugin-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "apsara-for-vscode",
   "displayName": "Apsara for VSCode",
   "publisher": "Raystack",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "description": "VS Code extension for @raystack/apsara",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -21,7 +21,14 @@
   },
   "keywords": ["apsara", "raystack"],
   "categories": ["Programming Languages", "Snippets", "Other"],
-  "activationEvents": ["onLanguage:css", "onLanguage:scss"],
+  "activationEvents": [
+    "onLanguage:css",
+    "onLanguage:scss",
+    "onLanguage:javascript",
+    "onLanguage:typescript",
+    "onLanguage:javascriptreact",
+    "onLanguage:typescriptreact"
+  ],
   "main": "./dist/client.js",
   "contributes": {
     "configuration": {

packages/plugin-vscode/src/client.ts

@@ -12,6 +12,16 @@ let client: LanguageClient;
 
 const settings = workspace.getConfiguration('apsaraForVSCode');
 
+const SUPPORTED_LANGUAGES = [
+  'css',
+  'scss',
+  'javascript',
+  'typescript',
+  'javascriptreact',
+  'typescriptreact'
+];
+const SUPPORTED_SCHEMES = ['file', 'untitled'];
+
 export function activate(context: ExtensionContext) {
   // The server is implemented in node
   const serverModule = context.asAbsolutePath(path.join('dist', 'server.js'));
@@ -32,11 +42,13 @@ export function activate(context: ExtensionContext) {
 
   // Options to control the language client
   const clientOptions: LanguageClientOptions = {
-    // Register the server for css and scss files
-    documentSelector: [
-      { scheme: 'file', language: 'css' },
-      { scheme: 'file', language: 'scss' }
-    ],
+    // Register the server for supported languages
+    documentSelector: SUPPORTED_LANGUAGES.reduce((acc, language) => {
+      SUPPORTED_SCHEMES.forEach(scheme => {
+        acc.push({ scheme, language });
+      });
+      return acc;
+    }, []),
     synchronize: {
       // Notify the server about file changes to '.clientrc files contained in the workspace
       fileEvents: workspace.createFileSystemWatcher('**/.clientrc')

packages/plugin-vscode/src/lib/utils.ts

@@ -88,3 +88,25 @@ export const VSCodeColorToColor = (color: VSCodeColorType): string => {
     .alpha(color.alpha)
     .hex();
 };
+
+// Function to get the pattern match and the range around the cursor
+export const getPatternMatch = (
+  pattern: RegExp,
+  text: string,
+  cursorPosition: number
+) => {
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+
+    // Check if cursor is within this match
+    if (cursorPosition >= start && cursorPosition <= end) {
+      return { start, end, match: match[0] };
+    }
+  }
+
+  // Fallback: return the cursor position
+  return { start: cursorPosition, end: cursorPosition, match: null };
+};

packages/plugin-vscode/src/server.ts

@@ -15,6 +15,7 @@ import {
 import {
   VSCodeColorToColor,
   colorToVSCodeColor,
+  getPatternMatch,
   getTokenName,
   getTokenValueFromName
 } from './lib/utils';
@@ -52,7 +53,6 @@ const groupedCompletionItems = Object.fromEntries(
       const generatedTokenName = getTokenName(tokenGroupName, tokenName);
       return {
         label: generatedTokenName,
-        insertText: `var(${generatedTokenName})`,
         detail: tokenValue,
         filterText: generatedTokenName,
         kind:
@@ -105,33 +105,42 @@ connection.onCompletion(
     let matchedCompletionItems: CompletionItem[] = [];
 
     // if the doc can't be found, return nothing
-    if (!doc) {
-      return [];
-    }
+    if (!doc) return [];
 
     const currentText = doc.getText({
       start: { line: textDocumentPosition.position.line, character: 0 },
       end: { line: textDocumentPosition.position.line, character: 1000 }
     });
 
-    // if the current text is empty or doesn't include a colon, return nothing
-    if (currentText.trim().length === 0 || !currentText.includes(':')) {
+    // if the current text is empty or doesn't include a colon or =, return nothing
+    if (
+      currentText.trim().length === 0 ||
+      !(currentText.includes(':') || currentText.includes('='))
+    )
       return [];
-    }
 
-    // Find if the cursor is inside a var(...) wrapper
     const cursor = textDocumentPosition.position.character;
-    let hasVarWrapper = false;
-    const varRegex = /var\s*\(([^)]*)\)/g;
-    let match;
-    while ((match = varRegex.exec(currentText)) !== null) {
-      const start = match.index;
-      const end = match.index + match[0].length;
-      if (cursor >= start && cursor <= end) {
-        hasVarWrapper = true;
-        break;
-      }
-    }
+
+    // Look for complete var(...) wrappers
+    const completeVarMatch = getPatternMatch(
+      /var\s*\(([^)]*)\)/g,
+      currentText,
+      cursor
+    );
+
+    // Look for incomplete var(... wrappers
+    const incompleteVarMatch = getPatternMatch(
+      /var\s*\(([^)]*)/g,
+      currentText,
+      cursor
+    );
+
+    // Look for token patterns: -- followed by word characters, or just --
+    const tokenMatch = getPatternMatch(
+      /--[a-zA-Z0-9-_]*/g,
+      currentText,
+      cursor
+    );
 
     for (const [tokenGroupName, pattern] of Object.entries(
       tokenGroupPatterns
@@ -141,27 +150,35 @@ connection.onCompletion(
       const currentCompletionItems =
         groupedCompletionItems[tokenGroupName as TokenGroupType];
 
-      // Create new completion items with adjusted insertText based on whether var() already exists at the cursor
-      const adjustedCompletionItems = currentCompletionItems.map(item => ({
-        ...item,
-        insertText: hasVarWrapper ? item.label : item.insertText
-      }));
-
       matchedCompletionItems = matchedCompletionItems.concat(
-        adjustedCompletionItems
+        currentCompletionItems
       );
     }
 
-    // if there were matches above, send them
-    if (matchedCompletionItems.length) return matchedCompletionItems;
+    const completionItems = matchedCompletionItems.length
+      ? matchedCompletionItems
+      : allCompletionItems;
 
-    // if there were no matches, send everything with adjusted insertText
-    const adjustedAllItems = allCompletionItems.map(item => ({
+    return completionItems.map(item => ({
       ...item,
-      insertText: hasVarWrapper ? item.label : item.insertText
+      textEdit: {
+        range: {
+          start: {
+            line: textDocumentPosition.position.line,
+            character: tokenMatch.start
+          },
+          end: {
+            line: textDocumentPosition.position.line,
+            character: tokenMatch.end
+          }
+        },
+        newText: completeVarMatch.match
+          ? item.label
+          : incompleteVarMatch.match
+            ? `${item.label})`
+            : `var(${item.label})`
+      }
     }));
-
-    return adjustedAllItems;
   }
 );
 
@@ -180,28 +197,21 @@ connection.onHover(
       end: { line: textDocumentPosition.position.line, character: 1000 }
     });
 
-    const cursorChar = textDocumentPosition.position.character;
+    const cursorPosition = textDocumentPosition.position.character;
 
-    // Match a token at the cursor like --rs-space-11
-    const tokenRegex = /--[a-zA-Z0-9-_]+/g;
-    let match: RegExpExecArray | null;
-    let matchedToken: string | undefined;
-
-    while ((match = tokenRegex.exec(currentText)) !== null) {
-      const start = match.index;
-      const end = start + match[0].length;
-      if (cursorChar >= start && cursorChar <= end) {
-        matchedToken = match[0];
-        break;
-      }
-    }
+    // Look for token match at the cursor position
+    const tokenMatch = getPatternMatch(
+      /--[a-zA-Z0-9-_]*/g,
+      currentText,
+      cursorPosition
+    );
 
-    if (!matchedToken) {
+    if (!tokenMatch.match) {
       return { contents: [] };
     }
 
     const result = allCompletionItems.find(
-      token => token.label === matchedToken
+      token => token.label === tokenMatch.match
     );
 
     if (result === undefined) {