vzcode 1.2.0 → 1.4.0

package/src/client/useKeyboardShortcuts.ts

@@ -1,6 +1,154 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { shouldTriggerRun } from './shouldTriggerRun';
-import { VZCodeContext } from './VZCodeContext';
+import { syntaxTree } from '@codemirror/language';
+import { SyntaxNode, SyntaxNodeRef } from '@lezer/common';
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+
+/*
+  The following is a helpful resource for the following Code Mirror Syntax Tree methods below
+  https://lezer.codemirror.net/docs/ref/#common
+*/
+
+// Store the element in the current editor DOM to highlight, indicating a potential jump to definition is possible
+let activeJumpingElement: HTMLSpanElement = null;
+
+// Store the syntax node representing the destination within the syntax tree
+let definingNode: SyntaxNode = null;
+
+// Example nesting types for the specific language to find level in the syntax tree
+const nestingTypes = new Set<string>([
+  'FunctionDeclaration',
+  'ClassDeclaration',
+  'MethodDeclaration',
+  'Block',
+  'IfStatement',
+  'ForStatement',
+  'WhileStatement',
+  'SwitchStatement',
+  'TryStatement',
+  'CatchClause',
+  'WithStatement',
+  'ArrowFunction',
+  'ImportGroup',
+]);
+
+// Example declaration types for the specific language to find definitions in the syntax tree
+const declarationTypes = new Set<string>([
+  'VariableDeclaration',
+  'FunctionDeclaration',
+  'ClassDeclaration',
+  'MethodDeclaration',
+  'PropertyDeclaration',
+  'ImportDeclaration',
+  'ExportDeclaration',
+  'CallExpression',
+  'ArrayPattern',
+  'ObjectPattern',
+  'PatternProperty',
+  'ArgList',
+  'TypeArgList',
+  'ParamList',
+  'ForOfSpec',
+]);
+
+function getIdentifierContext(
+  identifier: SyntaxNode,
+): number {
+  let current: SyntaxNode = identifier;
+  let levels: number = 0;
+
+  // Traverse up the tree to find the total depth, only counting valid nesting types
+  while (current && current.type) {
+    const parentType: string = current.type.name;
+
+    if (nestingTypes.has(parentType)) {
+      levels++;
+    }
+
+    current = current.parent;
+  }
+
+  return levels;
+}
+
+function jumpToDefinition(
+  editor: EditorView,
+  node: SyntaxNode,
+): SyntaxNode {
+  const state: EditorState = editor.state;
+  const definitions: Array<{
+    identifier: SyntaxNode;
+    context: number;
+  }> = [];
+
+  // From an identifier in the syntax tree, fetch the name and context to find closest defining syntax node
+  const identifier: SyntaxNode = node;
+  const identifierName: string = state.doc.sliceString(
+    identifier.from,
+    identifier.to,
+  );
+  const context: number = getIdentifierContext(identifier);
+
+  if (identifier) {
+    syntaxTree(state).iterate({
+      enter(tree: SyntaxNodeRef) {
+        // Traverse syntax tree to find positions of respective identifier definitions within context
+        if (
+          declarationTypes.has(tree.name) ||
+          nestingTypes.has(tree.name)
+        ) {
+          const parent: SyntaxNode = tree.node;
+
+          // Fetch a host of potential identifiers in an attempt to find the defining syntax node
+          const children: Array<SyntaxNode> = [
+            ...parent.getChildren('VariableDefinition'),
+            ...parent.getChildren('PropertyDefinition'),
+            ...parent.getChildren('PropertyName'),
+            ...parent.getChildren('Identifier'),
+          ];
+
+          children.forEach((child: SyntaxNode) => {
+            const name: string = state.doc.sliceString(
+              child.from,
+              child.to,
+            );
+
+            // Ensure no jump to self by comparing syntax node id's
+            if (
+              name === identifierName &&
+              child.type.id !== identifier.type.id
+            ) {
+              definitions.push({
+                identifier: child,
+                context: getIdentifierContext(child),
+              });
+            }
+          });
+        }
+      },
+    });
+
+    if (definitions.length > 0) {
+      // Sort definitions by their context in the syntax tree
+      definitions.sort((a, b) => a.context - b.context);
+
+      let closestDefinition: SyntaxNode =
+        definitions[0].identifier;
+
+      for (let i = definitions.length - 1; i >= 0; i--) {
+        if (definitions[i].context <= context) {
+          closestDefinition = definitions[i].identifier;
+          break;
+        }
+      }
+
+      return closestDefinition;
+    }
+
+    return null;
+  }
+}
 
 // This module implements the keyboard shortcuts
 // for the VZCode editor.
@@ -10,6 +158,7 @@ import { VZCodeContext } from './VZCodeContext';
 // * Alt-PageUp: Change the active tab to the previous one
 // * Alt-PageDown: Change the active tab to the next one
 // * Ctrl-s or Shift-Enter: Run the code and format it with Prettier
+// * Ctrl-Click: Jump to closest definition for a potential identifier
 export const useKeyboardShortcuts = ({
   closeTabs,
   activeFileId,
@@ -18,6 +167,9 @@ export const useKeyboardShortcuts = ({
   setActiveFileRight,
   runPrettierRef,
   runCodeRef,
+  sidebarRef,
+  editorCache,
+  codeEditorRef,
 }) => {
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -32,12 +184,21 @@ export const useKeyboardShortcuts = ({
 
         // Run the code
         const runCode = runCodeRef.current;
+
         if (runCode !== null) {
           runCode();
         }
         return;
       }
 
+      if (event.ctrlKey === true) {
+        // On holding CTRL key, search for a potential definition jump using mouse location
+        document.addEventListener(
+          'mouseover',
+          handleMouseOver,
+        );
+      }
+
       if (event.altKey === true) {
         // Alt-w: Close the current tab
         if (event.key === 'w') {
@@ -65,15 +226,149 @@ export const useKeyboardShortcuts = ({
           setActiveFileRight();
           return;
         }
+
+        if (event.key === '1') {
+          if (sidebarRef.current) {
+            sidebarRef.current.focus();
+          }
+        }
+
+        if (event.key === '2') {
+          if (codeEditorRef.current) {
+            codeEditorRef.current.focus();
+          }
+        }
+      }
+    };
+
+    const resetActiveJumpingElement = (): void => {
+      if (activeJumpingElement) {
+        activeJumpingElement.style.cursor = 'initial';
+        activeJumpingElement.style.textDecoration = 'none';
+        activeJumpingElement = definingNode = null;
+      }
+
+      document.removeEventListener(
+        'mouseover',
+        handleMouseOver,
+      );
+      document.removeEventListener(
+        'mousedown',
+        jumpToDefinitionHandler,
+      );
+    };
+
+    const jumpToDefinitionHandler = (
+      event: MouseEvent,
+    ): void => {
+      // Ensure the current destination node is defined and current cursor position matches highlighted element
+      if (
+        !definingNode ||
+        (event.target as HTMLSpanElement) !==
+          activeJumpingElement
+      ) {
+        return;
+      }
+
+      // Move current cursor and center view in the editor to destination node
+      const editor: EditorView =
+        editorCache.get(activeFileId).editor;
+      const closestDefinition: SyntaxNode = definingNode;
+
+      editor.dispatch({
+        selection: {
+          anchor: closestDefinition.from,
+          head: closestDefinition.to,
+        },
+        scrollIntoView: true,
+        effects: EditorView.scrollIntoView(
+          closestDefinition.from,
+          {
+            y: 'center',
+          },
+        ),
+      });
+
+      resetActiveJumpingElement();
+    };
+
+    const handleKeyRelease = (event: KeyboardEvent) => {
+      // On releasing CTRL key, reset all active definition jumping elements and listeners
+      if (!event.ctrlKey) {
+        resetActiveJumpingElement();
+      }
+    };
+
+    const handleMouseOver = (event: MouseEvent) => {
+      const editor: EditorView =
+        editorCache.get(activeFileId).editor;
+      const tree = syntaxTree(editor.state);
+      const element = event.target as HTMLSpanElement;
+
+      // Ensure the identifier element can be found and is within the current editor DOM
+      if (
+        element == null ||
+        !editor.dom.contains(element)
+      ) {
+        return;
+      }
+
+      const position: number = editor.posAtDOM(element);
+      const identifier: SyntaxNode = tree.resolveInner(
+        position,
+        1,
+      );
+
+      // All valid identifiers must be span elements to find a potential defining jump in editor
+      if (
+        identifier &&
+        element instanceof HTMLSpanElement
+      ) {
+        const potentialJump: SyntaxNode = jumpToDefinition(
+          editor,
+          identifier,
+        );
+
+        // Only allowing to jump to other definition nodes
+        if (
+          potentialJump &&
+          identifier.type.id !== potentialJump.type.id
+        ) {
+          if (activeJumpingElement) {
+            activeJumpingElement.style.cursor = 'initial';
+            activeJumpingElement.style.textDecoration =
+              'none';
+          }
+
+          activeJumpingElement = element;
+          definingNode = potentialJump;
+
+          activeJumpingElement.style.cursor = 'pointer';
+          activeJumpingElement.style.textDecoration =
+            'underline';
+
+          // CTRL + Click: Jump to relative definition, which is removed on CTRL key release
+          document.addEventListener(
+            'mousedown',
+            jumpToDefinitionHandler,
+            { once: true },
+          );
+        }
       }
     };
 
     document.addEventListener('keydown', handleKeyPress);
+    document.addEventListener('keyup', handleKeyRelease);
+
     return () => {
       document.removeEventListener(
         'keydown',
         handleKeyPress,
       );
+      document.removeEventListener(
+        'keyup',
+        handleKeyRelease,
+      );
     };
   }, [
     handleOpenCreateFileModal,

package/src/client/useTypeScript/worker/constants.ts

@@ -61,6 +61,17 @@ const LINT_ERROR_CODE_ASSIGNABLE_TO_NEVER = 2345;
 // Cannot find name 'd3'.
 export const LINT_ERROR_CODE_CANNOT_FIND_NAME = 2304;
 
+// Type '{}' is missing the following properties from type '{ indx:
+//Ignore specific TypeScript warning on object reassignment
+const LINT_ERROR_CODE_OBJ_REASSINGMENT = 2739;
+
+// Type 'any' is not assignable to type 'never'.
+const LINT_ERROR_CODE_ANY_NOT_ASSIGNABLE_TO_NEVER = 2322;
+
+// This code is for errors like:
+// "Object is of type 'unknown'."
+const LINT_ERROR_CODE_UNKNOWN = 18046;
+
 export const excludedErrorCodes = new Set([
   LINT_ERROR_CODE_ANY,
   LINT_ERROR_CODE_IMPORT,
@@ -70,4 +81,7 @@ export const excludedErrorCodes = new Set([
   LINT_ERROR_CODE_NON_EXISTENT_PROPERTY,
   LINT_ERROR_CODE_ITERATED_THROUGH,
   LINT_ERROR_CODE_ASSIGNABLE_TO_NEVER,
+  LINT_ERROR_CODE_OBJ_REASSINGMENT,
+  LINT_ERROR_CODE_ANY_NOT_ASSIGNABLE_TO_NEVER,
+  LINT_ERROR_CODE_UNKNOWN,
 ]);

package/src/client/useTypeScript/worker/index.ts

@@ -1,17 +1,6 @@
 import * as tsvfs from '@typescript/vfs';
 import ts from 'typescript';
-import { File, Files, VZCodeContent } from '../../../types';
-import {
-  AutocompleteRequest,
-  AutocompleteResponse,
-  LinterRequest,
-  LinterResponse,
-} from './requestTypes';
-import {
-  LINT_ERROR_CODE_CANNOT_FIND_NAME,
-  compilerOptions,
-  excludedErrorCodes,
-} from './constants';
+import { compilerOptions } from './constants';
 import { handleMessageUpdateContent } from './handleMessageUpdateContent';
 import { handleMessageAutocompleteRequest } from './handleMessageAutocompleteRequest';
 import { handleMessageLintRequest } from './handleMessageLintRequest';

package/src/server/index.js

@@ -310,9 +310,12 @@ server.listen(port, async () => {
       open(url);
     })();
   } else {
+    // Sets the port to the one specified in the environment
+    // variable (for development) or the default port.
+    let livePort = process.env.EDITOR_PORT || port;
     console.log(
-      `Editor is live at http://localhost:${port}`,
+      `Editor is live at http://localhost:${livePort}`,
     );
-    open(`http://localhost:${port}`);
+    open(`http://localhost:${livePort}`);
   }
 });