Merge pull request #6 from jaseci-labs/jsx_semantic_color

Jsx Syntax Highlighting

Author: marsninja

README.md

@@ -72,4 +72,15 @@ To visualize the Jac graph while debugging, open the graph visualize view using
 - Document symbols, workspace symbols
 - Variables hint, and documentation on hover
 - Diagnostics
-- Diagnostics
+
+# Developer Mode
+
+Developer mode enables additional tools for extension development and debugging. To enable it:
+
+1. Open Command Palette (`Ctrl+Shift+P`)
+2. Run `Jac: Toggle Developer Mode`
+
+When enabled, the following features become available:
+
+- **Restart Language Server** - Button in editor title bar to restart the LSP server
+- **Inspect Token Scopes** - Dumps all TextMate token scopes for the current Jac file to help debug syntax highlighting

examples/app.jac

@@ -0,0 +1,24 @@
+
+
+
+
+with entry{
+    print("Hello, Jac!");
+}
+
+cl import from react {useState}
+
+cl {
+    def app() -> any {
+        let [count, setCount] = useState(0);
+        return <div>
+            <h1>Hello, World!</h1>
+            <p>Count: {count}</p>
+            <button onClick={lambda e: any -> None { setCount(count + 1); }}>
+                Increment
+            </button>
+            <ButtonComponent label="Click Me" />
+            <NavLink to="/about">About Page</NavLink>
+        </div>;
+    }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jaclang-extension",
-  "version": "2025.11.3",
+  "version": "2025.12.2",
   "displayName": "%extension.displayName%",
   "description": "%extension.description%",
   "publisher": "jaseci-labs",
@@ -76,6 +76,10 @@
         "command": "jaclang-extension.serveCurrentFile",
         "title": "Jac: Serve",
         "icon": "$(cloud)"
+      },
+      {
+        "command": "jaclang-extension.inspectTokenScopes",
+        "title": "Jac: Inspect Token Scopes"
       }
     ],
     "menus": {
@@ -102,6 +106,12 @@
           "group": "navigation@99",
           "when": "resourceLangId == jac && config.jaclang-extension.showServeCommand"
         }
+      ],
+      "commandPalette": [
+        {
+          "command": "jaclang-extension.inspectTokenScopes",
+          "when": "config.jaclang-extension.developerMode"
+        }
       ]
     },
     "languages": [
@@ -147,10 +157,17 @@
                 "items": {
                   "type": "string"
                 },
-                "default": ["run", "${file}"]
+                "default": [
+                  "run",
+                  "${file}"
+                ]
               },
               "console": {
-                "enum": ["internalConsole", "integratedTerminal", "externalTerminal"],
+                "enum": [
+                  "internalConsole",
+                  "integratedTerminal",
+                  "externalTerminal"
+                ],
                 "description": "Where to launch the debug target",
                 "default": "integratedTerminal"
               },
@@ -213,7 +230,9 @@
     "ms-python.python"
   ],
   "dependencies": {
-    "vscode-languageclient": "^9.0.1"
+    "vscode-languageclient": "^9.0.1",
+    "vscode-oniguruma": "^2.0.1",
+    "vscode-textmate": "^9.3.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",

package.json

@@ -0,0 +1,85 @@
+/*
+ * Jest tests for inspectTokenScopesHandler functionality in VSCode extension.
+ * Uses real vscode-textmate and vscode-oniguruma libraries for actual grammar testing.
+ */
+
+import * as path from 'path';
+import * as fs from 'fs';
+import { tokenizeContent } from '../commands/inspectTokenScopes';
+
+// Read the actual app.jac file
+const appJacPath = path.join(process.cwd(), 'examples', 'app.jac');
+const appJacContent = fs.readFileSync(appJacPath, 'utf-8');
+
+// Paths for grammar and wasm
+const grammarPath = path.join(process.cwd(), 'syntaxes', 'jac.tmLanguage.json');
+const wasmPath = path.join(process.cwd(), 'node_modules', 'vscode-oniguruma', 'release', 'onig.wasm');
+
+describe('inspectTokenScopesHandler', () => {
+  test('should tokenize Jac keywords correctly', async () => {
+    const tokenMap = await tokenizeContent(appJacContent, grammarPath, wasmPath);
+
+    // Check 'with' keyword (storage.type.function.jac)
+    const withScopes = tokenMap.get('with');
+    expect(withScopes).toBeDefined();
+    expect(withScopes).toContain('source.jac');
+    expect(withScopes).toContain('storage.type.function.jac');
+
+    // Check 'entry' keyword
+    const entryScopes = tokenMap.get('entry');
+    expect(entryScopes).toBeDefined();
+    expect(entryScopes).toContain('keyword.control.flow.jac');
+
+    // Check 'lambda' keyword
+    const lambdaScopes = tokenMap.get('lambda');
+    expect(lambdaScopes).toBeDefined();
+    expect(lambdaScopes).toContain('keyword.control.flow.jac');
+
+    // Check 'print' builtin
+    const printScopes = tokenMap.get('print');
+    expect(printScopes).toBeDefined();
+    expect(printScopes).toContain('support.function.builtin.jac');
+  });
+
+  test('should tokenize JSX elements correctly', async () => {
+    const tokenMap = await tokenizeContent(appJacContent, grammarPath, wasmPath);
+
+    // Check that we have JSX-related tokens
+    const allScopes = Array.from(tokenMap.values()).flat();
+
+    // Check for meta.jsx scope or entity.name.tag for JSX elements
+    const hasJsxScopes = allScopes.some(s =>
+      s.includes('jsx') ||
+      s.includes('entity.name.tag') ||
+      s.includes('punctuation.definition.tag')
+    );
+    expect(hasJsxScopes).toBe(true);
+
+    // Check specific JSX HTML tags
+    const divScopes = tokenMap.get('div');
+    expect(divScopes).toBeDefined();
+    expect(divScopes).toContain('entity.name.tag.html.jsx.jac');
+
+    const h1Scopes = tokenMap.get('h1');
+    expect(h1Scopes).toBeDefined();
+    expect(h1Scopes).toContain('entity.name.tag.html.jsx.jac');
+
+    const buttonScopes = tokenMap.get('button');
+    expect(buttonScopes).toBeDefined();
+    expect(buttonScopes).toContain('entity.name.tag.html.jsx.jac');
+
+    // Check JSX attributes
+    const onClickScopes = tokenMap.get('onClick');
+    expect(onClickScopes).toBeDefined();
+    expect(onClickScopes).toContain('entity.other.attribute-name.jsx.jac');
+
+    // Check PascalCase component names
+    const buttonComponentScopes = tokenMap.get('ButtonComponent');
+    expect(buttonComponentScopes).toBeDefined();
+    expect(buttonComponentScopes).toContain('support.class.component.jsx.jac');
+
+    const navLinkScopes = tokenMap.get('NavLink');
+    expect(navLinkScopes).toBeDefined();
+    expect(navLinkScopes).toContain('support.class.component.jsx.jac');
+  });
+});

src/__tests__/inspectTokenScopes.test.ts

@@ -3,6 +3,7 @@ import { runJacCommandForCurrentFile } from '../utils';
 import { COMMANDS } from '../constants';
 import { getLspManager } from '../extension';
 import { EnvManager } from '../environment/manager';
+import { inspectTokenScopesHandler } from './inspectTokenScopes';
 
 export function registerAllCommands(context: vscode.ExtensionContext, envManager: EnvManager) {
     context.subscriptions.push(
@@ -83,4 +84,11 @@ export function registerAllCommands(context: vscode.ExtensionContext, envManager
             }
         })
     );
+
+    // Inspect Token Scopes command - dumps all TextMate token scopes for the current Jac file
+    context.subscriptions.push(
+        vscode.commands.registerCommand(COMMANDS.INSPECT_SCOPES, async () => {
+            await inspectTokenScopesHandler(context);
+        })
+    );
 }