vzcode 1.30.1 → 1.31.0

package/src/client/CodeEditor/typeScriptCompletions.ts

@@ -1,134 +0,0 @@
-import {
-  CompletionContext,
-  CompletionSource,
-} from '@codemirror/autocomplete';
-import { generateRequestId } from '../generateRequestId';
-import {
-  AutocompleteRequest,
-  AutocompleteResponse,
-} from '../useTypeScript/worker/requestTypes';
-
-export const typeScriptCompletions = ({
-  typeScriptWorker,
-  fileName,
-}): CompletionSource => {
-  const tsComplete: CompletionSource = async (
-    completionContext: CompletionContext,
-  ) => {
-    // A random unique ID for this request.
-    const requestId = generateRequestId();
-
-    const fileContent =
-      completionContext.state.doc.toString();
-
-    const autocompleteRequest: AutocompleteRequest = {
-      event: 'autocomplete-request',
-
-      // Location is the file path (string)
-      fileName,
-
-      // Latest file content (string)
-      fileContent,
-
-      // Cursor position (integer, like index in a string)
-      position: completionContext.pos,
-
-      // Unique ID for this request
-      requestId,
-    };
-
-    //Prevent completions from appearing on certain characters
-    const lastCharacter =
-      fileContent[completionContext.pos - 1];
-    if (
-      [
-        '"',
-        "'",
-        ';',
-        '(',
-        ')',
-        '{',
-        ',',
-        ' ',
-        '=',
-        '<',
-        '>',
-      ].includes(lastCharacter)
-    ) {
-      return { from: completionContext.pos, options: [] };
-    }
-
-    //Post message to our sharedWorker to get completions.
-    typeScriptWorker.postMessage(autocompleteRequest);
-
-    //An async promise to ensure that we are getting our completion entries
-    const tsCompletions = await new Promise((resolve) => {
-      typeScriptWorker.onmessage = (message: {
-        data: AutocompleteResponse;
-      }) => {
-        const autocompleteResponse: AutocompleteResponse =
-          message.data;
-        const { event, requestId, completions } =
-          autocompleteResponse;
-        if (
-          event === 'post-completions' &&
-          requestId === requestId
-        ) {
-          resolve(completions);
-        }
-      };
-    });
-
-    if (!tsCompletions) {
-      // console.log('Unable to get completions');
-      return { from: completionContext.pos, options: [] };
-    }
-
-    // Logic to get the text and cursor location in between punctuation.
-    // Taken from https://codemirror.net/examples/autocompletion/
-    // Also inspired by
-    // https://stackblitz.com/edit/codemirror-6-typescript?file=client%2Findex.ts%3AL86
-    const from = completionContext.matchBefore(/\w*/).from;
-
-    // `lastWord` represents the word that the user has partially typed
-    // and is currently at the end of the text, immediately before
-    // the cursor position.
-    const lastWord =
-      completionContext.matchBefore(/\w*/).text;
-    if (lastWord) {
-      // @ts-ignore
-      tsCompletions.entries = tsCompletions.entries.filter(
-        (completion) =>
-          completion.name.startsWith(lastWord),
-      );
-    }
-    return {
-      from: completionContext.pos,
-      // @ts-ignore
-      options: tsCompletions.entries.map((completion) => ({
-        label: completion.name,
-        // Applies autocompletions to be seen in the code Editor
-        apply: (view) => {
-          //Calculation to get the new cursor position after the autocompletion
-          const newPosition =
-            completionContext.pos +
-            completion.name.length -
-            lastWord.length;
-          view.dispatch({
-            changes: {
-              from,
-              to: completionContext.pos,
-              insert: completion.name,
-            },
-            // Move the cursor to the end of the autocompletion
-            selection: {
-              anchor: newPosition,
-              head: newPosition,
-            },
-          });
-        },
-      })),
-    };
-  };
-  return tsComplete;
-};

package/src/client/CodeEditor/typeScriptLinter.ts

@@ -1,47 +0,0 @@
-import type { Diagnostic } from 'typescript';
-import { generateRequestId } from '../generateRequestId';
-import {
-  LinterRequest,
-  LinterResponse,
-} from '../useTypeScript/worker/requestTypes';
-
-export const typeScriptLinter = ({
-  typeScriptWorker,
-  fileName,
-  shareDBDoc,
-  fileId,
-  allowGlobals,
-}) => {
-  return async () => {
-    const requestId = generateRequestId();
-    //Get the fileContent from shareDB to pass to web worker
-    const fileContent = shareDBDoc.data.files[fileId].text;
-    const linterRequest: LinterRequest = {
-      event: 'lint-request',
-      fileName,
-      fileContent,
-      requestId,
-      allowGlobals,
-    };
-    typeScriptWorker.postMessage(linterRequest);
-
-    //An array of diagnostic (CodeMirror) objects.
-    const tsErrors: Diagnostic[] = await new Promise(
-      (resolve) => {
-        typeScriptWorker.onmessage = (message: {
-          data: LinterResponse;
-        }) => {
-          const ErrorData: LinterResponse = message.data;
-          const { event, requestId, tsErrors } = ErrorData;
-          if (
-            event === 'post-error-linter' &&
-            requestId === requestId
-          ) {
-            resolve(tsErrors);
-          }
-        };
-      },
-    );
-    return tsErrors;
-  };
-};

package/src/client/useTypeScript/index.ts

@@ -1,48 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { VizContent } from '@vizhub/viz-types';
-import { autoPrettierDebounceTimeMS } from '../usePrettier';
-
-// We don't want to send the message _before_ Prettier runs,
-// so we need to wait at least as long as Prettier takes to run,
-// plus some "wiggle room" which is amount of time it may take
-// to aactually run Prettier and update the document.
-const wiggleRoom = 500;
-
-// The time in milliseconds by which auto-saving is debounced.
-const sendMessageDebounceTimeMS =
-  autoPrettierDebounceTimeMS + wiggleRoom;
-
-export const useTypeScript = ({
-  content,
-  typeScriptWorker,
-}: {
-  content: VizContent;
-  typeScriptWorker: Worker;
-}) => {
-  // When Content changes, update the TypeScript worker
-  // with the new content, but debounced.
-
-  // This keeps track of the setTimeout ID across renders.
-  const debounceTimeoutId = useRef<number | null>(null);
-
-  const debounceUpdateContent = useCallback(
-    (content: VizContent) => {
-      // Handle the case where the content has not yet been loaded.
-      if (content === null) {
-        return;
-      }
-      clearTimeout(debounceTimeoutId.current);
-      debounceTimeoutId.current = window.setTimeout(() => {
-        typeScriptWorker.postMessage({
-          event: 'update-content',
-          details: content,
-        });
-      }, sendMessageDebounceTimeMS);
-    },
-    [typeScriptWorker],
-  );
-
-  useEffect(() => {
-    debounceUpdateContent(content);
-  }, [content]);
-};

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

@@ -1,94 +0,0 @@
-import ts from 'typescript';
-
-export const compilerOptions: ts.CompilerOptions = {
-  target: ts.ScriptTarget.ES2022,
-  lib: ['dom', 'es2022'],
-
-  // Disable warnings around "Any type".
-  noImplicitAny: false,
-
-  // Disable warnings around "Implicit any in parameter".
-  noImplicitThis: false,
-
-  // Allow JavaScript files to be processed
-  allowJs: true,
-
-  // Disable type checking for JavaScript files
-  // checkJs: false,
-
-  // Skip type checking of declaration files
-  skipLibCheck: true,
-
-  // Support React JSX
-  jsx: ts.JsxEmit.React,
-};
-
-// Be less aggressive for non-TS files,
-// e.g. files that end in .js or .jsx.
-// if (!isTS(fileName)) {
-// This code is for errors like:
-// "Binding element 'data' implicitly has an 'any' type."
-const LINT_ERROR_CODE_ANY = 7031;
-
-// This code is for errors like:
-// "Parameter 'selection' implicitly has an 'any' type.""
-const LINT_ERROR_CODE_ANY_PARAM = 7006;
-
-// This code is for errors like:
-// "Cannot find module 'd3' or its corresponding type declarations."
-const LINT_ERROR_CODE_IMPORT = 2307;
-
-// This code is for errors like:
-// "Variable 'mic' implicitly has type 'any' in some locations where its type cannot be determined."
-const LINT_ERROR_CODE_ANY_TYPE = 7034;
-
-// "Element implicitly has an 'any' type because expression
-// of type '"test"' can't be used to index type '{}'."
-const LINT_ERROR_CODE_ANY_TYPE_KEYS = 7053;
-
-// "Property 'id' does not exist on type { ... }"
-// Happens on objects with dynamic keys.
-// Not valid in TypeScript, but common in JavaScript.
-const LINT_ERROR_CODE_NON_EXISTENT_PROPERTY = 2339;
-
-// "Type 'Set<unknown>' can only be iterated through when using the '--downlevelIteration'
-// flag or with a '--target' of 'es2015' or higher."
-const LINT_ERROR_CODE_ITERATED_THROUGH = 2802;
-
-// Argument of type '{ Month: string; High: number; Temp: number; Low: number; }'
-// is not assignable to parameter of type 'never'.
-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;
-
-// Ignore potential undefined error for variables
-const LINT_ERROR_CODE_POSSIBLY_UNDEFINED = 18048;
-
-// This code is for errors like:
-// "Object is of type 'unknown'."
-const LINT_ERROR_CODE_UNKNOWN = 18046;
-const LINT_ERROR_CODE_UNKNOWN_SYMBOL_ITERATOR = 2488;
-
-export const excludedErrorCodes = new Set([
-  LINT_ERROR_CODE_ANY,
-  LINT_ERROR_CODE_IMPORT,
-  LINT_ERROR_CODE_ANY_PARAM,
-  LINT_ERROR_CODE_ANY_TYPE,
-  LINT_ERROR_CODE_ANY_TYPE_KEYS,
-  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,
-  LINT_ERROR_CODE_UNKNOWN_SYMBOL_ITERATOR,
-  LINT_ERROR_CODE_POSSIBLY_UNDEFINED,
-]);

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

@@ -1,4 +0,0 @@
-// replace .js or .jsx with .ts or .tsx,
-// to support TypeScript completions on non-TS files.
-export const getTSFileName = (fileName: string) =>
-  fileName.replace(/\.jsx?$/, '.tsx');

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

@@ -1,63 +0,0 @@
-import { getTSFileName } from './getTSFileName';
-import { isTS } from './isTS';
-import {
-  AutocompleteRequest,
-  AutocompleteResponse,
-} from './requestTypes';
-
-// This function is called when the worker receives a message with the type
-// 'autocomplete-request'. It gets completions at the specified position in the
-// file and sends them back to the main thread.
-export const handleMessageAutocompleteRequest = async ({
-  debug,
-  data,
-  env,
-  setFile,
-}) => {
-  if (debug) {
-    console.log('autocomplete-request message received');
-  }
-
-  // Should not happen.
-  if (env === null) {
-    console.log('env is null');
-    return;
-  }
-
-  // Example of `data`:
-  // {
-  //   "event": "autocomplete-request",
-  //   "pos": 8,
-  //   "location": "index.js",
-  //   "requestId": "0.9090605799171392"
-  // }
-
-  const autocompleteRequest: AutocompleteRequest = data;
-  const { fileName, fileContent, position, requestId } =
-    autocompleteRequest;
-
-  const tsFileName = getTSFileName(fileName);
-
-  let completions = null;
-  if (isTS(tsFileName) && fileContent !== '') {
-    // Update the file in the file system to the
-    // absolute latest version. This is critical
-    // for correct completions.
-    setFile(tsFileName, fileContent);
-
-    completions =
-      env.languageService.getCompletionsAtPosition(
-        tsFileName,
-        position,
-        {},
-      );
-  }
-
-  const autocompleteResponse: AutocompleteResponse = {
-    event: 'post-completions',
-    completions,
-    requestId,
-  };
-
-  postMessage(autocompleteResponse);
-};

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

@@ -1,84 +0,0 @@
-import ts from 'typescript';
-import type { Diagnostic } from '@codemirror/lint';
-import {
-  LinterRequest,
-  LinterResponse,
-} from './requestTypes';
-import { getTSFileName } from './getTSFileName';
-import { isTS } from './isTS';
-import {
-  LINT_ERROR_CODE_CANNOT_FIND_NAME,
-  excludedErrorCodes,
-} from './constants';
-
-// Inspired by: https://stackblitz.com/edit/codemirror-6-typescript?file=client%2Findex.ts%3AL44-L44
-const convertToCodeMirrorDiagnostic = (
-  tsErrors: ts.Diagnostic[],
-): Array<Diagnostic> =>
-  tsErrors.map((tsError: ts.Diagnostic) => ({
-    from: tsError.start,
-    to: tsError.start + tsError.length,
-    severity: 'error',
-    message:
-      typeof tsError.messageText === 'string'
-        ? tsError.messageText
-        : tsError.messageText.messageText,
-  }));
-
-export const handleMessageLintRequest = async ({
-  debug,
-  data,
-  env,
-  setFile,
-}) => {
-  if (debug) {
-    console.log('Lint Request');
-  }
-  const linterRequest: LinterRequest = data;
-  const { fileName, fileContent, requestId, allowGlobals } =
-    linterRequest;
-
-  const tsFileName = getTSFileName(fileName);
-  let tsErrors = [];
-  if (isTS(tsFileName) && fileContent !== '') {
-    // We are updating the server with the latest content
-    // when we autocomplete, so it's always up to date.
-    setFile(tsFileName, fileContent);
-
-    // Creates an array of diagnostic objects containing
-    // both semantic and syntactic diagnostics.
-    tsErrors = env.languageService
-      .getSemanticDiagnostics(tsFileName)
-      .concat(
-        env.languageService.getSyntacticDiagnostics(
-          tsFileName,
-        ),
-      );
-
-    if (debug) {
-      console.log('tsErrors');
-      console.log(tsErrors);
-    }
-
-    tsErrors = tsErrors.filter(
-      (error: { code: number }) => {
-        if (
-          allowGlobals &&
-          error.code === LINT_ERROR_CODE_CANNOT_FIND_NAME
-        ) {
-          return false;
-        }
-        return !excludedErrorCodes.has(error.code);
-      },
-    );
-
-    tsErrors = convertToCodeMirrorDiagnostic(tsErrors);
-  }
-
-  const linterResponse: LinterResponse = {
-    event: 'post-error-linter',
-    tsErrors,
-    requestId,
-  };
-  postMessage(linterResponse);
-};

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

@@ -1,20 +0,0 @@
-import ts from 'typescript';
-import { compilerOptions } from './constants';
-
-// Handle the transpile-request event, which
-// transpiles TypeScript to JavaScript.
-export const handleMessageTranspileRequest = async ({
-  data,
-}) => {
-  const tsCode = data.tsCode;
-
-  const jsCode = ts.transpileModule(tsCode, {
-    compilerOptions: compilerOptions,
-  }).outputText;
-
-  postMessage({
-    event: 'transpile-response',
-    jsCode,
-    fileId: data.fileId,
-  });
-};

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

@@ -1,42 +0,0 @@
-import {
-  VizFile,
-  VizFiles,
-  VizContent,
-} from '@vizhub/viz-types';
-import { getTSFileName } from './getTSFileName';
-import { isTS } from './isTS';
-
-// Handle the update-content event, which
-// updates the files as they change.
-// This handles the cases where:
-//  * The file system is populated for the first time.
-//  * Files are edited by remote users.
-export const handleMessageUpdateContent = async ({
-  debug,
-  data,
-  setFile,
-}) => {
-  if (debug) {
-    console.log('update-content message received');
-  }
-  // Unpack the files
-  const content: VizContent = data.details;
-  const files: VizFiles = content.files;
-
-  // Iterate over the files
-  for (const fileId of Object.keys(files)) {
-    const file: VizFile = files[fileId];
-    const { name, text } = file;
-
-    const tsFileName = getTSFileName(name);
-
-    if (!isTS(tsFileName)) {
-      continue;
-    }
-
-    setFile(tsFileName, text);
-    // TODO - Handle renaming files.
-    // TODO - Handle deleting files.
-    // TODO - Handle directories.
-  }
-};

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

@@ -1,110 +0,0 @@
-import * as tsvfs from '@typescript/vfs';
-import ts from 'typescript';
-import { compilerOptions } from './constants';
-import { handleMessageUpdateContent } from './handleMessageUpdateContent';
-import { handleMessageAutocompleteRequest } from './handleMessageAutocompleteRequest';
-import { handleMessageLintRequest } from './handleMessageLintRequest';
-import { handleMessageTranspileRequest } from './handleMessageTranspileRequest';
-
-let env: tsvfs.VirtualTypeScriptEnvironment = null;
-
-const debug = false;
-
-// This is a place for things we only do _once_.
-const initializeFileSystem = async () => {
-  if (debug) {
-    console.log('initializeFileSystem');
-  }
-
-  // `true` breaks in a Web Worker because
-  // this uses `localStorage` under the hood,
-  // which is not available in a Web Worker.
-  const cache = false;
-
-  const fsMap = await tsvfs.createDefaultMapFromCDN(
-    compilerOptions,
-    ts.version,
-    cache,
-    ts,
-  );
-  const sys: ts.System = tsvfs.createSystem(fsMap);
-
-  // We'll add files to this later.
-  const rootFiles = [];
-
-  env = tsvfs.createVirtualTypeScriptEnvironment(
-    sys,
-    rootFiles,
-    ts,
-    compilerOptions,
-  );
-
-  if (debug) {
-    console.log('initializeFileSystem done');
-  }
-};
-
-const setFile = (tsFileName: string, text: string) => {
-  const existingFile = env.getSourceFile(tsFileName);
-  if (existingFile === undefined) {
-    env.createFile(tsFileName, text);
-  } else {
-    env.updateFile(tsFileName, text);
-  }
-};
-
-// This is a promise that resolves when the file system is initialized.
-let fileSystemInitializationPromise = null;
-async function ensureFileSystemInitialized() {
-  if (!fileSystemInitializationPromise) {
-    fileSystemInitializationPromise =
-      initializeFileSystem();
-  }
-  await fileSystemInitializationPromise;
-}
-
-onmessage = async ({ data }) => {
-  if (debug) {
-    console.log('message received');
-  }
-
-  // Ensure the file system is initialized.
-  await ensureFileSystemInitialized();
-
-  // Sanity check - should never happen.
-  if (env === null) {
-    throw new Error('File system not initialized');
-  }
-
-  switch (data.event) {
-    case 'update-content':
-      await handleMessageUpdateContent({
-        debug,
-        data,
-        setFile,
-      });
-      break;
-
-    case 'autocomplete-request':
-      await handleMessageAutocompleteRequest({
-        debug,
-        data,
-        env,
-        setFile,
-      });
-      break;
-
-    case 'lint-request':
-      await handleMessageLintRequest({
-        debug,
-        data,
-        env,
-        setFile,
-      });
-      break;
-
-    case 'transpile-request':
-      await handleMessageTranspileRequest({ data });
-      break;
-  }
-};

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

@@ -1,3 +0,0 @@
-// Returns true if the file name ends with `.ts` or `.tsx`.
-export const isTS = (fileName: string) =>
-  fileName.endsWith('.ts') || fileName.endsWith('.tsx');

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

@@ -1,31 +0,0 @@
-import ts from 'typescript';
-
-export type AutocompleteRequest = {
-  event: 'autocomplete-request';
-  fileName: string;
-  fileContent: string;
-  position: number;
-  requestId: string;
-};
-
-export type AutocompleteResponse = {
-  event: 'post-completions';
-  completions: any;
-  requestId: string;
-};
-
-export type LinterRequest = {
-  event: 'lint-request';
-  fileName: string;
-  fileContent: string;
-  requestId: string;
-
-  // If true, linting will not show errors for global variables.
-  allowGlobals?: boolean;
-};
-
-export type LinterResponse = {
-  event: 'post-error-linter';
-  tsErrors: ts.Diagnostic[];
-  requestId: string;
-};