[Low priority] Added layout string decoration

apps/cli/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@types/node": "^16.0.1",
     "esbuild": "^0.14.21",
-    "xstate": "^4.29.0"
+    "xstate": "^4.30.0"
   },
   "peerDependencies": {
     "xstate": "^4.29.0"

apps/extension/client/package.json

@@ -88,7 +88,7 @@
     "@xstate/tools-shared": "1.1.0",
     "lz-string": "^1.4.4",
     "vscode-languageclient": "^7.0.0",
-    "xstate": "^4.29.0"
+    "xstate": "^4.30.0"
   },
   "devDependencies": {
     "@types/vscode": "^1.52.0",

apps/extension/client/src/extension.ts

@@ -15,6 +15,7 @@ import { XStateUpdateEvent } from "@xstate/tools-shared";
 import { uniqueId } from "xstate/lib/utils";
 import { getAuth, SignInResult } from "./auth";
 import { initiateEditor } from "./initiateEditor";
+import { initiateLayoutStringDecoration } from "./initiateLayoutStringDecoration";
 import { initiateTypegen } from "./initiateTypegen";
 import { initiateVisualizer } from "./initiateVisualizer";
 import { uriHandler } from "./UriHandler";
@@ -98,6 +99,7 @@ export async function activate(context: vscode.ExtensionContext) {
   initiateVisualizer(context, client, addXStateUpdateListener);
   initiateEditor(context, client);
   initiateTypegen(context, client, addXStateUpdateListener);
+  initiateLayoutStringDecoration(context);
 
   context.subscriptions.push(
     vscode.window.registerUriHandler(uriHandler),

apps/extension/client/src/initiateLayoutStringDecoration.ts

@@ -0,0 +1,75 @@
+import * as vscode from "vscode";
+import { parseMachinesFromFile } from "@xstate/machine-extractor";
+import { getRangeFromSourceLocation } from "@xstate/tools-shared";
+
+export const initiateLayoutStringDecoration = (
+  context: vscode.ExtensionContext,
+) => {
+  const HideTextDecoration = vscode.window.createTextEditorDecorationType({
+    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed,
+    textDecoration: "none; display: none;", // a hack to inject custom style
+  });
+
+  const handleDecorators = (editor: vscode.TextEditor) => {
+    editor.setDecorations(HideTextDecoration, []);
+    const result = parseMachinesFromFile(editor.document.getText());
+
+    const ranges: vscode.DecorationOptions[] = [];
+
+    result.machines.forEach((machine) => {
+      const layoutElement = machine.getLayoutComment();
+
+      if (layoutElement?.comment) {
+        const range = getRangeFromSourceLocation(
+          layoutElement?.comment.node.loc!,
+        );
+        ranges.push({
+          range: new vscode.Range(
+            new vscode.Position(range.start.line, range.start.character),
+            new vscode.Position(range.end.line, range.end.character),
+          ),
+          renderOptions: {
+            before: {
+              contentText: `/** xstate-layout comment */`,
+            },
+          },
+          hoverMessage: new vscode.MarkdownString(`XState Layout comment`),
+        });
+      }
+    });
+
+    editor.setDecorations(HideTextDecoration, ranges);
+  };
+
+  vscode.window.onDidChangeActiveTextEditor(
+    (e) => {
+      handleDecorators(e);
+    },
+    null,
+    context.subscriptions,
+  );
+
+  vscode.workspace.onDidChangeTextDocument(
+    (event) => {
+      vscode.window.visibleTextEditors.forEach((editor) => {
+        handleDecorators(editor);
+      });
+    },
+    null,
+    context.subscriptions,
+  );
+
+  vscode.window.onDidChangeVisibleTextEditors(
+    (editors) => {
+      handleDecorators(editors[0]);
+    },
+    null,
+    context.subscriptions,
+  );
+
+  vscode.window.onDidChangeTextEditorSelection((e) => {
+    handleDecorators(e.textEditor);
+  });
+
+  handleDecorators(vscode.window.activeTextEditor);
+};

apps/extension/server/package.json

@@ -14,7 +14,7 @@
     "@xstate/tools-shared": "1.1.0",
     "vscode-languageserver": "^7.0.0",
     "vscode-languageserver-textdocument": "^1.0.1",
-    "xstate": "^4.29.0"
+    "xstate": "^4.30.0"
   },
   "devDependencies": {},
   "scripts": {

packages/machine-extractor/package.json

@@ -24,6 +24,6 @@
     "jest": "^27.4.7",
     "patch-package": "^6.4.7",
     "typescript": "^4.3.5",
-    "xstate": "^4.29.0"
+    "xstate": "^4.30.0"
   }
 }

packages/shared/package.json

@@ -20,6 +20,6 @@
     "jest": "^27.4.7",
     "jest-watch-typeahead": "^1.0.0",
     "prettier": "^2.3.1",
-    "xstate": "^4.29.0"
+    "xstate": "^4.30.0"
   }
 }

yarn.lock

@@ -7802,10 +7802,10 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xstate@^4.29.0:
-  version "4.29.0"
-  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.29.0.tgz#74161f1e4b7fadb073593085f4fbb58068ee0b86"
-  integrity sha512-F6WF5s6xG/bm8Oxi2ETuzwGQW8yleL5I4JPxZl49m7Uw7D4LAXu+4dvUK78Uo4D863sM8auqw6+1Xmj9mFlmDQ==
+xstate@^4.30.0:
+  version "4.30.1"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.30.1.tgz#e1317a5fa1e3ace6fabc5938e8f20f97e2e2f81b"
+  integrity sha512-vNOk8iRfhtbl9/RVF6HJWbL+YfsfGLiee1tGm6cuDcPrSStsRvfAhLVxSPoePx5XBlCSYOXaweLStmrpk2rvhA==
 
 y18n@^4.0.0:
   version "4.0.3"