Highlight function/class def names properly

thesoftwarephilosopher · Aug 22, 2024 · 15aad6a · 15aad6a
1 parent 0681695
commit 15aad6a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/site/monarch/samplecode.tsx b/site/monarch/samplecode.tsx
@@ -5,6 +5,9 @@ function foo$<K, V, T extends Map<K, V>>(): Required<ReturnType<T['clear']>> {
   return null as any;
 }
 
+(function () { const foo = 3; })();
+(class { bar = 4; });
+
 function foo$two<T>(a: any) {
   return undefined as T;
 }

diff --git a/site/token-provider.ts b/site/token-provider.ts
@@ -8,6 +8,7 @@
  * 1. `...` is highlighted as a keyword
  * 2. `export/etc` are highlighted as control-flow keywords
  * 3. Class fields are highlighted as variables
+ * 4. Highlight function/class def names properly
  * 
  */
 
@@ -74,17 +75,28 @@ export const tokenProvider = {
     ],
 
     common: [
-      // identifiers and keywords
-      [
-        /#?[a-z_$][\w$]*/,
+
+      // highlight function/class defs nicely
+      [/((?:function|class)\s+)(#?[\w$]+\s*)([<(]?)/, [
+        { token: 'keyword' },
         {
           cases: {
-            '@ctrlKeywords': 'keyword.flow',
-            '@keywords': 'keyword',
-            '@default': 'identifier',
+            '$1~function\\s+': { token: 'method' },
+            '$1~class\\s+': { token: 'type.identifier' },
+            '': { token: 'string.sql' },
           }
+        },
+        { token: '@rematch' },
+      ]],
+
+      // identifiers and keywords
+      [/#?[a-z_$][\w$]*/, {
+        cases: {
+          '@ctrlKeywords': 'keyword.flow',
+          '@keywords': 'keyword',
+          '@default': 'identifier',
         }
-      ],
+      }],
       [/[A-Z][\w\$]*/, 'type.identifier'], // to show class names nicely
       // [/[A-Z][\w\$]*/, 'identifier'],