npm - vzcode - Versions diffs - 0.82.0 → 0.84.0 - Mend

vzcode 0.82.0 → 0.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-BKQfM_WG.js"></script>
+    <script type="module" crossorigin src="/assets/index-9InCi-kT.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-J8-kRnnE.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.82.0",
+  "version": "0.84.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -55,6 +55,10 @@
     {
       "name": "Evan Whymark",
       "url": "https://github.com/EvWhymark"
+    },
+    {
+      "name": "Ethan Nuessle",
+      "url": "https://github.com/enuessle"
     }
   ],
   "license": "MIT",
@@ -71,7 +75,7 @@
     "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.26.0",
+    "@codemirror/view": "^6.26.1",
     "@lezer/highlight": "^1.2.0",
     "@replit/codemirror-indentation-markers": "^6.5.1",
     "@replit/codemirror-interact": "^6.3.1",
@@ -100,26 +104,26 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.29.2",
+    "openai": "^4.31.0",
     "prettier-plugin-svelte": "^3.2.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
-    "sharedb": "^4.1.2",
+    "sharedb": "^4.1.3",
     "sharedb-client-browser": "^4.4.0",
     "vizhub-ui": "^3.21.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
     "typescript": "^5.4.3",
-    "vite": "^5.2.6",
+    "vite": "^5.2.7",
     "vitest": "^1.4.0"
   }
 }

package/src/client/App/index.tsx CHANGED Viewed

@@ -92,7 +92,7 @@ function App() {
       >
         <div className="app">
           <VZLeft />
-          <VZMiddle />
+          <VZMiddle allowGlobals={true} />
           {enableRightPanel ? <VZRight /> : null}
           <VZResizer side="left" />
           {enableRightPanel ? (

package/src/client/CodeEditor/widgets.ts CHANGED Viewed

@@ -1,11 +1,6 @@
-// TODO move back to this way of importing when this PR is merged:
-// https://github.com/replit/codemirror-interact/pull/19/files
 import interact, {
   InteractRule,
 } from '@replit/codemirror-interact';
-// import interact, {
-//   InteractRule,
-// } from './codemirror-interact';
 import {
   ViewPlugin,
@@ -58,6 +53,7 @@ export const widgets = ({
         const updateHex = (e: Event) => {
           const el: HTMLInputElement =
             e.target as HTMLInputElement;
+          if (onInteract) onInteract();
           if (el.value) {
             setText(
               valueIsUpper

package/src/client/VZSidebar/CreateFileModal.tsx CHANGED Viewed

@@ -49,6 +49,7 @@ export const CreateFileModal = ({
     (e) => {
       if (
         e.key === 'Enter' &&
+        validateFileName(newName) &&
         (e.ctrlKey ||
           e.shiftKey ||
           (!e.altKey && !e.metaKey))
@@ -56,7 +57,7 @@ export const CreateFileModal = ({
         onCreateClick();
       }
     },
-    [onCreateClick],
+    [onCreateClick, validateFileName, newName],
   );
   return isCreateFileModalOpen ? (

package/src/client/themes/vizhubTheme/index.ts CHANGED Viewed

@@ -29,6 +29,7 @@ import {
   GOLDENROD,
   PANIC,
 } from './colors';
+import { EditorView } from 'codemirror';
 // Use semi-bold weight for keywords and other important things
 // const boldWeight = 'bold';
@@ -57,116 +58,142 @@ function vizhubThemeInit(
     settings = {},
     styles = [],
   } = options || {};
-  return createTheme({
-    theme: theme,
-    settings: {
-      ...defaultSettingsVizhubTheme,
-      ...settings,
-    },
-    styles: [
-      {
-        tag: [
-          t.keyword,
-          t.operatorKeyword,
-          t.modifier,
-          t.color,
-          t.constant(t.name),
-          t.standard(t.name),
-          t.standard(t.tagName),
-          t.special(t.brace),
-          t.atom,
-          t.bool,
-          t.special(t.variableName),
-        ],
-        color: MINT,
-      },
-      {
-        tag: [t.controlKeyword, t.moduleKeyword],
-        color: MINT,
+  return [
+    createTheme({
+      theme: theme,
+      settings: {
+        ...defaultSettingsVizhubTheme,
+        ...settings,
       },
-      {
-        tag: [
-          t.name,
-          t.deleted,
-          t.character,
-          t.macroName,
+      styles: [
+        {
+          tag: [
+            t.keyword,
+            t.operatorKeyword,
+            t.modifier,
+            t.color,
+            t.constant(t.name),
+            t.standard(t.name),
+            t.standard(t.tagName),
+            t.special(t.brace),
+            t.atom,
+            t.bool,
+            t.special(t.variableName),
+          ],
+          color: MINT,
+        },
+        {
+          tag: [t.controlKeyword, t.moduleKeyword],
+          color: MINT,
+        },
+        {
+          tag: [
+            t.name,
+            t.deleted,
+            t.character,
+            t.macroName,
-          t.variableName,
-          t.labelName,
-          t.definition(t.name),
-        ],
-        color: AQUA,
-      },
-      {
-        tag: [t.propertyName],
-        color: GOLDENROD,
-      },
-      {
-        tag: t.heading,
-        fontWeight: boldWeight,
-        color: SKY,
-      },
-      {
-        tag: [
-          t.typeName,
-          t.className,
-          t.tagName,
-          t.number,
-          t.changed,
-          t.annotation,
-          t.self,
-          t.namespace,
-        ],
-        color: AQUA,
-      },
-      {
-        tag: [
-          t.function(t.variableName),
-          t.function(t.propertyName),
-        ],
-        color: AQUA,
-      },
-      { tag: [t.number], color: SALMON },
-      {
-        tag: [
-          t.operator,
-          t.punctuation,
-          t.separator,
-          t.url,
-          t.escape,
-          t.regexp,
-        ],
-        color: light,
-      },
-      {
-        tag: [t.regexp],
-        color: LAVENDER,
-      },
-      {
-        tag: [t.special(t.string), t.string, t.inserted],
-        color: LAVENDER,
-      },
-      {
-        tag: [t.processingInstruction],
-        color: AQUA,
-      },
-      { tag: [t.angleBracket], color: AQUA },
-      { tag: t.strong, fontWeight: boldWeight },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      {
-        tag: t.strikethrough,
-        textDecoration: 'line-through',
-      },
-      { tag: [t.meta, t.comment], color: dark },
+            t.variableName,
+            t.labelName,
+            t.definition(t.name),
+          ],
+          color: AQUA,
+        },
+        {
+          tag: [t.propertyName],
+          color: GOLDENROD,
+        },
+        {
+          tag: t.heading,
+          fontWeight: boldWeight,
+          color: SKY,
+        },
+        {
+          tag: [
+            t.typeName,
+            t.className,
+            t.tagName,
+            t.number,
+            t.changed,
+            t.annotation,
+            t.self,
+            t.namespace,
+          ],
+          color: AQUA,
+        },
+        {
+          tag: [
+            t.function(t.variableName),
+            t.function(t.propertyName),
+          ],
+          color: AQUA,
+        },
+        { tag: [t.number], color: SALMON },
+        {
+          tag: [
+            t.operator,
+            t.punctuation,
+            t.separator,
+            t.url,
+            t.escape,
+            t.regexp,
+          ],
+          color: light,
+        },
+        {
+          tag: [t.regexp],
+          color: LAVENDER,
+        },
+        {
+          tag: [t.special(t.string), t.string, t.inserted],
+          color: LAVENDER,
+        },
+        {
+          tag: [t.processingInstruction],
+          color: AQUA,
+        },
+        { tag: [t.angleBracket], color: AQUA },
+        { tag: t.strong, fontWeight: boldWeight },
+        { tag: t.emphasis, fontStyle: 'italic' },
+        {
+          tag: t.strikethrough,
+          textDecoration: 'line-through',
+        },
+        { tag: [t.meta, t.comment], color: dark },
+        {
+          tag: t.link,
+          color: GOLDENROD,
+          textDecoration: 'underline',
+        },
+        { tag: t.invalid, color: PANIC },
+        // {
+        //   class: 'cm-nonmatchingBracket',
+        //   // color: "rede",
+        //   backgroundColor: 'red', // Optional: set background color for matching brackets
+        // },
+        // {
+        //   tag: t.nonmatchingBracket,
+        //   color: nonMatchingBracketColor,
+        //   backgroundColor: 'transparent', // Optional: set background color for non-matching brackets
+        // },
+        ...styles,
+      ],
+    }),
+    // Theme matching and non-matching brackets.
+    EditorView.theme(
       {
-        tag: t.link,
-        color: GOLDENROD,
-        textDecoration: 'underline',
+        '&.cm-focused .cm-matchingBracket': {
+          backgroundColor: 'transparent',
+          outline: '1px solid #888888',
+        },
+        '&.cm-focused .cm-nonmatchingBracket': {
+          backgroundColor: 'transparent',
+          outline: '1px solid #ff2222',
+        },
       },
-      { tag: t.invalid, color: PANIC },
-      ...styles,
-    ],
-  });
+      { dark: true },
+    ),
+  ];
 }
 export const vizhubTheme = vizhubThemeInit();

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

@@ -0,0 +1,73 @@
+import ts from 'typescript';
+export const compilerOptions: ts.CompilerOptions = {
+  lib: ['dom', 'esnext'],
+  // 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;
+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,
+]);

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

@@ -0,0 +1,4 @@
+// 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 ADDED Viewed

@@ -0,0 +1,63 @@
+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 ADDED Viewed

@@ -0,0 +1,84 @@
+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 ADDED Viewed

@@ -0,0 +1,20 @@
+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 ADDED Viewed

@@ -0,0 +1,38 @@
+import { File, Files, VZCodeContent } from '../../../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: VZCodeContent = data.details;
+  const files: Files = content.files;
+  // Iterate over the files
+  for (const fileId of Object.keys(files)) {
+    const file: File = 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.
+  }
+};