vzcode 0.28.0 → 0.30.0

package/src/client/App/VZMiddle.tsx

@@ -0,0 +1,91 @@
+import { useContext } from 'react';
+import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
+import { TabList } from '../TabList';
+import { CodeEditor } from '../CodeEditor';
+import { CodeErrorOverlay } from '../CodeErrorOverlay';
+import { PresenceNotifications } from '../PresenceNotifications';
+import { AIAssistWidget } from '../AIAssistWidget';
+import { VZCodeContext } from './VZCodeContext';
+
+// The middle portion of the VZCode environment, containing:
+// * The list of tabs at the top
+// * The code editor itself
+// * The code error overlay
+// * The presence notifications
+// * The UI for AI Assist
+export const VZMiddle = () => {
+  const { codeEditorWidth } = useContext(
+    SplitPaneResizeContext,
+  );
+
+  // TODO leverage this context in deeper levels of the component tree.
+  const {
+    content,
+    shareDBDoc,
+    submitOperation,
+    localPresence,
+    docPresence,
+    files,
+    createFile,
+    activeFileId,
+    setActiveFileId,
+    tabList,
+    openTab,
+    closeTabs,
+    theme,
+    username,
+    editorCache,
+    editorWantsFocus,
+    editorNoLongerWantsFocus,
+    errorMessage,
+    typeScriptWorker,
+  } = useContext(VZCodeContext);
+
+  return activeFileId !== null ? (
+    <div
+      className="middle"
+      style={{ width: codeEditorWidth + 'px' }}
+    >
+      <TabList
+        files={files}
+        tabList={tabList}
+        activeFileId={activeFileId}
+        setActiveFileId={setActiveFileId}
+        openTab={openTab}
+        closeTabs={closeTabs}
+        createFile={createFile}
+      />
+      {content && activeFileId ? (
+        <CodeEditor
+          shareDBDoc={shareDBDoc}
+          submitOperation={submitOperation}
+          localPresence={localPresence}
+          docPresence={docPresence}
+          activeFileId={activeFileId}
+          theme={theme}
+          editorCache={editorCache}
+          editorWantsFocus={editorWantsFocus}
+          editorNoLongerWantsFocus={
+            editorNoLongerWantsFocus
+          }
+          username={username}
+          typeScriptWorker={typeScriptWorker}
+          tabList={tabList}
+        />
+      ) : null}
+      <CodeErrorOverlay errorMessage={errorMessage} />
+      <PresenceNotifications
+        docPresence={docPresence}
+        localPresence={localPresence}
+      />
+      {content && activeFileId ? (
+        <AIAssistWidget
+          activeFileId={activeFileId}
+          shareDBDoc={shareDBDoc}
+          editorCache={editorCache}
+          tabList={tabList}
+        />
+      ) : null}
+    </div>
+  ) : null;
+};

package/src/client/App/VZRight.tsx

@@ -0,0 +1,15 @@
+// Displays the Vite devserver iframe.
+// TODO test this out, think this through.
+// Purpose: support folks using VZCode as the editor
+// for their Vite-based projects.
+const enableIframe = false;
+
+export const VZRight = () => {
+  return (
+    <div className="right">
+      {enableIframe ? (
+        <iframe src="http://localhost:5173/"></iframe>
+      ) : null}
+    </div>
+  );
+};

package/src/client/App/index.tsx

@@ -0,0 +1,106 @@
+import { useContext } from 'react';
+import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
+import { json1Presence } from '../../ot';
+import { Username } from '../../types';
+// @ts-ignore
+import PrettierWorker from '../usePrettier/worker?worker';
+// @ts-ignore
+import TypeScriptWorker from '../useTypeScript/worker?worker';
+import { SplitPaneResizeProvider } from '../SplitPaneResizeContext';
+import { VZResizer } from '../VZResizer';
+import {
+  useInitialUsername,
+  usePersistUsername,
+} from '../usernameLocalStorage';
+import { useShareDB } from './useShareDB';
+import { VZLeft } from './VZLeft';
+import { VZMiddle } from './VZMiddle';
+import { VZRight } from './VZRight';
+import {
+  VZCodeContext,
+  VZCodeProvider,
+} from './VZCodeContext';
+import './style.scss';
+
+// Instantiate the Prettier worker.
+const prettierWorker = new PrettierWorker();
+
+// Instantiate the TypeScript worker.
+const typeScriptWorker = new TypeScriptWorker();
+
+// Register our custom JSON1 OT type that supports presence.
+// See https://github.com/vizhub-core/json1-presence
+ShareDBClient.types.register(json1Presence.type);
+
+// Establish the singleton ShareDB connection over WebSockets.
+// TODO consider using reconnecting WebSocket
+const { Connection } = ShareDBClient;
+const wsProtocol =
+  window.location.protocol === 'https:'
+    ? 'wss://'
+    : 'ws://';
+const socket = new WebSocket(
+  wsProtocol + window.location.host + '/ws',
+);
+const connection = new Connection(socket);
+
+// Stores the username to local storage.
+// TODO consider if there's a cleaner pattern for this.
+// This makes sense in VZCode itself, but for an app with
+// authentication that wraps VZCode, it is not required.
+const PersistUsername = () => {
+  const { username } = useContext(VZCodeContext);
+  usePersistUsername(username);
+  return null;
+};
+
+function App() {
+  const {
+    shareDBDoc,
+    content,
+    localPresence,
+    docPresence,
+    submitOperation,
+  } = useShareDB({
+    connection,
+  });
+
+  // Get the initial username from localStorage.
+  const initialUsername: Username = useInitialUsername();
+
+  // Feature flag for enabling the right-side panel.
+  // Useful for debugging dual split pane functionality.
+  // We may want to add this as an actual VZCode feature,
+  // for running the code that the VZCode user is developing
+  // in the same browser window as the VZCode editor,
+  // so that multiple browser windows are not required.
+  const enableRightPanel = true;
+
+  return (
+    <SplitPaneResizeProvider>
+      <VZCodeProvider
+        content={content}
+        shareDBDoc={shareDBDoc}
+        submitOperation={submitOperation}
+        localPresence={localPresence}
+        docPresence={docPresence}
+        prettierWorker={prettierWorker}
+        typeScriptWorker={typeScriptWorker}
+        initialUsername={initialUsername}
+      >
+        <div className="app">
+          <VZLeft />
+          <VZMiddle />
+          {enableRightPanel ? <VZRight /> : null}
+          <VZResizer side="left" />
+          {enableRightPanel ? (
+            <VZResizer side="right" />
+          ) : null}
+        </div>
+        <PersistUsername />
+      </VZCodeProvider>
+    </SplitPaneResizeProvider>
+  );
+}
+
+export default App;

package/src/client/{style.scss → App/style.scss}

@@ -49,16 +49,27 @@ body,
   position: relative;
 
   .left,
-  .right {
+  .middle {
     display: flex;
 
     /* To suport PrettierErrorOverlay, which is position: absolute */
     position: relative;
   }
 
-  .right {
-    flex: 1;
+  .middle {
+    // flex: 1;
     flex-direction: column;
     min-width: 0;
   }
+
+  .right {
+    flex: 1;
+    background-color: white;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
 }

package/src/client/App/useShareDB.ts

@@ -0,0 +1,110 @@
+import { useEffect, useState } from 'react';
+import { randomId } from '../../randomId';
+import { ShareDBDoc, VZCodeContent } from '../../types';
+import { useSubmitOperation } from '../useSubmitOperation';
+
+// Set up the connection to ShareDB.
+export const useShareDB = ({
+  connection,
+}: {
+  connection: any;
+}) => {
+  // The ShareDB document.
+  const [shareDBDoc, setShareDBDoc] =
+    useState<ShareDBDoc<VZCodeContent> | null>(null);
+
+  // Local ShareDB presence, for broadcasting our cursor position
+  // so other clients can see it.
+  // See https://share.github.io/sharedb/api/local-presence
+  const [localPresence, setLocalPresence] = useState(null);
+
+  // The document-level presence object, which emits
+  // changes in remote presence.
+  const [docPresence, setDocPresence] = useState(null);
+
+  // The `doc.data` part of the ShareDB document,
+  // updated on each change to decouple rendering from ShareDB.
+  // Starts out as `null` until the document is loaded.
+  const [content, setContent] =
+    useState<VZCodeContent | null>(null);
+
+  useEffect(() => {
+    // Since there is only ever a single document,
+    // these things are pretty arbitrary.
+    //  * `collection` - the ShareDB collection to use
+    //  * `id` - the id of the ShareDB document to use
+    const collection = 'documents';
+    const id = '1';
+
+    // Initialize the ShareDB document.
+    const shareDBDoc = connection.get(collection, id);
+
+    // Subscribe to the document to get updates.
+    // This callback gets called once only.
+    shareDBDoc.subscribe(() => {
+      // Expose ShareDB doc to downstream logic.
+      setShareDBDoc(shareDBDoc);
+
+      // Set initial data.
+      setContent(shareDBDoc.data);
+
+      // Listen for all changes and update `data`.
+      // This decouples rendering logic from ShareDB.
+      // This callback gets called on each change.
+      shareDBDoc.on('op', () => {
+        // TODO consider excluding file contents from this,
+        // because currently we are re-rendering the entire
+        // document on each file change (each keystroke while editing).
+        // This is not required, because no part of the app outside
+        // of the CodeMirror integration uses those file contents.
+        // The Sidebar only needs to know file names, not contents.
+        setContent(shareDBDoc.data);
+      });
+
+      // Set up presence.
+      // See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/client.js#L53
+      const docPresence = connection.getDocPresence(
+        collection,
+        id,
+      );
+
+      // Subscribe to receive remote presence updates.
+      docPresence.subscribe(function (error) {
+        if (error) throw error;
+      });
+
+      // Set up our local presence for broadcasting this client's presence.
+      const generateTimestampedId = () => {
+        const timestamp = Date.now().toString(36);
+        const randomPart = randomId();
+        return `${timestamp}-${randomPart}`;
+      };
+      setLocalPresence(
+        docPresence.create(generateTimestampedId()),
+      );
+
+      // Store docPresence so child components can listen for changes.
+      setDocPresence(docPresence);
+    });
+
+    // TODO unsubscribe from presence
+    // TODO unsubscribe from doc
+    return () => {
+      // shareDBDoc.destroy();
+      // docPresence.destroy();
+    };
+  }, []);
+
+  // A convenience function for mutating the ShareDB document
+  // based submitting OT ops generated by diffing the JSON.
+  const submitOperation =
+    useSubmitOperation<VZCodeContent>(shareDBDoc);
+
+  return {
+    shareDBDoc,
+    content,
+    localPresence,
+    docPresence,
+    submitOperation,
+  };
+};

package/src/client/CodeEditor/getOrCreateEditor.ts

@@ -4,10 +4,13 @@ import {
   EditorState,
 } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
 import { markdown } from '@codemirror/lang-markdown';
 import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';
 import { json1Sync } from 'codemirror-ot';
+import { autocompletion } from '@codemirror/autocomplete';
+import { Diagnostic, linter } from '@codemirror/lint';
 import { json1Presence, textUnicode } from '../../ot';
 import {
   FileId,
@@ -29,18 +32,30 @@ import {
 } from '../useEditorCache';
 import { ThemeLabel, themeOptionsByLabel } from '../themes';
 import { AIAssist } from '../AIAssist';
+import { typeScriptCompletions } from './typeScriptCompletions';
+import { typeScriptLinter } from './typeScriptLinter';
+import { TabState } from '../vzReducer';
+
+// Feature flag to enable TypeScript completions & TypeScript Linter.
+const enableTypeScriptCompletions = true;
+const enableTypeScriptLinter = true;
+
+// Enables TypeScript +JSX support in CodeMirror.
+const tsx = () =>
+  javascript({ jsx: true, typescript: true });
 
 // Language extensions for CodeMirror.
 // Keys are file extensions.
 // Values are CodeMirror extensions.
 // TODO consider moving this to a separate file.
 const languageExtensions = {
-  js: javascript,
-  json: javascript,
-  jsx: javascript,
-  ts: javascript,
-  html: html,
-  css: css,
+  json,
+  tsx,
+  js: tsx,
+  jsx: tsx,
+  ts: tsx,
+  html,
+  css,
   md: markdown,
 };
 
@@ -69,6 +84,8 @@ export const getOrCreateEditor = ({
   usernameRef,
   aiAssistEndpoint,
   aiAssistOptions,
+  typeScriptWorker,
+  tabList,
 }: {
   fileId: FileId;
 
@@ -92,6 +109,8 @@ export const getOrCreateEditor = ({
   aiAssistOptions?: {
     [key: string]: any;
   };
+  typeScriptWorker: Worker;
+  tabList: Array<TabState>;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -209,12 +228,41 @@ export const getOrCreateEditor = ({
 
   extensions.push(
     AIAssist({
+      shareDBDoc,
       fileId,
+      tabList,
       aiAssistEndpoint,
       aiAssistOptions,
     }),
   );
 
+  // Add the extension that provides TypeScript completions.
+  if (enableTypeScriptCompletions) {
+    extensions.push(
+      autocompletion({
+        override: [
+          typeScriptCompletions({
+            typeScriptWorker,
+            fileName: name,
+          }),
+        ],
+      }),
+    );
+  }
+  if (enableTypeScriptLinter) {
+    extensions.push(
+      linter(
+        typeScriptLinter({
+          typeScriptWorker,
+          fileName: name,
+          shareDBDoc,
+          fileId,
+        }) as unknown as () => Diagnostic[],
+        //Needs the unknown because we are returning a Promise<Diagnostic>
+      ),
+    );
+  }
+
   const editor = new EditorView({
     state: EditorState.create({
       doc: text,

package/src/client/CodeEditor/index.tsx

@@ -17,6 +17,7 @@ import {
 } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import './style.scss';
+import { TabState } from '../vzReducer';
 
 export const CodeEditor = ({
   activeFileId,
@@ -32,6 +33,8 @@ export const CodeEditor = ({
   username,
   aiAssistEndpoint,
   aiAssistOptions,
+  typeScriptWorker,
+  tabList,
 }: {
   activeFileId: FileId;
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
@@ -62,6 +65,9 @@ export const CodeEditor = ({
   aiAssistOptions?: {
     [key: string]: string;
   };
+  typeScriptWorker: Worker;
+
+  tabList: Array<TabState>;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -111,6 +117,8 @@ export const CodeEditor = ({
         usernameRef,
         aiAssistEndpoint,
         aiAssistOptions,
+        typeScriptWorker,
+        tabList,
       }),
     [
       activeFileId,
@@ -124,6 +132,7 @@ export const CodeEditor = ({
       usernameRef,
       aiAssistEndpoint,
       aiAssistOptions,
+      typeScriptWorker,
     ],
   );
 

package/src/client/CodeEditor/json1PresenceDisplay.ts

@@ -5,6 +5,8 @@ import {
   Decoration,
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
+import ColorHash from 'color-hash';
+import { Username } from '../../types';
 
 // Deals with receiving the broadcasted presence cursor locations
 // from other clients and displaying them.
@@ -50,8 +52,9 @@ export const json1PresenceDisplay = ({
               const presence = presenceState[id];
               const { start, end } = presence;
               const from = start[start.length - 1];
-              // TODO support selection ranges (first attempt introduced layout errors)
               const to = end[end.length - 1];
+              const userColor = new ColorHash().rgb(id);
+              const { username } = presence;
               if (from === to) {
                 return {
                   from,
@@ -59,7 +62,11 @@ export const json1PresenceDisplay = ({
                   value: Decoration.widget({
                     side: -1,
                     block: false,
-                    widget: new PresenceWidget(id),
+                    widget: new PresenceWidget(
+                      id,
+                      userColor,
+                      username,
+                    ),
                   }),
                 };
               } else {
@@ -70,8 +77,8 @@ export const json1PresenceDisplay = ({
                     class: 'cm-json1-presence',
                     attributes: {
                       style: `
-                        background-color: rgba(255, 255, 0, 0.5);
-                        box-shadow: 1px 0 0 yellow;
+                        background-color: rgba(${userColor}, 0.75);
+                        mix-blend-mode: luminosity;
                         `,
                     },
                   }),
@@ -122,9 +129,17 @@ const pathMatches = (path, presence) => {
 // Displays a single remote presence cursor.
 class PresenceWidget extends WidgetType {
   id: string;
-  constructor(id: string) {
+  color: string;
+  username: Username;
+  constructor(
+    id: string,
+    color: string,
+    username: Username,
+  ) {
     super();
     this.id = id;
+    this.color = color;
+    this.username = username;
   }
 
   eq(other: PresenceWidget) {
@@ -135,14 +150,30 @@ class PresenceWidget extends WidgetType {
     const span = document.createElement('span');
     span.setAttribute('aria-hidden', 'true');
     span.className = 'cm-json1-presence';
-
     // This child is what actually displays the presence.
     // Nested so that the layout is not impacted.
     //
     // The initial attempt using the top level span to render
     // the cursor caused a wonky layout with adjacent characters shifting
     // left and right by 1 pixel or so.
-    span.appendChild(document.createElement('div'));
+    const div = document.createElement('div');
+    span.appendChild(div);
+    div.style.borderLeft = `1px solid rgba(${this.color})`;
+
+    // background color behind username
+    const userDiv = document.createElement('div');
+    userDiv.className = 'remote-cursor-username';
+    userDiv.style.top = `-20px`;
+    userDiv.style.height = `20px`;
+    userDiv.style.width = `${this.username.length * 11}px`;
+    userDiv.style.backgroundColor = `rgba(${this.color})`;
+    userDiv.style.color = `black`;
+    userDiv.style.textAlign = `center`;
+    userDiv.appendChild(
+      document.createTextNode(this.username),
+    );
+    span.appendChild(userDiv);
+
     return span;
   }
 
@@ -150,7 +181,6 @@ class PresenceWidget extends WidgetType {
     return false;
   }
 }
-
 const presenceTheme = EditorView.baseTheme({
   '.cm-json1-presence': {
     position: 'relative',
@@ -161,6 +191,5 @@ const presenceTheme = EditorView.baseTheme({
     bottom: '0',
     left: '0',
     right: '0',
-    borderLeft: '1px solid yellow',
   },
 });