feat: add option showColorTokens, allows filtering color tokens from autocomplete results

Author: nderscore

src/getCompletions.ts

@@ -43,6 +43,7 @@ export const getCompletions = (
 
   logger(`token type <${type}>`);
 
+  const entries: ts.CompletionEntry[] = [];
   for (const entry of original.entries) {
     if (type === 'color') {
       const themeValue =
@@ -57,13 +58,18 @@ export const getCompletions = (
           detail: ' ' + defaultValue,
           description: 'ThemeToken',
         };
+        entries.push(entry);
         continue;
       }
     }
 
     const [scale, value] = getMaybeSpecificToken(entry.name, type, config);
     if (scale && value) {
       const isColor = scale === 'color';
+      if (isColor && !options.completionFilters.showColorTokens) {
+        // filter out color tokens if the option is disabled
+        continue;
+      }
       if (isColor) {
         entry.kindModifiers = 'color';
       }
@@ -73,7 +79,11 @@ export const getCompletions = (
         description: `${toPascal(scale)}Token`,
       };
     }
+
+    entries.push(entry);
   }
 
+  original.entries = entries;
+
   return original;
 };

src/index.ts

@@ -42,6 +42,10 @@ const init = (modules: { typescript: tss }) => {
       };
 
       const options = readOptions(ctx);
+
+      logger(`Options parsed`);
+      logger(options);
+
       const { defaultTheme, tamaguiConfigFilePath } = options;
 
       logger(`Using tamagui config path: ${tamaguiConfigFilePath}`);

src/readOptions.ts

@@ -10,10 +10,14 @@ export const readOptions = ({ info, modules }: TSContext) => {
     pathToApp = 'apps/next',
     defaultTheme = 'light',
     colorTileSize = 18,
+    completionFilters: { showColorTokens = true } = {},
   } = info.config as {
     pathToApp?: string;
     defaultTheme?: string;
     colorTileSize?: number;
+    completionFilters?: {
+      showColorTokens?: boolean;
+    };
   };
 
   const rootDir = path.join(
@@ -30,6 +34,9 @@ export const readOptions = ({ info, modules }: TSContext) => {
     tamaguiConfigFilePath,
     defaultTheme,
     colorTileSize,
+    completionFilters: {
+      showColorTokens,
+    },
   } as const;
 };