npm - vzcode - Versions diffs - 0.15.0 → 0.17.0 - Mend

vzcode 0.15.0 → 0.17.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 (17) hide show

package/README.md +98 -130
package/dist/assets/index-ab3ae13e.js +115 -0
package/dist/assets/worker-d5f0575a.js +237 -0
package/dist/index.html +1 -1
package/package.json +5 -5
package/src/client/App.tsx +61 -35
package/src/client/CodeEditor/getOrCreateEditor.ts +100 -42
package/src/client/CodeEditor/index.tsx +22 -10
package/src/client/Settings.tsx +17 -3
package/src/client/main.jsx +3 -3
package/src/client/themes.ts +30 -7
package/src/client/useDynamicTheme.ts +26 -0
package/src/client/useEditorCache.ts +21 -0
package/src/client/usePrettier/index.ts +2 -5
package/src/client/vizhubTheme.js +1 -0
package/dist/assets/index-176d73ed.js +0 -115
package/dist/assets/worker-aa634fce.js +0 -237

package/dist/index.html CHANGED Viewed

@@ -18,7 +18,7 @@
       href="https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-176d73ed.js"></script>
+    <script type="module" crossorigin src="/assets/index-ab3ae13e.js"></script>
     <link rel="stylesheet" href="/assets/index-ccd52a89.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "Multiplayer code editor system",
   "main": "index.js",
   "type": "module",
@@ -47,14 +47,14 @@
   "homepage": "https://github.com/vizhub-core/vzcode#readme",
   "dependencies": {
     "@codemirror/lang-css": "^6.2.1",
-    "@codemirror/lang-html": "^6.4.5",
-    "@codemirror/lang-javascript": "^6.2.0",
+    "@codemirror/lang-html": "^6.4.6",
+    "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-markdown": "^6.2.0",
     "@codemirror/state": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@replit/codemirror-interact": "^6.3.0",
     "@teamwork/websocket-json-stream": "^2.0.0",
-    "@uiw/codemirror-themes-all": "^4.21.11",
+    "@uiw/codemirror-themes-all": "^4.21.12",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.1.0",
     "d3-array": "^3.2.4",
@@ -77,7 +77,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.4",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "sass": "^1.66.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",

package/src/client/App.tsx CHANGED Viewed

@@ -10,9 +10,16 @@ import { FileId, Files, ShareDBDoc, VZCodeContent } from '../types';
 import { TabList } from './TabList';
 import { useOpenDirectories } from './useOpenDirectories';
 import { useTabsState } from './useTabsState';
-import { defaultTheme } from './themes';
+import { ThemeLabel, defaultTheme } from './themes';
 import './style.scss';
+import { useEditorCache } from './useEditorCache';
+import { useDynamicTheme } from './useDynamicTheme';
 import { usePrettier } from './usePrettier';
+// @ts-ignore
+import PrettierWorker from './usePrettier/worker?worker';
+// Instantiate the Prettier worker.
+const prettierWorker = new PrettierWorker();
 // Register our custom JSON1 OT type that supports presence.
 // See https://github.com/vizhub-core/json1-presence
@@ -45,7 +52,7 @@ function App() {
   );
   // Auto-run Pretter after local changes.
-  usePrettier(shareDBDoc, submitOperation);
+  usePrettier(shareDBDoc, submitOperation, prettierWorker);
   // Local ShareDB presence, for broadcasting our cursor position
   // so other clients can see it.
@@ -61,30 +68,8 @@ function App() {
   // Starts out as `null` until the document is loaded.
   const [content, setContent] = useState<VZCodeContent | null>(null);
-  // The id of the currently open file tab.
-  const [activeFileId, setActiveFileId] = useState<FileId>(null);
-  // The ordered list of tabs.
-  const [tabList, setTabList] = useState<Array<FileId>>([]);
-  // Logic for opening and closing tabs.
-  const { closeTab, openTab } = useTabsState(
-    activeFileId,
-    setActiveFileId,
-    tabList,
-    setTabList,
-  );
-  // The current theme.
-  const [theme, setTheme] = useState<string>(defaultTheme);
-  // True to show the settings modal.
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  // The set of open directories.
-  const { isDirectoryOpen, toggleDirectory } = useOpenDirectories();
   // Set up the connection to ShareDB.
+  // TODO move this logic to a hook called `useShareDB`
   useEffect(() => {
     // Since there is only ever a single document,
     // these things are pretty arbitrary.
@@ -136,6 +121,54 @@ function App() {
     };
   }, []);
+  // The id of the currently open file tab.
+  // TODO make this a URL param
+  const [activeFileId, setActiveFileId] = useState<FileId>(null);
+  // The ordered list of tabs.
+  // TODO make this a URL param
+  const [tabList, setTabList] = useState<Array<FileId>>([]);
+  // Logic for opening and closing tabs.
+  const { closeTab, openTab } = useTabsState(
+    activeFileId,
+    setActiveFileId,
+    tabList,
+    setTabList,
+  );
+  // The current theme.
+  // TODO persist this in local storage
+  const [theme, setTheme] = useState<ThemeLabel>(defaultTheme);
+  // Cache of CodeMirror editors by file id.
+  const editorCache = useEditorCache();
+  // Handle dynamic theme changes.
+  useDynamicTheme(editorCache, theme);
+  // True to show the settings modal.
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  // The set of open directories.
+  const { isDirectoryOpen, toggleDirectory } = useOpenDirectories();
+  // TODO move this logic to a hook called `useFileCRUD`
+  // Include
+  //  - `createFile`
+  //  - `handleRenameFileClick`
+  //  - `deleteFile`
+  //  - `handleDeleteFileClick`
+  const createFile = useCallback(() => {
+    const name = prompt('Enter new file name');
+    if (name) {
+      submitOperation((document) => ({
+        ...document,
+        files: { ...document.files, [randomId()]: { name, text: '' } },
+      }));
+    }
+  }, [submitOperation]);
   // Called when a file in the sidebar is double-clicked.
   const handleRenameFileClick = useCallback(
     (fileId: FileId) => {
@@ -170,16 +203,6 @@ function App() {
     [submitOperation, closeTab],
   );
-  const createFile = useCallback(() => {
-    const name = prompt('Enter new file name');
-    if (name) {
-      submitOperation((document) => ({
-        ...document,
-        files: { ...document.files, [randomId()]: { name, text: '' } },
-      }));
-    }
-  }, [submitOperation]);
   // TODO prompt the user "Are you sure?"
   const handleDeleteFileClick = useCallback(
     (fileId: FileId, event: React.MouseEvent) => {
@@ -213,6 +236,7 @@ function App() {
     }, 800);
   }, [submitOperation]);
+  // Isolate the files object from the document.
   const files: Files | null = content ? content.files : null;
   return (
@@ -231,6 +255,7 @@ function App() {
         <Settings
           show={isSettingsOpen}
           onClose={handleSettingsClose}
+          theme={theme}
           setTheme={setTheme}
         />
       </div>
@@ -250,6 +275,7 @@ function App() {
             activeFileId={activeFileId}
             theme={theme}
             onInteract={handleInteract}
+            editorCache={editorCache}
           />
         ) : null}
       </div>

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

@@ -6,17 +6,26 @@ import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';
 import { json1Sync } from 'codemirror-ot';
 import { json1Presence, textUnicode } from '../../ot';
-import { FileId, ShareDBDoc } from '../../types';
+import { FileId, ShareDBDoc, VZCodeContent } from '../../types';
 import { json1PresenceBroadcast } from './json1PresenceBroadcast';
 import { json1PresenceDisplay } from './json1PresenceDisplay';
 import { widgets } from './widgets';
+import { EditorCache, EditorCacheValue } from '../useEditorCache';
+import { ThemeLabel, themeOptionsByLabel } from '../themes';
-// Singleton cache of CodeMirror instances
-// These are created, but never destroyed.
-// TODO consider invalidating this cache at some point.
-//  * Keys are file ids
-//  * Values are CodeMirror instances (TODO add CodeMirror type)
-const editorCache = new Map<FileId, any>();
+// 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,
+  md: markdown,
+};
 // Gets a value at a path in an object.
 // e.g. getAtPath({a: {b: 1}}, ['a', 'b']) === 1
@@ -29,7 +38,8 @@ const getAtPath = (obj, path) => {
   return current;
 };
-// Gets or creates a CodeMirror editor for the given file id.
+// Gets or creates an `editorCache` entry for the given file id.
+// Looks in `editorCache` first, and if not found, creates a new editor.
 export const getOrCreateEditor = ({
   fileId,
   shareDBDoc,
@@ -38,27 +48,46 @@ export const getOrCreateEditor = ({
   docPresence,
   theme,
   onInteract,
+  editorCache,
 }: {
   fileId: FileId;
-  shareDBDoc: ShareDBDoc<any>;
+  // The ShareDB document that contains the file.
+  // Used when the editor is created for:
+  //  * Figuring out the initial text
+  //  * Figuring out the initial language extension
+  //    based on the file extension.
+  // It's also passed into the `json1Sync` extension,
+  // which is used for multiplayer editing.
+  shareDBDoc: ShareDBDoc<VZCodeContent>;
   filesPath: string[];
   localPresence: any;
   docPresence: any;
-  theme: any;
+  theme: ThemeLabel;
   onInteract?: () => void;
-}) => {
+  editorCache: EditorCache;
+}): EditorCacheValue => {
+  // Cache hit
+  if (editorCache.has(fileId)) {
+    return editorCache.get(fileId);
+  }
+  // Cache miss
+  // Compute `text` and `fileExtension` from the ShareDB document.
   const data = shareDBDoc.data;
   const textPath = [...filesPath, fileId, 'text'];
   const namePath = [...filesPath, fileId, 'name'];
   const text = getAtPath(data, textPath);
   const name = getAtPath(data, namePath);
   const fileExtension = name.split('.').pop();
-  // TODO revisit if this is the right approach for dynamic themes
-  let themeSet = new Compartment();
+  // Create a compartment for the theme so that it can be changed dynamically.
+  // Inspired by: https://github.com/craftzdog/cm6-themes/blob/main/example/index.ts
+  let themeCompartment = new Compartment();
+  // The CodeMirror extensions to use.
   const extensions = [];
   // This plugin implements multiplayer editing,
@@ -81,38 +110,67 @@ export const getOrCreateEditor = ({
   if (docPresence)
     extensions.push(json1PresenceDisplay({ path: textPath, docPresence }));
+  // This is the "basic setup" for CodeMirror,
+  // which actually adds a ton on functionality.
+  // TODO vet this functionality, and determine how much
+  // we want to replace with
+  // https://github.com/vizhub-core/vzcode/issues/134
   extensions.push(basicSetup);
-  extensions.push(themeSet.of(theme));
+  // This supports dynamic changing of the theme.
+  extensions.push(themeCompartment.of(themeOptionsByLabel[theme].value));
   // TODO handle dynamic changing of the file extension.
-  if (
-    fileExtension === 'js' ||
-    fileExtension === 'json' ||
-    fileExtension === 'jsx' ||
-    fileExtension === 'ts'
-  ) {
-    extensions.push(javascript());
-  } else if (fileExtension === 'html') {
-    extensions.push(html());
-  } else if (fileExtension === 'css') {
-    extensions.push(css());
-  } else if (fileExtension === 'md') {
-    extensions.push(markdown());
+  // TODO handle dynamic file extensions by making
+  // the CodeMirror language extension dynamic
+  // using a Compartment.
+  const languageCompartment = new Compartment();
+  // See https://github.com/vizhub-core/vzcode/issues/55
+  const getLanguageExtension = (fileExtension) => {
+    const languageFunc = languageExtensions[fileExtension];
+    return languageFunc ? languageFunc() : undefined;
+  };
+  const languageExtension = getLanguageExtension(fileExtension);
+  if (languageExtension) {
+    extensions.push(languageCompartment.of(languageExtension));
+  } else {
+    // Not sure if this case even works.
+    // TODO manually test this case by creating a file
+    // that has no extension, opening it up,
+    // and then adding an extension.
+    console.warn(`No language extension for file extension: ${fileExtension}`);
+    // We still need to push the compartment,
+    // otherwise the compartment won't work when
+    // a file extension _is_ added later on.
+    extensions.push(languageCompartment.of([]));
   }
+  // Add interactive widgets.
+  // Includes the Alt+drag functionality for numbers.
+  // Calls `onInteract` when one of those widgets is interacted with.
+  // This can be used to trigger a transition to throttled mode
+  // for hot reloading.
+  // TODO consider leveraging the new `dragEnd` event handler.
+  // and removing the `onInteract` callback, replacing it with
+  // `onInteractStart` and `onInteractEnd`.
+  // That may be tricky for one-off interactions though, like
+  // the boolean checkboxes. The color pickers are also tricky,
+  // as they would also need to be able to handle `onInteractEnd`.
+  // See https://github.com/replit/codemirror-interact/issues/14
   extensions.push(widgets({ onInteract }));
-  let editor = editorCache.get(fileId);
-  if (!editor) {
-    editor = new EditorView({
-      state: EditorState.create({
-        doc: text,
-        extensions,
-      }),
-    });
-    // Populate the cache.
-    editorCache.set(fileId, editor);
-  }
-  return editor;
+  const editor = new EditorView({
+    state: EditorState.create({
+      doc: text,
+      extensions,
+    }),
+  });
+  const editorCacheValue = { editor, themeCompartment };
+  // Populate the cache.
+  editorCache.set(fileId, editorCacheValue);
+  return editorCacheValue;
 };

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

@@ -1,6 +1,7 @@
 import { useRef, useLayoutEffect } from 'react';
 import { FileId } from '../../types';
-import { defaultTheme, themesByLabel } from '../themes';
+import { ThemeLabel, defaultTheme } from '../themes';
+import { EditorCache, EditorCacheValue } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import './style.scss';
@@ -12,40 +13,51 @@ export const CodeEditor = ({
   theme = defaultTheme,
   filesPath = ['files'],
   onInteract,
+  editorCache,
 }: {
   activeFileId: FileId;
   shareDBDoc: any;
   localPresence?: any;
   docPresence?: any;
-  theme?: string;
+  theme?: ThemeLabel;
   // The path of the files object in the ShareDB document.
-  // Defaults to the root of the document.
+  // Defaults to `files` if not provided.
   filesPath?: string[];
   onInteract?: () => void;
+  editorCache: EditorCache;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  // Every time the active file switches from one file to another,
+  // the editor corresponding to the old file is removed from the DOM,
+  // and the editor corresponding to the new file is added to the DOM.
   useLayoutEffect(() => {
+    // Guard against cases where page is still loading.
     if (!ref.current) return;
     if (!shareDBDoc) return;
-    // `getOrCreateEditor` gets called
-    // every time the active file changes.
-    const editor = getOrCreateEditor({
+    // Get the editor corresponding to the active file.
+    // Looks in `editorCache` first, and if not found, creates a new editor.
+    const editorCacheValue: EditorCacheValue = getOrCreateEditor({
       fileId: activeFileId,
       shareDBDoc,
       filesPath,
       localPresence,
       docPresence,
-      // TODO refactor this, make dynamic themes work
-      theme: themesByLabel[theme],
+      theme,
       onInteract,
+      editorCache,
     });
-    ref.current.appendChild(editor.dom);
+    // Add the editor to the DOM.
+    ref.current.appendChild(editorCacheValue.editor.dom);
     return () => {
-      ref.current.removeChild(editor.dom);
+      // Remove the old editor from the DOM.
+      // This happens every time `activeFileId` changes.
+      ref.current.removeChild(editorCacheValue.editor.dom);
     };
   }, [shareDBDoc, activeFileId]);

package/src/client/Settings.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import Modal from 'react-bootstrap/Modal';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import Select from 'react-select';
-import { themes } from './themes';
+import { ThemeLabel, themeOptionsByLabel, themes } from './themes';
 const saveTimes = [
   { value: 1, label: '1 second' },
@@ -12,7 +12,17 @@ const saveTimes = [
   { value: 30, label: '30 seconds' },
 ];
-export const Settings = ({ show, onClose, setTheme }) => {
+export const Settings = ({
+  show,
+  onClose,
+  setTheme,
+  theme,
+}: {
+  show: boolean;
+  onClose: () => void;
+  setTheme: (theme: ThemeLabel) => void;
+  theme: ThemeLabel;
+}) => {
   const handleChange = useCallback((selectedOption) => {
     setTheme(selectedOption.label);
     // TODO make this work.
@@ -55,7 +65,11 @@ export const Settings = ({ show, onClose, setTheme }) => {
         </Form.Group>
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Theme</Form.Label>
-          <Select options={themes} onChange={handleChange} />
+          <Select
+            options={themes}
+            onChange={handleChange}
+            value={themeOptionsByLabel[theme]}
+          />
           <Form.Text className="text-muted">
             Select a color theme for the editor
           </Form.Text>

package/src/client/main.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom/client';
 import App from './App';
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  // <React.StrictMode>
+  <App />,
+  // </React.StrictMode>,
 );

package/src/client/themes.ts CHANGED Viewed

@@ -7,11 +7,29 @@ import { githubDark } from '@uiw/codemirror-theme-github';
 import { material } from '@uiw/codemirror-theme-material';
 import { nord } from '@uiw/codemirror-theme-nord';
 import { xcodeLight } from '@uiw/codemirror-theme-xcode';
+// import { vizhub } from './vizhub-theme';
 // CodeMirror themes
-export const themes = [
+export type ThemeLabel =
+  | 'abcdef'
+  | 'dracula'
+  | 'eclipse'
+  | 'material'
+  | 'nord'
+  | 'oneDark'
+  | 'okaidia'
+  | 'github'
+  | 'xcode';
+// | 'vizhub'
+export type ThemeOption = {
+  value: any;
+  label: ThemeLabel;
+};
+export const themes: Array<ThemeOption> = [
   { value: abcdef, label: 'abcdef' },
-  { value: dracula, label: 'darcula' },
+  { value: dracula, label: 'dracula' },
   { value: eclipse, label: 'eclipse' },
   { value: material, label: 'material' },
   { value: nord, label: 'nord' },
@@ -19,13 +37,18 @@ export const themes = [
   { value: okaidia, label: 'okaidia' },
   { value: githubDark, label: 'github' },
   { value: xcodeLight, label: 'xcode' },
+  // { value: vizhub, label: 'vizhub' },
 ];
 // Map theme labels to theme values
-export const themesByLabel = themes.reduce((acc, theme) => {
-  acc[theme.label] = theme.value;
-  return acc;
-}, {});
+export const themeOptionsByLabel: Record<ThemeLabel, ThemeOption> =
+  themes.reduce(
+    (acc, themeOption: ThemeOption) => {
+      acc[themeOption.label] = themeOption;
+      return acc;
+    },
+    {} as Record<ThemeLabel, any>,
+  );
 // The default theme
-export const defaultTheme = 'oneDark';
+export const defaultTheme: ThemeLabel = 'oneDark';

package/src/client/useDynamicTheme.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { EditorCache } from './useEditorCache';
+import { ThemeLabel, themeOptionsByLabel } from './themes';
+export const useDynamicTheme = (
+  editorCache: EditorCache,
+  theme: ThemeLabel,
+) => {
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    // Skip the first run, since the theme is already initialized.
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+    } else {
+      // When the user changes the theme, update the theme of all editors.
+      for (const editorCacheValue of Array.from(editorCache.values())) {
+        const { editor, themeCompartment } = editorCacheValue;
+        editor.dispatch({
+          effects: themeCompartment.reconfigure([
+            themeOptionsByLabel[theme].value,
+          ]),
+        });
+      }
+    }
+  }, [theme, editorCache]);
+};

package/src/client/useEditorCache.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { useRef } from 'react';
+import { FileId } from '../types';
+export type EditorCacheValue = {
+  editor: any;
+  themeCompartment: any;
+};
+export type EditorCache = Map<FileId, EditorCacheValue>;
+export const useEditorCache = () => {
+  // Singleton cache of CodeMirror instances
+  // These are created, but never destroyed.
+  // TODO consider invalidating this cache at some point.
+  // Right now these editor instances just keep accumulating,
+  // and they all retain their connections to ShareDB.
+  // This has not been an issue so far, but it could become one.
+  const editorCacheRef = useRef<EditorCache>(new Map());
+  return editorCacheRef.current;
+};

package/src/client/usePrettier/index.ts CHANGED Viewed

@@ -1,8 +1,6 @@
 import { JSONOp } from 'ot-json1';
 import { FileId, ShareDBDoc, VZCodeContent } from '../../types';
 import { useEffect, useRef } from 'react';
-// @ts-ignore
-import PrettierWorker from './worker?worker';
 // The time in milliseconds by which auto-saving is debounced.
 const autoPrettierDebounceTimeMS = 1200;
@@ -20,7 +18,8 @@ const extension = (fileName: string) => {
 export const usePrettier = (
   shareDBDoc: ShareDBDoc<VZCodeContent> | null,
-  submitOperation,
+  submitOperation: (next: (content: VZCodeContent) => VZCodeContent) => void,
+  prettierWorker: Worker,
 ) => {
   // The set of files that have been modified
   // since the last Prettier run.
@@ -36,8 +35,6 @@ export const usePrettier = (
       return;
     }
-    const prettierWorker = new PrettierWorker();
     // Get the message that comes back from the worker.
     // This is the prettified text for a specific file.
     const handleMessage = (event) => {

package/src/client/vizhubTheme.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ // TODO