Merge pull request #5 from shezhangzhang/fix/wrong-decorations

release v0.3.0

Author: shezhangzhang

package.json

@@ -2,7 +2,7 @@
   "name": "antd-design-token",
   "displayName": "antd Design Token",
   "description": "VSCode extension for antd v5 design token.",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "publisher": "shezhangzhang",
   "engines": {
     "vscode": "^1.68.0"
@@ -59,7 +59,7 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "antd-token-previewer": "^1.0.0-alpha.20",
+    "antd-token-previewer": "^1.0.0-alpha.22",
     "rgb-hex": "^4.0.0"
   },
   "repository": {

src/decoration-manager.ts

@@ -122,7 +122,7 @@ export default class DecorationManager {
     }
 
     fullTokenKeys.forEach((key: string) => {
-      const regEx = new RegExp(`\\b(${key})\\b(?!-)`, "g");
+      const regEx = new RegExp(`\\b(${key})\\b(?!-|:)`, "g");
       let match;
 
       while ((match = regEx.exec(text))) {
@@ -245,12 +245,8 @@ export default class DecorationManager {
   }
 
   clearAllFileDecorations() {
-    console.log(11111);
-    console.log(this);
-    console.log(this.fileDecorationMap);
     if (this.fileDecorationMap?.size) {
       this.fileDecorationMap.forEach((value, key) => {
-        console.log("key", key);
         this.clearFileDecoration(key);
       });
     }

src/extension.ts

@@ -1,33 +1,36 @@
 import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
 import * as vscode from "vscode";
-import setupEventListener, { DisposableAndClear } from "./listener";
+import setupEventListenerAndDecorations, {
+  DisposableAndClear,
+} from "./listener";
 import setupAntdTokenCompletion from "./typing";
+import { checkAntdProject } from "./utils";
 
 export function activate(context: vscode.ExtensionContext) {
-  let isActive = true;
-  let disposeTyping: vscode.Disposable;
-  let disposableAndClear: DisposableAndClear;
+  const ACTIVE_KEY = "antd-design-token-active-key";
+  const isActive = context.globalState.get(ACTIVE_KEY);
+  let disposeTyping: vscode.Disposable | undefined;
+  let disposableAndClear: DisposableAndClear | undefined;
 
-  setup();
+  if (isActive || isActive === undefined) {
+    setup();
+  }
 
   const disposable = vscode.commands.registerCommand(
     "antd-design-token.toggle",
     () => {
-      isActive = !isActive;
+      const isActive = context.globalState.get(ACTIVE_KEY);
+      context.globalState.update(ACTIVE_KEY, !isActive);
 
       if (isActive) {
-        setup();
+        disposeAll();
         vscode.window.showInformationMessage(
-          "antd design token is active now."
+          "antd design token is inactive now."
         );
       } else {
-        disposeTyping.dispose();
-        disposableAndClear.disposable.forEach((disposable) =>
-          disposable.dispose()
-        );
-        disposableAndClear.clear();
+        setup();
         vscode.window.showInformationMessage(
-          "antd design token is inactive now."
+          "antd design token is active now."
         );
       }
     }
@@ -43,8 +46,55 @@ export function activate(context: vscode.ExtensionContext) {
       return;
     }
 
+    activeEditorListener(fullToken);
+
+    const isAntdProject = checkAntdProject();
+    if (isAntdProject) {
+      setupDecorationsAndCompletion(context, fullToken);
+    }
+  }
+
+  function setupDecorationsAndCompletion(
+    context: vscode.ExtensionContext,
+    fullToken: any
+  ) {
     disposeTyping = setupAntdTokenCompletion(fullToken);
-    disposableAndClear = setupEventListener(context, fullToken);
+    disposableAndClear = setupEventListenerAndDecorations(context, fullToken);
+  }
+
+  function disposeAll() {
+    if (disposeTyping) {
+      disposeTyping?.dispose();
+      disposeTyping = undefined;
+    }
+
+    if (disposableAndClear) {
+      disposableAndClear?.disposable?.forEach((disposable) =>
+        disposable?.dispose()
+      );
+      disposableAndClear?.clear();
+      disposableAndClear = undefined;
+    }
+  }
+
+  function activeEditorListener(fullToken: any) {
+    vscode.window.onDidChangeActiveTextEditor(
+      (editor) => {
+        if (editor) {
+          const isAntdProject = checkAntdProject();
+
+          if (isAntdProject) {
+            if (!disposeTyping && !disposableAndClear) {
+              setupDecorationsAndCompletion(context, fullToken);
+            }
+          } else {
+            disposeAll();
+          }
+        }
+      },
+      null,
+      context.subscriptions
+    );
   }
 }
 

src/listener.ts

@@ -1,12 +1,13 @@
 import * as vscode from "vscode";
 import DecorationManager from "./decoration-manager";
+import { checkAntdProject } from "./utils";
 
 export interface DisposableAndClear {
   disposable: vscode.Disposable[];
   clear: () => void;
 }
 
-export default function setupEventListener(
+export default function setupEventListenerAndDecorations(
   context: vscode.ExtensionContext,
   fullToken: any
 ): DisposableAndClear {
@@ -18,6 +19,7 @@ export default function setupEventListener(
   if (activeEditor) {
     fileLineCount = activeEditor.document.lineCount;
     decorationManager.setActiveEditor(activeEditor);
+    console.log(44444);
     decorationManager.triggerUpdateDecorations();
   }
 
@@ -60,6 +62,7 @@ export default function setupEventListener(
 
   const disposableActiveChange = vscode.window.onDidChangeActiveTextEditor(
     (editor) => {
+      console.log("change!!!!!");
       activeEditor = editor;
       if (editor) {
         fileLineCount = editor.document.lineCount || 0;

src/utils/index.ts

@@ -1,5 +1,7 @@
 import rgbHex from "rgb-hex";
-
+import * as vscode from "vscode";
+import * as fs from "fs";
+import * as path from "path";
 /**
  * Generate the MarkdownString for vscode.MarkdownString function
  * Note: should convert rgb color to hex
@@ -29,3 +31,33 @@ export function getColorTokenValue(value: string): string {
 
   return result;
 }
+
+export function checkAntdProject(): boolean {
+  const projectPath = getProjectPath();
+  console.log("projectPath", projectPath);
+
+  if (projectPath) {
+    const pkgFilePath = path.join(projectPath, "/package.json");
+
+    if (fs.existsSync(pkgFilePath)) {
+      const packegeJson = fs.readFileSync(pkgFilePath);
+      if (
+        packegeJson.toString().includes("antd") ||
+        packegeJson.toString().includes("rc-")
+      ) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export function getProjectPath(): string | undefined {
+  const fileName = vscode.window.activeTextEditor?.document?.fileName;
+  console.log("filename", fileName);
+
+  return vscode.workspace.workspaceFolders
+    ?.map((folder) => folder.uri.fsPath)
+    .filter((fsPath) => fileName?.startsWith(fsPath))[0];
+}