Refactored code for improving performance of vscode

src/analytics.ts

@@ -1,12 +1,9 @@
 import httpClient from './httpClient';
-import * as vscode from "vscode";
-import * as packageJson from '../package.json';
+import { analyticsID, pluginID } from './types';
 
 class Analytics {
 
   public sendEvent(eventName: string, eventID:string, errorMessage?: string, diagramType?:string) {
-    const analyticsID = vscode.env.machineId;
-    const pluginID= packageJson.name === "vscode-mermaid-chart" ?  "MERMAIDCHART_VS_CODE_PLUGIN" : "MERMAID_PREVIEW_VS_CODE_PLUGIN";
     const payload = {
       analyticsID,
       pluginID,

src/commands/createFile.ts

@@ -3,40 +3,13 @@ import { PreviewPanel } from "../panels/previewPanel";
 import { TempFileCache } from "../cache/tempFileCache";
 import analytics from "../analytics";
 import { normalizeMermaidText } from "../frontmatter";
+import { exampleContent } from "../types";
 
 export async function createMermaidFile(
   context: vscode.ExtensionContext,
   diagramContent: string | null,
   isTempFile: boolean
 ): Promise<vscode.TextEditor | null> {
-  const exampleContent = `flowchart TD
-    %% Nodes
-        A("fab:fa-youtube Starter Guide")
-        B("fab:fa-youtube Make Flowchart")
-        n1@{ icon: "fa:gem", pos: "b", h: 24}
-        C("fa:fa-book-open Learn More")
-        D{"Use the editor"}
-        n2(Many shapes)@{ shape: delay}
-        E(fa:fa-shapes Visual Editor)
-        F("fa:fa-chevron-up Add node in toolbar")
-        G("fa:fa-comment-dots AI chat")
-        H("fa:fa-arrow-left Open AI in side menu")
-        I("fa:fa-code Text")
-        J(fa:fa-arrow-left Type Mermaid syntax)
-
-    %% Edge connections between nodes
-        A --> B --> C --> n1 & D & n2
-        D -- Build and Design --> E --> F
-        D -- Use AI --> G --> H
-        D -- Mermaid js --> I --> J
-
-    %% Individual node styling. Try the visual editor toolbar for easier styling!
-        style E color:#FFFFFF, fill:#AA00FF, stroke:#AA00FF
-        style G color:#FFFFFF, stroke:#00C853, fill:#00C853
-        style I color:#FFFFFF, stroke:#2962FF, fill:#2962FF
-
-    %% You can add notes with two "%" signs in a row!`;
-
   try {
     const document = await vscode.workspace.openTextDocument({
       language: "mermaid",

src/conflictHandle.ts

@@ -1,7 +1,5 @@
 import * as vscode from "vscode";
-export const MERMAID_CHART_EXTENSION_ID = 'MermaidChart.vscode-mermaid-chart';
-export const THIS_EXTENSION_ID = 'vstirbu.vscode-mermaid-preview';
-export const IS_ACTIVE_CONTEXT_KEY = 'mermaidPreview:isActive';
+import { IS_ACTIVE_CONTEXT_KEY, MERMAID_CHART_EXTENSION_ID } from "./types";
 
 export async function checkForOfficialExtension(context: vscode.ExtensionContext): Promise<boolean> {
   // Check if the official Mermaid Chart extension is installed

src/extension.ts

@@ -4,7 +4,6 @@ import { MermaidChartProvider, MCTreeItem, getAllTreeViewProjectsCache, getProje
 import { MermaidChartVSCode } from "./mermaidChartVSCode";
 import {
   applyMermaidChartTokenHighlighting,
-  configSection,
   editMermaidChart,
   findComments,
   findDiagramCode,
@@ -16,20 +15,17 @@ import {
   getMermaidChartTokenDecoration,
   insertMermaidChartToken,
   isAuxFile,
-  MermaidChartToken,
   syncAuxFile,
   triggerSuggestIfEmpty,
   updateViewVisibility,
   viewMermaidChart,
 } from "./util";
 import { MermaidChartCodeLensProvider } from "./mermaidChartCodeLensProvider";
 import { createMermaidFile, getPreview, openMermaidPreview } from "./commands/createFile";
-import { handleTextDocumentChange } from "./eventHandlers";
 import { TempFileCache } from "./cache/tempFileCache";
 import { PreviewPanel } from "./panels/previewPanel";
-import { getSnippetsBasedOnDiagram } from "./constants/condSnippets";
+import { getSnippetsBasedOnDiagram } from "./constants/codeSnippets";
 import { ensureIdField, extractIdFromCode, getFirstWordFromDiagram, normalizeMermaidText } from "./frontmatter";
-import { customErrorMessage } from "./constants/errorMessages";
 import { MermaidWebviewProvider } from "./panels/loginPanel";
 import analytics from "./analytics";
 import { RemoteSyncHandler } from "./remoteSyncHandler";
@@ -42,11 +38,8 @@ import { injectMermaidTheme } from "./previewmarkdown/themeing";
 import { extendMarkdownItWithMermaid } from "./previewmarkdown/shared-md-mermaid";
 import { checkForOfficialExtension } from "./conflictHandle";
 import * as packageJson from '../package.json'; 
-import { clearTmLanguageCache } from "./syntaxHighlighter";
+import { configSection, customErrorMessage, MermaidChartToken, pluginID } from "./types";
 
-const pluginID = packageJson.name === "vscode-mermaid-chart" ?  "MERMAIDCHART_VS_CODE_PLUGIN" : "MERMAID_PREVIEW_VS_CODE_PLUGIN";
-
-let diagramMappings: { [key: string]: string[] } = require('../src/diagramTypeWords.json');
 let isExtensionStarted = false;
 
 export async function activate(context: vscode.ExtensionContext) {
@@ -109,12 +102,10 @@ export async function activate(context: vscode.ExtensionContext) {
   const activeEditor = vscode.window.activeTextEditor;
     if (activeEditor && !isExtensionStarted) {
         isExtensionStarted = true;
-        handleTextDocumentChange(activeEditor, diagramMappings, true);
     }
 
   vscode.workspace.onDidChangeTextDocument((event) =>
     {
-      handleTextDocumentChange(event, diagramMappings, false);
       updateMermaidChartTokenHighlighting();
       triggerSuggestIfEmpty(event.document);
     },
@@ -124,7 +115,6 @@ export async function activate(context: vscode.ExtensionContext) {
 
   vscode.window.onDidChangeActiveTextEditor(
     (event) => {
-      handleTextDocumentChange(event, diagramMappings, true);
       updateMermaidChartTokenHighlighting();
     },
     null,
@@ -800,6 +790,4 @@ return {
 }
 
 // This method is called when your extension is deactivated
-export function deactivate() {
-  clearTmLanguageCache();
-}
+export function deactivate() {}

src/frontmatter.ts

@@ -1,13 +1,9 @@
 import { parseDocument, type Document, YAMLMap, isMap, parse, stringify } from 'yaml';
 import * as fs from 'fs';
 import * as path from 'path';
+import { COMMENT_REGEX, DIRECTIVE_REGEX, FIRST_WORD_REGEX } from './types';
 
 // const frontMatterRegex = /^-{3}\s*[\n\r](.*?[\n\r])-{3}\s*[\n\r]+/s;
-const COMMENT_REGEX = /^\s*%%(?!{)[^\n]+\n?/gm;
-const DIRECTIVE_REGEX = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
-const FIRST_WORD_REGEX = /^\s*(\w+)/;
-
-export const anyCommentRegex = /\s*%%.*\n/gm;
 
 export function parseFrontMatterYAML(frontMatterYaml: string): Document<YAMLMap, false> {
     const document: Document = parseDocument(frontMatterYaml);

src/httpClient.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosInstance } from 'axios';
-import { defaultBaseURL } from './util';
+import { defaultBaseURL } from './types';
+
 
 const httpClient: AxiosInstance = axios.create({
   baseURL: defaultBaseURL,

src/mermaidChartAuthenticationProvider.ts

@@ -17,9 +17,7 @@ import { v4 as uuid } from "uuid";
 import { PromiseAdapter, promiseFromEvent } from "./util";
 import { MermaidChartVSCode } from "./mermaidChartVSCode";
 import analytics from "./analytics";
-
-const utmSource = 'mermaid_preview_vs_code';
-const utmCampaign = "VSCode extension";
+import { utmCampaign, utmSource } from "./types";
 class UriEventHandler extends EventEmitter<Uri> implements UriHandler {
   public handleUri(uri: Uri) {
     this.fire(uri);

src/mermaidChartCodeLensProvider.ts

@@ -1,7 +1,8 @@
 import * as vscode from "vscode";
-import {  applyGutterIconDecoration, isAuxFile, MermaidChartToken } from "./util";
+import {  applyGutterIconDecoration, isAuxFile } from "./util";
 import { MermaidChartAuthenticationProvider } from "./mermaidChartAuthenticationProvider";
 import { extractIdFromCode, extractMetadataFromCode, checkReferencedFiles, findDiagramContentStartPosition } from "./frontmatter";
+import { MermaidChartToken } from "./types";
 
 export class MermaidChartCodeLensProvider implements vscode.CodeLensProvider {
   constructor(private mermaidChartTokens: MermaidChartToken[]) {}

src/mermaidChartProvider.ts

@@ -1,10 +1,6 @@
 import * as vscode from "vscode";
 import { MermaidChartVSCode } from "./mermaidChartVSCode";
-import { MCProject } from "./types";
-
-export const ITEM_TYPE_PROJECT = "project";
-export const ITEM_TYPE_DOCUMENT = "document";
-export const ITEM_TYPE_UNKNOWN = "unknown";
+import { ITEM_TYPE_DOCUMENT, ITEM_TYPE_PROJECT, ITEM_TYPE_UNKNOWN, MCProject } from "./types";
 
 let allTreeViewProjectsCache: Project[] = [];
 

src/mermaidChartVSCode.ts

@@ -1,8 +1,9 @@
 import * as vscode from "vscode";
 import { MermaidChart } from "@mermaidchart/sdk";
 import { MermaidChartAuthenticationProvider } from "./mermaidChartAuthenticationProvider";
-import { defaultBaseURL, updateViewVisibility } from "./util";
+import {  updateViewVisibility } from "./util";
 import { MermaidWebviewProvider } from "./panels/loginPanel";
+import { defaultBaseURL } from "./types";
 
 export class MermaidChartVSCode extends MermaidChart {
   constructor() {

src/panels/previewPanel.ts

@@ -3,12 +3,7 @@ import { debounce } from "../utils/debounce";
 import { getWebviewHTML } from "../templates/previewTemplate";
 import * as packageJson from "../../package.json";
 import { saveDiagramAsPng, saveDiagramAsSvg } from "../services/renderService";
-const DARK_THEME_KEY = "mermaid.vscode.dark_theme";
-const LIGHT_THEME_KEY = "mermaid.vscode.light_theme";
-const MAX_ZOOM= "mermaid.vscode.max_Zoom";
-const MAX_CHAR_LENGTH = "mermaid.vscode.max_CharLength";
-const MAX_EDGES = "mermaid.vscode.max_Edges";
-
+import { DARK_THEME_KEY, LIGHT_THEME_KEY, MAX_CHAR_LENGTH, MAX_EDGES, MAX_ZOOM } from "../types";
 
 export class PreviewPanel {
   private static currentPanel: PreviewPanel | undefined;
@@ -19,8 +14,6 @@ export class PreviewPanel {
   private readonly diagnosticsCollection: vscode.DiagnosticCollection;
   private lastContent: string = "";
 
-
-
   private constructor(panel: vscode.WebviewPanel, document: vscode.TextDocument) {
     this.panel = panel;
     this.document = document;

src/previewmarkdown/themeing.ts

@@ -1,6 +1,7 @@
 import type MarkdownIt from 'markdown-it';
 import * as vscode from 'vscode';
-import { configSection } from '../util';
+import { configSection } from '../types';
+
 
 const defaultMermaidTheme = 'default';
 const validMermaidThemes = [