From 89f275fab6f55b639890dd0a58f2f398a6ed7bb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 5 Oct 2023 11:09:37 +0200 Subject: [PATCH] Drop support for the old visualizer (#375) * Drop support for the old visualizer * remove redundant scripts * add changeset --- .changeset/nasty-elephants-drop.md | 5 + apps/extension/client/package.json | 8 +- apps/extension/client/src/extension.ts | 2 - .../client/src/initiateVisualizer.ts | 144 ------------------ apps/extension/client/src/typeSafeVsCode.ts | 4 - apps/extension/client/src/vizWebviewScript.ts | 137 ----------------- apps/extension/server/src/server.ts | 10 -- package.json | 12 -- 8 files changed, 6 insertions(+), 316 deletions(-) create mode 100644 .changeset/nasty-elephants-drop.md delete mode 100644 apps/extension/client/src/initiateVisualizer.ts delete mode 100644 apps/extension/client/src/vizWebviewScript.ts diff --git a/.changeset/nasty-elephants-drop.md b/.changeset/nasty-elephants-drop.md new file mode 100644 index 00000000..5bb38930 --- /dev/null +++ b/.changeset/nasty-elephants-drop.md @@ -0,0 +1,5 @@ +--- +'stately-vscode': major +--- + +Removed support for the deprecated visualizer. diff --git a/apps/extension/client/package.json b/apps/extension/client/package.json index d170e3c3..38c614ba 100644 --- a/apps/extension/client/package.json +++ b/apps/extension/client/package.json @@ -44,11 +44,6 @@ "publisher": "statelyai", "contributes": { "commands": [ - { - "command": "stately-xstate.visualize", - "title": "Open Inspector", - "category": "XState" - }, { "command": "stately-xstate.edit", "title": "Open Visual Editor", @@ -90,7 +85,7 @@ "active" ], "default": "beside", - "description": "Target for opening the Visual Editor and Inspector. Beside opens in a group next to the current file, while active opens in the current group of the current file." + "description": "Target for opening the Visual Editor. Beside opens in a group next to the current file, while active opens in the current group of the current file." } } }, @@ -103,7 +98,6 @@ "scripts": { "lint": "tsc", "test": "jest --passWithNoTests", - "webview:viz:build": "esbuild src/vizWebviewScript.ts --bundle --outfile=scripts/vizWebview.js", "vscode:build": "esbuild --bundle --platform=\"node\" src/extension.ts --outfile=dist/index.js --external:vscode --format=cjs --sourcemap", "vscode:build:dev": "yarn vscode:build --define:process.env.NODE_ENV=\\\"development\\\"", "vscode:build:prod": "yarn vscode:build --define:process.env.NODE_ENV=\\\"production\\\"" diff --git a/apps/extension/client/src/extension.ts b/apps/extension/client/src/extension.ts index bb9ce800..9a393a33 100644 --- a/apps/extension/client/src/extension.ts +++ b/apps/extension/client/src/extension.ts @@ -8,7 +8,6 @@ import * as vscode from 'vscode'; import { handleTypegenNestingConfig } from './checkTypegenNesting'; import { initiateEditor } from './initiateEditor'; import { initiateTypegen } from './initiateTypegen'; -import { initiateVisualizer } from './initiateVisualizer'; import { TypeSafeLanguageClient } from './typeSafeLanguageClient'; let languageClient: TypeSafeLanguageClient | undefined; @@ -21,7 +20,6 @@ export async function activate(context: vscode.ExtensionContext) { await languageClient.onReady(); handleTypegenNestingConfig(); - initiateVisualizer(context, languageClient); initiateEditor(context, languageClient); initiateTypegen(context, languageClient); } diff --git a/apps/extension/client/src/initiateVisualizer.ts b/apps/extension/client/src/initiateVisualizer.ts deleted file mode 100644 index 6808d78b..00000000 --- a/apps/extension/client/src/initiateVisualizer.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { ExtractorMachineConfig } from '@xstate/machine-extractor'; -import * as path from 'path'; -import * as vscode from 'vscode'; -import { MachineConfig } from 'xstate'; -import { getWebviewContent } from './getWebviewContent'; -import { TypeSafeLanguageClient } from './typeSafeLanguageClient'; -import * as typeSafeVsCode from './typeSafeVsCode'; -import { VizWebviewMachineEvent } from './vizWebviewScript'; - -export const initiateVisualizer = ( - context: vscode.ExtensionContext, - languageClient: TypeSafeLanguageClient, -) => { - let currentPanel: vscode.WebviewPanel | undefined; - let lastTokenSource: vscode.CancellationTokenSource | undefined; - - const sendMessage = (event: VizWebviewMachineEvent) => { - currentPanel?.webview.postMessage(event); - }; - - const startService = ( - config: ExtractorMachineConfig, - machineIndex: number, - uri: string, - guardsToMock: string[], - ) => { - languageClient.sendRequest('setDisplayedMachine', { - uri, - machineIndex, - }); - if (currentPanel) { - currentPanel.reveal(typeSafeVsCode.getViewColumn()); - - sendMessage({ - type: 'RECEIVE_SERVICE', - config, - guardsToMock, - }); - } else { - currentPanel = vscode.window.createWebviewPanel( - 'visualizer', - 'XState Visualizer', - typeSafeVsCode.getViewColumn(), - { enableScripts: true, retainContextWhenHidden: true }, - ); - - const onDiskPath = vscode.Uri.file( - path.join(context.extensionPath, 'scripts', 'vizWebview.js'), - ); - - const src = currentPanel.webview.asWebviewUri(onDiskPath); - - currentPanel.webview.html = getWebviewContent(src, 'XState Visualizer'); - - sendMessage({ - type: 'RECEIVE_SERVICE', - config, - guardsToMock, - }); - - // Handle disposing the current XState Visualizer - currentPanel.onDidDispose( - () => { - languageClient.sendRequest('clearDisplayedMachine', undefined); - currentPanel = undefined; - }, - undefined, - context.subscriptions, - ); - } - }; - - context.subscriptions.push( - typeSafeVsCode.registerCommand('stately-xstate.visualize', async () => { - lastTokenSource?.cancel(); - lastTokenSource = new vscode.CancellationTokenSource(); - try { - const activeTextEditor = vscode.window.activeTextEditor!; - const uri = resolveUriToFilePrefix(activeTextEditor.document.uri.path); - const { config, machineIndex, namedGuards } = - await languageClient.sendRequest( - 'getMachineAtCursorPosition', - { - uri, - position: { - line: activeTextEditor.selection.start.line, - column: activeTextEditor.selection.start.character, - }, - }, - lastTokenSource.token, - ); - startService(config, machineIndex, uri, namedGuards); - } catch { - vscode.window.showErrorMessage( - 'Could not find a machine at the current cursor.', - ); - } - }), - ); - - context.subscriptions.push( - languageClient.onNotification( - 'displayedMachineUpdated', - ({ config, namedGuards }) => { - sendMessage({ - type: 'UPDATE', - config, - guardsToMock: namedGuards, - }); - }, - ), - ); - - context.subscriptions.push( - typeSafeVsCode.registerCommand( - 'stately-xstate.inspect', - (uri, machineIndex) => { - lastTokenSource?.cancel(); - lastTokenSource = new vscode.CancellationTokenSource(); - languageClient - .sendRequest( - 'getMachineAtIndex', - { uri, machineIndex }, - lastTokenSource.token, - ) - .then(({ config, namedGuards }) => { - startService(config, machineIndex, uri, namedGuards); - }); - }, - ), - ); - - return { - currentPanel, - startService, - }; -}; - -const resolveUriToFilePrefix = (uri: string) => { - if (!uri.startsWith('file://')) { - return `file://${uri}`; - } - return uri; -}; diff --git a/apps/extension/client/src/typeSafeVsCode.ts b/apps/extension/client/src/typeSafeVsCode.ts index 05161514..f6c48132 100644 --- a/apps/extension/client/src/typeSafeVsCode.ts +++ b/apps/extension/client/src/typeSafeVsCode.ts @@ -1,12 +1,8 @@ import * as vscode from 'vscode'; export interface XStateCommands { - // those are related to the editor 'stately-xstate.edit': []; 'stately-xstate.edit-code-lens': [uri: string, machineIndex: number]; - // those are related to the visualizer - 'stately-xstate.visualize': []; - 'stately-xstate.inspect': [uri: string, machineIndex: number]; } export function registerCommand( diff --git a/apps/extension/client/src/vizWebviewScript.ts b/apps/extension/client/src/vizWebviewScript.ts deleted file mode 100644 index 082ec4c9..00000000 --- a/apps/extension/client/src/vizWebviewScript.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { inspect } from '@xstate/inspect'; -import { ExtractorMachineConfig } from '@xstate/machine-extractor'; -// we had to create a temp entry point for this function -// because otherwise we start pulling recast into this browser-oriented file -// unfortunately, recast assumes that it's running in node and requires `'os'` -import { forEachAction } from '@xstate/tools-shared/forEachAction'; -import { assign, createMachine, interpret, MachineConfig } from 'xstate'; - -export interface WebViewMachineContext { - config: ExtractorMachineConfig; - guardsToMock: string[]; -} - -export type VizWebviewMachineEvent = - | { - type: 'RECEIVE_SERVICE'; - config: ExtractorMachineConfig; - guardsToMock: string[]; - } - | { - type: 'UPDATE'; - config: ExtractorMachineConfig; - guardsToMock: string[]; - }; - -const machine = createMachine({ - initial: 'waitingForFirstContact', - context: { - config: {}, - guardsToMock: [], - }, - invoke: { - src: () => (send) => { - window.addEventListener('message', (event) => { - try { - send(event.data); - } catch (e) { - console.warn(e); - } - }); - }, - }, - on: { - RECEIVE_SERVICE: { - target: '.hasService', - actions: assign((context, event) => { - return { - config: event.config, - guardsToMock: event.guardsToMock, - }; - }), - internal: false, - }, - }, - - states: { - waitingForFirstContact: {}, - hasService: { - on: { - UPDATE: { - target: '.startingInspector', - actions: assign((context, event) => { - return { - config: event.config, - guardsToMock: event.guardsToMock, - }; - }), - internal: false, - }, - }, - invoke: { - src: () => () => { - const inspector = inspect({ - iframe: () => - document.getElementById('iframe') as HTMLIFrameElement, - url: `https://xstate-viz-git-farskid-embedded-mode-statelyai.vercel.app/viz/embed?inspect&zoom=1&pan=1&controls=1`, - }); - - return () => { - inspector!.disconnect(); - }; - }, - }, - initial: 'startingInspector', - states: { - startingInspector: { - after: { - 100: 'startingInterpreter', - }, - }, - startingInterpreter: { - invoke: { - src: (context) => () => { - const guards: Record boolean> = {}; - - context.guardsToMock.forEach((guard) => { - guards[guard] = () => true; - }); - - forEachAction(context.config, (action) => { - if (!action) return; - if (action.kind === 'inline') { - return { type: 'inline' }; - } - return action.action.type; - }); - - const machine = createMachine( - { - ...(context.config as unknown as MachineConfig< - any, - any, - any - >), - context: {}, - }, - { - guards, - }, - ); - - const service = interpret(machine, { - devTools: true, - }).start(); - - return () => { - service.stop(); - }; - }, - }, - }, - }, - }, - }, -}); - -interpret(machine).start(); diff --git a/apps/extension/server/src/server.ts b/apps/extension/server/src/server.ts index 365a92ea..b9fef37b 100644 --- a/apps/extension/server/src/server.ts +++ b/apps/extension/server/src/server.ts @@ -194,14 +194,6 @@ connection.onCodeLens(({ textDocument }) => { arguments: [textDocument.uri, index], }, }, - { - range: getRangeFromSourceLocation(callee.loc!), - command: { - title: 'Open Inspector', - command: 'stately-xstate.inspect', - arguments: [textDocument.uri, index], - }, - }, ]; }, ); @@ -891,8 +883,6 @@ connection.onRequest('getNodePosition', ({ path }) => { ]; }); -// TODO: editor and visualizer should have separate states for this -// they can be opened for different machines at the same time connection.onRequest('setDisplayedMachine', ({ uri, machineIndex }) => { displayedMachine = { uri, machineIndex }; }); diff --git a/package.json b/package.json index d05e9b39..b210ba79 100644 --- a/package.json +++ b/package.json @@ -59,25 +59,13 @@ ], "cache": false }, - "webview:viz:build": { - "outputs": [ - "scripts/vizWebview.js" - ], - "cache": false - }, "vscode:build:dev": { - "dependsOn": [ - "webview:viz:build" - ], "outputs": [ "dist/**" ], "cache": false }, "vscode:build:prod": { - "dependsOn": [ - "webview:viz:build" - ], "outputs": [ "dist/**" ],